From a71381da40a8b6bbc2b526e7b1bf89675c3624c9 Mon Sep 17 00:00:00 2001
From: Delirium <nikita@openreplay.com>
Date: Thu, 3 Oct 2024 11:38:36 +0200
Subject: [PATCH] getting rid of redux for good (#2556)

* start moving ui to redux tlk

* remove unused reducer

* changes for gdpr and site types

* ui: migrating duck/roles to mobx

* ui: drop unreferenced types

* ui: drop unreferenced types

* ui: move player slice reducer to mobx family

* ui: move assignments to issueReportingStore.ts

* remove issues store

* some fixes after issues store

* remove errors reducer, drop old components

* finish removing errors reducer

* start moving integrations state to mobx

* change(ui): funnel duck cleanup

* change(ui): custom fields

* change(ui): customMetrics cleanup

* change(ui): customMetrics cleanup

* change(ui): duck/filters minor cleanup

* change(ui): duck/filters cleanup

* change(ui): duck/customMetrics cleanup and upgrades

* fix integrations service, fix babel config to >.25 + not ie

* refactoring integrations reducers etc WIP

* finish removing integrations state

* some fixes for integrated check

* start of projects refactoring

* move api and "few" files to new project store

* new batch for site -> projects

* fix setid context

* move all critical components, drop site duck

* remove all duck/site refs, remove old components

* fixup for SessionTags.tsx, remove duck/sources (?)

* move session store

* init sessionstore outside of context

* fix userfilter

* replace simple actions for session store

* sessions sotre

* Rtm temp (#2597)

* change(ui): duck/search wip

* change(ui): duck/search wip

* change(ui): duck/search wip

* change(ui): duck/searchLive wip

* change(ui): duck/searchLive wip

* change(ui): duck/searchLive wip

* change(ui): duck/searchLive wip

* change(ui): search states

* change(ui): search states

* change(ui): search states

* change(ui): fix savedSearch store

* change(ui): fix savedSearch store

* some fixes for session connector

* change(ui): fix savedSearch store

* change(ui): fix searchLive

* change(ui): fix searchLive

* fixes for session replay

* change(ui): bookmark fetch

* last components for sessions

* add fetchautoplaylist

* finish session reducer, remove deleted reducers

* change(ui): fix the search fetch

* change(ui): fix the search fetch

* fix integrations call ctx

* ensure ctx for sessionstore

* fix(ui): checking for latest sessions path

* start removing user reducer

* removing user reducer pt2...

* finish user store

* remove rand log

* fix crashes

* tinkering workflow file for tracker test

* making sure prefetched sessions work properly

* fix conflict

* fix router redirects during loading

---------

Co-authored-by: Shekar Siri <sshekarsiri@gmail.com>
---
 .github/workflows/tracker-tests.yaml          |  10 +-
 frontend/.browserslistrc                      |   1 +
 frontend/app/IFrameRoutes.tsx                 |  28 +-
 frontend/app/PrivateRoutes.tsx                |  48 +-
 frontend/app/PublicRoutes.tsx                 |  22 +-
 frontend/app/Router.tsx                       | 134 +---
 frontend/app/api_client.ts                    |  38 +-
 frontend/app/api_middleware.ts                |  60 --
 frontend/app/components/Assist/Assist.tsx     |  17 +-
 .../app/components/Assist/AssistRouter.tsx    |   9 +-
 .../AssistSearchField/AssistSearchField.tsx   |  65 +-
 .../Assist/RecordingsList/Recordings.tsx      |  15 +-
 .../RequestingWindow/RequestingWindow.tsx     |  11 +-
 .../AssistActions/AssistActions.tsx           |  27 +-
 .../components/SessionList/SessionList.tsx    |  30 +-
 .../Client/CustomFields/CustomFieldForm.js    |   2 +-
 .../Client/CustomFields/CustomFieldForm.tsx   |  92 +++
 .../Client/CustomFields/CustomFields.js       | 222 +++---
 .../Client/CustomFields/CustomFields.tsx      | 108 +++
 .../Client/CustomFields/ListItem.js           |  34 +-
 .../Integrations/AssistDoc/AssistDoc.js       |  18 +-
 .../Integrations/BugsnagForm/BugsnagForm.js   |   4 +-
 .../BugsnagForm/ProjectListDropdown.js        |  19 +-
 .../CloudwatchForm/CloudwatchForm.js          |  44 +-
 .../CloudwatchForm/LogGroupDropdown.js        | 160 ++--
 .../Client/Integrations/ElasticsearchForm.js  | 145 ++--
 .../Integrations/GraphQLDoc/GraphQLDoc.js     |  18 +-
 .../Client/Integrations/IntegrationForm.js    | 142 ----
 .../Client/Integrations/IntegrationForm.tsx   | 107 +++
 .../Client/Integrations/Integrations.tsx      | 304 ++++----
 .../Client/Integrations/MobxDoc/MobxDoc.js    |  18 +-
 .../Client/Integrations/NgRxDoc/NgRxDoc.js    |  18 +-
 .../Client/Integrations/PiniaDoc/PiniaDoc.tsx |  60 +-
 .../Integrations/ProfilerDoc/ProfilerDoc.js   |  21 +-
 .../Client/Integrations/ReduxDoc/ReduxDoc.js  |  20 +-
 .../Integrations/SlackAddForm/SlackAddForm.js | 159 ++--
 .../SlackChannelList/SlackChannelList.js      |  19 +-
 .../Client/Integrations/SlackForm.tsx         |  26 +-
 .../Integrations/Teams/TeamsAddForm.tsx       | 174 +++--
 .../Integrations/Teams/TeamsChannelList.tsx   |  92 +--
 .../Client/Integrations/Teams/index.tsx       |  27 +-
 .../Client/Integrations/VueDoc/VueDoc.js      |  20 +-
 .../Integrations/ZustandDoc/ZustandDoc.js     |  18 +-
 .../app/components/Client/Modules/Modules.tsx |  26 +-
 .../components/Client/ProfileSettings/Api.js  |  63 +-
 .../Client/ProfileSettings/ChangePassword.tsx |  28 +-
 .../Client/ProfileSettings/Licenses.js        |  11 +-
 .../Client/ProfileSettings/OptOut.js          |  21 +-
 .../Client/ProfileSettings/ProfileSettings.js | 192 +++--
 .../Client/ProfileSettings/Settings.js        | 120 ++-
 .../Client/ProfileSettings/TenantKey.js       |  74 +-
 .../app/components/Client/Roles/Roles.tsx     | 232 +++---
 .../components/Permissions/Permissions.tsx    |  15 -
 .../Roles/components/Permissions/index.ts     |   1 -
 .../Roles/components/RoleForm/RoleForm.tsx    | 370 ++++-----
 .../Client/SessionsListingSettings.tsx        |  35 +-
 .../AddProjectButton/AddProjectButton.tsx     |  19 +-
 .../app/components/Client/Sites/GDPRForm.js   | 184 +++--
 .../components/Client/Sites/NewSiteForm.tsx   | 115 ++-
 .../app/components/Client/Sites/Sites.tsx     |  36 +-
 .../app/components/Client/Users/UsersView.tsx |  16 +-
 .../Users/components/UserForm/UserForm.tsx    | 309 ++++----
 .../Dashboard/WidgetHolder/WidgetHolder.js    |  33 -
 .../Dashboard/WidgetHolder/index.js           |   1 -
 .../WidgetHolder/widgetHolder.module.css      |  12 -
 .../ClickMapCard/ClickMapCard.tsx             |  25 +-
 .../Dashboard/components/Alerts/NewAlert.tsx  |   1 -
 .../DashboardList/DashboardList.tsx           |  10 +-
 .../NewDashModal/NewDashboardModal.tsx        |  19 +-
 .../DashboardOptions/DashboardOptions.tsx     |  13 +-
 .../DashboardSideMenu/DashboardSideMenu.tsx   |   8 +-
 .../Errors/ErrorDetails/ErrorDetails.tsx      |  67 --
 .../ErrorDetails/ErrorFrame/ErrorFrame.tsx    |  53 --
 .../ErrorFrame/errorFrame.module.css          |  25 -
 .../Errors/ErrorDetails/ErrorFrame/index.js   |   1 -
 .../components/Errors/ErrorDetails/index.js   |   1 -
 .../Errors/ErrorListItem/ErrorListItem.tsx    |   9 +-
 .../Errors/ErrorsList/ErrorsList.tsx          |  21 -
 .../components/Errors/ErrorsList/index.ts     |   1 -
 .../Errors/ErrorsWidget/ErrorsWidget.tsx      |  12 -
 .../components/Errors/ErrorsWidget/index.ts   |   1 -
 .../FilterSeries/ExcludeFilters.tsx           |   1 -
 .../MetricTypeList/MetricTypeList.tsx         |  12 +-
 .../MetricTypeDropdown/MetricTypeDropdown.tsx |  10 +-
 .../WidgetSessions/WidgetSessions.tsx         |  56 +-
 .../app/components/Errors/Error/ErrorInfo.js  | 123 +--
 .../components/Errors/Error/MainSection.js    | 254 +++----
 .../components/Errors/Error/SideSection.js    | 181 +++--
 frontend/app/components/Errors/Errors.js      | 154 ----
 frontend/app/components/Errors/Header.js      |  14 -
 frontend/app/components/Errors/List/List.js   | 259 -------
 .../Errors/List/ListItem/ListItem.js          |  87 ---
 .../Errors/List/ListItem/listItem.module.css  |  16 -
 .../Errors/SideMenu/SideMenuDividedItem.js    |  20 -
 .../Errors/SideMenu/SideMenuHeader.js         |  14 -
 .../Errors/SideMenu/SideMenuSection.js        |  24 -
 .../Errors/SideMenu/sideMenuHeader.module.css |   4 -
 .../FFlags/NewFFlag/Description.tsx           |   2 +-
 .../ForgotPassword/CreatePassword.tsx         |  35 +-
 .../ForgotPassword/ForgotPassword.tsx         |  14 +-
 .../ForgotPassword/ResetPasswordRequest.tsx   |  21 +-
 .../Funnels/FunnelDetails/FunnelDetails.js__  | 159 ----
 .../Funnels/FunnelGraph/FunnelGraph.js        | 303 --------
 .../components/Funnels/FunnelGraph/index.js   |   1 -
 .../Funnels/FunnelHeader/FunnelDropdown.js    |  37 -
 .../Funnels/FunnelHeader/FunnelHeader.js      | 149 ----
 .../FunnelHeader/funnelHeader.module.css      |  30 -
 .../components/Funnels/FunnelHeader/index.js  |   1 -
 .../FunnelIssueDetails/FunnelIssueDetails.js  |  43 --
 .../Funnels/FunnelIssueDetails/index.js       |   2 +-
 .../Funnels/FunnelIssues/FunnelIssues.js      |  89 ---
 .../FunnelIssues/SortDropdown/SortDropdown.js |  48 --
 .../FunnelIssues/SortDropdown/index.js        |   1 -
 .../SortDropdown/sortDropdown.module.css      |  23 -
 .../components/Funnels/FunnelIssues/index.js  |   1 -
 .../Funnels/FunnelIssuesHeader/DateRange.js   |  27 -
 .../FunnelIssuesHeader/FunnelIssuesHeader.js  |  19 -
 .../Funnels/FunnelIssuesHeader/index.js       |   1 -
 .../Funnels/FunnelItem/FunnelItem.js__        |  32 -
 .../FunnelSaveModal/FunnelSaveModal.js        | 112 ---
 .../funnelSaveModal.module.css                |  15 -
 .../Funnels/FunnelSaveModal/index.js          |   1 -
 .../FunnelSessionList/FunnelSessionList.js    |  68 --
 .../Funnels/FunnelSessionList/index.js        |   1 -
 .../Funnels/FunnelSessionsHeader/DateRange.js |  28 -
 .../SortDropdown/SortDropdown.js              |  32 -
 .../SortDropdown/index.js                     |   1 -
 .../SortDropdown/sortDropdown.module.css      |  23 -
 .../Funnels/IssueFilter/IssueFilter.js        |  55 --
 .../components/Funnels/IssueFilter/index.js   |   1 -
 .../IssueFilter/issueFilter.module.css        |   7 -
 .../IssuesEmptyMessage/IssuesEmptyMessage.js  |  26 -
 .../Funnels/IssuesEmptyMessage/index.js       |   1 -
 .../NewProjectButton/NewProjectButton.tsx     |  54 +-
 .../app/components/Header/SiteDropdown.js     |  92 ---
 .../components/Header/UserMenu/UserMenu.tsx   |  27 +-
 frontend/app/components/Header/VersionTag.tsx |  28 +-
 frontend/app/components/Login/Login.tsx       |  74 +-
 .../components/MetadataList/MetadataList.tsx  |  62 ++
 .../OnboardingNavButton.js                    |  15 +-
 .../ProjectCodeSnippet/ProjectCodeSnippet.js  |  48 +-
 .../ProjectFormButton/ProjectFormButton.js    |  18 +-
 .../Onboarding/components/withOnboarding.tsx  |  30 +-
 frontend/app/components/Overview/Overview.tsx |   9 +-
 .../app/components/ScopeForm/ScopeForm.tsx    |  43 +-
 .../app/components/Session/LivePlayer.tsx     |  40 +-
 .../app/components/Session/LiveSession.js     |  48 +-
 .../app/components/Session/MobilePlayer.tsx   |  29 +-
 .../Player/ClickMapRenderer/ThinPlayer.tsx    |  12 +-
 .../AssistSessionsTabs/AssistSessionsTabs.tsx |  10 +-
 .../Player/LivePlayer/LiveControls.tsx        |  49 +-
 .../LivePlayer/LivePlayerBlockHeader.tsx      |  40 +-
 .../Player/LivePlayer/LivePlayerInst.tsx      |  72 +-
 .../Session/Player/LivePlayer/Timeline.tsx    |  31 +-
 .../Player/MobilePlayer/MobileControls.tsx    | 111 +--
 .../Player/MobilePlayer/MobileOverlay.tsx     |  15 +-
 .../MobilePlayer/MobilePlayerHeader.tsx       |  40 +-
 .../MobilePlayer/MobilePlayerSubheader.tsx    |  19 +-
 .../Player/MobilePlayer/PerfWarnings.tsx      |  17 +-
 .../Player/MobilePlayer/PlayerBlock.tsx       |  23 +-
 .../Player/MobilePlayer/PlayerInst.tsx        |  61 +-
 .../EventsBlock/Metadata/Metadata.js          |  29 +-
 .../EventsBlock/Metadata/SessionList.js       |  95 ++-
 .../EventsBlock/UserCard/UserCard.js          |   9 +-
 .../Player/ReplayPlayer/PlayerBlock.tsx       |  45 +-
 .../Player/ReplayPlayer/PlayerBlockHeader.tsx |  37 +-
 .../Player/ReplayPlayer/PlayerInst.tsx        |  39 +-
 .../ReplayPlayer/SummaryBlock/index.tsx       |  26 +-
 .../Player/ReplayPlayer/useShortcuts.ts       |   2 +-
 .../Session/Player/TagWatch/SaveModal.tsx     |   5 +-
 frontend/app/components/Session/Session.tsx   |  54 +-
 frontend/app/components/Session/WebPlayer.tsx |  66 +-
 .../components/Session_/BottomBlock/Header.js |  25 +-
 .../Session_/EventsBlock/EventGroupWrapper.js | 284 +++----
 .../Session_/EventsBlock/EventsBlock.tsx      |  73 +-
 .../Session_/EventsBlock/Metadata/Metadata.js |  29 +-
 .../EventsBlock/Metadata/SessionList.js       |  95 ++-
 .../Session_/EventsBlock/UserCard/UserCard.js |  17 +-
 .../Session_/Exceptions/Exceptions.tsx        |  14 +-
 .../Session_/Issues/ActiveIssueClose.js       |  21 -
 .../Session_/Issues/ActivityList.js           |  13 -
 .../components/Session_/Issues/AuthoAvatar.js |  12 -
 .../Session_/Issues/ContentRender.js          |  83 ---
 .../Session_/Issues/IssueComment.js           |  26 -
 .../Session_/Issues/IssueCommentForm.js       |  54 --
 .../Session_/Issues/IssueDescription.js       |  13 -
 .../Session_/Issues/IssueDetails.js           |  57 --
 .../components/Session_/Issues/IssueForm.js   | 284 ++++---
 .../components/Session_/Issues/IssueHeader.js |  33 -
 .../Session_/Issues/IssueListItem.js          |  34 -
 .../app/components/Session_/Issues/Issues.js  | 109 +--
 .../components/Session_/Issues/IssuesModal.js |   8 +-
 .../Session_/Issues/contentRender.module.css  |  32 -
 .../app/components/Session_/Issues/index.js   |   3 +-
 .../Session_/Issues/issueDetails.module.css   |   8 -
 .../Session_/Issues/issueHeader.module.css    |   0
 .../Session_/Issues/issueListItem.module.css  |  21 -
 .../Session_/Issues/issuesModal.stories.js    | 300 --------
 .../Session_/Multiview/Multiview.tsx          |  44 +-
 .../Session_/OverviewPanel/OverviewPanel.tsx  |  82 +-
 .../TimelinePointer/TimelinePointer.tsx       |   2 +-
 .../PageInsightsPanel/PageInsightsPanel.tsx   |  57 +-
 .../Session_/Performance/Performance.tsx      |  21 +-
 .../AssistSessionsModal.tsx                   | 126 ++--
 .../AssistSessionsTabs/AssistSessionsTabs.tsx |  10 +-
 .../Session_/Player/Controls/Controls.tsx     | 173 ++---
 .../Session_/Player/Controls/Timeline.tsx     |  41 +-
 .../Player/Controls/components/CreateNote.tsx |  44 +-
 .../Controls/components/TimeTooltip.tsx       |  28 +-
 .../components/TimelineZoomButton.tsx         |  24 +-
 .../Controls/components/TooltipContainer.tsx  |   8 +-
 .../Controls/components/ZoomDragLayer.tsx     |  24 +-
 .../components/Session_/Player/Overlay.tsx    |  15 +-
 .../Session_/Player/Overlay/AutoplayTimer.tsx |  22 +-
 .../Session_/Player/Overlay/PlayIconLayer.tsx |  13 +-
 .../Session_/QueueControls/QueueControls.tsx  |  59 +-
 .../ScreenRecorder/ScreenRecorder.tsx         |  27 +-
 .../components/Session_/Storage/Storage.tsx   |  25 +-
 frontend/app/components/Session_/Subheader.js |  72 +-
 .../Session_/components/NotePopup.tsx         |  13 +-
 frontend/app/components/Signup/Signup.tsx     |  26 +-
 .../Signup/SignupForm/SignupForm.tsx          | 188 +++--
 .../Spots/SpotPlayer/SpotPlayer.tsx           |  18 +-
 .../SpotPlayer/components/CommentsSection.tsx |  20 +-
 .../components/SpotPlayerHeader.tsx           |  19 +-
 .../UpdatePassword/UpdatePassword.js          | 191 ++---
 .../UsabilityTesting/TestOverview.tsx         |   2 +-
 .../app/components/hocs/withPermissions.js    |  48 +-
 frontend/app/components/hocs/withReport.tsx   |  17 +-
 .../app/components/hocs/withSiteIdRouter.js   |  39 +-
 .../app/components/hocs/withSiteIdUpdater.js  |  61 +-
 .../components/shared/Bookmark/Bookmark.tsx   |  27 +-
 .../shared/CustomMetrics/CustomMetrics.tsx    |  17 -
 .../SessionListModal.module.css               |  29 -
 .../SessionListModal/SessionListModal.tsx     | 125 ----
 .../CustomMetrics/SessionListModal/index.ts   |   1 -
 .../components/shared/CustomMetrics/index.ts  |   1 -
 .../shared/DevTools/BottomBlock/Header.tsx    |  53 +-
 .../DevTools/ConsolePanel/ConsolePanel.tsx    |  17 +-
 .../DevTools/NetworkPanel/NetworkPanel.tsx    |  41 +-
 .../StackEventPanel/StackEventPanel.tsx       |  41 +-
 .../EmailVerificationMessage.js               |  15 +-
 .../shared/ErrorsBadge/ErrorsBadge.js         |  46 +-
 .../FilterAutoComplete/FilterAutoComplete.tsx |   6 +-
 .../shared/Filters/FilterList/FilterList.tsx  |   6 +-
 .../Filters/FilterModal/FilterModal.tsx       |  64 +-
 .../FilterSelection/FilterSelection.tsx       |  35 +-
 .../Filters/FilterValue/FilterValue.tsx       |   2 +-
 .../LiveFilterModal/LiveFilterModal.tsx       |  72 +-
 .../shared/FunnelSearch/FunnelSearch.tsx      |  85 ---
 .../components/shared/FunnelSearch/index.ts   |   1 -
 .../GettingStarted/GettingStartedProgress.tsx |   7 +-
 .../shared/GettingStarted/StepList.tsx        |  12 +-
 .../IntegrateSlackButton.js                   |   8 +-
 .../shared/LiveSearchBar/LiveSearchBar.tsx    |  18 +-
 .../LiveSessionList/LiveSessionList.tsx       |  80 +-
 .../LiveSessionReloadButton.tsx               |  30 +-
 .../LiveSessionSearch/LiveSessionSearch.tsx   |  69 +-
 .../LiveSessionSearchField.tsx                |  39 +-
 .../shared/MainSearchBar/MainSearchBar.tsx    |  48 +-
 .../MainSearchBar/components/TagList.tsx      |  33 +-
 .../NoSessionsMessage/NoSessionsMessage.js    |  21 +-
 .../shared/OverviewMenu/OverviewMenu.tsx      |  51 +-
 .../ProjectDropdown/ProjectDropdown.tsx       |  84 +--
 .../SaveFilterButton/SaveFilterButton.tsx     |  38 +-
 .../SaveFunnelButton/SaveFunnelButton.tsx     |  35 -
 .../shared/SaveFunnelButton/index.ts          |   1 -
 .../SaveSearchModal/SaveSearchModal.tsx       | 220 +++---
 .../shared/SavedSearch/SavedSearch.tsx        |  44 +-
 .../SavedSearchModal/SavedSearchModal.tsx     | 182 ++---
 .../shared/SessionItem/PlayLink/PlayLink.tsx  |  10 +-
 .../shared/SessionItem/SessionItem.tsx        |  13 +-
 .../shared/SessionSearch/SessionSearch.tsx    |  76 +-
 .../AiSessionSearchField.tsx                  |  84 +--
 .../SessionSearchField/SessionSearchField.tsx |  26 +-
 .../SessionSettings/SessionSettings.tsx       |  11 +-
 .../components/CaptureRate.tsx                |  21 +-
 .../SessionsTabOverview.tsx                   |  29 +-
 .../LatestSessionsMessage.tsx                 |  26 +-
 .../components/NoContentMessage.tsx           |  25 +-
 .../components/Notes/NoteList.tsx             |   2 +-
 .../SessionHeader/SessionHeader.tsx           |  59 +-
 .../SessionList/SessionDateRange.tsx          |  31 +-
 .../components/SessionList/SessionList.tsx    | 185 ++---
 .../components/SessionSort/SessionSort.tsx    |  31 +-
 .../components/SessionTags/SessionTags.tsx    | 139 ++--
 .../shared/SharePopup/SharePopup.tsx          |  57 +-
 .../shared/SiteDropdown/SiteDropdown.js       |  13 +-
 .../TrackerUpdateMessage.js                   |  49 --
 .../shared/TrackerUpdateMessage/index.js      |   1 -
 .../ProjectCodeSnippet/ProjectCodeSnippet.js  |  21 +-
 .../UpdateFunnelButton/UpdateFunnelButton.tsx |  26 -
 .../shared/UpdateFunnelButton/index.ts        |   1 -
 .../ui/ErrorDetails/ErrorDetails.tsx          |  30 +-
 frontend/app/components/ui/Link/Link.js       |  25 +-
 .../NoSessionPermission.tsx                   | 125 ++--
 .../ui/TimezoneDropdown/TimezoneDropdown.js   |  13 +-
 frontend/app/date.ts                          |   2 +-
 frontend/app/duck/.eslintrc                   |   9 -
 frontend/app/duck/alerts.js                   |   0
 frontend/app/duck/assignments.js              | 116 ---
 frontend/app/duck/components/index.js         |   9 -
 frontend/app/duck/components/player.ts        | 140 ----
 frontend/app/duck/components/targetDefiner.js |  72 --
 frontend/app/duck/customField.js              | 132 ----
 frontend/app/duck/customMetrics.js            | 203 -----
 frontend/app/duck/dashboard.js                |  41 -
 frontend/app/duck/errors.js                   | 239 ------
 frontend/app/duck/filters.js                  | 394 ----------
 frontend/app/duck/funcTools/crud/actions.js   |  77 --
 frontend/app/duck/funcTools/crud/index.js     |   3 -
 frontend/app/duck/funcTools/crud/reducer.js   |  66 --
 frontend/app/duck/funcTools/crud/types.js     |   9 -
 frontend/app/duck/funcTools/index.js          |   0
 frontend/app/duck/funcTools/list/actions.js   |  13 -
 frontend/app/duck/funcTools/list/index.js     |   3 -
 frontend/app/duck/funcTools/list/reducer.js   |  29 -
 frontend/app/duck/funcTools/list/types.js     |   4 -
 .../app/duck/funcTools/request/RequestType.js |  14 -
 frontend/app/duck/funcTools/request/index.js  |   2 -
 .../app/duck/funcTools/request/reducer.js     |  89 ---
 frontend/app/duck/funcTools/request/types.js  |   1 -
 frontend/app/duck/funcTools/tools.js          |  33 -
 frontend/app/duck/funcTools/types.js          |   3 -
 frontend/app/duck/funnelFilters.js            | 375 ----------
 frontend/app/duck/funnels.js                  | 451 -----------
 frontend/app/duck/index.ts                    |  51 --
 frontend/app/duck/integrations/actions.js     |  46 --
 frontend/app/duck/integrations/index.js       |  37 -
 .../app/duck/integrations/integrations.js     |  40 -
 frontend/app/duck/integrations/reducer.js     |  52 --
 frontend/app/duck/integrations/slack.js       | 102 ---
 frontend/app/duck/integrations/teams.js       | 103 ---
 frontend/app/duck/issues.js                   | 122 ---
 frontend/app/duck/liveSearch.js               | 157 ----
 frontend/app/duck/member.js                   |  40 -
 frontend/app/duck/rehydrate.js                |  54 --
 frontend/app/duck/requestStateCreator.js      |  80 --
 frontend/app/duck/roles.js                    |  62 --
 frontend/app/duck/search.js                   | 516 -------------
 frontend/app/duck/sessions.ts                 | 704 ------------------
 frontend/app/duck/site.js                     | 167 -----
 frontend/app/duck/sources/index.js            |  24 -
 .../app/duck/sources/listSourceCreator.js     |  39 -
 frontend/app/duck/templates.js                |  13 -
 frontend/app/duck/tools/crudDuck.js           | 208 ------
 frontend/app/duck/tools/index.js              |  19 -
 frontend/app/duck/tools/requestDuck.js        |  93 ---
 frontend/app/duck/tools/storageDuck.js        |  25 -
 frontend/app/duck/user.js                     | 279 -------
 frontend/app/initialize.tsx                   |   4 -
 frontend/app/layout/Layout.tsx                |  36 +-
 frontend/app/layout/SideMenu.tsx              |  70 +-
 .../app/layout/SpotToOpenReplayPrompt.tsx     |  12 +-
 frontend/app/layout/TopHeader.tsx             |  71 +-
 frontend/app/layout/TopRight.tsx              |  25 +-
 frontend/app/mstore/customFieldStore.ts       | 119 +++
 frontend/app/mstore/errorStore.ts             | 126 ++--
 frontend/app/mstore/featureFlagsStore.ts      |   4 +-
 frontend/app/mstore/index.tsx                 | 121 ++-
 frontend/app/mstore/integrationsStore.ts      | 296 ++++++++
 frontend/app/mstore/issueReportingStore.ts    | 106 +++
 frontend/app/mstore/loginStore.ts             |  23 +-
 frontend/app/mstore/metricStore.ts            |   4 +-
 frontend/app/mstore/projectsStore.ts          | 189 +++++
 frontend/app/mstore/roleStore.ts              | 130 +++-
 frontend/app/mstore/searchStore.ts            | 287 +++++++
 frontend/app/mstore/searchStoreLive.ts        | 199 +++++
 frontend/app/mstore/sessionStore.ts           | 379 +++++-----
 frontend/app/mstore/types/customField.ts      |  55 ++
 frontend/app/mstore/types/error.ts            | 144 ++--
 frontend/app/mstore/types/filter.ts           | 320 +++++---
 frontend/app/mstore/types/filterItem.ts       |  14 +-
 frontend/app/mstore/types/gdpr.ts             |  30 +
 .../app/mstore/types/integrations/consts.ts   |  37 +
 .../mstore/types/integrations/messengers.ts   |  41 +
 .../app/mstore/types/integrations/services.ts | 501 +++++++++++++
 frontend/app/mstore/types/project.ts          |  62 ++
 frontend/app/mstore/types/role.ts             |  69 +-
 frontend/app/mstore/types/savedSearch.ts      |  77 ++
 frontend/app/mstore/types/search.ts           | 178 +++++
 frontend/app/mstore/types/widget.ts           |   4 +-
 frontend/app/mstore/uiPlayerStore.ts          | 110 +++
 frontend/app/mstore/userStore.ts              | 550 ++++++++++++--
 frontend/app/player/web/WebPlayer.ts          |   2 -
 frontend/app/player/web/assist/Call.ts        |   9 +-
 frontend/app/services/CustomFieldService.ts   |  29 +
 frontend/app/services/DashboardService.ts     |  30 +-
 frontend/app/services/ErrorService.ts         |  44 +-
 frontend/app/services/IntegrationsService.ts  |  63 ++
 frontend/app/services/IssueReportsService.ts  |  27 +
 frontend/app/services/ProjectsService.ts      |  39 +
 frontend/app/services/SearchService.ts        |  51 ++
 frontend/app/services/SessionService.ts       |  10 +-
 frontend/app/services/UserService.ts          | 285 ++++---
 frontend/app/services/index.ts                |  19 +-
 frontend/app/store.js                         |  70 --
 frontend/app/types/account/account.ts         | 103 ++-
 frontend/app/types/account/limit.ts           |  19 +-
 frontend/app/types/announcement.js            |  20 -
 frontend/app/types/app/platform.js            |   3 -
 frontend/app/types/client/client.js           |  26 -
 frontend/app/types/client/client.ts           |  15 +
 .../app/types/client/{index.js => index.ts}   |   0
 frontend/app/types/client/loggerOptions.js    |   9 -
 frontend/app/types/customMetric.js            |   4 +-
 frontend/app/types/environment.js             |  16 -
 frontend/app/types/feedbackOptions.js         |  20 -
 frontend/app/types/filter/customFilter.js     |   5 +-
 frontend/app/types/filter/filter.js           | 129 ++--
 frontend/app/types/index.js                   |   4 -
 frontend/app/types/issue/issueUser.js         |   8 -
 frontend/app/types/issue/issuesType.js        |  17 -
 frontend/app/types/member.ts                  |  68 +-
 frontend/app/types/rehydrateJob.js            |  33 -
 frontend/app/types/role.js                    |  34 -
 frontend/app/types/session/assignment.ts      |  33 +-
 frontend/app/types/session/session.ts         |   7 +
 frontend/app/types/site/gdpr.js               |  19 -
 frontend/app/types/site/gdpr.ts               |  18 +
 frontend/app/types/site/site.js               |  53 --
 frontend/app/types/site/site.ts               |  44 ++
 frontend/app/types/targetCustom.js            |  18 -
 frontend/babel.config.js                      |  43 +-
 frontend/jest.config.mjs                      |   2 +-
 frontend/package.json                         |   9 +-
 frontend/path-alias.js                        |   2 -
 frontend/tests/featureFlagsStore.test.js      | 130 ++--
 frontend/tsconfig.json                        |  12 +-
 frontend/webpack.config.ts                    |   6 +-
 frontend/yarn.lock                            | 145 +---
 431 files changed, 9681 insertions(+), 17014 deletions(-)
 create mode 100644 frontend/.browserslistrc
 delete mode 100644 frontend/app/api_middleware.ts
 create mode 100644 frontend/app/components/Client/CustomFields/CustomFieldForm.tsx
 create mode 100644 frontend/app/components/Client/CustomFields/CustomFields.tsx
 delete mode 100644 frontend/app/components/Client/Integrations/IntegrationForm.js
 create mode 100644 frontend/app/components/Client/Integrations/IntegrationForm.tsx
 delete mode 100644 frontend/app/components/Client/Roles/components/Permissions/Permissions.tsx
 delete mode 100644 frontend/app/components/Client/Roles/components/Permissions/index.ts
 delete mode 100644 frontend/app/components/Dashboard/WidgetHolder/WidgetHolder.js
 delete mode 100644 frontend/app/components/Dashboard/WidgetHolder/index.js
 delete mode 100644 frontend/app/components/Dashboard/WidgetHolder/widgetHolder.module.css
 delete mode 100644 frontend/app/components/Dashboard/components/Errors/ErrorDetails/ErrorDetails.tsx
 delete mode 100644 frontend/app/components/Dashboard/components/Errors/ErrorDetails/ErrorFrame/ErrorFrame.tsx
 delete mode 100644 frontend/app/components/Dashboard/components/Errors/ErrorDetails/ErrorFrame/errorFrame.module.css
 delete mode 100644 frontend/app/components/Dashboard/components/Errors/ErrorDetails/ErrorFrame/index.js
 delete mode 100644 frontend/app/components/Dashboard/components/Errors/ErrorDetails/index.js
 delete mode 100644 frontend/app/components/Dashboard/components/Errors/ErrorsList/ErrorsList.tsx
 delete mode 100644 frontend/app/components/Dashboard/components/Errors/ErrorsList/index.ts
 delete mode 100644 frontend/app/components/Dashboard/components/Errors/ErrorsWidget/ErrorsWidget.tsx
 delete mode 100644 frontend/app/components/Dashboard/components/Errors/ErrorsWidget/index.ts
 delete mode 100644 frontend/app/components/Errors/Errors.js
 delete mode 100644 frontend/app/components/Errors/Header.js
 delete mode 100644 frontend/app/components/Errors/List/List.js
 delete mode 100644 frontend/app/components/Errors/List/ListItem/ListItem.js
 delete mode 100644 frontend/app/components/Errors/List/ListItem/listItem.module.css
 delete mode 100644 frontend/app/components/Errors/SideMenu/SideMenuDividedItem.js
 delete mode 100644 frontend/app/components/Errors/SideMenu/SideMenuHeader.js
 delete mode 100644 frontend/app/components/Errors/SideMenu/SideMenuSection.js
 delete mode 100644 frontend/app/components/Errors/SideMenu/sideMenuHeader.module.css
 delete mode 100644 frontend/app/components/Funnels/FunnelDetails/FunnelDetails.js__
 delete mode 100644 frontend/app/components/Funnels/FunnelGraph/FunnelGraph.js
 delete mode 100644 frontend/app/components/Funnels/FunnelGraph/index.js
 delete mode 100644 frontend/app/components/Funnels/FunnelHeader/FunnelDropdown.js
 delete mode 100644 frontend/app/components/Funnels/FunnelHeader/FunnelHeader.js
 delete mode 100644 frontend/app/components/Funnels/FunnelHeader/funnelHeader.module.css
 delete mode 100644 frontend/app/components/Funnels/FunnelHeader/index.js
 delete mode 100644 frontend/app/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.js
 delete mode 100644 frontend/app/components/Funnels/FunnelIssues/FunnelIssues.js
 delete mode 100644 frontend/app/components/Funnels/FunnelIssues/SortDropdown/SortDropdown.js
 delete mode 100644 frontend/app/components/Funnels/FunnelIssues/SortDropdown/index.js
 delete mode 100644 frontend/app/components/Funnels/FunnelIssues/SortDropdown/sortDropdown.module.css
 delete mode 100644 frontend/app/components/Funnels/FunnelIssues/index.js
 delete mode 100644 frontend/app/components/Funnels/FunnelIssuesHeader/DateRange.js
 delete mode 100644 frontend/app/components/Funnels/FunnelIssuesHeader/FunnelIssuesHeader.js
 delete mode 100644 frontend/app/components/Funnels/FunnelIssuesHeader/index.js
 delete mode 100644 frontend/app/components/Funnels/FunnelItem/FunnelItem.js__
 delete mode 100644 frontend/app/components/Funnels/FunnelSaveModal/FunnelSaveModal.js
 delete mode 100644 frontend/app/components/Funnels/FunnelSaveModal/funnelSaveModal.module.css
 delete mode 100644 frontend/app/components/Funnels/FunnelSaveModal/index.js
 delete mode 100644 frontend/app/components/Funnels/FunnelSessionList/FunnelSessionList.js
 delete mode 100644 frontend/app/components/Funnels/FunnelSessionList/index.js
 delete mode 100644 frontend/app/components/Funnels/FunnelSessionsHeader/DateRange.js
 delete mode 100644 frontend/app/components/Funnels/FunnelSessionsHeader/SortDropdown/SortDropdown.js
 delete mode 100644 frontend/app/components/Funnels/FunnelSessionsHeader/SortDropdown/index.js
 delete mode 100644 frontend/app/components/Funnels/FunnelSessionsHeader/SortDropdown/sortDropdown.module.css
 delete mode 100644 frontend/app/components/Funnels/IssueFilter/IssueFilter.js
 delete mode 100644 frontend/app/components/Funnels/IssueFilter/index.js
 delete mode 100644 frontend/app/components/Funnels/IssueFilter/issueFilter.module.css
 delete mode 100644 frontend/app/components/Funnels/IssuesEmptyMessage/IssuesEmptyMessage.js
 delete mode 100644 frontend/app/components/Funnels/IssuesEmptyMessage/index.js
 delete mode 100644 frontend/app/components/Header/SiteDropdown.js
 create mode 100644 frontend/app/components/Onboarding/components/MetadataList/MetadataList.tsx
 delete mode 100644 frontend/app/components/Session_/Issues/ActiveIssueClose.js
 delete mode 100644 frontend/app/components/Session_/Issues/ActivityList.js
 delete mode 100644 frontend/app/components/Session_/Issues/AuthoAvatar.js
 delete mode 100644 frontend/app/components/Session_/Issues/ContentRender.js
 delete mode 100644 frontend/app/components/Session_/Issues/IssueComment.js
 delete mode 100644 frontend/app/components/Session_/Issues/IssueCommentForm.js
 delete mode 100644 frontend/app/components/Session_/Issues/IssueDescription.js
 delete mode 100644 frontend/app/components/Session_/Issues/IssueDetails.js
 delete mode 100644 frontend/app/components/Session_/Issues/IssueHeader.js
 delete mode 100644 frontend/app/components/Session_/Issues/IssueListItem.js
 delete mode 100644 frontend/app/components/Session_/Issues/contentRender.module.css
 delete mode 100644 frontend/app/components/Session_/Issues/issueDetails.module.css
 delete mode 100644 frontend/app/components/Session_/Issues/issueHeader.module.css
 delete mode 100644 frontend/app/components/Session_/Issues/issueListItem.module.css
 delete mode 100644 frontend/app/components/Session_/Issues/issuesModal.stories.js
 delete mode 100644 frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx
 delete mode 100644 frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.module.css
 delete mode 100644 frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.tsx
 delete mode 100644 frontend/app/components/shared/CustomMetrics/SessionListModal/index.ts
 delete mode 100644 frontend/app/components/shared/CustomMetrics/index.ts
 delete mode 100644 frontend/app/components/shared/FunnelSearch/FunnelSearch.tsx
 delete mode 100644 frontend/app/components/shared/FunnelSearch/index.ts
 delete mode 100644 frontend/app/components/shared/SaveFunnelButton/SaveFunnelButton.tsx
 delete mode 100644 frontend/app/components/shared/SaveFunnelButton/index.ts
 delete mode 100644 frontend/app/components/shared/TrackerUpdateMessage/TrackerUpdateMessage.js
 delete mode 100644 frontend/app/components/shared/TrackerUpdateMessage/index.js
 delete mode 100644 frontend/app/components/shared/UpdateFunnelButton/UpdateFunnelButton.tsx
 delete mode 100644 frontend/app/components/shared/UpdateFunnelButton/index.ts
 delete mode 100644 frontend/app/duck/.eslintrc
 delete mode 100644 frontend/app/duck/alerts.js
 delete mode 100644 frontend/app/duck/assignments.js
 delete mode 100644 frontend/app/duck/components/index.js
 delete mode 100644 frontend/app/duck/components/player.ts
 delete mode 100644 frontend/app/duck/components/targetDefiner.js
 delete mode 100644 frontend/app/duck/customField.js
 delete mode 100644 frontend/app/duck/customMetrics.js
 delete mode 100644 frontend/app/duck/dashboard.js
 delete mode 100644 frontend/app/duck/errors.js
 delete mode 100644 frontend/app/duck/filters.js
 delete mode 100644 frontend/app/duck/funcTools/crud/actions.js
 delete mode 100644 frontend/app/duck/funcTools/crud/index.js
 delete mode 100644 frontend/app/duck/funcTools/crud/reducer.js
 delete mode 100644 frontend/app/duck/funcTools/crud/types.js
 delete mode 100644 frontend/app/duck/funcTools/index.js
 delete mode 100644 frontend/app/duck/funcTools/list/actions.js
 delete mode 100644 frontend/app/duck/funcTools/list/index.js
 delete mode 100644 frontend/app/duck/funcTools/list/reducer.js
 delete mode 100644 frontend/app/duck/funcTools/list/types.js
 delete mode 100644 frontend/app/duck/funcTools/request/RequestType.js
 delete mode 100644 frontend/app/duck/funcTools/request/index.js
 delete mode 100644 frontend/app/duck/funcTools/request/reducer.js
 delete mode 100644 frontend/app/duck/funcTools/request/types.js
 delete mode 100644 frontend/app/duck/funcTools/tools.js
 delete mode 100644 frontend/app/duck/funcTools/types.js
 delete mode 100644 frontend/app/duck/funnelFilters.js
 delete mode 100644 frontend/app/duck/funnels.js
 delete mode 100644 frontend/app/duck/index.ts
 delete mode 100644 frontend/app/duck/integrations/actions.js
 delete mode 100644 frontend/app/duck/integrations/index.js
 delete mode 100644 frontend/app/duck/integrations/integrations.js
 delete mode 100644 frontend/app/duck/integrations/reducer.js
 delete mode 100644 frontend/app/duck/integrations/slack.js
 delete mode 100644 frontend/app/duck/integrations/teams.js
 delete mode 100644 frontend/app/duck/issues.js
 delete mode 100644 frontend/app/duck/liveSearch.js
 delete mode 100644 frontend/app/duck/member.js
 delete mode 100644 frontend/app/duck/rehydrate.js
 delete mode 100644 frontend/app/duck/requestStateCreator.js
 delete mode 100644 frontend/app/duck/roles.js
 delete mode 100644 frontend/app/duck/search.js
 delete mode 100644 frontend/app/duck/sessions.ts
 delete mode 100644 frontend/app/duck/site.js
 delete mode 100644 frontend/app/duck/sources/index.js
 delete mode 100644 frontend/app/duck/sources/listSourceCreator.js
 delete mode 100644 frontend/app/duck/templates.js
 delete mode 100644 frontend/app/duck/tools/crudDuck.js
 delete mode 100644 frontend/app/duck/tools/index.js
 delete mode 100644 frontend/app/duck/tools/requestDuck.js
 delete mode 100644 frontend/app/duck/tools/storageDuck.js
 delete mode 100644 frontend/app/duck/user.js
 create mode 100644 frontend/app/mstore/customFieldStore.ts
 create mode 100644 frontend/app/mstore/integrationsStore.ts
 create mode 100644 frontend/app/mstore/issueReportingStore.ts
 create mode 100644 frontend/app/mstore/projectsStore.ts
 create mode 100644 frontend/app/mstore/searchStore.ts
 create mode 100644 frontend/app/mstore/searchStoreLive.ts
 create mode 100644 frontend/app/mstore/types/customField.ts
 create mode 100644 frontend/app/mstore/types/gdpr.ts
 create mode 100644 frontend/app/mstore/types/integrations/consts.ts
 create mode 100644 frontend/app/mstore/types/integrations/messengers.ts
 create mode 100644 frontend/app/mstore/types/integrations/services.ts
 create mode 100644 frontend/app/mstore/types/project.ts
 create mode 100644 frontend/app/mstore/types/savedSearch.ts
 create mode 100644 frontend/app/mstore/types/search.ts
 create mode 100644 frontend/app/mstore/uiPlayerStore.ts
 create mode 100644 frontend/app/services/CustomFieldService.ts
 create mode 100644 frontend/app/services/IntegrationsService.ts
 create mode 100644 frontend/app/services/IssueReportsService.ts
 create mode 100644 frontend/app/services/ProjectsService.ts
 create mode 100644 frontend/app/services/SearchService.ts
 delete mode 100644 frontend/app/store.js
 delete mode 100644 frontend/app/types/announcement.js
 delete mode 100644 frontend/app/types/app/platform.js
 delete mode 100644 frontend/app/types/client/client.js
 create mode 100644 frontend/app/types/client/client.ts
 rename frontend/app/types/client/{index.js => index.ts} (100%)
 delete mode 100644 frontend/app/types/client/loggerOptions.js
 delete mode 100644 frontend/app/types/environment.js
 delete mode 100644 frontend/app/types/feedbackOptions.js
 delete mode 100644 frontend/app/types/index.js
 delete mode 100644 frontend/app/types/issue/issueUser.js
 delete mode 100644 frontend/app/types/issue/issuesType.js
 delete mode 100644 frontend/app/types/rehydrateJob.js
 delete mode 100644 frontend/app/types/role.js
 delete mode 100644 frontend/app/types/site/gdpr.js
 create mode 100644 frontend/app/types/site/gdpr.ts
 delete mode 100644 frontend/app/types/site/site.js
 create mode 100644 frontend/app/types/site/site.ts
 delete mode 100644 frontend/app/types/targetCustom.js

diff --git a/.github/workflows/tracker-tests.yaml b/.github/workflows/tracker-tests.yaml
index 7cf1de010..084ea8a94 100644
--- a/.github/workflows/tracker-tests.yaml
+++ b/.github/workflows/tracker-tests.yaml
@@ -9,24 +9,16 @@ on:
   pull_request:
     branches: [ "dev", "main" ]
     paths:
-      - frontend/**
       - tracker/**
 jobs:
   build-and-test:
     runs-on: macos-latest
     name: Build and test Tracker
-    strategy:
-      matrix:
-        node-version: [ 18.x ]
     steps:
-      - uses: oven-sh/setup-bun@v1
+      - uses: oven-sh/setup-bun@v2
         with:
           bun-version: latest
       - uses: actions/checkout@v3
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
       - name: Cache tracker modules
         uses: actions/cache@v3
         with:
diff --git a/frontend/.browserslistrc b/frontend/.browserslistrc
new file mode 100644
index 000000000..f4f95cac0
--- /dev/null
+++ b/frontend/.browserslistrc
@@ -0,0 +1 @@
+> 0.25% and not dead
\ No newline at end of file
diff --git a/frontend/app/IFrameRoutes.tsx b/frontend/app/IFrameRoutes.tsx
index 0973ccd59..8bfe3522b 100644
--- a/frontend/app/IFrameRoutes.tsx
+++ b/frontend/app/IFrameRoutes.tsx
@@ -1,15 +1,15 @@
 import React, { lazy, Suspense } from 'react';
 import { Switch, Route } from 'react-router-dom';
-import { connect } from 'react-redux';
 import { Loader } from 'UI';
 import withSiteIdUpdater from 'HOCs/withSiteIdUpdater';
 
 import * as routes from './routes';
-import { Map } from 'immutable';
 import NotFoundPage from 'Shared/NotFoundPage';
 import { ModalProvider } from 'Components/Modal';
 import Layout from 'App/layout/Layout';
 import PublicRoutes from 'App/PublicRoutes';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 
 const components: any = {
   SessionPure: lazy(() => import('Components/Session/Session')),
@@ -29,20 +29,16 @@ const LIVE_SESSION_PATH = routes.liveSession();
 
 
 interface Props {
-  isEnterprise: boolean;
-  tenantId: string;
-  siteId: string;
-  jwt: string;
-  sites: Map<string, any>;
-  onboarding: boolean;
   isJwt?: boolean;
   isLoggedIn?: boolean;
   loading: boolean;
 }
 
 function IFrameRoutes(props: Props) {
-  const { isJwt = false, isLoggedIn = false, loading, onboarding, sites, siteId, jwt } = props;
-  const siteIdList: any = sites.map(({ id }) => id).toJS();
+  const { projectsStore } = useStore();
+  const sites = projectsStore.list;
+  const { isJwt = false, isLoggedIn = false, loading } = props;
+  const siteIdList: any = sites.map(({ id }) => id);
 
   if (isLoggedIn) {
     return (
@@ -72,14 +68,4 @@ function IFrameRoutes(props: Props) {
 }
 
 
-export default connect((state: any) => ({
-  changePassword: state.getIn(['user', 'account', 'changePassword']),
-  onboarding: state.getIn(['user', 'onboarding']),
-  sites: state.getIn(['site', 'list']),
-  siteId: state.getIn(['site', 'siteId']),
-  jwt: state.getIn(['user', 'jwt']),
-  tenantId: state.getIn(['user', 'account', 'tenantId']),
-  isEnterprise:
-    state.getIn(['user', 'account', 'edition']) === 'ee' ||
-    state.getIn(['user', 'authDetails', 'edition']) === 'ee'
-}))(IFrameRoutes);
\ No newline at end of file
+export default observer(IFrameRoutes);
diff --git a/frontend/app/PrivateRoutes.tsx b/frontend/app/PrivateRoutes.tsx
index 97f7fac83..ee5250c07 100644
--- a/frontend/app/PrivateRoutes.tsx
+++ b/frontend/app/PrivateRoutes.tsx
@@ -1,16 +1,13 @@
 import withSiteIdUpdater from 'HOCs/withSiteIdUpdater';
-import { Map } from 'immutable';
 import React, { Suspense, lazy } from 'react';
-import { connect } from 'react-redux';
 import { Redirect, Route, Switch } from 'react-router-dom';
-
-import AdditionalRoutes from 'App/AdditionalRoutes';
+import { observer } from 'mobx-react-lite'
+import { useStore } from "./mstore";
 import { GLOBAL_HAS_NO_RECORDINGS } from 'App/constants/storageKeys';
 import { OB_DEFAULT_TAB } from 'App/routes';
 import { Loader } from 'UI';
 
 import APIClient from './api_client';
-import { getScope } from './duck/user';
 import * as routes from './routes';
 
 const components: any = {
@@ -108,21 +105,18 @@ const SPOTS_LIST_PATH = routes.spotsList();
 const SPOT_PATH = routes.spot();
 const SCOPE_SETUP = routes.scopeSetup();
 
-interface Props {
-  tenantId: string;
-  siteId: string;
-  sites: Map<string, any>;
-  onboarding: boolean;
-  scope: number;
-}
-
-function PrivateRoutes(props: Props) {
-  const { onboarding, sites, siteId } = props;
+function PrivateRoutes() {
+  const { projectsStore, userStore } = useStore();
+  const onboarding = userStore.onboarding;
+  const scope = userStore.scopeState;
+  const tenantId = userStore.account.tenantId;
+  const sites = projectsStore.list;
+  const siteId = projectsStore.siteId;
   const hasRecordings = sites.some(s => s.recorded);
-  const redirectToSetup = props.scope === 0;
+  const redirectToSetup = scope === 0;
   const redirectToOnboarding =
-    !onboarding && (localStorage.getItem(GLOBAL_HAS_NO_RECORDINGS) === 'true' || !hasRecordings) && props.scope > 0;
-  const siteIdList: any = sites.map(({ id }) => id).toJS();
+    !onboarding && (localStorage.getItem(GLOBAL_HAS_NO_RECORDINGS) === 'true' || (sites.length > 0 && !hasRecordings)) && scope > 0;
+  const siteIdList: any = sites.map(({ id }) => id);
 
   return (
     <Suspense fallback={<Loader loading={true} className="flex-1" />}>
@@ -151,7 +145,7 @@ function PrivateRoutes(props: Props) {
           path={SPOT_PATH}
           component={enhancedComponents.Spot}
         />
-        {props.scope === 1 ? <Redirect to={SPOTS_LIST_PATH} /> : null}
+        {scope === 1 ? <Redirect to={SPOTS_LIST_PATH} /> : null}
         <Route
           path="/integrations/"
           render={({ location }) => {
@@ -160,13 +154,13 @@ function PrivateRoutes(props: Props) {
               case '/integrations/slack':
                 client.post('integrations/slack/add', {
                   code: location.search.split('=')[1],
-                  state: props.tenantId,
+                  state: tenantId,
                 });
                 break;
               case '/integrations/msteams':
                 client.post('integrations/msteams/add', {
                   code: location.search.split('=')[1],
-                  state: props.tenantId,
+                  state: tenantId,
                 });
                 break;
             }
@@ -283,16 +277,12 @@ function PrivateRoutes(props: Props) {
         {Object.entries(routes.redirects).map(([fr, to]) => (
           <Redirect key={fr} exact strict from={fr} to={to} />
         ))}
-        <Redirect to={withSiteId(routes.sessions(), siteId)} />
+        <Route path={"*"}>
+          <Redirect to={withSiteId(routes.sessions(), siteId)} />
+        </Route>
       </Switch>
     </Suspense>
   );
 }
 
-export default connect((state: any) => ({
-  onboarding: state.getIn(['user', 'onboarding']),
-  scope: getScope(state),
-  sites: state.getIn(['site', 'list']),
-  siteId: state.getIn(['site', 'siteId']),
-  tenantId: state.getIn(['user', 'account', 'tenantId']),
-}))(PrivateRoutes);
+export default observer(PrivateRoutes);
diff --git a/frontend/app/PublicRoutes.tsx b/frontend/app/PublicRoutes.tsx
index a1f8e72ed..8bb1294a0 100644
--- a/frontend/app/PublicRoutes.tsx
+++ b/frontend/app/PublicRoutes.tsx
@@ -3,7 +3,8 @@ import { Loader } from 'UI';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import Signup from 'Components/Signup/Signup';
 import SupportCallout from 'Shared/SupportCallout';
-import { connect } from 'react-redux';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 import * as routes from 'App/routes';
 
 
@@ -14,16 +15,12 @@ const SPOT_PATH = routes.spot();
 
 const Login = lazy(() => import('Components/Login/Login'));
 const ForgotPassword = lazy(() => import('Components/ForgotPassword/ForgotPassword'));
-const UpdatePassword = lazy(() => import('Components/UpdatePassword/UpdatePassword'));
 const Spot = lazy(() => import('Components/Spots/SpotPlayer/SpotPlayer'));
 
-interface Props {
-  isEnterprise: boolean;
-  changePassword: boolean;
-}
-
-function PublicRoutes(props: Props) {
-  const hideSupport = props.isEnterprise || location.pathname.includes('spots') || location.pathname.includes('view-spot')
+function PublicRoutes() {
+  const { userStore } = useStore();
+  const isEnterprise = userStore.isEnterprise;
+  const hideSupport = isEnterprise || location.pathname.includes('spots') || location.pathname.includes('view-spot')
   return (
     <Suspense fallback={<Loader loading={true} className='flex-1' />}>
       <Switch>
@@ -39,9 +36,4 @@ function PublicRoutes(props: Props) {
 }
 
 
-export default connect((state: any) => ({
-  changePassword: state.getIn(['user', 'account', 'changePassword']),
-  isEnterprise:
-    state.getIn(['user', 'account', 'edition']) === 'ee' ||
-    state.getIn(['user', 'authDetails', 'edition']) === 'ee'
-}))(PublicRoutes);
\ No newline at end of file
+export default observer(PublicRoutes)
\ No newline at end of file
diff --git a/frontend/app/Router.tsx b/frontend/app/Router.tsx
index c050096b1..16710096a 100644
--- a/frontend/app/Router.tsx
+++ b/frontend/app/Router.tsx
@@ -1,6 +1,4 @@
-import { Map } from 'immutable';
 import React, { useEffect, useRef } from 'react';
-import { ConnectedProps, connect } from 'react-redux';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 
 import IFrameRoutes from 'App/IFrameRoutes';
@@ -10,60 +8,49 @@ import {
   GLOBAL_DESTINATION_PATH,
   IFRAME,
   JWT_PARAM,
-  SPOT_ONBOARDING,
+  SPOT_ONBOARDING
 } from 'App/constants/storageKeys';
 import Layout from 'App/layout/Layout';
-import { withStore } from 'App/mstore';
+import { useStore } from 'App/mstore';
 import { checkParam, handleSpotJWT, isTokenExpired } from 'App/utils';
 import { ModalProvider } from 'Components/Modal';
 import { ModalProvider as NewModalProvider } from 'Components/ModalContext';
-import { fetchListActive as fetchMetadata } from 'Duck/customField';
-import { setSessionPath } from 'Duck/sessions';
-import { fetchList as fetchSiteList } from 'Duck/site';
-import { init as initSite } from 'Duck/site';
-import { fetchUserInfo, getScope, logout, setJwt } from 'Duck/user';
 import { Loader } from 'UI';
 import * as routes from './routes';
+import { observer } from 'mobx-react-lite'
 
-interface RouterProps
-  extends RouteComponentProps,
-    ConnectedProps<typeof connector> {
-  isLoggedIn: boolean;
-  sites: Map<string, any>;
-  loading: boolean;
-  changePassword: boolean;
-  isEnterprise: boolean;
-  fetchUserInfo: () => any;
-  setSessionPath: (path: any) => any;
-  fetchSiteList: (siteId?: number) => any;
+interface RouterProps extends RouteComponentProps {
   match: {
     params: {
       siteId: string;
     };
   };
-  mstore: any;
-  setJwt: (params: { jwt: string; spotJwt: string | null }) => any;
-  fetchMetadata: (siteId: string) => void;
-  initSite: (site: any) => void;
-  scopeSetup: boolean;
-  localSpotJwt: string | null;
 }
 
 const Router: React.FC<RouterProps> = (props) => {
   const {
-    isLoggedIn,
-    siteId,
-    sites,
-    loading,
     location,
-    fetchUserInfo,
-    fetchSiteList,
     history,
-    setSessionPath,
-    scopeSetup,
-    localSpotJwt,
-    logout,
   } = props;
+  const mstore = useStore();
+  const { customFieldStore, projectsStore, sessionStore, searchStore, userStore } = mstore;
+  const jwt = userStore.jwt;
+  const changePassword = userStore.account.changePassword;
+  const userInfoLoading = userStore.fetchInfoRequest.loading;
+  const scopeSetup = userStore.scopeState === 0;
+  const localSpotJwt = userStore.spotJwt;
+  const isLoggedIn = Boolean(jwt && !changePassword);
+  const fetchUserInfo = userStore.fetchUserInfo;
+  const setJwt = userStore.updateJwt;
+  const logout = userStore.logout;
+
+  const setSessionPath = sessionStore.setSessionPath;
+  const siteId = projectsStore.siteId;
+  const sitesLoading = projectsStore.sitesLoading;
+  const sites = projectsStore.list;
+  const loading = Boolean(userInfoLoading || (!scopeSetup && !siteId) || sitesLoading);
+  const initSite = projectsStore.initProject;
+  const fetchSiteList = projectsStore.fetchList;
 
   const params = new URLSearchParams(location.search);
   const spotCb = params.get('spotCallback');
@@ -81,7 +68,7 @@ const Router: React.FC<RouterProps> = (props) => {
       handleSpotLogin(spotJwt);
     }
     if (urlJWT) {
-      props.setJwt({ jwt: urlJWT, spotJwt: spotJwt ?? null });
+      setJwt({ jwt: urlJWT, spotJwt: spotJwt ?? null });
     }
   };
 
@@ -109,9 +96,9 @@ const Router: React.FC<RouterProps> = (props) => {
       localStorage.setItem(SPOT_ONBOARDING, 'true');
     }
     await fetchUserInfo();
-    const siteIdFromPath = parseInt(location.pathname.split('/')[1]);
+    const siteIdFromPath = location.pathname.split('/')[1];
     await fetchSiteList(siteIdFromPath);
-    props.mstore.initClient();
+    mstore.initClient();
 
     if (localSpotJwt && !isTokenExpired(localSpotJwt)) {
       handleSpotLogin(localSpotJwt);
@@ -141,6 +128,7 @@ const Router: React.FC<RouterProps> = (props) => {
   useEffect(() => {
     checkParams();
     handleJwtFromUrl();
+    mstore.initClient();
   }, []);
 
   useEffect(() => {
@@ -169,18 +157,23 @@ const Router: React.FC<RouterProps> = (props) => {
       if (localSpotJwt && !isTokenExpired(localSpotJwt)) {
         handleSpotLogin(localSpotJwt);
       } else {
-        logout();
+        void logout();
       }
     }
   }, [isSpotCb, isLoggedIn, localSpotJwt, isSignup]);
 
   useEffect(() => {
-    if (siteId && siteId !== lastFetchedSiteIdRef.current) {
-      const activeSite = sites.find((s) => s.id == siteId);
-      props.initSite(activeSite);
-      props.fetchMetadata(siteId);
-      lastFetchedSiteIdRef.current = siteId;
-    }
+    const fetchData = async () => {
+      if (siteId && siteId !== lastFetchedSiteIdRef.current) {
+        const activeSite = sites.find((s) => s.id == siteId);
+        initSite(activeSite ?? {});
+        lastFetchedSiteIdRef.current = activeSite?.id;
+        await customFieldStore.fetchListActive(siteId + '');
+        await searchStore.fetchSavedSearchList()
+      }
+    };
+
+    void fetchData();
   }, [siteId]);
 
   const lastFetchedSiteIdRef = useRef<any>(null);
@@ -225,51 +218,4 @@ const Router: React.FC<RouterProps> = (props) => {
   );
 };
 
-const mapStateToProps = (state: Map<string, any>) => {
-  const siteId = state.getIn(['site', 'siteId']);
-  const jwt = state.getIn(['user', 'jwt']);
-  const changePassword = state.getIn(['user', 'account', 'changePassword']);
-  const userInfoLoading = state.getIn([
-    'user',
-    'fetchUserInfoRequest',
-    'loading',
-  ]);
-  const sitesLoading = state.getIn(['site', 'fetchListRequest', 'loading']);
-  const scopeSetup = getScope(state) === 0;
-  const loading =
-    Boolean(userInfoLoading) ||
-    Boolean(sitesLoading) ||
-    (!scopeSetup && !siteId);
-  return {
-    siteId,
-    changePassword,
-    sites: state.getIn(['site', 'list']),
-    jwt,
-    localSpotJwt: state.getIn(['user', 'spotJwt']),
-    isLoggedIn: jwt !== null && !changePassword,
-    scopeSetup,
-    loading,
-    email: state.getIn(['user', 'account', 'email']),
-    account: state.getIn(['user', 'account']),
-    organisation: state.getIn(['user', 'account', 'name']),
-    tenantId: state.getIn(['user', 'account', 'tenantId']),
-    tenants: state.getIn(['user', 'tenants']),
-    isEnterprise:
-      state.getIn(['user', 'account', 'edition']) === 'ee' ||
-      state.getIn(['user', 'authDetails', 'edition']) === 'ee',
-  };
-};
-
-const mapDispatchToProps = {
-  fetchUserInfo,
-  setSessionPath,
-  fetchSiteList,
-  setJwt,
-  fetchMetadata,
-  initSite,
-  logout,
-};
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
-
-export default withStore(withRouter(connector(Router)));
+export default withRouter(observer(Router));
diff --git a/frontend/app/api_client.ts b/frontend/app/api_client.ts
index 2a9394687..9e5649070 100644
--- a/frontend/app/api_client.ts
+++ b/frontend/app/api_client.ts
@@ -1,6 +1,4 @@
-import store from 'App/store';
 import { queried } from './routes';
-import { setJwt } from 'Duck/user';
 
 const siteIdRequiredPaths: string[] = [
   '/dashboard',
@@ -54,27 +52,42 @@ export const clean = (obj: any, forbiddenValues: any[] = [undefined, '']): any =
 
 export default class APIClient {
   private init: RequestInit;
-  private readonly siteId: string | undefined;
+  private siteId: string | undefined;
+  private siteIdCheck: (() => { siteId: string | null }) | undefined;
+  private getJwt: () => string | null = () => null;
+  private onUpdateJwt: (data: { jwt?: string, spotJwt?: string }) => void;
   private refreshingTokenPromise: Promise<string> | null = null;
 
   constructor() {
-    const jwt = store.getState().getIn(['user', 'jwt']);
-    const siteId = store.getState().getIn(['site', 'siteId']);
     this.init = {
       headers: new Headers({
         Accept: 'application/json',
         'Content-Type': 'application/json'
       })
     };
+  }
+
+  setJwt(jwt: string | null): void {
     if (jwt !== null) {
       (this.init.headers as Headers).set('Authorization', `Bearer ${jwt}`);
     }
-    this.siteId = siteId;
+  }
+
+  setOnUpdateJwt(onUpdateJwt: (data: { jwt?: string, spotJwt?: string }) => void): void {
+    this.onUpdateJwt = onUpdateJwt;
+  }
+
+  setJwtChecker(checker: () => string | null): void {
+    this.getJwt = checker;
+  }
+
+  setSiteIdCheck(checker: () => { siteId: string | null }): void {
+    this.siteIdCheck = checker
   }
 
   private getInit(method: string = 'GET', params?: any, reqHeaders?: Record<string, any>): RequestInit {
     // Always fetch the latest JWT from the store
-    const jwt = store.getState().getIn(['user', 'jwt']);
+    const jwt = this.getJwt()
     const headers = new Headers({
       'Accept': 'application/json',
       'Content-Type': 'application/json',
@@ -101,6 +114,9 @@ export default class APIClient {
       delete init.body; // GET requests shouldn't have a body
     }
 
+    // /:id/path
+    // const idFromPath = window.location.pathname.split('/')[1];
+    this.siteId = this.siteIdCheck?.().siteId ?? undefined;
     return init;
   }
 
@@ -131,7 +147,7 @@ export default class APIClient {
     clean?: boolean
   } = { clean: true }, headers?: Record<string, any>): Promise<Response> {
     let _path = path;
-    let jwt = store.getState().getIn(['user', 'jwt']);
+    let jwt = this.getJwt();
     if (!path.includes('/refresh') && jwt && this.isTokenExpired(jwt)) {
       jwt = await this.handleTokenRefresh();
       (this.init.headers as Headers).set('Authorization', `Bearer ${jwt}`);
@@ -158,9 +174,9 @@ export default class APIClient {
       path !== '/targets_temp' &&
       !path.includes('/metadata/session_search') &&
       !path.includes('/assist/credentials') &&
-      !!this.siteId &&
       siteIdRequiredPaths.some(sidPath => path.startsWith(sidPath))
     ) {
+      if (!this.siteId) console.trace('no id', path)
       edp = `${edp}/${this.siteId}`;
     }
 
@@ -202,11 +218,11 @@ export default class APIClient {
 
       const data = await response.json();
       const refreshedJwt = data.jwt;
-      store.dispatch(setJwt({ jwt: refreshedJwt, }));
+      this.onUpdateJwt({ jwt: refreshedJwt });
       return refreshedJwt;
     } catch (error) {
       console.error('Error refreshing token:', error);
-      store.dispatch(setJwt({ jwt: null }));
+      this.onUpdateJwt({ jwt: undefined });
       throw error;
     }
   }
diff --git a/frontend/app/api_middleware.ts b/frontend/app/api_middleware.ts
deleted file mode 100644
index fb6a84bc9..000000000
--- a/frontend/app/api_middleware.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import logger from 'App/logger';
-import APIClient from './api_client';
-import { FETCH_ACCOUNT, UPDATE_JWT } from 'Duck/user';
-import { handleSpotJWT } from "App/utils";
-
-export default () => {
-  return (next: any) => async (action: any) => {
-    const { types, call, ...rest } = action;
-
-    if (!call) {
-      return next(action);
-    }
-
-    const [REQUEST, SUCCESS, FAILURE] = types;
-    next({ ...rest, type: REQUEST });
-
-    try {
-      const client = new APIClient();
-      const response = await call(client);
-
-      if (!response.ok) {
-        const text = await response.text();
-        throw new Error(text);
-      }
-
-      const json = await response.json() || {}; // TEMP TODO on server: no empty responses
-      const { jwt, spotJwt, errors, data } = json;
-
-      if (errors) {
-        next({ type: FAILURE, errors, data });
-      } else {
-        next({ type: SUCCESS, data, ...rest });
-      }
-
-      if (jwt) {
-        next({ type: UPDATE_JWT, data: { jwt } });
-      }
-      if (spotJwt) {
-        handleSpotJWT(spotJwt);
-      }
-
-    } catch (e) {
-      if (e.response?.status === 403) {
-        next({ type: FETCH_ACCOUNT.FAILURE });
-      }
-
-      const data = await e.response?.json();
-      logger.error('Error during API request. ', e);
-      return next({ type: FAILURE, errors: data ? parseError(data.errors) : [] });
-    }
-  };
-};
-
-export function parseError(e: any) {
-  try {
-    return [...JSON.parse(e).errors] || [];
-  } catch {
-    return Array.isArray(e) ? e : [e];
-  }
-}
\ No newline at end of file
diff --git a/frontend/app/components/Assist/Assist.tsx b/frontend/app/components/Assist/Assist.tsx
index 92ffa2c56..42b678f54 100644
--- a/frontend/app/components/Assist/Assist.tsx
+++ b/frontend/app/components/Assist/Assist.tsx
@@ -1,28 +1,15 @@
 import React from 'react';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
 import withPageTitle from 'HOCs/withPageTitle';
 import withPermissions from 'HOCs/withPermissions';
 import AssistRouter from './AssistRouter';
-import { connect } from 'react-redux';
 
-interface Props extends RouteComponentProps {
-  siteId: string;
-  history: any;
-  isEnterprise: boolean;
-}
-
-function Assist(props: Props) {
+function Assist() {
   return (
     <AssistRouter />
   );
 }
 
-const Cont = connect((state: any) => ({
-  isEnterprise:
-    state.getIn(['user', 'account', 'edition']) === 'ee' ||
-    state.getIn(['user', 'authDetails', 'edition']) === 'ee'
-}))(Assist);
 
 export default withPageTitle('Assist - OpenReplay')(
-  withPermissions(['ASSIST_LIVE', 'SERVICE_ASSIST_LIVE'], '', false, false)(withRouter(Cont))
+  withPermissions(['ASSIST_LIVE', 'SERVICE_ASSIST_LIVE'], '', false, false)(Assist)
 );
diff --git a/frontend/app/components/Assist/AssistRouter.tsx b/frontend/app/components/Assist/AssistRouter.tsx
index c82d1cfb4..26b6fbaa2 100644
--- a/frontend/app/components/Assist/AssistRouter.tsx
+++ b/frontend/app/components/Assist/AssistRouter.tsx
@@ -1,12 +1,7 @@
 import React from 'react';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
 import AssistView from './AssistView'
 
-interface Props extends RouteComponentProps {
-  match: any;
-}
-
-function AssistRouter(props: Props) {
+function AssistRouter() {
   return (
     <div className="w-full">
       <AssistView />
@@ -14,4 +9,4 @@ function AssistRouter(props: Props) {
   );
 }
 
-export default withRouter(AssistRouter);
+export default AssistRouter;
diff --git a/frontend/app/components/Assist/AssistSearchField/AssistSearchField.tsx b/frontend/app/components/Assist/AssistSearchField/AssistSearchField.tsx
index a4fc8997f..3380cae43 100644
--- a/frontend/app/components/Assist/AssistSearchField/AssistSearchField.tsx
+++ b/frontend/app/components/Assist/AssistSearchField/AssistSearchField.tsx
@@ -1,55 +1,46 @@
 import React from 'react';
-import { connect } from 'react-redux';
-
-import {
-  addFilterByKeyAndValue,
-  clearSearch,
-  edit as editFilter,
-  fetchFilterSearch,
-} from 'Duck/liveSearch';
 import { Button } from 'antd';
 import { useModal } from 'App/components/Modal';
 import SessionSearchField from 'Shared/SessionSearchField';
 import { MODULES } from 'Components/Client/Modules';
 
 import AssistStats from '../../AssistStats';
-import Recordings from '../RecordingsList/Recordings'
+import Recordings from '../RecordingsList/Recordings';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 
-interface Props {
-  appliedFilter: any;
-  fetchFilterSearch: any;
-  addFilterByKeyAndValue: any;
-  clearSearch: any;
-  isEnterprise: boolean;
-  modules: string[]
-}
-function AssistSearchField(props: Props) {
+function AssistSearchField() {
+  const { searchStoreLive, userStore } = useStore();
+  const modules = userStore.account.settings?.modules ?? [];
+  const isEnterprise = userStore.isEnterprise
   const hasEvents =
-    props.appliedFilter.filters.filter((i: any) => i.isEvent).size > 0;
+    searchStoreLive.instance.filters.filter((i: any) => i.isEvent).length > 0;
   const hasFilters =
-    props.appliedFilter.filters.filter((i: any) => !i.isEvent).size > 0;
-  const { showModal, hideModal } = useModal();
+    searchStoreLive.instance.filters.filter((i: any) => !i.isEvent).length > 0;
+  const { showModal } = useModal();
 
   const showStats = () => {
-    showModal(<AssistStats />, { right: true, width: 960 })
-  }
+    showModal(<AssistStats />, { right: true, width: 960 });
+  };
   const showRecords = () => {
-    showModal(<Recordings />, { right: true, width: 960 })
-  }
+    showModal(<Recordings />, { right: true, width: 960 });
+  };
   return (
     <div className="flex items-center w-full gap-2">
       <div style={{ width: '60%' }}>
         <SessionSearchField />
       </div>
-      {props.isEnterprise && props.modules.includes(MODULES.OFFLINE_RECORDINGS)
-       ? <Button type="primary" ghost onClick={showRecords}>Training Videos</Button> : null
+      {isEnterprise && modules.includes(MODULES.OFFLINE_RECORDINGS)
+        ? <Button type="primary" ghost onClick={showRecords}>Training Videos</Button> : null
       }
-      <Button type="primary" ghost onClick={showStats} disabled={props.modules.includes(MODULES.ASSIST_STATS) || props.modules.includes(MODULES.ASSIST)}>Co-Browsing Reports</Button>
+      <Button type="primary" ghost onClick={showStats}
+              disabled={modules.includes(MODULES.ASSIST_STATS) || modules.includes(MODULES.ASSIST)}>Co-Browsing
+        Reports</Button>
       <Button
         type="link"
         className="ml-auto font-medium"
         disabled={!hasFilters && !hasEvents}
-        onClick={() => props.clearSearch()}
+        onClick={() => searchStoreLive.clearSearch()}
       >
         Clear Search
       </Button>
@@ -57,18 +48,4 @@ function AssistSearchField(props: Props) {
   );
 }
 
-export default connect(
-  (state: any) => ({
-    appliedFilter: state.getIn(['liveSearch', 'instance']),
-    modules: state.getIn(['user', 'account', 'settings', 'modules']) || [],
-    isEnterprise:
-      state.getIn(['user', 'account', 'edition']) === 'ee' ||
-      state.getIn(['user', 'authDetails', 'edition']) === 'ee'
-  }),
-  {
-    fetchFilterSearch,
-    editFilter,
-    addFilterByKeyAndValue,
-    clearSearch,
-  }
-)(AssistSearchField);
+export default observer(AssistSearchField);
diff --git a/frontend/app/components/Assist/RecordingsList/Recordings.tsx b/frontend/app/components/Assist/RecordingsList/Recordings.tsx
index 00d99e6b5..394db4aac 100644
--- a/frontend/app/components/Assist/RecordingsList/Recordings.tsx
+++ b/frontend/app/components/Assist/RecordingsList/Recordings.tsx
@@ -4,17 +4,12 @@ import Select from 'Shared/Select';
 import RecordingsSearch from './RecordingsSearch';
 import RecordingsList from './RecordingsList';
 import { useStore } from 'App/mstore';
-import { connect } from 'react-redux';
 import SelectDateRange from 'Shared/SelectDateRange/SelectDateRange';
 import { observer } from 'mobx-react-lite';
 
-interface Props {
-  userId: string;
-}
-
-function Recordings(props: Props) {
-  const { userId } = props;
-  const { recordingsStore } = useStore();
+function Recordings() {
+  const { recordingsStore, userStore } = useStore();
+  const userId = userStore.account.id;
 
   const recordingsOwner = [
     { value: '0', label: 'All Videos' },
@@ -51,6 +46,4 @@ function Recordings(props: Props) {
   );
 }
 
-export default connect((state: any) => ({
-  userId: state.getIn(['user', 'account', 'id'])
-}))(observer(Recordings));
+export default observer(Recordings);
diff --git a/frontend/app/components/Assist/RequestingWindow/RequestingWindow.tsx b/frontend/app/components/Assist/RequestingWindow/RequestingWindow.tsx
index 212fea91c..16453e24c 100644
--- a/frontend/app/components/Assist/RequestingWindow/RequestingWindow.tsx
+++ b/frontend/app/components/Assist/RequestingWindow/RequestingWindow.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { INDEXES } from 'App/constants/zindex';
-import { connect } from 'react-redux';
 import { Button, Loader, Icon } from 'UI';
 import { PlayerContext } from 'App/components/Session/playerContext';
+import { useStore } from "App/mstore";
+import { observer } from 'mobx-react-lite';
 
 interface Props {
   userDisplayName: string;
@@ -42,7 +43,9 @@ const WIN_VARIANTS = {
   }
 };
 
-function RequestingWindow({ userDisplayName, getWindowType }: Props) {
+function RequestingWindow({ getWindowType }: Props) {
+  const { sessionStore } = useStore();
+  const userDisplayName = sessionStore.current.userDisplayName;
   const windowType = getWindowType()
   if (!windowType) return;
   const { player } = React.useContext(PlayerContext)
@@ -81,6 +84,4 @@ function RequestingWindow({ userDisplayName, getWindowType }: Props) {
   );
 }
 
-export default connect((state: any) => ({
-  userDisplayName: state.getIn(['sessions', 'current']).userDisplayName,
-}))(RequestingWindow);
+export default observer(RequestingWindow);
diff --git a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
index a80a9f5e1..80a49bedd 100644
--- a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
+++ b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import { Button, Tooltip } from 'UI';
-import { connect } from 'react-redux';
 import cn from 'classnames';
 import ChatWindow from '../../ChatWindow';
 import { CallingState, ConnectionStatus, RemoteControlStatus, RequestLocalStream } from 'Player';
@@ -12,6 +11,7 @@ import { confirm } from 'UI';
 import stl from './AassistActions.module.css';
 import ScreenRecorder from 'App/components/Session_/ScreenRecorder/ScreenRecorder';
 import { audioContextManager } from 'App/utils/screenRecorder';
+import { useStore } from "App/mstore";
 
 function onReject() {
   toast.info(`Call was rejected.`);
@@ -31,12 +31,9 @@ function onError(e: any) {
 
 interface Props {
   userId: string;
-  hasPermission: boolean;
-  isEnterprise: boolean;
   isCallActive: boolean;
   agentIds: string[];
   userDisplayName: string;
-  agentId: number,
 }
 
 const AssistActionsPing = {
@@ -52,15 +49,17 @@ const AssistActionsPing = {
 
 function AssistActions({
   userId,
-  hasPermission,
-  isEnterprise,
   isCallActive,
   agentIds,
-  userDisplayName,
-  agentId,
 }: Props) {
   // @ts-ignore ???
   const { player, store } = React.useContext<ILivePlayerContext>(PlayerContext);
+  const { sessionStore, userStore } = useStore();
+  const permissions = userStore.account.permissions || [];
+  const hasPermission = permissions.includes('ASSIST_CALL') || permissions.includes('SERVICE_ASSIST_CALL');
+  const isEnterprise = userStore.isEnterprise;
+  const agentId = userStore.account.id;
+  const userDisplayName = sessionStore.current.userDisplayName;
 
   const {
     assistManager: {
@@ -289,14 +288,4 @@ function AssistActions({
   );
 }
 
-const con = connect((state: any) => {
-  const permissions = state.getIn(['user', 'account', 'permissions']) || [];
-  return {
-    hasPermission: permissions.includes('ASSIST_CALL') || permissions.includes('SERVICE_ASSIST_CALL'),
-    isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
-    userDisplayName: state.getIn(['sessions', 'current']).userDisplayName,
-    agentId: state.getIn(['user', 'account', 'id'])
-  };
-});
-
-export default con(observer(AssistActions));
+export default observer(AssistActions);
diff --git a/frontend/app/components/Assist/components/SessionList/SessionList.tsx b/frontend/app/components/Assist/components/SessionList/SessionList.tsx
index 6fd78da60..2bf5d2ecc 100644
--- a/frontend/app/components/Assist/components/SessionList/SessionList.tsx
+++ b/frontend/app/components/Assist/components/SessionList/SessionList.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
-import { connect } from 'react-redux';
-import { fetchLiveList } from 'Duck/sessions';
+import { observer } from 'mobx-react-lite'
+import { useStore } from 'App/mstore';
 import { Loader, NoContent, Label } from 'UI';
 import SessionItem from 'Shared/SessionItem';
 import { useModal } from 'App/components/Modal';
@@ -11,16 +11,20 @@ interface Props {
     list: any;
     session: any;
     userId: any;
-    fetchLiveList: (params: any) => void;
 }
 function SessionList(props: Props) {
     const { hideModal } = useModal();
+    const { sessionStore } = useStore();
+    const fetchLiveList = sessionStore.fetchLiveSessions;
+    const session = sessionStore.current;
+    const list = sessionStore.liveSessions.filter((i: any) => i.userId === session.userId && i.sessionId !== session.sessionId);
+    const loading = sessionStore.loadingLiveSessions;
     useEffect(() => {
         const params: any = {};
         if (props.session.userId) {
             params.userId = props.session.userId;
         }
-        props.fetchLiveList(params);
+        void fetchLiveList(params);
     }, []);
 
     return (
@@ -33,9 +37,9 @@ function SessionList(props: Props) {
                     {props.userId}'s <span className="color-gray-medium">Live Sessions</span>{' '}
                 </div>
             </div>
-            <Loader loading={props.loading}>
+            <Loader loading={loading}>
                 <NoContent
-                    show={!props.loading && props.list.length === 0}
+                    show={!loading && list.length === 0}
                     title={
                         <div className="flex items-center justify-center flex-col">
                             <AnimatedSVG name={ICONS.NO_LIVE_SESSIONS} size={60} />
@@ -45,7 +49,7 @@ function SessionList(props: Props) {
                     }
                 >
                     <div className="p-4">
-                        {props.list.map((session: any) => (
+                        {list.map((session: any) => (
                             <div className="mb-6" key={session.sessionId}>
                                 {session.pageTitle && session.pageTitle !== '' && (
                                     <div className="flex items-center mb-2">
@@ -65,14 +69,4 @@ function SessionList(props: Props) {
     );
 }
 
-export default connect(
-    (state: any) => {
-        const session = state.getIn(['sessions', 'current']);
-        return {
-            session,
-            list: state.getIn(['sessions', 'liveSessions']).filter((i: any) => i.userId === session.userId && i.sessionId !== session.sessionId),
-            loading: state.getIn(['sessions', 'fetchLiveListRequest', 'loading']),
-        };
-    },
-    { fetchLiveList }
-)(SessionList);
+export default observer(SessionList);
diff --git a/frontend/app/components/Client/CustomFields/CustomFieldForm.js b/frontend/app/components/Client/CustomFields/CustomFieldForm.js
index 4f2d1e278..b988c89e2 100644
--- a/frontend/app/components/Client/CustomFields/CustomFieldForm.js
+++ b/frontend/app/components/Client/CustomFields/CustomFieldForm.js
@@ -55,7 +55,7 @@ const CustomFieldForm = ({ field, saving, errors, edit, save, onSave, onClose, o
 const mapStateToProps = (state) => ({
   field: state.getIn(['customFields', 'instance']),
   saving: state.getIn(['customFields', 'saveRequest', 'loading']),
-  errors: state.getIn(['customFields', 'saveRequest', 'errors']),
+  errors: state.getIn(['customFields', 'saveRequest', 'errors'])
 });
 
 export default connect(mapStateToProps, { edit, save })(CustomFieldForm);
diff --git a/frontend/app/components/Client/CustomFields/CustomFieldForm.tsx b/frontend/app/components/Client/CustomFields/CustomFieldForm.tsx
new file mode 100644
index 000000000..577153da2
--- /dev/null
+++ b/frontend/app/components/Client/CustomFields/CustomFieldForm.tsx
@@ -0,0 +1,92 @@
+import React, { useRef, useState } from 'react';
+import { Form, Input, confirm } from 'UI';
+import styles from './customFieldForm.module.css';
+import { useStore } from 'App/mstore';
+import { useModal } from 'Components/Modal';
+import { toast } from 'react-toastify';
+import { Button } from 'antd';
+import { Trash } from 'UI/Icons';
+import { observer } from 'mobx-react-lite';
+
+interface CustomFieldFormProps {
+  siteId: string;
+}
+
+const CustomFieldForm: React.FC<CustomFieldFormProps> = ({ siteId }) => {
+  console.log('siteId', siteId);
+  const focusElementRef = useRef<HTMLInputElement>(null);
+  const { customFieldStore: store } = useStore();
+  const field = store.instance;
+  const { hideModal } = useModal();
+  const [loading, setLoading] = useState(false);
+
+  const write = ({ target: { value, name } }: any) => store.edit({ [name]: value });
+  const exists = field?.exists();
+
+  const onDelete = async () => {
+    if (
+      await confirm({
+        header: 'Metadata',
+        confirmation: `Are you sure you want to remove?`
+      })
+    ) {
+      store.remove(siteId, field?.index!).then(() => {
+        hideModal();
+      });
+    }
+  };
+
+  const onSave = (field: any) => {
+    setLoading(true);
+    store.save(siteId, field).then((response) => {
+      if (!response || !response.errors || response.errors.size === 0) {
+        hideModal();
+        toast.success('Metadata added successfully!');
+      } else {
+        toast.error(response.errors[0]);
+      }
+    }).finally(() => {
+      setLoading(false);
+    });
+  };
+
+  return (
+    <div className="bg-white h-screen overflow-y-auto">
+      <h3 className="p-5 text-2xl">{exists ? 'Update' : 'Add'} Metadata Field</h3>
+      <Form className={styles.wrapper}>
+        <Form.Field>
+          <label>{'Field Name'}</label>
+          <Input
+            ref={focusElementRef}
+            name="key"
+            value={field?.key}
+            onChange={write}
+            placeholder="Field Name"
+            maxLength={50}
+          />
+        </Form.Field>
+
+        <div className="flex justify-between">
+          <div className="flex items-center">
+            <Button
+              onClick={() => onSave(field)}
+              disabled={!field?.validate()}
+              loading={loading}
+              type="primary"
+              className="float-left mr-2"
+            >
+              {exists ? 'Update' : 'Add'}
+            </Button>
+            <Button data-hidden={!exists} onClick={hideModal}>
+              {'Cancel'}
+            </Button>
+          </div>
+
+          <Button type="text" icon={<Trash />} data-hidden={!exists} onClick={onDelete}></Button>
+        </div>
+      </Form>
+    </div>
+  );
+};
+
+export default observer(CustomFieldForm);
diff --git a/frontend/app/components/Client/CustomFields/CustomFields.js b/frontend/app/components/Client/CustomFields/CustomFields.js
index a525094f3..1b800095a 100644
--- a/frontend/app/components/Client/CustomFields/CustomFields.js
+++ b/frontend/app/components/Client/CustomFields/CustomFields.js
@@ -14,124 +14,124 @@ import { useModal } from 'App/components/Modal';
 import { toast } from 'react-toastify';
 
 function CustomFields(props) {
-    const [currentSite, setCurrentSite] = React.useState(props.sites.get(0));
-    const [deletingItem, setDeletingItem] = React.useState(null);
-    const { showModal, hideModal } = useModal();
+  const [currentSite, setCurrentSite] = React.useState(props.sites.get(0));
+  const [deletingItem, setDeletingItem] = React.useState(null);
+  const { showModal, hideModal } = useModal();
 
-    useEffect(() => {
-        const activeSite = props.sites.get(0);
-        if (!activeSite) return;
+  useEffect(() => {
+    const activeSite = props.sites.get(0);
+    if (!activeSite) return;
 
-        props.fetchList(activeSite.id);
-    }, []);
+    props.fetchList(activeSite.id);
+  }, []);
 
-    const save = (field) => {
-        props.save(currentSite.id, field).then((response) => {
-            if (!response || !response.errors || response.errors.size === 0) {
-                hideModal();
-                toast.success('Metadata added successfully!');
-            } else {
-                toast.error(response.errors[0]);
-            }
+  const save = (field) => {
+    props.save(currentSite.id, field).then((response) => {
+      if (!response || !response.errors || response.errors.size === 0) {
+        hideModal();
+        toast.success('Metadata added successfully!');
+      } else {
+        toast.error(response.errors[0]);
+      }
+    });
+  };
+
+  const init = (field) => {
+    props.init(field);
+    showModal(<CustomFieldForm onClose={hideModal} onSave={save} onDelete={() => removeMetadata(field)} />);
+  };
+
+  const onChangeSelect = ({ value }) => {
+    const site = props.sites.find((s) => s.id === value.value);
+    setCurrentSite(site);
+    props.fetchList(site.id);
+  };
+
+  const removeMetadata = async (field) => {
+    if (
+      await confirm({
+        header: 'Metadata',
+        confirmation: `Are you sure you want to remove?`
+      })
+    ) {
+      setDeletingItem(field.index);
+      props
+        .remove(currentSite.id, field.index)
+        .then(() => {
+          hideModal();
+        })
+        .finally(() => {
+          setDeletingItem(null);
         });
-    };
+    }
+  };
 
-    const init = (field) => {
-        props.init(field);
-        showModal(<CustomFieldForm onClose={hideModal} onSave={save} onDelete={() => removeMetadata(field)} />);
-    };
-
-    const onChangeSelect = ({ value }) => {
-        const site = props.sites.find((s) => s.id === value.value);
-        setCurrentSite(site);
-        props.fetchList(site.id);
-    };
-
-    const removeMetadata = async (field) => {
-        if (
-            await confirm({
-                header: 'Metadata',
-                confirmation: `Are you sure you want to remove?`,
-            })
-        ) {
-            setDeletingItem(field.index);
-            props
-                .remove(currentSite.id, field.index)
-                .then(() => {
-                    hideModal();
-                })
-                .finally(() => {
-                    setDeletingItem(null);
-                });
-        }
-    };
-
-    const { fields, loading } = props;
-    return (
-        <div className="bg-white rounded-lg shadow-sm border p-5 ">
-            <div className={cn(styles.tabHeader)}>
-                <h3 className={cn(styles.tabTitle, 'text-2xl')}>{'Metadata'}</h3>
-                <div style={{ marginRight: '15px' }}>
-                    <SiteDropdown value={currentSite && currentSite.id} onChange={onChangeSelect} />
-                </div>
-                <div className="ml-auto">
-                <Tooltip title="You've reached the limit of 10 metadata." disabled={fields.size < 10}>
-                    <Button disabled={fields.size >= 10} variant="primary" onClick={() => init()}>Add Metadata</Button>
-                </Tooltip>
-                </div>
-            </div>
-            <div className="text-base text-disabled-text flex px-5 items-center my-3">
-                <Icon name="info-circle-fill" className="mr-2" size={16} />
-                See additonal user information in sessions.
-                <a href="https://docs.openreplay.com/installation/metadata" className="link ml-1" target="_blank">Learn more</a>
-            </div>
-
-            <Loader loading={loading}>
-                <NoContent
-                    title={
-                        <div className="flex flex-col items-center justify-center">
-                            <AnimatedSVG name={ICONS.NO_METADATA} size={60} />
-                            {/* <div className="mt-4" /> */}
-                            <div className="text-center my-4">None added yet</div>
-                        </div>
-                    }
-                    size="small"
-                    show={fields.size === 0}
-                >
-                    <div className={styles.list}>
-                        {fields
-                            .filter((i) => i.index)
-                            .map((field) => (
-                                <>
-                                    <ListItem
-                                      disabled={deletingItem && deletingItem === field.index}
-                                      key={field._key}
-                                      field={field}
-                                      onEdit={init}
-                                      // onDelete={ () => removeMetadata(field) }
-                                    />
-                                    <Divider className="m-0" />
-                                </>
-                            ))}
-                    </div>
-                </NoContent>
-            </Loader>
+  const { fields, loading } = props;
+  return (
+    <div className="bg-white rounded-lg shadow-sm border p-5 ">
+      <div className={cn(styles.tabHeader)}>
+        <h3 className={cn(styles.tabTitle, 'text-2xl')}>{'Metadata'}</h3>
+        <div style={{ marginRight: '15px' }}>
+          <SiteDropdown value={currentSite && currentSite.id} onChange={onChangeSelect} />
         </div>
-    );
+        <div className="ml-auto">
+          <Tooltip title="You've reached the limit of 10 metadata." disabled={fields.size < 10}>
+            <Button disabled={fields.size >= 10} variant="primary" onClick={() => init()}>Add Metadata</Button>
+          </Tooltip>
+        </div>
+      </div>
+      <div className="text-base text-disabled-text flex px-5 items-center my-3">
+        <Icon name="info-circle-fill" className="mr-2" size={16} />
+        See additonal user information in sessions.
+        <a href="https://docs.openreplay.com/installation/metadata" className="link ml-1" target="_blank">Learn more</a>
+      </div>
+
+      <Loader loading={loading}>
+        <NoContent
+          title={
+            <div className="flex flex-col items-center justify-center">
+              <AnimatedSVG name={ICONS.NO_METADATA} size={60} />
+              {/* <div className="mt-4" /> */}
+              <div className="text-center my-4">None added yet</div>
+            </div>
+          }
+          size="small"
+          show={fields.size === 0}
+        >
+          <div className={styles.list}>
+            {fields
+              .filter((i) => i.index)
+              .map((field) => (
+                <>
+                  <ListItem
+                    disabled={deletingItem && deletingItem === field.index}
+                    key={field._key}
+                    field={field}
+                    onEdit={init}
+                    // onDelete={ () => removeMetadata(field) }
+                  />
+                  <Divider className="m-0" />
+                </>
+              ))}
+          </div>
+        </NoContent>
+      </Loader>
+    </div>
+  );
 }
 
 export default connect(
-    (state) => ({
-        fields: state.getIn(['customFields', 'list']).sortBy((i) => i.index),
-        field: state.getIn(['customFields', 'instance']),
-        loading: state.getIn(['customFields', 'fetchRequest', 'loading']),
-        sites: state.getIn(['site', 'list']),
-        errors: state.getIn(['customFields', 'saveRequest', 'errors']),
-    }),
-    {
-        init,
-        fetchList,
-        save,
-        remove,
-    }
+  (state) => ({
+    fields: state.getIn(['customFields', 'list']).sortBy((i) => i.index),
+    field: state.getIn(['customFields', 'instance']),
+    loading: state.getIn(['customFields', 'fetchRequest', 'loading']),
+    sites: state.getIn(['site', 'list']),
+    errors: state.getIn(['customFields', 'saveRequest', 'errors'])
+  }),
+  {
+    init,
+    fetchList,
+    save,
+    remove
+  }
 )(withPageTitle('Metadata - OpenReplay Preferences')(CustomFields));
diff --git a/frontend/app/components/Client/CustomFields/CustomFields.tsx b/frontend/app/components/Client/CustomFields/CustomFields.tsx
new file mode 100644
index 000000000..e4152911e
--- /dev/null
+++ b/frontend/app/components/Client/CustomFields/CustomFields.tsx
@@ -0,0 +1,108 @@
+import React, { useEffect, useState } from 'react';
+import cn from 'classnames';
+import withPageTitle from 'HOCs/withPageTitle';
+import { Button, Loader, NoContent, Icon, Tooltip, Divider } from 'UI';
+import SiteDropdown from 'Shared/SiteDropdown';
+import styles from './customFields.module.css';
+import CustomFieldForm from './CustomFieldForm';
+import ListItem from './ListItem';
+import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
+import { useModal } from 'App/components/Modal';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
+
+const CustomFields = () => {
+  const { customFieldStore: store, projectsStore } = useStore();
+  const sites = projectsStore.list;
+  const [currentSite, setCurrentSite] = useState(sites[0]);
+  const [deletingItem, setDeletingItem] = useState<number | null>(null);
+  const { showModal, hideModal } = useModal();
+  const fields = store.list;
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const activeSite = sites[0];
+    if (!activeSite) return;
+
+    setCurrentSite(activeSite);
+
+    setLoading(true);
+    store.fetchList(activeSite.id).finally(() => {
+      setLoading(false);
+    });
+  }, [sites]);
+
+  const handleInit = (field?: any) => {
+    console.log('field', field);
+    store.init(field);
+    showModal(<CustomFieldForm siteId={currentSite.id} />, {
+      title: field ? 'Edit Metadata' : 'Add Metadata', right: true
+    });
+  };
+
+  const onChangeSelect = ({ value }: { value: { value: number } }) => {
+    const site = sites.find((s: any) => s.id === value.value);
+    setCurrentSite(site);
+
+    setLoading(true);
+    store.fetchList(site.id).finally(() => {
+      setLoading(false);
+    });
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow-sm border p-5">
+      <div className={cn(styles.tabHeader)}>
+        <h3 className={cn(styles.tabTitle, 'text-2xl')}>{'Metadata'}</h3>
+        <div style={{ marginRight: '15px' }}>
+          <SiteDropdown value={currentSite && currentSite.id} onChange={onChangeSelect} />
+        </div>
+        <div className="ml-auto">
+          <Tooltip title="You've reached the limit of 10 metadata." disabled={fields.length < 10}>
+            <Button disabled={fields.length >= 10} variant="primary" onClick={() => handleInit()}>
+              Add Metadata
+            </Button>
+          </Tooltip>
+        </div>
+      </div>
+      <div className="text-base text-disabled-text flex px-5 items-center my-3">
+        <Icon name="info-circle-fill" className="mr-2" size={16} />
+        See additional user information in sessions.
+        <a href="https://docs.openreplay.com/installation/metadata" className="link ml-1" target="_blank">
+          Learn more
+        </a>
+      </div>
+
+      <Loader loading={loading}>
+        <NoContent
+          title={
+            <div className="flex flex-col items-center justify-center">
+              <AnimatedSVG name={ICONS.NO_METADATA} size={60} />
+              <div className="text-center my-4">None added yet</div>
+            </div>
+          }
+          size="small"
+          show={fields.length === 0}
+        >
+          <div className={styles.list}>
+            {fields
+              .filter((i: any) => i.index)
+              .map((field: any) => (
+                <>
+                  <ListItem
+                    disabled={deletingItem !== null && deletingItem === field.index}
+                    key={field._key}
+                    field={field}
+                    onEdit={handleInit}
+                  />
+                  <Divider className="m-0" />
+                </>
+              ))}
+          </div>
+        </NoContent>
+      </Loader>
+    </div>
+  );
+};
+
+export default withPageTitle('Metadata - OpenReplay Preferences')(observer(CustomFields));
diff --git a/frontend/app/components/Client/CustomFields/ListItem.js b/frontend/app/components/Client/CustomFields/ListItem.js
index 326faa1b5..9c38e12e9 100644
--- a/frontend/app/components/Client/CustomFields/ListItem.js
+++ b/frontend/app/components/Client/CustomFields/ListItem.js
@@ -4,23 +4,23 @@ import { Button } from 'UI';
 import styles from './listItem.module.css';
 
 const ListItem = ({ field, onEdit, disabled }) => {
-    return (
-        <div
-            className={cn(
-                'group hover:bg-active-blue flex items-center justify-between py-3 px-5 cursor-pointer',
-                field.index === 0 ? styles.preDefined : '',
-                {
-                    [styles.disabled]: disabled,
-                }
-            )}
-            onClick={() => field.index != 0 && onEdit(field)}
-        >
-            <span>{field.key}</span>
-            <div className="invisible group-hover:visible" data-hidden={field.index === 0}>
-                <Button variant="text-primary" icon="pencil" />
-            </div>
-        </div>
-    );
+  return (
+    <div
+      className={cn(
+        'group hover:bg-active-blue flex items-center justify-between py-3 px-5 cursor-pointer',
+        field.index === 0 ? styles.preDefined : '',
+        {
+          [styles.disabled]: disabled
+        }
+      )}
+      onClick={() => field.index !== 0 && onEdit(field)}
+    >
+      <span>{field.key}</span>
+      <div className="invisible group-hover:visible" data-hidden={field.index === 0}>
+        <Button variant="text-primary" icon="pencil" />
+      </div>
+    </div>
+  );
 };
 
 export default ListItem;
diff --git a/frontend/app/components/Client/Integrations/AssistDoc/AssistDoc.js b/frontend/app/components/Client/Integrations/AssistDoc/AssistDoc.js
index dd94f90e6..1165af6ec 100644
--- a/frontend/app/components/Client/Integrations/AssistDoc/AssistDoc.js
+++ b/frontend/app/components/Client/Integrations/AssistDoc/AssistDoc.js
@@ -1,10 +1,11 @@
+import { useStore } from "App/mstore";
 import React from 'react';
 import DocLink from 'Shared/DocLink/DocLink';
 import AssistScript from './AssistScript';
 import AssistNpm from './AssistNpm';
 import { Tabs, CodeBlock } from 'UI';
 import { useState } from 'react';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react-lite'
 
 const NPM = 'NPM';
 const SCRIPT = 'SCRIPT';
@@ -13,8 +14,11 @@ const TABS = [
     { key: NPM, text: NPM },
 ];
 
-const AssistDoc = (props) => {
-    const { projectKey } = props;
+const AssistDoc = () => {
+    const { integrationsStore, projectsStore } = useStore();
+    const sites = projectsStore.list;
+    const siteId = integrationsStore.integrations.siteId
+    const projectKey = siteId ? sites.find((site) => site.id === siteId)?.projectKey : sites[0]?.projectKey
     const [activeTab, setActiveTab] = useState(SCRIPT);
 
     const renderActiveTab = () => {
@@ -53,10 +57,4 @@ const AssistDoc = (props) => {
 
 AssistDoc.displayName = 'AssistDoc';
 
-export default connect((state) => {
-    const siteId = state.getIn(['integrations', 'siteId']);
-    const sites = state.getIn(['site', 'list']);
-    return {
-      projectKey: sites.find((site) => site.get('id') === siteId).get('projectKey'),
-    };
-})(AssistDoc);
+export default observer(AssistDoc);
diff --git a/frontend/app/components/Client/Integrations/BugsnagForm/BugsnagForm.js b/frontend/app/components/Client/Integrations/BugsnagForm/BugsnagForm.js
index f58154f91..780067755 100644
--- a/frontend/app/components/Client/Integrations/BugsnagForm/BugsnagForm.js
+++ b/frontend/app/components/Client/Integrations/BugsnagForm/BugsnagForm.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { tokenRE } from 'Types/integrations/bugsnagConfig';
 import IntegrationForm from '../IntegrationForm';
-import ProjectListDropdown from './ProjectListDropdown';
+// import ProjectListDropdown from './ProjectListDropdown';
 import DocLink from 'Shared/DocLink/DocLink';
 import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
 
@@ -31,7 +31,7 @@ const BugsnagForm = (props) => (
           key: 'bugsnagProjectId',
           label: 'Project',
           checkIfDisplayed: (config) => tokenRE.test(config.authorizationToken),
-          component: ProjectListDropdown
+          // component: ProjectListDropdown
         }
       ]}
     />
diff --git a/frontend/app/components/Client/Integrations/BugsnagForm/ProjectListDropdown.js b/frontend/app/components/Client/Integrations/BugsnagForm/ProjectListDropdown.js
index c30b57953..85dc8cf92 100644
--- a/frontend/app/components/Client/Integrations/BugsnagForm/ProjectListDropdown.js
+++ b/frontend/app/components/Client/Integrations/BugsnagForm/ProjectListDropdown.js
@@ -1,17 +1,20 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { tokenRE } from 'Types/integrations/bugsnagConfig';
-import { edit } from 'Duck/integrations/actions';
 import Select from 'Shared/Select';
 import { withRequest } from 'HOCs';
 
+function ProjectListDropdown(props) {
+
+}
+
 @connect(state => ({
 	token: state.getIn([ 'bugsnag', 'instance', 'authorizationToken' ])
-}), { edit })
+}))
 @withRequest({
 	dataName: "projects",
 	initialData: [],
-	dataWrapper: (data = [], prevData) => {
+	dataWrapper: (data = []) => {
 		if (!Array.isArray(data)) throw new Error('Wrong responce format.');
 		const withOrgName = data.length > 1;
 		return data.reduce((accum, { name: orgName, projects }) => {
@@ -35,15 +38,7 @@ export default class ProjectListDropdown extends React.PureComponent {
 		if (!tokenRE.test(token)) return;
 		this.props.fetchProjectList({
 			authorizationToken: token,
-		}).then(() => {
-			const { value, projects } = this.props;
-			const values = projects.map(p => p.id);
-			if (!values.includes(value) && values.length > 0) {
-				this.props.edit("bugsnag", {
-					projectId: values[0],
-				});
-			}
-		});
+		})
 	}
 	componentDidUpdate(prevProps) {
 		if (prevProps.token !== this.props.token) {
diff --git a/frontend/app/components/Client/Integrations/CloudwatchForm/CloudwatchForm.js b/frontend/app/components/Client/Integrations/CloudwatchForm/CloudwatchForm.js
index ca4e6ae3b..003545e23 100644
--- a/frontend/app/components/Client/Integrations/CloudwatchForm/CloudwatchForm.js
+++ b/frontend/app/components/Client/Integrations/CloudwatchForm/CloudwatchForm.js
@@ -1,41 +1,53 @@
+import {
+  ACCESS_KEY_ID_LENGTH,
+  SECRET_ACCESS_KEY_LENGTH,
+} from 'Types/integrations/cloudwatchConfig';
 import React from 'react';
-import { ACCESS_KEY_ID_LENGTH, SECRET_ACCESS_KEY_LENGTH } from 'Types/integrations/cloudwatchConfig';
+
+import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
+
+import DocLink from 'Shared/DocLink/DocLink';
+
 import IntegrationForm from '../IntegrationForm';
 import LogGroupDropdown from './LogGroupDropdown';
 import RegionDropdown from './RegionDropdown';
-import DocLink from 'Shared/DocLink/DocLink';
-import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
 
 const CloudwatchForm = (props) => (
-  <div className='bg-white h-screen overflow-y-auto' style={{ width: '350px' }}>
-    <IntegrationModalCard title='Cloud Watch' icon='integrations/aws'
-                          description='Integrate CloudWatch to see backend logs and errors alongside session replay.' />
-    <div className='p-5 border-b mb-4'>
-      <div className='font-medium mb-1'>How it works?</div>
+  <div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
+    <IntegrationModalCard
+      title="Cloud Watch"
+      icon="integrations/aws"
+      description="Integrate CloudWatch to see backend logs and errors alongside session replay."
+    />
+    <div className="p-5 border-b mb-4">
+      <div className="font-medium mb-1">How it works?</div>
       <ol className="list-decimal list-inside">
         <li>Create a Service Account</li>
         <li>Enter the details below</li>
         <li>Propagate openReplaySessionToken</li>
       </ol>
-      <DocLink className='mt-4' label='Integrate CloudWatch'
-               url='https://docs.openreplay.com/integrations/cloudwatch' />
+      <DocLink
+        className="mt-4"
+        label="Integrate CloudWatch"
+        url="https://docs.openreplay.com/integrations/cloudwatch"
+      />
     </div>
     <IntegrationForm
       {...props}
-      name='cloudwatch'
+      name="cloudwatch"
       formFields={[
         {
           key: 'awsAccessKeyId',
-          label: 'AWS Access Key ID'
+          label: 'AWS Access Key ID',
         },
         {
           key: 'awsSecretAccessKey',
-          label: 'AWS Secret Access Key'
+          label: 'AWS Secret Access Key',
         },
         {
           key: 'region',
           label: 'Region',
-          component: RegionDropdown
+          component: RegionDropdown,
         },
         {
           key: 'logGroupName',
@@ -44,8 +56,8 @@ const CloudwatchForm = (props) => (
           checkIfDisplayed: (config) =>
             config.awsSecretAccessKey.length === SECRET_ACCESS_KEY_LENGTH &&
             config.region !== '' &&
-            config.awsAccessKeyId.length === ACCESS_KEY_ID_LENGTH
-        }
+            config.awsAccessKeyId.length === ACCESS_KEY_ID_LENGTH,
+        },
       ]}
     />
   </div>
diff --git a/frontend/app/components/Client/Integrations/CloudwatchForm/LogGroupDropdown.js b/frontend/app/components/Client/Integrations/CloudwatchForm/LogGroupDropdown.js
index d1d306244..ce2c85e3a 100644
--- a/frontend/app/components/Client/Integrations/CloudwatchForm/LogGroupDropdown.js
+++ b/frontend/app/components/Client/Integrations/CloudwatchForm/LogGroupDropdown.js
@@ -1,77 +1,93 @@
-import React from 'react';
-import { connect } from 'react-redux';
+import React, { useState, useEffect, useCallback } from 'react';
 import { ACCESS_KEY_ID_LENGTH, SECRET_ACCESS_KEY_LENGTH } from 'Types/integrations/cloudwatchConfig';
-import { edit } from 'Duck/integrations/actions';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 import Select from 'Shared/Select';
-import { withRequest } from 'HOCs';
+import { integrationsService } from "App/services";
 
-@connect(state => ({
-	config: state.getIn([ 'cloudwatch', 'instance' ])
-}), { edit })
-@withRequest({
-	dataName: "values",
-	initialData: [],
-	resetBeforeRequest: true,
-	requestName: "fetchLogGroups",
-	endpoint: '/integrations/cloudwatch/list_groups',
-	method: 'POST',
-})
-export default class LogGroupDropdown extends React.PureComponent {
-	constructor(props) {
-		super(props);
-		this.fetchLogGroups()
-	}
-	fetchLogGroups() {
-		const { config } = this.props;
-		if (config.region === "" ||
-			config.awsSecretAccessKey.length !== SECRET_ACCESS_KEY_LENGTH ||
-			config.awsAccessKeyId.length !== ACCESS_KEY_ID_LENGTH
-		) return;
-		this.props.fetchLogGroups({
-			region: config.region,
-			awsSecretAccessKey: config.awsSecretAccessKey,
-			awsAccessKeyId: config.awsAccessKeyId,
-		}).then(() => {
-			const { value, values, name } = this.props;
-			if (!values.includes(value) && values.length > 0) {
-				this.props.edit("cloudwatch", {
-					[ name ]: values[0],
-				});
-			}
-		});
-	}
-	componentDidUpdate(prevProps) {
-		const { config } = this.props;
-		if (prevProps.config.region !== config.region ||
-			prevProps.config.awsSecretAccessKey !== config.awsSecretAccessKey ||
-			prevProps.config.awsAccessKeyId !== config.awsAccessKeyId) {
-			this.fetchLogGroups();
+const LogGroupDropdown = (props) => {
+	const { integrationsStore } = useStore();
+	const config = integrationsStore.cloudwatch.instance;
+	const edit = integrationsStore.cloudwatch.edit;
+	const {
+		value,
+		name,
+		placeholder,
+		onChange,
+	} = props;
+
+	const [values, setValues] = useState([]);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(false);
+
+	const { region, awsSecretAccessKey, awsAccessKeyId } = config;
+
+	const fetchLogGroups = useCallback(() => {
+		if (
+			region === '' ||
+			awsSecretAccessKey.length !== SECRET_ACCESS_KEY_LENGTH ||
+			awsAccessKeyId.length !== ACCESS_KEY_ID_LENGTH
+		) {
+			return;
 		}
-	}
-	onChange = (target) => {
-		if (typeof this.props.onChange === 'function') {
-			this.props.onChange({ target });
+
+		setLoading(true);
+		setError(false);
+		setValues([]); // Reset values before request
+
+		const params = {
+			region: region,
+			awsSecretAccessKey: awsSecretAccessKey,
+			awsAccessKeyId: awsAccessKeyId,
+		};
+
+		integrationsService.client
+			.post('/integrations/cloudwatch/list_groups', params)
+			.then((response) => response.json())
+			.then(({ errors, data }) => {
+				if (errors) {
+					setError(true);
+					setLoading(false);
+					return;
+				}
+				setValues(data);
+				setLoading(false);
+
+				// If current value is not in the new values list, update it
+				if (!data.includes(value) && data.length > 0) {
+					edit({
+						[name]: data[0],
+					});
+				}
+			})
+			.catch(() => {
+				setError(true);
+				setLoading(false);
+			});
+	}, [region, awsSecretAccessKey, awsAccessKeyId, value, name, edit]);
+
+	// Fetch log groups on mount and when config changes
+	useEffect(() => {
+		fetchLogGroups();
+	}, [fetchLogGroups]);
+
+	const handleChange = (target) => {
+		if (typeof onChange === 'function') {
+			onChange({ target });
 		}
-	}
-	render() {
-		const { 
-			values,
-			name,
-			value,
-			placeholder,
-			loading,
-		} = this.props;
-		const options = values.map(g => ({ text: g, value: g }));
-		return (
-			<Select
-				// selection
-				options={ options }
-				name={ name }
-				value={ options.find(o => o.value === value) }
-				placeholder={ placeholder }
-				onChange={ this.onChange }
-				loading={ loading }
-			/>
-		);
-	}
-}
\ No newline at end of file
+	};
+
+	const options = values.map((g) => ({ text: g, value: g }));
+	return (
+		<Select
+			options={options}
+			name={name}
+			value={options.find((o) => o.value === value)}
+			placeholder={placeholder}
+			onChange={handleChange}
+			loading={loading}
+		/>
+	);
+};
+
+export default observer(LogGroupDropdown);
diff --git a/frontend/app/components/Client/Integrations/ElasticsearchForm.js b/frontend/app/components/Client/Integrations/ElasticsearchForm.js
index 2c30cea47..8c5c3d7f6 100644
--- a/frontend/app/components/Client/Integrations/ElasticsearchForm.js
+++ b/frontend/app/components/Client/Integrations/ElasticsearchForm.js
@@ -1,97 +1,64 @@
 import React from 'react';
-import { connect } from 'react-redux';
-import IntegrationForm from './IntegrationForm';
-import { withRequest } from 'HOCs';
-import { edit } from 'Duck/integrations/actions';
-import DocLink from 'Shared/DocLink/DocLink';
 import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
 
-@connect(
-  (state) => ({
-    config: state.getIn(['elasticsearch', 'instance'])
-  }),
-  { edit }
-)
-@withRequest({
-  dataName: 'isValid',
-  initialData: false,
-  dataWrapper: (data) => data.state,
-  requestName: 'validateConfig',
-  endpoint: '/integrations/elasticsearch/test',
-  method: 'POST'
-})
-export default class ElasticsearchForm extends React.PureComponent {
-  componentWillReceiveProps(newProps) {
-    const {
-      config: { host, port, apiKeyId, apiKey }
-    } = this.props;
-    const { loading, config } = newProps;
-    const valuesChanged = host !== config.host || port !== config.port || apiKeyId !== config.apiKeyId || apiKey !== config.apiKey;
-    if (!loading && valuesChanged && newProps.config.validateKeys() && newProps) {
-      this.validateConfig(newProps);
-    }
-  }
+import DocLink from 'Shared/DocLink/DocLink';
 
-  validateConfig = (newProps) => {
-    const { config } = newProps;
-    this.props
-      .validateConfig({
-        host: config.host,
-        port: config.port,
-        apiKeyId: config.apiKeyId,
-        apiKey: config.apiKey
-      })
-      .then((res) => {
-        const { isValid } = this.props;
-        this.props.edit('elasticsearch', { isValid: isValid });
-      });
-  };
+import IntegrationForm from './IntegrationForm';
 
-  render() {
-    const props = this.props;
-    return (
-      <div className='bg-white h-screen overflow-y-auto' style={{ width: '350px' }}>
-        <IntegrationModalCard title='Elasticsearch' icon='integrations/elasticsearch'
-                              description='Integrate Elasticsearch with session replays to seamlessly observe backend errors.' />
+const ElasticsearchForm = (props) => {
+  return (
+    <div
+      className="bg-white h-screen overflow-y-auto"
+      style={{ width: '350px' }}
+    >
+      <IntegrationModalCard
+        title="Elasticsearch"
+        icon="integrations/elasticsearch"
+        description="Integrate Elasticsearch with session replays to seamlessly observe backend errors."
+      />
 
-        <div className='p-5 border-b mb-4'>
-          <div className='font-medium mb-1'>How it works?</div>
-          <ol className="list-decimal list-inside">
-            <li>Create a new Elastic API key</li>
-            <li>Enter the API key below</li>
-            <li>Propagate openReplaySessionToken</li>
-          </ol>
-          <DocLink className='mt-4' label='Integrate Elasticsearch'
-                   url='https://docs.openreplay.com/integrations/elastic' />
-        </div>
-        <IntegrationForm
-          {...props}
-          name='elasticsearch'
-          formFields={[
-            {
-              key: 'host',
-              label: 'Host'
-            },
-            {
-              key: 'apiKeyId',
-              label: 'API Key ID'
-            },
-            {
-              key: 'apiKey',
-              label: 'API Key'
-            },
-            {
-              key: 'indexes',
-              label: 'Indexes'
-            },
-            {
-              key: 'port',
-              label: 'Port',
-              type: 'number'
-            }
-          ]}
+      <div className="p-5 border-b mb-4">
+        <div className="font-medium mb-1">How it works?</div>
+        <ol className="list-decimal list-inside">
+          <li>Create a new Elastic API key</li>
+          <li>Enter the API key below</li>
+          <li>Propagate openReplaySessionToken</li>
+        </ol>
+        <DocLink
+          className="mt-4"
+          label="Integrate Elasticsearch"
+          url="https://docs.openreplay.com/integrations/elastic"
         />
       </div>
-    );
-  }
-}
+      <IntegrationForm
+        {...props}
+        name="elasticsearch"
+        formFields={[
+          {
+            key: 'host',
+            label: 'Host',
+          },
+          {
+            key: 'apiKeyId',
+            label: 'API Key ID',
+          },
+          {
+            key: 'apiKey',
+            label: 'API Key',
+          },
+          {
+            key: 'indexes',
+            label: 'Indexes',
+          },
+          {
+            key: 'port',
+            label: 'Port',
+            type: 'number',
+          },
+        ]}
+      />
+    </div>
+  );
+};
+
+export default ElasticsearchForm;
diff --git a/frontend/app/components/Client/Integrations/GraphQLDoc/GraphQLDoc.js b/frontend/app/components/Client/Integrations/GraphQLDoc/GraphQLDoc.js
index 18c78d368..2b7bb916a 100644
--- a/frontend/app/components/Client/Integrations/GraphQLDoc/GraphQLDoc.js
+++ b/frontend/app/components/Client/Integrations/GraphQLDoc/GraphQLDoc.js
@@ -1,11 +1,15 @@
+import { useStore } from "App/mstore";
 import React from 'react';
 import { CodeBlock } from "UI";
 import DocLink from 'Shared/DocLink/DocLink';
 import ToggleContent from 'Shared/ToggleContent';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react-lite'
 
-const GraphQLDoc = (props) => {
-    const { projectKey } = props;
+const GraphQLDoc = () => {
+    const { integrationsStore, projectsStore } = useStore();
+    const sites = projectsStore.list;
+    const siteId = integrationsStore.integrations.siteId
+    const projectKey = siteId ? sites.find((site) => site.id === siteId)?.projectKey : sites[0]?.projectKey
     const usage = `import OpenReplay from '@openreplay/tracker';
 import trackerGraphQL from '@openreplay/tracker-graphql';
 //...
@@ -70,10 +74,4 @@ export const recordGraphQL = tracker.use(trackerGraphQL());`
 
 GraphQLDoc.displayName = 'GraphQLDoc';
 
-export default connect((state) => {
-    const siteId = state.getIn(['integrations', 'siteId']);
-    const sites = state.getIn(['site', 'list']);
-    return {
-      projectKey: sites.find((site) => site.get('id') === siteId).get('projectKey'),
-    };
-})(GraphQLDoc);
+export default observer(GraphQLDoc);
diff --git a/frontend/app/components/Client/Integrations/IntegrationForm.js b/frontend/app/components/Client/Integrations/IntegrationForm.js
deleted file mode 100644
index c4d634562..000000000
--- a/frontend/app/components/Client/Integrations/IntegrationForm.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { Input, Form, Button, Checkbox, Loader } from 'UI';
-import { save, init, edit, remove } from 'Duck/integrations/actions';
-import { fetchIntegrationList } from 'Duck/integrations/integrations';
-
-@connect(
-    (state, { name, customPath }) => ({
-        sites: state.getIn(['site', 'list']),
-        initialSiteId: state.getIn(['site', 'siteId']),
-        list: state.getIn([name, 'list']),
-        config: state.getIn([name, 'instance']),
-        loading: state.getIn([name, 'fetchRequest', 'loading']),
-        saving: state.getIn([customPath || name, 'saveRequest', 'loading']),
-        removing: state.getIn([name, 'removeRequest', 'loading']),
-        siteId: state.getIn(['integrations', 'siteId']),
-    }),
-    {
-        save,
-        init,
-        edit,
-        remove,
-        // fetchList,
-        fetchIntegrationList,
-    }
-)
-export default class IntegrationForm extends React.PureComponent {
-    constructor(props) {
-        super(props);
-    }
-
-    fetchList = () => {
-        const { siteId, initialSiteId } = this.props;
-        if (!siteId) {
-            this.props.fetchIntegrationList(initialSiteId);
-        } else {
-            this.props.fetchIntegrationList(siteId);
-        }
-    }
-
-    write = ({ target: { value, name: key, type, checked } }) => {
-        if (type === 'checkbox') this.props.edit(this.props.name, { [key]: checked });
-        else this.props.edit(this.props.name, { [key]: value });
-    };
-
-    // onChangeSelect = ({ value }) => {
-    //     const { sites, list, name } = this.props;
-    //     const site = sites.find((s) => s.id === value.value);
-    //     this.setState({ currentSiteId: site.id });
-    //     this.init(value.value);
-    // };
-
-    // init = (siteId) => {
-    //     const { list, name } = this.props;
-    //     const config = parseInt(siteId) > 0 ? list.find((s) => s.projectId === siteId) : undefined;
-    //     this.props.init(name, config ? config : list.first());
-    // };
-
-    save = () => {
-        const { config, name, customPath, ignoreProject } = this.props;
-        const isExists = config.exists();
-        // const { currentSiteId } = this.state;
-        this.props.save(customPath || name, !ignoreProject ? this.props.siteId : null, config).then(() => {
-            // this.props.fetchList(name);
-            this.fetchList();
-            this.props.onClose();
-            if (isExists) return;
-        });
-    };
-
-    remove = () => {
-        const { name, config, ignoreProject } = this.props;
-        this.props.remove(name, !ignoreProject ? config.projectId : null).then(() => {
-            this.props.onClose();
-            this.fetchList();
-        });
-    };
-
-    render() {
-        const { config, saving, removing, formFields, name, loading, integrated } = this.props;
-        return (
-            <Loader loading={loading}>
-                <div className="ph-20">
-                    <Form>
-                        {formFields.map(
-                            ({
-                                key,
-                                label,
-                                placeholder = label,
-                                component: Component = 'input',
-                                type = 'text',
-                                checkIfDisplayed,
-                                autoFocus = false,
-                            }) =>
-                                (typeof checkIfDisplayed !== 'function' || checkIfDisplayed(config)) &&
-                                (type === 'checkbox' ? (
-                                    <Form.Field key={key}>
-                                        <Checkbox
-                                            label={label}
-                                            name={key}
-                                            value={config[key]}
-                                            onChange={this.write}
-                                            placeholder={placeholder}
-                                            type={Component === 'input' ? type : null}
-                                        />
-                                    </Form.Field>
-                                ) : (
-                                    <Form.Field key={key}>
-                                        <label>{label}</label>
-                                        <Input
-                                            name={key}
-                                            value={config[key]}
-                                            onChange={this.write}
-                                            placeholder={placeholder}
-                                            type={Component === 'input' ? type : null}
-                                            autoFocus={autoFocus}
-                                        />
-                                    </Form.Field>
-                                ))
-                        )}
-
-                        <Button
-                            onClick={this.save}
-                            disabled={!config.validate()}
-                            loading={saving || loading}
-                            variant="primary"
-                            className="float-left mr-2"
-                        >
-                            {config.exists() ? 'Update' : 'Add'}
-                        </Button>
-
-                        {integrated && (
-                            <Button loading={removing} onClick={this.remove}>
-                                {'Delete'}
-                            </Button>
-                        )}
-                    </Form>
-                </div>
-            </Loader>
-        );
-    }
-}
diff --git a/frontend/app/components/Client/Integrations/IntegrationForm.tsx b/frontend/app/components/Client/Integrations/IntegrationForm.tsx
new file mode 100644
index 000000000..1563b9358
--- /dev/null
+++ b/frontend/app/components/Client/Integrations/IntegrationForm.tsx
@@ -0,0 +1,107 @@
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import { useStore } from 'App/mstore';
+import { namedStore } from 'App/mstore/integrationsStore';
+import { Button, Checkbox, Form, Input, Loader } from 'UI';
+
+function IntegrationForm(props: any) {
+  const { formFields, name, integrated } = props;
+  const { integrationsStore, projectsStore } = useStore();
+  const initialSiteId = projectsStore.siteId;
+  const integrationStore = integrationsStore[name as unknown as namedStore];
+  const config = integrationStore.instance;
+  const loading = integrationStore.loading;
+  const onSave = integrationStore.saveIntegration;
+  const onRemove = integrationStore.deleteIntegration;
+  const edit = integrationStore.edit;
+  const fetchIntegrationList = integrationsStore.integrations.fetchIntegrations;
+
+  const fetchList = () => {
+    void fetchIntegrationList(initialSiteId);
+  };
+
+  const write = ({ target: { value, name: key, type, checked } }) => {
+    if (type === 'checkbox') edit({ [key]: checked });
+    else edit({ [key]: value });
+  };
+
+  const save = () => {
+    const { name, customPath } = props;
+    onSave(customPath || name).then(() => {
+      fetchList();
+      props.onClose();
+    });
+  };
+
+  const remove = () => {
+    onRemove().then(() => {
+      props.onClose();
+      fetchList();
+    });
+  };
+
+  return (
+    <Loader loading={loading}>
+      <div className="ph-20">
+        <Form>
+          {formFields.map(
+            ({
+              key,
+              label,
+              placeholder = label,
+              component: Component = 'input',
+              type = 'text',
+              checkIfDisplayed,
+              autoFocus = false,
+            }) =>
+              (typeof checkIfDisplayed !== 'function' ||
+                checkIfDisplayed(config)) &&
+              (type === 'checkbox' ? (
+                <Form.Field key={key}>
+                  <Checkbox
+                    label={label}
+                    name={key}
+                    value={config[key]}
+                    onChange={write}
+                    placeholder={placeholder}
+                    type={Component === 'input' ? type : null}
+                  />
+                </Form.Field>
+              ) : (
+                <Form.Field key={key}>
+                  <label>{label}</label>
+                  <Input
+                    name={key}
+                    value={config[key]}
+                    onChange={write}
+                    placeholder={placeholder}
+                    type={Component === 'input' ? type : null}
+                    autoFocus={autoFocus}
+                  />
+                </Form.Field>
+              ))
+          )}
+
+          <Button
+            onClick={save}
+            disabled={!config?.validate()}
+            loading={loading}
+            variant="primary"
+            className="float-left mr-2"
+          >
+            {config?.exists() ? 'Update' : 'Add'}
+          </Button>
+
+          {integrated && (
+            <Button loading={loading} onClick={remove}>
+              {'Delete'}
+            </Button>
+          )}
+        </Form>
+      </div>
+    </Loader>
+  );
+}
+
+export default observer(IntegrationForm);
diff --git a/frontend/app/components/Client/Integrations/Integrations.tsx b/frontend/app/components/Client/Integrations/Integrations.tsx
index e81a7038a..a39a533d5 100644
--- a/frontend/app/components/Client/Integrations/Integrations.tsx
+++ b/frontend/app/components/Client/Integrations/Integrations.tsx
@@ -1,88 +1,94 @@
-import React, { useEffect, useState } from 'react';
-import { connect } from 'react-redux';
-import { useModal } from 'App/components/Modal';
-import cn from 'classnames';
-
-import { fetch, init } from 'Duck/integrations/actions';
-import { fetchIntegrationList, setSiteId } from 'Duck/integrations/integrations';
-import SiteDropdown from 'Shared/SiteDropdown';
-import ReduxDoc from './ReduxDoc';
-import VueDoc from './VueDoc';
-import GraphQLDoc from './GraphQLDoc';
-import NgRxDoc from './NgRxDoc';
-import MobxDoc from './MobxDoc';
-import ProfilerDoc from './ProfilerDoc';
-import AssistDoc from './AssistDoc';
-import PiniaDoc from './PiniaDoc';
-import ZustandDoc from './ZustandDoc';
-import MSTeams from './Teams';
-import DocCard from 'Shared/DocCard/DocCard';
-import { PageTitle, Tooltip } from 'UI';
 import withPageTitle from 'HOCs/withPageTitle';
+import cn from 'classnames';
+import { observer } from 'mobx-react-lite';
+import React, { useEffect, useState } from 'react';
 
+import { useModal } from 'App/components/Modal';
+import { useStore } from 'App/mstore';
+import IntegrationFilters from 'Components/Client/Integrations/IntegrationFilters';
+import { PageTitle } from 'UI';
+
+import DocCard from 'Shared/DocCard/DocCard';
+
+import AssistDoc from './AssistDoc';
 import BugsnagForm from './BugsnagForm';
 import CloudwatchForm from './CloudwatchForm';
 import DatadogForm from './DatadogForm';
 import ElasticsearchForm from './ElasticsearchForm';
 import GithubForm from './GithubForm';
+import GraphQLDoc from './GraphQLDoc';
 import IntegrationItem from './IntegrationItem';
 import JiraForm from './JiraForm';
+import MobxDoc from './MobxDoc';
 import NewrelicForm from './NewrelicForm';
+import NgRxDoc from './NgRxDoc';
+import PiniaDoc from './PiniaDoc';
+import ProfilerDoc from './ProfilerDoc';
+import ReduxDoc from './ReduxDoc';
 import RollbarForm from './RollbarForm';
 import SentryForm from './SentryForm';
 import SlackForm from './SlackForm';
 import StackdriverForm from './StackdriverForm';
 import SumoLogicForm from './SumoLogicForm';
-import IntegrationFilters from 'Components/Client/Integrations/IntegrationFilters';
+import MSTeams from './Teams';
+import VueDoc from './VueDoc';
+import ZustandDoc from './ZustandDoc';
 
 interface Props {
-  fetch: (name: string, siteId: string) => void;
-  init: () => void;
-  fetchIntegrationList: (siteId: any) => void;
-  integratedList: any;
-  initialSiteId: string;
-  setSiteId: (siteId: string) => void;
   siteId: string;
   hideHeader?: boolean;
-  loading?: boolean;
 }
 
 function Integrations(props: Props) {
-  const { initialSiteId, hideHeader = false, loading = false } = props;
+  const { integrationsStore, projectsStore } = useStore();
+  const siteId = projectsStore.siteId;
+  const fetchIntegrationList = integrationsStore.integrations.fetchIntegrations;
+  const storeIntegratedList = integrationsStore.integrations.list;
+  const { hideHeader = false } = props;
   const { showModal } = useModal();
   const [integratedList, setIntegratedList] = useState<string[]>([]);
   const [activeFilter, setActiveFilter] = useState<string>('all');
 
   useEffect(() => {
-    const list = props.integratedList
+    const list = storeIntegratedList
       .filter((item: any) => item.integrated)
       .map((item: any) => item.name);
     setIntegratedList(list);
-  }, [props.integratedList]);
+  }, [storeIntegratedList]);
 
   useEffect(() => {
-    props.fetchIntegrationList(initialSiteId);
-    props.setSiteId(initialSiteId);
-  }, []);
+    void fetchIntegrationList(siteId);
+  }, [siteId]);
 
   const onClick = (integration: any, width: number) => {
-    if (integration.slug && integration.slug !== 'slack' && integration.slug !== 'msteams') {
-      props.fetch(integration.slug, props.siteId);
+    if (
+      integration.slug &&
+      integration.slug !== 'slack' &&
+      integration.slug !== 'msteams'
+    ) {
+      const intName = integration.slug as
+        | 'sentry'
+        | 'bugsnag'
+        | 'rollbar'
+        | 'elasticsearch'
+        | 'datadog'
+        | 'sumologic'
+        | 'stackdriver'
+        | 'cloudwatch'
+        | 'newrelic';
+      if (integrationsStore[intName]) {
+        void integrationsStore[intName].fetchIntegration(siteId);
+      }
     }
 
     showModal(
       React.cloneElement(integration.component, {
-        integrated: integratedList.includes(integration.slug)
+        integrated: integratedList.includes(integration.slug),
       }),
       { right: true, width }
     );
   };
 
-  const onChangeSelect = ({ value }: any) => {
-    props.setSiteId(value.value);
-    props.fetchIntegrationList(value.value);
-  };
-
   const onChange = (key: string) => {
     setActiveFilter(key);
   };
@@ -99,83 +105,92 @@ function Integrations(props: Props) {
     key: cat.key,
     title: cat.title,
     label: cat.title,
-    icon: cat.icon
-  }))
-
-
-  const allIntegrations = filteredIntegrations.flatMap(cat => cat.integrations);
+    icon: cat.icon,
+  }));
 
+  const allIntegrations = filteredIntegrations.flatMap(
+    (cat) => cat.integrations
+  );
 
+  console.log(
+    allIntegrations,
+  integratedList
+  )
   return (
     <>
-      <div className='bg-white rounded-lg border shadow-sm p-5 mb-4'>
+      <div className="bg-white rounded-lg border shadow-sm p-5 mb-4">
         {!hideHeader && <PageTitle title={<div>Integrations</div>} />}
 
-        <IntegrationFilters onChange={onChange} activeItem={activeFilter} filters={filters} />
+        <IntegrationFilters
+          onChange={onChange}
+          activeItem={activeFilter}
+          filters={filters}
+        />
       </div>
 
-      <div className='mb-4' />
+      <div className="mb-4" />
 
-      <div className={cn(`
+      <div
+        className={cn(`
     mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3
-`)}>
+`)}
+      >
         {allIntegrations.map((integration: any) => (
           <IntegrationItem
             integrated={integratedList.includes(integration.slug)}
             integration={integration}
             onClick={() =>
-              onClick(integration, filteredIntegrations.find(cat => cat.integrations.includes(integration)).title === 'Plugins' ? 500 : 350)
+              onClick(
+                integration,
+                filteredIntegrations.find((cat) =>
+                  cat.integrations.includes(integration)
+                ).title === 'Plugins'
+                  ? 500
+                  : 350
+              )
             }
             hide={
               (integration.slug === 'github' &&
                 integratedList.includes('jira')) ||
-              (integration.slug === 'jira' &&
-                integratedList.includes('github'))
+              (integration.slug === 'jira' && integratedList.includes('github'))
             }
           />
         ))}
       </div>
-
     </>
   );
 }
 
-export default connect(
-  (state: any) => ({
-    initialSiteId: state.getIn(['site', 'siteId']),
-    integratedList: state.getIn(['integrations', 'list']) || [],
-    loading: state.getIn(['integrations', 'fetchRequest', 'loading']),
-    siteId: state.getIn(['integrations', 'siteId'])
-  }),
-  { fetch, init, fetchIntegrationList, setSiteId }
-)(withPageTitle('Integrations - OpenReplay Preferences')(Integrations));
-
+export default withPageTitle('Integrations - OpenReplay Preferences')(observer(Integrations))
 
 const integrations = [
   {
     title: 'Issue Reporting',
     key: 'issue-reporting',
-    description: 'Seamlessly report issues or share issues with your team right from OpenReplay.',
+    description:
+      'Seamlessly report issues or share issues with your team right from OpenReplay.',
     isProject: false,
     icon: 'exclamation-triangle',
     integrations: [
       {
         title: 'Jira',
-        subtitle: 'Integrate Jira with OpenReplay to enable the creation of a new ticket directly from a session.',
+        subtitle:
+          'Integrate Jira with OpenReplay to enable the creation of a new ticket directly from a session.',
         slug: 'jira',
         category: 'Errors',
         icon: 'integrations/jira',
-        component: <JiraForm />
+        component: <JiraForm />,
       },
       {
         title: 'Github',
-        subtitle: 'Integrate GitHub with OpenReplay to enable the direct creation of a new issue from a session.',
+        subtitle:
+          'Integrate GitHub with OpenReplay to enable the direct creation of a new issue from a session.',
         slug: 'github',
         category: 'Errors',
         icon: 'integrations/github',
-        component: <GithubForm />
-      }
-    ]
+        component: <GithubForm />,
+      },
+    ],
   },
   {
     title: 'Backend Logging',
@@ -186,106 +201,119 @@ const integrations = [
       'Sync your backend errors with sessions replays and see what happened front-to-back.',
     docs: () => (
       <DocCard
-        title='Why use integrations?'
-        icon='question-lg'
-        iconBgColor='bg-red-lightest'
-        iconColor='red'
+        title="Why use integrations?"
+        icon="question-lg"
+        iconBgColor="bg-red-lightest"
+        iconColor="red"
       >
-        Sync your backend errors with sessions replays and see what happened front-to-back.
+        Sync your backend errors with sessions replays and see what happened
+        front-to-back.
       </DocCard>
     ),
     integrations: [
       {
         title: 'Sentry',
-        subtitle: 'Integrate Sentry with session replays to seamlessly observe backend errors.',
+        subtitle:
+          'Integrate Sentry with session replays to seamlessly observe backend errors.',
         slug: 'sentry',
         icon: 'integrations/sentry',
-        component: <SentryForm />
+        component: <SentryForm />,
       },
       {
         title: 'Bugsnag',
-        subtitle: 'Integrate Bugsnag to access the OpenReplay session linked to the JS exception within its interface.',
+        subtitle:
+          'Integrate Bugsnag to access the OpenReplay session linked to the JS exception within its interface.',
         slug: 'bugsnag',
         icon: 'integrations/bugsnag',
-        component: <BugsnagForm />
+        component: <BugsnagForm />,
       },
       {
         title: 'Rollbar',
-        subtitle: 'Integrate Rollbar with session replays to seamlessly observe backend errors.',
+        subtitle:
+          'Integrate Rollbar with session replays to seamlessly observe backend errors.',
         slug: 'rollbar',
         icon: 'integrations/rollbar',
-        component: <RollbarForm />
+        component: <RollbarForm />,
       },
       {
         title: 'Elasticsearch',
-        subtitle: 'Integrate Elasticsearch with session replays to seamlessly observe backend errors.',
+        subtitle:
+          'Integrate Elasticsearch with session replays to seamlessly observe backend errors.',
         slug: 'elasticsearch',
         icon: 'integrations/elasticsearch',
-        component: <ElasticsearchForm />
+        component: <ElasticsearchForm />,
       },
       {
         title: 'Datadog',
-        subtitle: 'Incorporate DataDog to visualize backend errors alongside session replay, for easy troubleshooting.',
+        subtitle:
+          'Incorporate DataDog to visualize backend errors alongside session replay, for easy troubleshooting.',
         slug: 'datadog',
         icon: 'integrations/datadog',
-        component: <DatadogForm />
+        component: <DatadogForm />,
       },
       {
         title: 'Sumo Logic',
-        subtitle: 'Integrate Sumo Logic with session replays to seamlessly observe backend errors.',
+        subtitle:
+          'Integrate Sumo Logic with session replays to seamlessly observe backend errors.',
         slug: 'sumologic',
         icon: 'integrations/sumologic',
-        component: <SumoLogicForm />
+        component: <SumoLogicForm />,
       },
       {
         title: 'Google Cloud',
-        subtitle: 'Integrate Google Cloud to view backend logs and errors in conjunction with session replay',
+        subtitle:
+          'Integrate Google Cloud to view backend logs and errors in conjunction with session replay',
         slug: 'stackdriver',
         icon: 'integrations/google-cloud',
-        component: <StackdriverForm />
+        component: <StackdriverForm />,
       },
       {
         title: 'CloudWatch',
-        subtitle: 'Integrate CloudWatch to see backend logs and errors alongside session replay.',
+        subtitle:
+          'Integrate CloudWatch to see backend logs and errors alongside session replay.',
         slug: 'cloudwatch',
         icon: 'integrations/aws',
-        component: <CloudwatchForm />
+        component: <CloudwatchForm />,
       },
       {
         title: 'Newrelic',
-        subtitle: 'Integrate NewRelic with session replays to seamlessly observe backend errors.',
+        subtitle:
+          'Integrate NewRelic with session replays to seamlessly observe backend errors.',
         slug: 'newrelic',
         icon: 'integrations/newrelic',
-        component: <NewrelicForm />
-      }
-    ]
+        component: <NewrelicForm />,
+      },
+    ],
   },
   {
     title: 'Collaboration',
     key: 'collaboration',
     isProject: false,
     icon: 'file-code',
-    description: 'Share your sessions with your team and collaborate on issues.',
+    description:
+      'Share your sessions with your team and collaborate on issues.',
     integrations: [
       {
         title: 'Slack',
-        subtitle: 'Integrate Slack to empower every user in your org with the ability to send sessions to any Slack channel.',
+        subtitle:
+          'Integrate Slack to empower every user in your org with the ability to send sessions to any Slack channel.',
         slug: 'slack',
         category: 'Errors',
         icon: 'integrations/slack',
         component: <SlackForm />,
-        shared: true
+        shared: true,
       },
       {
         title: 'MS Teams',
-        subtitle: 'Integrate MS Teams to empower every user in your org with the ability to send sessions to any MS Teams channel.',
+        subtitle:
+          'Integrate MS Teams to empower every user in your org with the ability to send sessions to any MS Teams channel.',
         slug: 'msteams',
         category: 'Errors',
         icon: 'integrations/teams',
         component: <MSTeams />,
-        shared: true
-      }
-    ]
+        shared: true,
+      },
+    ],
   },
   // {
   //   title: 'State Management',
@@ -302,72 +330,82 @@ const integrations = [
     icon: 'chat-left-text',
     docs: () => (
       <DocCard
-        title='What are plugins?'
-        icon='question-lg'
-        iconBgColor='bg-red-lightest'
-        iconColor='red'
+        title="What are plugins?"
+        icon="question-lg"
+        iconBgColor="bg-red-lightest"
+        iconColor="red"
       >
-        Plugins capture your application’s store, monitor queries, track performance issues and even
-        assist your end user through live sessions.
+        Plugins capture your application’s store, monitor queries, track
+        performance issues and even assist your end user through live sessions.
       </DocCard>
     ),
     description:
-      'Reproduce issues as if they happened in your own browser. Plugins help capture your application\'s store, HTTP requeets, GraphQL queries, and more.',
+      "Reproduce issues as if they happened in your own browser. Plugins help capture your application's store, HTTP requeets, GraphQL queries, and more.",
     integrations: [
       {
         title: 'Redux',
-        subtitle: 'Capture Redux actions/state and inspect them later on while replaying session recordings.',
-        icon: 'integrations/redux', component: <ReduxDoc />
+        subtitle:
+          'Capture Redux actions/state and inspect them later on while replaying session recordings.',
+        icon: 'integrations/redux',
+        component: <ReduxDoc />,
       },
       {
         title: 'VueX',
-        subtitle: 'Capture VueX mutations/state and inspect them later on while replaying session recordings.',
+        subtitle:
+          'Capture VueX mutations/state and inspect them later on while replaying session recordings.',
         icon: 'integrations/vuejs',
-        component: <VueDoc />
+        component: <VueDoc />,
       },
       {
         title: 'Pinia',
-        subtitle: 'Capture Pinia mutations/state and inspect them later on while replaying session recordings.',
+        subtitle:
+          'Capture Pinia mutations/state and inspect them later on while replaying session recordings.',
         icon: 'integrations/pinia',
-        component: <PiniaDoc />
+        component: <PiniaDoc />,
       },
       {
         title: 'GraphQL',
-        subtitle: 'Capture GraphQL requests and inspect them later on while replaying session recordings. This plugin is compatible with Apollo and Relay implementations.',
+        subtitle:
+          'Capture GraphQL requests and inspect them later on while replaying session recordings. This plugin is compatible with Apollo and Relay implementations.',
         icon: 'integrations/graphql',
-        component: <GraphQLDoc />
+        component: <GraphQLDoc />,
       },
       {
         title: 'NgRx',
-        subtitle: 'Capture NgRx actions/state and inspect them later on while replaying session recordings.\n',
+        subtitle:
+          'Capture NgRx actions/state and inspect them later on while replaying session recordings.\n',
         icon: 'integrations/ngrx',
-        component: <NgRxDoc />
+        component: <NgRxDoc />,
       },
       {
         title: 'MobX',
-        subtitle: 'Capture MobX mutations and inspect them later on while replaying session recordings.',
+        subtitle:
+          'Capture MobX mutations and inspect them later on while replaying session recordings.',
         icon: 'integrations/mobx',
-        component: <MobxDoc />
+        component: <MobxDoc />,
       },
       {
         title: 'Profiler',
-        subtitle: 'Plugin allows you to measure your JS functions performance and capture both arguments and result for each call.',
+        subtitle:
+          'Plugin allows you to measure your JS functions performance and capture both arguments and result for each call.',
         icon: 'integrations/openreplay',
-        component: <ProfilerDoc />
+        component: <ProfilerDoc />,
       },
       {
         title: 'Assist',
-        subtitle: 'OpenReplay Assist allows you to support your users by seeing their live screen and instantly hopping on call (WebRTC) with them without requiring any 3rd-party screen sharing software.\n',
+        subtitle:
+          'OpenReplay Assist allows you to support your users by seeing their live screen and instantly hopping on call (WebRTC) with them without requiring any 3rd-party screen sharing software.\n',
         icon: 'integrations/openreplay',
-        component: <AssistDoc />
+        component: <AssistDoc />,
       },
       {
         title: 'Zustand',
-        subtitle: 'Capture Zustand mutations/state and inspect them later on while replaying session recordings.',
+        subtitle:
+          'Capture Zustand mutations/state and inspect them later on while replaying session recordings.',
         icon: 'integrations/zustand',
         // header: '🐻',
-        component: <ZustandDoc />
-      }
-    ]
-  }
+        component: <ZustandDoc />,
+      },
+    ],
+  },
 ];
diff --git a/frontend/app/components/Client/Integrations/MobxDoc/MobxDoc.js b/frontend/app/components/Client/Integrations/MobxDoc/MobxDoc.js
index 65705b1e0..9c917f876 100644
--- a/frontend/app/components/Client/Integrations/MobxDoc/MobxDoc.js
+++ b/frontend/app/components/Client/Integrations/MobxDoc/MobxDoc.js
@@ -1,11 +1,15 @@
 import React from 'react';
 import ToggleContent from 'Shared/ToggleContent';
 import DocLink from 'Shared/DocLink/DocLink';
-import { connect } from 'react-redux';
 import { CodeBlock } from "UI";
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 
-const MobxDoc = (props) => {
-    const { projectKey } = props;
+const MobxDoc = () => {
+    const { integrationsStore, projectsStore } = useStore();
+    const sites = projectsStore.list;
+    const siteId = integrationsStore.integrations.siteId
+    const projectKey = siteId ? sites.find((site) => site.id === siteId)?.projectKey : sites[0]?.projectKey
 
     const mobxUsage = `import OpenReplay from '@openreplay/tracker';
 import trackerMobX from '@openreplay/tracker-mobx';
@@ -67,10 +71,4 @@ function SomeFunctionalComponent() {
 
 MobxDoc.displayName = 'MobxDoc';
 
-export default connect((state) => {
-    const siteId = state.getIn(['integrations', 'siteId']);
-    const sites = state.getIn(['site', 'list']);
-    return {
-      projectKey: sites.find((site) => site.get('id') === siteId).get('projectKey'),
-    };
-})(MobxDoc);
+export default observer(MobxDoc)
diff --git a/frontend/app/components/Client/Integrations/NgRxDoc/NgRxDoc.js b/frontend/app/components/Client/Integrations/NgRxDoc/NgRxDoc.js
index 8097a4618..e4d199f5b 100644
--- a/frontend/app/components/Client/Integrations/NgRxDoc/NgRxDoc.js
+++ b/frontend/app/components/Client/Integrations/NgRxDoc/NgRxDoc.js
@@ -1,11 +1,15 @@
+import { useStore } from "App/mstore";
 import React from 'react';
 import { CodeBlock } from "UI";
 import ToggleContent from 'Shared/ToggleContent';
 import DocLink from 'Shared/DocLink/DocLink';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react-lite'
 
-const NgRxDoc = (props) => {
-    const { projectKey } = props;
+const NgRxDoc = () => {
+  const { integrationsStore, projectsStore } = useStore();
+  const sites = projectsStore.list;
+  const siteId = integrationsStore.integrations.siteId
+  const projectKey = siteId ? sites.find((site) => site.id === siteId)?.projectKey : sites[0]?.projectKey
     const usage = `import { StoreModule } from '@ngrx/store';
 import { reducers } from './reducers';
 import OpenReplay from '@openreplay/tracker';
@@ -80,10 +84,4 @@ const metaReducers = [tracker.use(trackerNgRx(<options>))]; // check list of ava
 
 NgRxDoc.displayName = 'NgRxDoc';
 
-export default connect((state) => {
-  const siteId = state.getIn(['integrations', 'siteId']);
-  const sites = state.getIn(['site', 'list']);
-  return {
-    projectKey: sites.find((site) => site.get('id') === siteId).get('projectKey'),
-  };
-})(NgRxDoc);
+export default observer(NgRxDoc);
diff --git a/frontend/app/components/Client/Integrations/PiniaDoc/PiniaDoc.tsx b/frontend/app/components/Client/Integrations/PiniaDoc/PiniaDoc.tsx
index a0a9c157e..71a9cbccb 100644
--- a/frontend/app/components/Client/Integrations/PiniaDoc/PiniaDoc.tsx
+++ b/frontend/app/components/Client/Integrations/PiniaDoc/PiniaDoc.tsx
@@ -1,11 +1,19 @@
+import { observer } from 'mobx-react-lite';
 import React from 'react';
-import { CodeBlock } from "UI";
-import ToggleContent from '../../../shared/ToggleContent';
-import DocLink from 'Shared/DocLink/DocLink';
-import { connect } from 'react-redux';
 
-const PiniaDoc = (props) => {
-  const { projectKey } = props;
+import { useStore } from 'App/mstore';
+import ToggleContent from 'Components/shared/ToggleContent';
+import { CodeBlock } from 'UI';
+
+import DocLink from 'Shared/DocLink/DocLink';
+
+const PiniaDoc = () => {
+  const { integrationsStore, projectsStore } = useStore();
+  const sites = projectsStore.list;
+  const siteId = integrationsStore.integrations.siteId;
+  const projectKey = siteId
+    ? sites.find((site) => site.id === siteId)?.projectKey
+    : sites[0]?.projectKey;
   const usage = `import Vuex from 'vuex'
 import OpenReplay from '@openreplay/tracker';
 import trackerVuex from '@openreplay/tracker-vuex';
@@ -28,7 +36,7 @@ piniaStorePlugin(examplePiniaStore)
 // now you can use examplePiniaStore as
 // usual pinia store
 // (destructure values or return it as a whole etc)
-`
+`;
   const usageCjs = `import Vuex from 'vuex'
 import OpenReplay from '@openreplay/tracker/cjs';
 import trackerVuex from '@openreplay/tracker-vuex/cjs';
@@ -55,34 +63,38 @@ piniaStorePlugin(examplePiniaStore)
 // now you can use examplePiniaStore as
 // usual pinia store
 // (destructure values or return it as a whole etc)
-}`
+}`;
   return (
-    <div className="bg-white h-screen overflow-y-auto" style={{ width: '500px' }}>
+    <div
+      className="bg-white h-screen overflow-y-auto"
+      style={{ width: '500px' }}
+    >
       <h3 className="p-5 text-2xl">VueX</h3>
       <div className="p-5">
         <div>
-          This plugin allows you to capture Pinia mutations + state and inspect them later on while
-          replaying session recordings. This is very useful for understanding and fixing issues.
+          This plugin allows you to capture Pinia mutations + state and inspect
+          them later on while replaying session recordings. This is very useful
+          for understanding and fixing issues.
         </div>
 
         <div className="font-bold my-2 text-lg">Installation</div>
-        <CodeBlock code={`npm i @openreplay/tracker-vuex --save`} language="bash" />
+        <CodeBlock
+          code={`npm i @openreplay/tracker-vuex --save`}
+          language="bash"
+        />
 
         <div className="font-bold my-2 text-lg">Usage</div>
         <p>
-          Initialize the @openreplay/tracker package as usual and load the plugin into it. Then put
-          the generated plugin into your plugins field of your store.
+          Initialize the @openreplay/tracker package as usual and load the
+          plugin into it. Then put the generated plugin into your plugins field
+          of your store.
         </p>
         <div className="py-3" />
 
         <ToggleContent
           label="Server-Side-Rendered (SSR)?"
-          first={
-            <CodeBlock code={usage} language="js" />
-          }
-          second={
-            <CodeBlock code={usageCjs} language="js" />
-          }
+          first={<CodeBlock code={usage} language="js" />}
+          second={<CodeBlock code={usageCjs} language="js" />}
         />
 
         <DocLink
@@ -97,10 +109,4 @@ piniaStorePlugin(examplePiniaStore)
 
 PiniaDoc.displayName = 'PiniaDoc';
 
-export default connect((state: any) => {
-  const siteId = state.getIn(['integrations', 'siteId']);
-  const sites = state.getIn(['site', 'list']);
-  return {
-    projectKey: sites.find((site: any) => site.get('id') === siteId).get('projectKey'),
-  };
-})(PiniaDoc);
+export default observer(PiniaDoc);
diff --git a/frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.js b/frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.js
index eb7ad3999..35abc1eb0 100644
--- a/frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.js
+++ b/frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.js
@@ -1,13 +1,16 @@
+import { useStore } from "App/mstore";
 import React from 'react';
-import { connect } from 'react-redux';
-
+import { observer } from 'mobx-react-lite';
 import { CodeBlock } from 'UI';
 
 import DocLink from 'Shared/DocLink/DocLink';
 import ToggleContent from 'Shared/ToggleContent';
 
-const ProfilerDoc = (props) => {
-  const { projectKey } = props;
+const ProfilerDoc = () => {
+  const { integrationsStore, projectsStore } = useStore();
+  const sites = projectsStore.list;
+  const siteId = integrationsStore.integrations.siteId
+  const projectKey = siteId ? sites.find((site) => site.id === siteId)?.projectKey : sites[0]?.projectKey
 
   const usage = `import OpenReplay from '@openreplay/tracker';
 import trackerProfiler from '@openreplay/tracker-profiler';
@@ -87,12 +90,4 @@ const fn = profiler('call_name')(() => {
 
 ProfilerDoc.displayName = 'ProfilerDoc';
 
-export default connect((state) => {
-  const siteId = state.getIn(['integrations', 'siteId']);
-  const sites = state.getIn(['site', 'list']);
-  return {
-    projectKey: sites
-      .find((site) => site.get('id') === siteId)
-      .get('projectKey'),
-  };
-})(ProfilerDoc);
+export default observer(ProfilerDoc);
diff --git a/frontend/app/components/Client/Integrations/ReduxDoc/ReduxDoc.js b/frontend/app/components/Client/Integrations/ReduxDoc/ReduxDoc.js
index 3566bb82d..e782a2298 100644
--- a/frontend/app/components/Client/Integrations/ReduxDoc/ReduxDoc.js
+++ b/frontend/app/components/Client/Integrations/ReduxDoc/ReduxDoc.js
@@ -1,11 +1,15 @@
+import { useStore } from "App/mstore";
 import React from 'react';
 import { CodeBlock } from 'UI'
-import ToggleContent from '../../../shared/ToggleContent';
+import ToggleContent from 'Components/shared/ToggleContent';
 import DocLink from 'Shared/DocLink/DocLink';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react-lite'
 
-const ReduxDoc = (props) => {
-    const { projectKey } = props;
+const ReduxDoc = () => {
+  const { integrationsStore, projectsStore } = useStore();
+  const sites = projectsStore.list;
+  const siteId = integrationsStore.integrations.siteId
+  const projectKey = siteId ? sites.find((site) => site.id === siteId)?.projectKey : sites[0]?.projectKey
 
     const usage = `import { applyMiddleware, createStore } from 'redux';
 import OpenReplay from '@openreplay/tracker';
@@ -74,10 +78,4 @@ const store = createStore(
 
 ReduxDoc.displayName = 'ReduxDoc';
 
-export default connect((state) => {
-  const siteId = state.getIn(['integrations', 'siteId']);
-  const sites = state.getIn(['site', 'list']);
-  return {
-    projectKey: sites.find((site) => site.get('id') === siteId).get('projectKey'),
-  };
-})(ReduxDoc);
+export default observer(ReduxDoc);
diff --git a/frontend/app/components/Client/Integrations/SlackAddForm/SlackAddForm.js b/frontend/app/components/Client/Integrations/SlackAddForm/SlackAddForm.js
index 26cfc9520..b8cdc1981 100644
--- a/frontend/app/components/Client/Integrations/SlackAddForm/SlackAddForm.js
+++ b/frontend/app/components/Client/Integrations/SlackAddForm/SlackAddForm.js
@@ -1,25 +1,35 @@
 import React from 'react';
-import { connect } from 'react-redux';
-import { edit, save, init, update } from 'Duck/integrations/slack';
 import { Form, Input, Button, Message } from 'UI';
 import { confirm } from 'UI';
-import { remove } from 'Duck/integrations/slack';
+import { observer } from 'mobx-react-lite'
+import { useStore } from 'App/mstore'
 
-class SlackAddForm extends React.PureComponent {
-  componentWillUnmount() {
-    this.props.init({});
-  }
+function SlackAddForm(props) {
+  const { onClose } = props;
+  const { integrationsStore } = useStore();
+  const instance = integrationsStore.slack.instance;
+  const saving = integrationsStore.slack.loading;
+  const errors = integrationsStore.slack.errors;
+  const edit = integrationsStore.slack.edit;
+  const onSave = integrationsStore.slack.saveIntegration;
+  const update = integrationsStore.slack.update;
+  const init = integrationsStore.slack.init;
+  const onRemove = integrationsStore.slack.removeInt;
+  
+  React.useEffect(() => {
+    return () => init({})
+  }, [])
 
-  save = () => {
-    const instance = this.props.instance;
+
+  const save = () => {
     if (instance.exists()) {
-      this.props.update(this.props.instance);
+      void update(instance);
     } else {
-      this.props.save(this.props.instance);
+      void onSave(instance);
     }
   };
 
-  remove = async (id) => {
+  const remove = async (id) => {
     if (
       await confirm({
         header: 'Confirm',
@@ -27,79 +37,68 @@ class SlackAddForm extends React.PureComponent {
         confirmation: `Are you sure you want to permanently delete this channel?`,
       })
     ) {
-      this.props.remove(id);
+      await onRemove(id);
+      onClose();
     }
   };
 
-  write = ({ target: { name, value } }) => this.props.edit({ [name]: value });
-
-  render() {
-    const { instance, saving, errors, onClose } = this.props;
-    return (
-      <div className="p-5" style={{ minWidth: '300px' }}>
-        <Form>
-          <Form.Field>
-            <label>Name</label>
-            <Input
-              name="name"
-              value={instance.name}
-              onChange={this.write}
-              placeholder="Enter any name"
-              type="text"
-            />
-          </Form.Field>
-          <Form.Field>
-            <label>URL</label>
-            <Input
-              name="endpoint"
-              value={instance.endpoint}
-              onChange={this.write}
-              placeholder="Slack webhook URL"
-              type="text"
-            />
-          </Form.Field>
-          <div className="flex justify-between">
-            <div className="flex">
-              <Button
-                onClick={this.save}
-                disabled={!instance.validate()}
-                loading={saving}
-                variant="primary"
-                className="float-left mr-2"
-              >
-                {instance.exists() ? 'Update' : 'Add'}
-              </Button>
-
-              <Button onClick={onClose}>{'Cancel'}</Button>
-            </div>
-
-            <Button onClick={() => this.remove(instance.webhookId)} disabled={!instance.exists()}>
-              {'Delete'}
+  const write = ({ target: { name, value } }) => edit({ [name]: value });
+  
+  return (
+    <div className="p-5" style={{ minWidth: '300px' }}>
+      <Form>
+        <Form.Field>
+          <label>Name</label>
+          <Input
+            name="name"
+            value={instance.name}
+            onChange={write}
+            placeholder="Enter any name"
+            type="text"
+          />
+        </Form.Field>
+        <Form.Field>
+          <label>URL</label>
+          <Input
+            name="endpoint"
+            value={instance.endpoint}
+            onChange={write}
+            placeholder="Slack webhook URL"
+            type="text"
+          />
+        </Form.Field>
+        <div className="flex justify-between">
+          <div className="flex">
+            <Button
+              onClick={save}
+              disabled={!instance.validate()}
+              loading={saving}
+              variant="primary"
+              className="float-left mr-2"
+            >
+              {instance.exists() ? 'Update' : 'Add'}
             </Button>
-          </div>
-        </Form>
 
-        {errors && (
-          <div className="my-3">
-            {errors.map((error) => (
-              <Message visible={errors} size="mini" error key={error}>
-                {error}
-              </Message>
-            ))}
+            <Button onClick={onClose}>{'Cancel'}</Button>
           </div>
-        )}
-      </div>
-    );
-  }
+
+          <Button onClick={() => remove(instance.webhookId)} disabled={!instance.exists()}>
+            {'Delete'}
+          </Button>
+        </div>
+      </Form>
+
+      {errors && (
+        <div className="my-3">
+          {errors.map((error) => (
+            <Message visible={errors} size="mini" error key={error}>
+              {error}
+            </Message>
+          ))}
+        </div>
+      )}
+    </div>
+  );
 }
 
-export default connect(
-  (state) => ({
-    instance: state.getIn(['slack', 'instance']),
-    saving:
-      state.getIn(['slack', 'saveRequest', 'loading']) ||
-      state.getIn(['slack', 'updateRequest', 'loading']),
-    errors: state.getIn(['slack', 'saveRequest', 'errors']),
-  }),
-  { edit, save, init, remove, update }
-)(SlackAddForm);
+export default observer(SlackAddForm);
diff --git a/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.js b/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.js
index 8d25b4454..db53d3100 100644
--- a/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.js
+++ b/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.js
@@ -1,14 +1,16 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { NoContent } from 'UI';
-import { remove, edit, init } from 'Duck/integrations/slack';
 import DocLink from 'Shared/DocLink/DocLink';
+import { observer } from 'mobx-react-lite'
+import { useStore } from 'App/mstore'
 
 function SlackChannelList(props) {
-    const { list } = props;
+    const { integrationsStore } = useStore();
+    const list = integrationsStore.slack.list;
+    const edit = integrationsStore.slack.edit;
 
     const onEdit = (instance) => {
-        props.edit(instance);
+        edit(instance.toData());
         props.onEdit();
     };
 
@@ -24,7 +26,7 @@ function SlackChannelList(props) {
                     </div>
                 }
                 size="small"
-                show={list.size === 0}
+                show={list.length === 0}
             >
                 {list.map((c) => (
                     <div
@@ -43,9 +45,4 @@ function SlackChannelList(props) {
     );
 }
 
-export default connect(
-    (state) => ({
-        list: state.getIn(['slack', 'list']),
-    }),
-    { remove, edit, init }
-)(SlackChannelList);
+export default observer(SlackChannelList);
diff --git a/frontend/app/components/Client/Integrations/SlackForm.tsx b/frontend/app/components/Client/Integrations/SlackForm.tsx
index 018dbe885..43a720da4 100644
--- a/frontend/app/components/Client/Integrations/SlackForm.tsx
+++ b/frontend/app/components/Client/Integrations/SlackForm.tsx
@@ -1,17 +1,14 @@
 import React, { useEffect } from 'react';
 import SlackChannelList from './SlackChannelList/SlackChannelList';
-import { fetchList, init } from 'Duck/integrations/slack';
-import { connect } from 'react-redux';
 import SlackAddForm from './SlackAddForm';
 import { Button } from 'UI';
+import { observer } from 'mobx-react-lite'
+import { useStore } from 'App/mstore'
 
-interface Props {
-    onEdit?: (integration: any) => void;
-    istance: any;
-    fetchList: any;
-    init: any;
-}
-const SlackForm = (props: Props) => {
+const SlackForm = () => {
+    const { integrationsStore } = useStore();
+    const init = integrationsStore.slack.init;
+    const fetchList = integrationsStore.slack.fetchIntegrations;
     const [active, setActive] = React.useState(false);
 
     const onEdit = () => {
@@ -20,11 +17,11 @@ const SlackForm = (props: Props) => {
 
     const onNew = () => {
         setActive(true);
-        props.init({});
+        init({});
     }
 
     useEffect(() => {
-        props.fetchList();
+        void fetchList();
     }, []);
 
     return (
@@ -47,9 +44,4 @@ const SlackForm = (props: Props) => {
 
 SlackForm.displayName = 'SlackForm';
 
-export default connect(
-    (state: any) => ({
-        istance: state.getIn(['slack', 'instance']),
-    }),
-    { fetchList, init }
-)(SlackForm);
+export default observer(SlackForm);
\ No newline at end of file
diff --git a/frontend/app/components/Client/Integrations/Teams/TeamsAddForm.tsx b/frontend/app/components/Client/Integrations/Teams/TeamsAddForm.tsx
index f13efc535..e45d6d7b1 100644
--- a/frontend/app/components/Client/Integrations/Teams/TeamsAddForm.tsx
+++ b/frontend/app/components/Client/Integrations/Teams/TeamsAddForm.tsx
@@ -1,36 +1,38 @@
+import { observer } from 'mobx-react-lite';
 import React from 'react';
-import { connect } from 'react-redux';
-import { edit, save, init, update, remove } from 'Duck/integrations/teams';
-import { Form, Input, Button, Message } from 'UI';
+
+import { useStore } from 'App/mstore';
+import { Button, Form, Input, Message } from 'UI';
 import { confirm } from 'UI';
 
 interface Props {
-  edit: (inst: any) => void;
-  save: (inst: any) => void;
-  init: (inst: any) => void;
-  update: (inst: any) => void;
-  remove: (id: string) => void;
   onClose: () => void;
-  instance: any;
-  saving: boolean;
-  errors: any;
 }
 
-class TeamsAddForm extends React.PureComponent<Props> {
-  componentWillUnmount() {
-    this.props.init({});
-  }
+function TeamsAddForm({ onClose }: Props) {
+  const { integrationsStore } = useStore();
+  const instance = integrationsStore.msteams.instance;
+  const saving = integrationsStore.msteams.loading;
+  const errors = integrationsStore.msteams.errors;
+  const edit = integrationsStore.msteams.edit;
+  const onSave = integrationsStore.msteams.saveIntegration;
+  const init = integrationsStore.msteams.init;
+  const onRemove = integrationsStore.msteams.removeInt;
+  const update = integrationsStore.msteams.update;
 
-  save = () => {
-    const instance = this.props.instance;
-    if (instance.exists()) {
-      this.props.update(this.props.instance);
+  React.useEffect(() => {
+    return () => init({});
+  }, []);
+
+  const save = () => {
+    if (instance?.exists()) {
+      void update();
     } else {
-      this.props.save(this.props.instance);
+      void onSave();
     }
   };
 
-  remove = async (id: string) => {
+  const remove = async (id: string) => {
     if (
       await confirm({
         header: 'Confirm',
@@ -38,80 +40,74 @@ class TeamsAddForm extends React.PureComponent<Props> {
         confirmation: `Are you sure you want to permanently delete this channel?`,
       })
     ) {
-      this.props.remove(id);
+      void onRemove(id);
     }
   };
 
-  write = ({ target: { name, value } }: { target: { name: string; value: string } }) =>
-    this.props.edit({ [name]: value });
+  const write = ({
+    target: { name, value },
+  }: {
+    target: { name: string; value: string };
+  }) => edit({ [name]: value });
 
-  render() {
-    const { instance, saving, errors, onClose } = this.props;
-    return (
-      <div className="p-5" style={{ minWidth: '300px' }}>
-        <Form>
-          <Form.Field>
-            <label>Name</label>
-            <Input
-              name="name"
-              value={instance.name}
-              onChange={this.write}
-              placeholder="Enter any name"
-              type="text"
-            />
-          </Form.Field>
-          <Form.Field>
-            <label>URL</label>
-            <Input
-              name="endpoint"
-              value={instance.endpoint}
-              onChange={this.write}
-              placeholder="Teams webhook URL"
-              type="text"
-            />
-          </Form.Field>
-          <div className="flex justify-between">
-            <div className="flex">
-              <Button
-                onClick={this.save}
-                disabled={!instance.validate()}
-                loading={saving}
-                variant="primary"
-                className="float-left mr-2"
-              >
-                {instance.exists() ? 'Update' : 'Add'}
-              </Button>
-
-              <Button onClick={onClose}>{'Cancel'}</Button>
-            </div>
-
-            <Button onClick={() => this.remove(instance.webhookId)} disabled={!instance.exists()}>
-              {'Delete'}
+  return (
+    <div className="p-5" style={{ minWidth: '300px' }}>
+      <Form>
+        <Form.Field>
+          <label>Name</label>
+          <Input
+            name="name"
+            value={instance?.name}
+            onChange={write}
+            placeholder="Enter any name"
+            type="text"
+          />
+        </Form.Field>
+        <Form.Field>
+          <label>URL</label>
+          <Input
+            name="endpoint"
+            value={instance?.endpoint}
+            onChange={write}
+            placeholder="Teams webhook URL"
+            type="text"
+          />
+        </Form.Field>
+        <div className="flex justify-between">
+          <div className="flex">
+            <Button
+              onClick={save}
+              disabled={!instance?.validate()}
+              loading={saving}
+              variant="primary"
+              className="float-left mr-2"
+            >
+              {instance?.exists() ? 'Update' : 'Add'}
             </Button>
-          </div>
-        </Form>
 
-        {errors && (
-          <div className="my-3">
-            {errors.map((error: any) => (
-              <Message visible={errors} key={error}>
-                {error}
-              </Message>
-            ))}
+            <Button onClick={onClose}>{'Cancel'}</Button>
           </div>
-        )}
-      </div>
-    );
-  }
+
+          <Button
+            onClick={() => remove(instance?.webhookId)}
+            disabled={!instance.exists()}
+          >
+            {'Delete'}
+          </Button>
+        </div>
+      </Form>
+
+      {errors && (
+        <div className="my-3">
+          {errors.map((error: any) => (
+            <Message visible={errors} key={error}>
+              {error}
+            </Message>
+          ))}
+        </div>
+      )}
+    </div>
+  );
 }
 
-export default connect(
-  (state: any) => ({
-    instance: state.getIn(['teams', 'instance']),
-    saving:
-      state.getIn(['teams', 'saveRequest', 'loading']) ||
-      state.getIn(['teams', 'updateRequest', 'loading']),
-    errors: state.getIn(['teams', 'saveRequest', 'errors']),
-  }),
-  { edit, save, init, remove, update }
-)(TeamsAddForm);
+export default observer(TeamsAddForm);
diff --git a/frontend/app/components/Client/Integrations/Teams/TeamsChannelList.tsx b/frontend/app/components/Client/Integrations/Teams/TeamsChannelList.tsx
index 942e1e32c..131a404c8 100644
--- a/frontend/app/components/Client/Integrations/Teams/TeamsChannelList.tsx
+++ b/frontend/app/components/Client/Integrations/Teams/TeamsChannelList.tsx
@@ -1,51 +1,57 @@
+import { observer } from 'mobx-react-lite';
 import React from 'react';
-import { connect } from 'react-redux';
+
+import { useStore } from 'App/mstore';
 import { NoContent } from 'UI';
-import { remove, edit, init } from 'Duck/integrations/teams';
+
 import DocLink from 'Shared/DocLink/DocLink';
 
-function TeamsChannelList(props: { list: any, edit: (inst: any) => any, onEdit: () => void }) {
-    const { list } = props;
+function TeamsChannelList(props: { onEdit: () => void }) {
+  const { integrationsStore } = useStore();
+  const list = integrationsStore.msteams.list;
+  const edit = integrationsStore.msteams.edit;
 
-    const onEdit = (instance: Record<string, any>) => {
-        props.edit(instance);
-        props.onEdit();
-    };
+  const onEdit = (instance: Record<string, any>) => {
+    edit(instance);
+    props.onEdit();
+  };
 
-    return (
-        <div className="mt-6">
-            <NoContent
-                title={
-                    <div className="p-5 mb-4">
-                        <div className="text-base text-left">
-                            Integrate MS Teams with OpenReplay and share insights with the rest of the team, directly from the recording page.
-                        </div>
-                        <DocLink className="mt-4 text-base" label="Integrate MS Teams" url="https://docs.openreplay.com/integrations/msteams" />
-                    </div>
-                }
-                size="small"
-                show={list.size === 0}
-            >
-                {list.map((c: any) => (
-                    <div
-                        key={c.webhookId}
-                        className="border-t px-5 py-2 flex items-center justify-between cursor-pointer hover:bg-active-blue"
-                        onClick={() => onEdit(c)}
-                    >
-                        <div className="flex-grow-0" style={{ maxWidth: '90%' }}>
-                            <div>{c.name}</div>
-                            <div className="truncate test-xs color-gray-medium">{c.endpoint}</div>
-                        </div>
-                    </div>
-                ))}
-            </NoContent>
-        </div>
-    );
+  return (
+    <div className="mt-6">
+      <NoContent
+        title={
+          <div className="p-5 mb-4">
+            <div className="text-base text-left">
+              Integrate MS Teams with OpenReplay and share insights with the
+              rest of the team, directly from the recording page.
+            </div>
+            <DocLink
+              className="mt-4 text-base"
+              label="Integrate MS Teams"
+              url="https://docs.openreplay.com/integrations/msteams"
+            />
+          </div>
+        }
+        size="small"
+        show={list.length === 0}
+      >
+        {list.map((c: any) => (
+          <div
+            key={c.webhookId}
+            className="border-t px-5 py-2 flex items-center justify-between cursor-pointer hover:bg-active-blue"
+            onClick={() => onEdit(c)}
+          >
+            <div className="flex-grow-0" style={{ maxWidth: '90%' }}>
+              <div>{c.name}</div>
+              <div className="truncate test-xs color-gray-medium">
+                {c.endpoint}
+              </div>
+            </div>
+          </div>
+        ))}
+      </NoContent>
+    </div>
+  );
 }
 
-export default connect(
-    (state: any) => ({
-        list: state.getIn(['teams', 'list']),
-    }),
-    { remove, edit, init }
-)(TeamsChannelList);
+export default observer(TeamsChannelList);
diff --git a/frontend/app/components/Client/Integrations/Teams/index.tsx b/frontend/app/components/Client/Integrations/Teams/index.tsx
index e51bd64b1..b85a4f010 100644
--- a/frontend/app/components/Client/Integrations/Teams/index.tsx
+++ b/frontend/app/components/Client/Integrations/Teams/index.tsx
@@ -1,17 +1,15 @@
 import React, { useEffect } from 'react';
 import TeamsChannelList from './TeamsChannelList';
-import { fetchList, init } from 'Duck/integrations/teams';
-import { connect } from 'react-redux';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
+
 import TeamsAddForm from './TeamsAddForm';
 import { Button } from 'UI';
 
-interface Props {
-    onEdit?: (integration: any) => void;
-    istance: any;
-    fetchList: any;
-    init: any;
-}
-const MSTeams = (props: Props) => {
+const MSTeams = () => {
+    const { integrationsStore } = useStore();
+    const fetchList = integrationsStore.msteams.fetchIntegrations;
+    const init = integrationsStore.msteams.init;
     const [active, setActive] = React.useState(false);
 
     const onEdit = () => {
@@ -20,11 +18,11 @@ const MSTeams = (props: Props) => {
 
     const onNew = () => {
         setActive(true);
-        props.init({});
+        init({});
     }
 
     useEffect(() => {
-        props.fetchList();
+        void fetchList();
     }, []);
 
     return (
@@ -47,9 +45,4 @@ const MSTeams = (props: Props) => {
 
 MSTeams.displayName = 'MSTeams';
 
-export default connect(
-    (state: any) => ({
-        istance: state.getIn(['teams', 'instance']),
-    }),
-    { fetchList, init }
-)(MSTeams);
+export default observer(MSTeams);
diff --git a/frontend/app/components/Client/Integrations/VueDoc/VueDoc.js b/frontend/app/components/Client/Integrations/VueDoc/VueDoc.js
index 2a9e2e2a6..1c2ff19c6 100644
--- a/frontend/app/components/Client/Integrations/VueDoc/VueDoc.js
+++ b/frontend/app/components/Client/Integrations/VueDoc/VueDoc.js
@@ -1,11 +1,15 @@
+import { useStore } from "App/mstore";
 import React from 'react';
 import { CodeBlock } from "UI";
-import ToggleContent from '../../../shared/ToggleContent';
+import ToggleContent from 'Components/shared/ToggleContent';
 import DocLink from 'Shared/DocLink/DocLink';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react-lite';
 
-const VueDoc = (props) => {
-  const { projectKey, siteId } = props;
+const VueDoc = () => {
+  const { integrationsStore, projectsStore } = useStore();
+  const sites = projectsStore.list;
+  const siteId = integrationsStore.integrations.siteId
+  const projectKey = siteId ? sites.find((site) => site.id === siteId)?.projectKey : sites[0]?.projectKey
 
   const usage = `import Vuex from 'vuex'
 import OpenReplay from '@openreplay/tracker';
@@ -81,10 +85,4 @@ const store = new Vuex.Store({
 
 VueDoc.displayName = 'VueDoc';
 
-export default connect((state) => {
-  const siteId = state.getIn(['integrations', 'siteId']);
-  const sites = state.getIn(['site', 'list']);
-  return {
-    projectKey: sites.find((site) => site.get('id') === siteId).get('projectKey'),
-  };
-})(VueDoc);
+export default observer(VueDoc);
diff --git a/frontend/app/components/Client/Integrations/ZustandDoc/ZustandDoc.js b/frontend/app/components/Client/Integrations/ZustandDoc/ZustandDoc.js
index 9ed446cdc..eb7dcd091 100644
--- a/frontend/app/components/Client/Integrations/ZustandDoc/ZustandDoc.js
+++ b/frontend/app/components/Client/Integrations/ZustandDoc/ZustandDoc.js
@@ -1,11 +1,15 @@
+import { useStore } from "App/mstore";
 import React from 'react';
 import { CodeBlock } from "UI";
-import ToggleContent from '../../../shared/ToggleContent';
+import ToggleContent from 'Components//shared/ToggleContent';
 import DocLink from 'Shared/DocLink/DocLink';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react-lite'
 
 const ZustandDoc = (props) => {
-    const { projectKey } = props;
+  const { integrationsStore, projectsStore } = useStore();
+  const sites = projectsStore.list;
+  const siteId = integrationsStore.integrations.siteId
+  const projectKey = siteId ? sites.find((site) => site.id === siteId)?.projectKey : sites[0]?.projectKey
 
     const usage = `import create from "zustand";
 import Tracker from '@openreplay/tracker';
@@ -97,10 +101,4 @@ const useBearStore = create(
 
 ZustandDoc.displayName = 'ZustandDoc';
 
-export default connect((state) => {
-  const siteId = state.getIn(['integrations', 'siteId']);
-  const sites = state.getIn(['site', 'list']);
-  return {
-    projectKey: sites.find((site) => site.get('id') === siteId).get('projectKey'),
-  };
-})(ZustandDoc);
+export default observer(ZustandDoc);
diff --git a/frontend/app/components/Client/Modules/Modules.tsx b/frontend/app/components/Client/Modules/Modules.tsx
index 2ee7c1424..2767ff76f 100644
--- a/frontend/app/components/Client/Modules/Modules.tsx
+++ b/frontend/app/components/Client/Modules/Modules.tsx
@@ -2,20 +2,17 @@ import React, { useEffect } from 'react';
 import ModuleCard from 'Components/Client/Modules/ModuleCard';
 import { modules as list } from './';
 import withPageTitle from 'HOCs/withPageTitle';
-import { connect } from 'react-redux';
 import { userService } from 'App/services';
 import { toast } from 'react-toastify';
-import { updateModule } from 'Duck/user';
+import { useStore } from "App/mstore";
+import { observer } from 'mobx-react-lite';
 
-interface Props {
-  modules: string[];
-  updateModule: (moduleKey: string) => void;
-  isEnterprise: boolean;
-}
-
-function Modules(props: Props) {
-  const { modules } = props;
-  const [modulesState, setModulesState, isEnterprise = false] = React.useState<any[]>([]);
+function Modules() {
+  const { userStore } = useStore();
+  const updateModule = userStore.updateModule;
+  const modules = userStore.account.settings?.modules ?? [];
+  const isEnterprise = userStore.account.edition === 'ee';
+  const [modulesState, setModulesState] = React.useState<any[]>([]);
 
   const onToggle = async (module: any) => {
     try {
@@ -26,7 +23,7 @@ function Modules(props: Props) {
         module: module.key,
         status: isEnabled,
       });
-      props.updateModule(module.key);
+      updateModule(module.key);
       toast.success(`Module ${module.label} ${!isEnabled ? 'enabled' : 'disabled'}`);
     } catch (err) {
       console.error(err);
@@ -66,7 +63,4 @@ function Modules(props: Props) {
 }
 
 
-export default withPageTitle('Modules - OpenReplay Preferences')(connect((state: any) => ({
-  modules: state.getIn(['user', 'account', 'settings', 'modules']) || [],
-  isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee'
-}), { updateModule })(Modules));
+export default withPageTitle('Modules - OpenReplay Preferences')(observer(Modules));
diff --git a/frontend/app/components/Client/ProfileSettings/Api.js b/frontend/app/components/Client/ProfileSettings/Api.js
index 4307895aa..8a2614a8b 100644
--- a/frontend/app/components/Client/ProfileSettings/Api.js
+++ b/frontend/app/components/Client/ProfileSettings/Api.js
@@ -1,46 +1,25 @@
 import React from 'react';
-import copy from 'copy-to-clipboard';
-import { connect } from 'react-redux';
-import styles from './profileSettings.module.css';
-import { Form, Input, Button, CopyButton } from 'UI';
+import { observer } from 'mobx-react-lite'
+import { useStore } from 'App/mstore';
+import { CopyButton, Form, Input } from 'UI';
 
-@connect(state => ({
-  apiKey: state.getIn([ 'user', 'account', 'apiKey' ]),
-  loading: state.getIn([ 'user', 'updateAccountRequest', 'loading' ]) ||
-    state.getIn([ 'user', 'putClientRequest', 'loading' ]),
-}))
-export default class Api extends React.PureComponent {
-  state = { copied: false }
+function ApiKeySettings() {
+  const { userStore } = useStore();
 
-  copyHandler = () => {
-    const { apiKey } = this.props;
-    this.setState({ copied: true });
-    copy(apiKey);
-    setTimeout(() => {
-      this.setState({ copied: false });
-    }, 1000);
-  };
-
-  render() {
-    const { apiKey } = this.props;
-    const { copied } = this.state;
-
-    return (
-      <Form onSubmit={ this.handleSubmit } className={ styles.form }>
-        <Form.Field>
-          <label htmlFor="apiKey">{ 'Organization API Key' }</label>
-          <Input
-            name="apiKey"
-            id="apiKey"
-            type="text"
-            readOnly={ true }
-            value={ apiKey }
-            leadingButton={
-              <CopyButton content={ apiKey } />
-            }
-          />
-        </Form.Field>
-      </Form>
-    );
-  }
+  const apiKey = userStore.account.apiKey;
+  return (
+    <Form.Field>
+      <label htmlFor="apiKey">{'Organization API Key'}</label>
+      <Input
+        name="apiKey"
+        id="apiKey"
+        type="text"
+        readOnly={true}
+        value={apiKey}
+        leadingButton={<CopyButton content={apiKey} />}
+      />
+    </Form.Field>
+  );
 }
+
+export default observer(ApiKeySettings);
\ No newline at end of file
diff --git a/frontend/app/components/Client/ProfileSettings/ChangePassword.tsx b/frontend/app/components/Client/ProfileSettings/ChangePassword.tsx
index ce385345a..3b997a431 100644
--- a/frontend/app/components/Client/ProfileSettings/ChangePassword.tsx
+++ b/frontend/app/components/Client/ProfileSettings/ChangePassword.tsx
@@ -1,18 +1,20 @@
 import React, { useState, useCallback } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
 import { Button, Message, Form, Input } from 'UI';
 import styles from './profileSettings.module.css';
-import { updatePassword } from 'Duck/user';
 import { toast } from 'react-toastify';
 import { validatePassword } from 'App/validate';
 import { PASSWORD_POLICY } from 'App/constants';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 
 const ERROR_DOESNT_MATCH = "Passwords don't match";
 const MIN_LENGTH = 8;
 
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-const ChangePassword: React.FC<PropsFromRedux> = ({ passwordErrors, loading, updatePassword }) => {
+const ChangePassword = () => {
+  const { userStore } = useStore();
+  const updatePassword = userStore.updatePassword;
+  const passwordErrors = userStore.updatePasswordRequest.errors;
+  const loading = userStore.updatePasswordRequest.loading;
   const [oldPassword, setOldPassword] = useState<string>('');
   const [newPassword, setNewPassword] = useState<{ value: string; error: boolean }>({
     value: '',
@@ -22,7 +24,6 @@ const ChangePassword: React.FC<PropsFromRedux> = ({ passwordErrors, loading, upd
     value: '',
     error: false,
   });
-  const [success, setSuccess] = useState<boolean>(false);
   const [show, setShow] = useState<boolean>(false);
 
   const checkDoesntMatch = useCallback((newPassword: string, newPasswordRepeat: string) => {
@@ -55,7 +56,6 @@ const ChangePassword: React.FC<PropsFromRedux> = ({ passwordErrors, loading, upd
         newPassword: newPassword.value,
       }).then((e: any) => {
         const success = !e || !e.errors || e.errors.length === 0;
-        setSuccess(success);
         setShow(!success);
         if (success) {
           toast.success(`Successfully changed password`);
@@ -133,7 +133,6 @@ const ChangePassword: React.FC<PropsFromRedux> = ({ passwordErrors, loading, upd
             setOldPassword('');
             setNewPassword({ value: '', error: false });
             setNewPasswordRepeat({ value: '', error: false });
-            setSuccess(false);
             setShow(false);
           }}
         >
@@ -148,15 +147,4 @@ const ChangePassword: React.FC<PropsFromRedux> = ({ passwordErrors, loading, upd
   );
 };
 
-const mapStateToProps = (state: any) => ({
-  passwordErrors: state.getIn(['user', 'passwordErrors']),
-  loading: state.getIn(['user', 'updatePasswordRequest', 'loading']),
-});
-
-const mapDispatchToProps = {
-  updatePassword,
-};
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
-
-export default connector(ChangePassword);
+export default observer(ChangePassword);
diff --git a/frontend/app/components/Client/ProfileSettings/Licenses.js b/frontend/app/components/Client/ProfileSettings/Licenses.js
index 748d5bb80..a071b2b79 100644
--- a/frontend/app/components/Client/ProfileSettings/Licenses.js
+++ b/frontend/app/components/Client/ProfileSettings/Licenses.js
@@ -1,7 +1,10 @@
 import React from 'react'
-import { connect } from 'react-redux'
+import { observer } from 'mobx-react-lite'
+import { useStore } from 'App/mstore'
 
-function Licenses({ account }) {
+function Licenses() {
+  const { userStore } = useStore()
+  const account = userStore.account
   return (
     <div>
       <div>{account.license}</div>
@@ -14,6 +17,4 @@ function Licenses({ account }) {
   )
 }
 
-export default connect(state => ({
-  account: state.getIn([ 'user', 'account' ]),
-}))(Licenses)
+export default observer(Licenses)
diff --git a/frontend/app/components/Client/ProfileSettings/OptOut.js b/frontend/app/components/Client/ProfileSettings/OptOut.js
index b435a22c5..7cc271394 100644
--- a/frontend/app/components/Client/ProfileSettings/OptOut.js
+++ b/frontend/app/components/Client/ProfileSettings/OptOut.js
@@ -1,28 +1,29 @@
 import React from 'react'
-import { connect } from 'react-redux';
 import { Checkbox } from 'UI'
-import { updateClient } from 'Duck/user'
+import { observer } from 'mobx-react-lite'
+import { useStore } from "App/mstore";
+
+function OptOut() {
+  const { userStore } = useStore();
+  const optOut = userStore.account.optOut;
+  const updateClient = userStore.updateClient;
 
-function OptOut(props) {
-  const { optOut } = props;
   const onChange = () => {
-    props.updateClient({ optOut: !optOut })
+    void updateClient({ optOut: !optOut });
   }
+
   return (
     <div>
       <Checkbox
         name="isPublic"
-        className="font-medium"
         type="checkbox"
         checked={ optOut }
         onClick={ onChange }
-        className="mr-8"
+        className="font-medium mr-8"
         label="Anonymize"
       />
     </div>
   )
 }
 
-export default connect(state => ({
-  optOut: state.getIn([ 'user', 'account', 'optOut' ]),
-}), { updateClient })(OptOut);
+export default observer(OptOut);
diff --git a/frontend/app/components/Client/ProfileSettings/ProfileSettings.js b/frontend/app/components/Client/ProfileSettings/ProfileSettings.js
index 2b3ea3e8e..1da280a01 100644
--- a/frontend/app/components/Client/ProfileSettings/ProfileSettings.js
+++ b/frontend/app/components/Client/ProfileSettings/ProfileSettings.js
@@ -7,106 +7,104 @@ import Api from './Api';
 import TenantKey from './TenantKey';
 import OptOut from './OptOut';
 import Licenses from './Licenses';
-import { connect } from 'react-redux';
 import { PageTitle } from 'UI';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 
-@withPageTitle('Account - OpenReplay Preferences')
-@connect((state) => ({
-    account: state.getIn(['user', 'account']),
-    isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
-}))
-export default class ProfileSettings extends React.PureComponent {
-    render() {
-        const { account, isEnterprise } = this.props;
-        return (
-            <div className="bg-white rounded-lg  border shadow-sm p-5">
-                <PageTitle title={<div>Account</div>} />
-                <div className="flex items-center">
-                    <div className={styles.left}>
-                        <h4 className="text-lg mb-4">{'Profile'}</h4>
-                        <div className={styles.info}>{'Your email address is your identity on OpenReplay and is used to login.'}</div>
-                    </div>
-                    <div>
-                        <Settings />
-                    </div>
-                </div>
+function ProfileSettings() {
+  const { userStore } = useStore();
+  const account = userStore.account;
+  const isEnterprise = userStore.isEnterprise;
+  return (
+    <div className="bg-white rounded-lg  border shadow-sm p-5">
+      <PageTitle title={<div>Account</div>} />
+      <div className="flex items-center">
+        <div className={styles.left}>
+          <h4 className="text-lg mb-4">{'Profile'}</h4>
+          <div className={styles.info}>{'Your email address is your identity on OpenReplay and is used to login.'}</div>
+        </div>
+        <div>
+          <Settings />
+        </div>
+      </div>
 
-                <div className="border-b my-10" />
+      <div className="border-b my-10" />
 
-                {account.hasPassword && (
-                    <>
-                        <div className="flex items-center">
-                            <div className={styles.left}>
-                                <h4 className="text-lg mb-4">{'Change Password'}</h4>
-                                <div className={styles.info}>{'Updating your password from time to time enhances your account’s security.'}</div>
-                            </div>
-                            <div>
-                                <ChangePassword />
-                            </div>
-                        </div>
-
-                        <div className="border-b my-10" />
-                    </>
-                )}
-
-                <div className="flex items-center">
-                    <div className={styles.left}>
-                        <h4 className="text-lg mb-4">{'Organization API Key'}</h4>
-                        <div className={styles.info}>{'Your API key gives you access to an extra set of services.'}</div>
-                    </div>
-                    <div>
-                        <Api />
-                    </div>
-                </div>
-
-                {isEnterprise && (account.admin || account.superAdmin) && (
-                    <>
-                        <div className="border-b my-10" />
-                        <div className="flex items-center">
-                            <div className={styles.left}>
-                                <h4 className="text-lg mb-4">{'Tenant Key'}</h4>
-                                <div className={styles.info}>{'For SSO (SAML) authentication.'}</div>
-                            </div>
-                            <div>
-                                <TenantKey />
-                            </div>
-                        </div>
-                    </>
-                )}
-
-                {!isEnterprise && (
-                    <>
-                        <div className="border-b my-10" />
-                        <div className="flex items-center">
-                            <div className={styles.left}>
-                                <h4 className="text-lg mb-4">{'Data Collection'}</h4>
-                                <div className={styles.info}>
-                                    {'Enables you to control how OpenReplay captures data on your organization’s usage to improve our product.'}
-                                </div>
-                            </div>
-                            <div>
-                                <OptOut />
-                            </div>
-                        </div>
-                    </>
-                )}
-
-                {account.license && (
-                    <>
-                        <div className="border-b my-10" />
-
-                        <div className="flex items-center">
-                            <div className={styles.left}>
-                                <h4 className="text-lg mb-4">{'License'}</h4>
-                                <div className={styles.info}>{'License key and expiration date.'}</div>
-                            </div>
-                            <div>
-                                <Licenses />
-                            </div>
-                        </div>
-                    </>
-                )}
+      {account.hasPassword && (
+        <>
+          <div className="flex items-center">
+            <div className={styles.left}>
+              <h4 className="text-lg mb-4">{'Change Password'}</h4>
+              <div className={styles.info}>{'Updating your password from time to time enhances your account’s security.'}</div>
             </div>
-        );
-    }
+            <div>
+              <ChangePassword />
+            </div>
+          </div>
+
+          <div className="border-b my-10" />
+        </>
+      )}
+
+      <div className="flex items-center">
+        <div className={styles.left}>
+          <h4 className="text-lg mb-4">{'Organization API Key'}</h4>
+          <div className={styles.info}>{'Your API key gives you access to an extra set of services.'}</div>
+        </div>
+        <div>
+          <Api />
+        </div>
+      </div>
+
+      {isEnterprise && (account.admin || account.superAdmin) && (
+        <>
+          <div className="border-b my-10" />
+          <div className="flex items-center">
+            <div className={styles.left}>
+              <h4 className="text-lg mb-4">{'Tenant Key'}</h4>
+              <div className={styles.info}>{'For SSO (SAML) authentication.'}</div>
+            </div>
+            <div>
+              <TenantKey />
+            </div>
+          </div>
+        </>
+      )}
+
+      {!isEnterprise && (
+        <>
+          <div className="border-b my-10" />
+          <div className="flex items-center">
+            <div className={styles.left}>
+              <h4 className="text-lg mb-4">{'Data Collection'}</h4>
+              <div className={styles.info}>
+                {'Enables you to control how OpenReplay captures data on your organization’s usage to improve our product.'}
+              </div>
+            </div>
+            <div>
+              <OptOut />
+            </div>
+          </div>
+        </>
+      )}
+
+      {account.license && (
+        <>
+          <div className="border-b my-10" />
+
+          <div className="flex items-center">
+            <div className={styles.left}>
+              <h4 className="text-lg mb-4">{'License'}</h4>
+              <div className={styles.info}>{'License key and expiration date.'}</div>
+            </div>
+            <div>
+              <Licenses />
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
 }
+
+export default withPageTitle('Account - OpenReplay Preferences')(observer(ProfileSettings));
diff --git a/frontend/app/components/Client/ProfileSettings/Settings.js b/frontend/app/components/Client/ProfileSettings/Settings.js
index 12272763c..e6c5a6b96 100644
--- a/frontend/app/components/Client/ProfileSettings/Settings.js
+++ b/frontend/app/components/Client/ProfileSettings/Settings.js
@@ -1,74 +1,66 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { Button, Input, Form } from 'UI';
-import { updateAccount, updateClient } from 'Duck/user';
 import styles from './profileSettings.module.css';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 
-@connect(
-  (state) => ({
-    accountName: state.getIn(['user', 'account', 'name']),
-    organizationName: state.getIn(['user', 'account', 'tenantName']),
-    loading:
-      state.getIn(['user', 'updateAccountRequest', 'loading']) ||
-      state.getIn(['user', 'putClientRequest', 'loading']),
-  }),
-  {
-    updateAccount,
-    updateClient,
+function Settings() {
+  const { userStore } = useStore();
+  const updateClient = userStore.updateClient;
+  const storeAccountName = userStore.account.name;
+  const storeOrganizationName = userStore.account.tenantName;
+  const loading = userStore.loading;
+  const [accountName, setAccountName] = React.useState(storeAccountName);
+  const [organizationName, setOrganizationName] = React.useState(storeOrganizationName);
+  const [changed, setChanged] = React.useState(false);
+
+  const onAccNameChange = (e) => {
+    setAccountName(e.target.value);
+    setChanged(true);
   }
-)
-export default class Settings extends React.PureComponent {
-  state = {
-    accountName: this.props.accountName,
-    organizationName: this.props.organizationName,
-  };
 
-  onChange = ({ target: { value, name } }) => {
-    this.setState({ changed: true, [name]: value });
-  };
+  const onOrgNameChange = (e) => {
+    setOrganizationName(e.target.value);
+    setChanged(true);
+  }
 
-  handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
-    const { accountName, organizationName } = this.state;
-    this.props
-      .updateClient({ name: accountName, tenantName: organizationName })
-      .then(() => this.setState({ changed: false }));
-  };
-
-  render() {
-    const { loading } = this.props;
-    const { accountName, organizationName, changed, copied } = this.state;
-
-    return (
-      <Form onSubmit={this.handleSubmit} className={styles.form}>
-        <Form.Field>
-          <label htmlFor="accountName">{'Name'}</label>
-          <Input
-            name="accountName"
-            id="accountName"
-            type="text"
-            onChange={this.onChange}
-            value={accountName}
-            maxLength={50}
-          />
-        </Form.Field>
-
-        <Form.Field>
-          <label htmlFor="organizationName">{'Organization'}</label>
-          <Input
-            name="organizationName"
-            id="organizationName"
-            type="text"
-            onChange={this.onChange}
-            value={organizationName}
-            maxLength={50}
-          />
-        </Form.Field>
-
-        <Button variant="outline" loading={loading} disabled={!changed} type="submit">
-          {'Update'}
-        </Button>
-      </Form>
-    );
+    await updateClient({ name: accountName, tenantName: organizationName });
+    setChanged(false);
   }
+
+  return (
+    <Form onSubmit={handleSubmit} className={styles.form}>
+      <Form.Field>
+        <label htmlFor="accountName">{'Name'}</label>
+        <Input
+          name="accountName"
+          id="accountName"
+          type="text"
+          onChange={onAccNameChange}
+          value={accountName}
+          maxLength={50}
+        />
+      </Form.Field>
+
+      <Form.Field>
+        <label htmlFor="organizationName">{'Organization'}</label>
+        <Input
+          name="organizationName"
+          id="organizationName"
+          type="text"
+          onChange={onOrgNameChange}
+          value={organizationName}
+          maxLength={50}
+        />
+      </Form.Field>
+
+      <Button variant="outline" loading={loading} disabled={!changed} type="submit">
+        {'Update'}
+      </Button>
+    </Form>
+  );
 }
+
+export default observer(Settings);
diff --git a/frontend/app/components/Client/ProfileSettings/TenantKey.js b/frontend/app/components/Client/ProfileSettings/TenantKey.js
index 62bf48ba0..070d6f72a 100644
--- a/frontend/app/components/Client/ProfileSettings/TenantKey.js
+++ b/frontend/app/components/Client/ProfileSettings/TenantKey.js
@@ -1,51 +1,43 @@
-// TODO this can be deleted
 import React from 'react';
 import copy from 'copy-to-clipboard';
-import { connect } from 'react-redux';
-import styles from './profileSettings.module.css';
 import { Form, Input, Button } from "UI";
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 
-@connect(state => ({
-  tenantKey: state.getIn([ 'user', 'account', 'tenantKey' ]),
-}))
-export default class TenantKey extends React.PureComponent {
-  state = { copied: false }
 
-  copyHandler = () => {
-    const { tenantKey } = this.props;
-    this.setState({ copied: true });
+function TenantKey() {
+  const [ copied, setCopied ] = React.useState(false);
+  const { userStore } = useStore();
+  const tenantKey = userStore.account.tenantKey;
+
+  const copyHandler = () => {
+    setCopied(true);
     copy(tenantKey);
     setTimeout(() => {
-      this.setState({ copied: false });
+      setCopied(false);
     }, 1000);
-  };
-
-  render() {
-    const { tenantKey } = this.props;
-    const { copied } = this.state;
-
-    return (
-      <Form onSubmit={ this.handleSubmit } className={ styles.form }>
-        <Form.Field>
-          <label htmlFor="tenantKey">{ 'Tenant Key' }</label>
-            <Input
-              name="tenantKey"
-              id="tenantKey"
-              type="text"
-              readOnly={ true }
-              value={ tenantKey }
-              leadingButton={
-                <Button
-                  variant="text-primary"
-                  role="button"
-                  onClick={ this.copyHandler }
-                >
-                  { copied ? 'Copied' : 'Copy' }
-                </Button>
-              }
-            />
-        </Form.Field>
-      </Form>
-    );
   }
+  return (
+      <Form.Field>
+        <label htmlFor="tenantKey">{ 'Tenant Key' }</label>
+          <Input
+            name="tenantKey"
+            id="tenantKey"
+            type="text"
+            readOnly={ true }
+            value={ tenantKey }
+            leadingButton={
+              <Button
+                variant="text-primary"
+                role="button"
+                onClick={ copyHandler }
+              >
+                { copied ? 'Copied' : 'Copy' }
+              </Button>
+            }
+          />
+      </Form.Field>
+  );
 }
+
+export default observer(TenantKey);
diff --git a/frontend/app/components/Client/Roles/Roles.tsx b/frontend/app/components/Client/Roles/Roles.tsx
index 470cd611b..3cc97be7c 100644
--- a/frontend/app/components/Client/Roles/Roles.tsx
+++ b/frontend/app/components/Client/Roles/Roles.tsx
@@ -1,133 +1,117 @@
-import React, { useEffect } from 'react';
-import cn from 'classnames';
-import { Loader, NoContent, Button, Tooltip } from 'UI';
-import { connect } from 'react-redux';
-import stl from './roles.module.css';
-import RoleForm from './components/RoleForm';
-import { init, edit, fetchList, remove as deleteRole, resetErrors } from 'Duck/roles';
-import RoleItem from './components/RoleItem';
-import { confirm } from 'UI';
-import { toast } from 'react-toastify';
 import withPageTitle from 'HOCs/withPageTitle';
+import cn from 'classnames';
+import { observer } from 'mobx-react-lite';
+import React, { useEffect } from 'react';
+
 import { useModal } from 'App/components/Modal';
+import { useStore } from 'App/mstore';
+import { Button, Loader, NoContent, Tooltip } from 'UI';
+import { confirm } from 'UI';
 
-interface Props {
-    loading: boolean;
-    init: (role?: any) => void;
-    edit: (role: any) => void;
-    instance: any;
-    roles: any[];
-    deleteRole: (id: any) => Promise<void>;
-    fetchList: () => Promise<void>;
-    account: any;
-    permissionsMap: any;
-    removeErrors: any;
-    resetErrors: () => void;
-    projectsMap: any;
-}
+import RoleForm from './components/RoleForm';
+import RoleItem from './components/RoleItem';
+import stl from './roles.module.css';
 
-function Roles(props: Props) {
-    const { loading, roles, init, edit, deleteRole, account, permissionsMap, projectsMap, removeErrors } = props;
-    const { showModal, hideModal } = useModal();
-    const isAdmin = account.admin || account.superAdmin;
+function Roles() {
+  const { roleStore, projectsStore, userStore } = useStore();
+  const account = userStore.account;
+  const projectsMap = projectsStore.list.reduce((acc: any, p: any) => {
+    acc[p.id] = p.name;
+    return acc;
+  }, {});
+  const roles = roleStore.list;
+  const loading = roleStore.loading;
+  const init = roleStore.init;
+  const deleteRole = roleStore.deleteRole;
+  const permissionsMap: any = {};
+  roleStore.permissions.forEach((p: any) => {
+    permissionsMap[p.value] = p.text;
+  });
+  const { showModal, hideModal } = useModal();
+  const isAdmin = account.admin || account.superAdmin;
 
-    useEffect(() => {
-        props.fetchList();
-    }, []);
+  useEffect(() => {
+    void roleStore.fetchRoles();
+  }, []);
 
-    useEffect(() => {
-        if (removeErrors && removeErrors.size > 0) {
-            removeErrors.forEach((e: any) => {
-                toast.error(e);
-            });
-        }
-        return () => {
-            props.resetErrors();
-        };
-    }, [removeErrors]);
-
-    const editHandler = (role: any) => {
-        init(role);
-        showModal(<RoleForm closeModal={hideModal} permissionsMap={permissionsMap} deleteHandler={deleteHandler} />, { right: true });
-    };
-
-    const deleteHandler = async (role: any) => {
-        if (
-            await confirm({
-                header: 'Roles',
-                confirmation: `Are you sure you want to remove this role?`,
-            })
-        ) {
-            deleteRole(role.roleId).then(hideModal);
-        }
-    };
-
-    return (
-        <React.Fragment>
-            <Loader loading={loading}>
-                <div className="bg-white rounded-lg shadow-sm border">
-                    <div className={cn(stl.tabHeader, 'flex items-center')}>
-                        <div className="flex items-center mr-auto px-5 pt-5">
-                            <h3 className={cn(stl.tabTitle, 'text-2xl')}>Roles and Access</h3>
-                            <Tooltip title="You don’t have the permissions to perform this action." disabled={isAdmin}>
-                                <Button variant="primary" onClick={() => editHandler({})}>Add</Button>
-                            </Tooltip>
-                        </div>
-                    </div>
-
-                    <NoContent title="No roles are available" size="small" show={false}>
-                        <div className={''}>
-                            <div className={cn('flex items-start py-3 border-b px-5 pr-20 font-medium')}>
-                                <div className="" style={{ width: '20%' }}>
-                                    Title
-                                </div>
-                                <div className="" style={{ width: '30%' }}>
-                                    Project Access
-                                </div>
-                                <div className="" style={{ width: '50%' }}>
-                                    Feature Access
-                                </div>
-                                <div></div>
-                            </div>
-                            {roles.map((role) => (
-                                <RoleItem
-                                    key={role.roleId}
-                                    role={role}
-                                    isAdmin={isAdmin}
-                                    permissions={permissionsMap}
-                                    projects={projectsMap}
-                                    editHandler={editHandler}
-                                    deleteHandler={deleteHandler}
-                                />
-                            ))}
-                        </div>
-                    </NoContent>
-                </div>
-            </Loader>
-        </React.Fragment>
+  const editHandler = (role: any) => {
+    init(role);
+    showModal(
+      <RoleForm
+        closeModal={hideModal}
+        permissionsMap={permissionsMap}
+        deleteHandler={deleteHandler}
+      />,
+      { right: true }
     );
+  };
+
+  const deleteHandler = async (role: any) => {
+    if (
+      await confirm({
+        header: 'Roles',
+        confirmation: `Are you sure you want to remove this role?`,
+      })
+    ) {
+      deleteRole(role.roleId).then(hideModal);
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <Loader loading={loading}>
+        <div className="bg-white rounded-lg shadow-sm border">
+          <div className={cn(stl.tabHeader, 'flex items-center')}>
+            <div className="flex items-center mr-auto px-5 pt-5">
+              <h3 className={cn(stl.tabTitle, 'text-2xl')}>Roles and Access</h3>
+              <Tooltip
+                title="You don’t have the permissions to perform this action."
+                disabled={isAdmin}
+              >
+                <Button variant="primary" onClick={() => editHandler({})}>
+                  Add
+                </Button>
+              </Tooltip>
+            </div>
+          </div>
+
+          <NoContent title="No roles are available" size="small" show={false}>
+            <div className={''}>
+              <div
+                className={cn(
+                  'flex items-start py-3 border-b px-5 pr-20 font-medium'
+                )}
+              >
+                <div className="" style={{ width: '20%' }}>
+                  Title
+                </div>
+                <div className="" style={{ width: '30%' }}>
+                  Project Access
+                </div>
+                <div className="" style={{ width: '50%' }}>
+                  Feature Access
+                </div>
+                <div></div>
+              </div>
+              {roles.map((role) => (
+                <RoleItem
+                  key={role.roleId}
+                  role={role}
+                  isAdmin={isAdmin}
+                  permissions={permissionsMap}
+                  projects={projectsMap}
+                  editHandler={editHandler}
+                  deleteHandler={deleteHandler}
+                />
+              ))}
+            </div>
+          </NoContent>
+        </div>
+      </Loader>
+    </React.Fragment>
+  );
 }
 
-export default connect(
-    (state: any) => {
-        const permissions = state.getIn(['roles', 'permissions']);
-        const permissionsMap: any = {};
-        permissions.forEach((p: any) => {
-            permissionsMap[p.value] = p.text;
-        });
-        const projects = state.getIn(['site', 'list']);
-        return {
-            instance: state.getIn(['roles', 'instance']) || null,
-            permissionsMap: permissionsMap,
-            roles: state.getIn(['roles', 'list']),
-            removeErrors: state.getIn(['roles', 'removeRequest', 'errors']),
-            loading: state.getIn(['roles', 'fetchRequest', 'loading']),
-            account: state.getIn(['user', 'account']),
-            projectsMap: projects.reduce((acc: any, p: any) => {
-                acc[p.get('id')] = p.get('name');
-                return acc;
-            }, {}),
-        };
-    },
-    { init, edit, fetchList, deleteRole, resetErrors }
-)(withPageTitle('Roles & Access - OpenReplay Preferences')(Roles));
+export default withPageTitle('Roles & Access - OpenReplay Preferences')(
+  observer(Roles)
+);
diff --git a/frontend/app/components/Client/Roles/components/Permissions/Permissions.tsx b/frontend/app/components/Client/Roles/components/Permissions/Permissions.tsx
deleted file mode 100644
index 0dd56dfd9..000000000
--- a/frontend/app/components/Client/Roles/components/Permissions/Permissions.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import Role from 'Types/role'
-
-interface Props {
-  role: Role
-}
-function Permissions(props: Props) {
-  return (
-    <div>
-      
-    </div>
-  );
-}
-
-export default Permissions;
\ No newline at end of file
diff --git a/frontend/app/components/Client/Roles/components/Permissions/index.ts b/frontend/app/components/Client/Roles/components/Permissions/index.ts
deleted file mode 100644
index 659544a53..000000000
--- a/frontend/app/components/Client/Roles/components/Permissions/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Permissions';
\ No newline at end of file
diff --git a/frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx b/frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx
index b6b9efe92..b674a8b3d 100644
--- a/frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx
+++ b/frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx
@@ -1,196 +1,222 @@
-import React, { useRef, useEffect } from 'react';
-import { connect } from 'react-redux';
-import stl from './roleForm.module.css';
-import { save, edit } from 'Duck/roles';
-import { Form, Input, Button, Checkbox, Icon } from 'UI';
+import { observer } from 'mobx-react-lite';
+import React, { useEffect, useRef } from 'react';
+
+import { useStore } from 'App/mstore';
+import { Button, Checkbox, Form, Icon, Input } from 'UI';
+
 import Select from 'Shared/Select';
 
-interface Permission {
-    name: string;
-    value: string;
-}
+import stl from './roleForm.module.css';
 
 interface Props {
-    role: any;
-    edit: (role: any) => void;
-    save: (role: any) => Promise<void>;
-    closeModal: (toastMessage?: string) => void;
-    saving: boolean;
-    permissions: Array<Permission>[];
-    projectOptions: Array<any>[];
-    permissionsMap: any;
-    projectsMap: any;
-    deleteHandler: (id: any) => Promise<void>;
+  closeModal: (toastMessage?: string) => void;
+  permissionsMap: any;
+  deleteHandler: (id: any) => Promise<void>;
 }
 
 const RoleForm = (props: Props) => {
-    const { role, edit, save, closeModal, saving, permissions, projectOptions, permissionsMap, projectsMap } = props;
-    let focusElement = useRef<any>(null);
-    const _save = () => {
-        save(role).then(() => {
-            closeModal(role.exists() ? 'Role updated' : 'Role created');
-        });
-    };
+  const { roleStore, projectsStore } = useStore();
+  const projects = projectsStore.list;
+  const role = roleStore.instance;
+  const saving = roleStore.loading;
+  const { closeModal, permissionsMap } = props;
+  const projectOptions = projects
+    .filter(({ value }) => !role.projects.includes(value))
+    .map((p: any) => ({
+      key: p.id,
+      value: p.id,
+      label: p.name,
+    }))
+    .filter(({ value }: any) => !role.projects.includes(value));
+  const projectsMap = projects.reduce((acc: any, p: any) => {
+    acc[p.id] = p.name;
+    return acc;
+  }, {});
 
-    const write = ({ target: { value, name } }: any) => edit({ [name]: value });
+  let focusElement = useRef<any>(null);
+  const permissions: {}[] = roleStore.permissions
+    .filter(({ value }) => !role.permissions.includes(value))
+    .map((p) => ({
+      label: p.text,
+      value: p.value,
+    }));
+  const _save = () => {
+    roleStore.saveRole(role).then(() => {
+      closeModal(role.exists() ? 'Role updated' : 'Role created');
+    });
+  };
 
-    const onChangePermissions = (e: any) => {
-        const { permissions } = role;
-        const index = permissions.indexOf(e);
-        const _perms = permissions.contains(e) ? permissions.remove(index) : permissions.push(e);
-        edit({ permissions: _perms });
-    };
+  const write = ({ target: { value, name } }: any) =>
+    roleStore.editRole({ [name]: value });
 
-    const onChangeProjects = (e: any) => {
-        const { projects } = role;
-        const index = projects.indexOf(e);
-        const _projects = index === -1 ? projects.push(e) : projects.remove(index);
-        edit({ projects: _projects });
-    };
+  const onChangePermissions = (e: any) => {
+    const { permissions } = role;
+    const index = permissions.indexOf(e);
+    let _perms;
+    if (permissions.includes(e)) {
+      permissions.splice(index, 1);
+      _perms = permissions;
+    } else {
+      _perms = permissions.concat(e);
+    }
+    roleStore.editRole({ permissions: _perms });
+  };
 
-    const writeOption = ({ name, value }: any) => {
-        if (name === 'permissions') {
-            onChangePermissions(value);
-        } else if (name === 'projects') {
-            onChangeProjects(value);
-        }
-    };
+  const onChangeProjects = (e: any) => {
+    const { projects } = role;
+    const index = projects.indexOf(e);
+    let _projects;
+    if (index === -1) {
+      _projects = projects.concat(e);
+    } else {
+      projects.splice(index, 1);
+      _projects = projects;
+    }
+    roleStore.editRole({ projects: _projects });
+  };
 
-    const toggleAllProjects = () => {
-        const { allProjects } = role;
-        edit({ allProjects: !allProjects });
-    };
+  const writeOption = ({ name, value }: any) => {
+    if (name === 'permissions') {
+      onChangePermissions(value);
+    } else if (name === 'projects') {
+      onChangeProjects(value);
+    }
+  };
 
-    useEffect(() => {
-        focusElement && focusElement.current && focusElement.current.focus();
-    }, []);
+  const toggleAllProjects = () => {
+    const { allProjects } = role;
+    roleStore.editRole({ allProjects: !allProjects });
+  };
 
-    return (
-        <div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
-            <h3 className="p-5 text-2xl">{role.exists() ? 'Edit Role' : 'Create Role'}</h3>
-            <div className="px-5">
-                <Form onSubmit={_save}>
-                    <Form.Field>
-                        <label>{'Title'}</label>
-                        <Input
-                            ref={focusElement}
-                            name="name"
-                            value={role.name}
-                            onChange={write}
-                            maxLength={40}
-                            className={stl.input}
-                            id="name-field"
-                            placeholder="Ex. Admin"
-                        />
-                    </Form.Field>
+  useEffect(() => {
+    focusElement && focusElement.current && focusElement.current.focus();
+  }, []);
 
-                    <Form.Field>
-                        <label>{'Project Access'}</label>
+  return (
+    <div
+      className="bg-white h-screen overflow-y-auto"
+      style={{ width: '350px' }}
+    >
+      <h3 className="p-5 text-2xl">
+        {role.exists() ? 'Edit Role' : 'Create Role'}
+      </h3>
+      <div className="px-5">
+        <Form onSubmit={_save}>
+          <Form.Field>
+            <label>{'Title'}</label>
+            <Input
+              ref={focusElement}
+              name="name"
+              value={role.name}
+              onChange={write}
+              maxLength={40}
+              className={stl.input}
+              id="name-field"
+              placeholder="Ex. Admin"
+            />
+          </Form.Field>
 
-                        <div className="flex my-3">
-                            <Checkbox
-                                name="allProjects"
-                                className="font-medium mr-3"
-                                type="checkbox"
-                                checked={role.allProjects}
-                                onClick={toggleAllProjects}
-                                label={''}
-                            />
-                            <div className="cursor-pointer leading-none select-none" onClick={toggleAllProjects}>
-                                <div>All Projects</div>
-                                <span className="text-xs text-gray-600">(Uncheck to select specific projects)</span>
-                            </div>
-                        </div>
-                        {!role.allProjects && (
-                            <>
-                                <Select
-                                    isSearchable
-                                    name="projects"
-                                    options={projectOptions}
-                                    onChange={({ value }: any) => writeOption({ name: 'projects', value: value.value })}
-                                    value={null}
-                                />
-                                {role.projects.size > 0 && (
-                                    <div className="flex flex-row items-start flex-wrap mt-4">
-                                        {role.projects.map((p: any) => OptionLabel(projectsMap, p, onChangeProjects))}
-                                    </div>
-                                )}
-                            </>
-                        )}
-                    </Form.Field>
+          <Form.Field>
+            <label>{'Project Access'}</label>
 
-                    <Form.Field>
-                        <label>{'Capability Access'}</label>
-                        <Select
-                            isSearchable
-                            name="permissions"
-                            options={permissions}
-                            onChange={({ value }: any) => writeOption({ name: 'permissions', value: value.value })}
-                            value={null}
-                        />
-                        {role.permissions.size > 0 && (
-                            <div className="flex flex-row items-start flex-wrap mt-4">
-                                {role.permissions.map((p: any) => OptionLabel(permissionsMap, p, onChangePermissions))}
-                            </div>
-                        )}
-                    </Form.Field>
-                </Form>
-
-                <div className="flex items-center">
-                    <div className="flex items-center mr-auto">
-                        <Button onClick={_save} disabled={!role.validate()} loading={saving} variant="primary" className="float-left mr-2">
-                            {role.exists() ? 'Update' : 'Add'}
-                        </Button>
-                        {role.exists() && <Button onClick={closeModal}>{'Cancel'}</Button>}
-                    </div>
-                    {role.exists() && (
-                        <Button variant="text" onClick={() => props.deleteHandler(role)}>
-                            <Icon name="trash" size="18" />
-                        </Button>
-                    )}
-                </div>
+            <div className="flex my-3">
+              <Checkbox
+                name="allProjects"
+                className="font-medium mr-3"
+                type="checkbox"
+                checked={role.allProjects}
+                onClick={toggleAllProjects}
+                label={''}
+              />
+              <div
+                className="cursor-pointer leading-none select-none"
+                onClick={toggleAllProjects}
+              >
+                <div>All Projects</div>
+                <span className="text-xs text-gray-600">
+                  (Uncheck to select specific projects)
+                </span>
+              </div>
             </div>
+            {!role.allProjects && (
+              <>
+                <Select
+                  isSearchable
+                  name="projects"
+                  options={projectOptions}
+                  onChange={({ value }: any) =>
+                    writeOption({ name: 'projects', value: value.value })
+                  }
+                  value={null}
+                />
+                {role.projects.size > 0 && (
+                  <div className="flex flex-row items-start flex-wrap mt-4">
+                    {role.projects.map((p: any) =>
+                      OptionLabel(projectsMap, p, onChangeProjects)
+                    )}
+                  </div>
+                )}
+              </>
+            )}
+          </Form.Field>
+
+          <Form.Field>
+            <label>{'Capability Access'}</label>
+            <Select
+              isSearchable
+              name="permissions"
+              options={permissions}
+              onChange={({ value }: any) =>
+                writeOption({ name: 'permissions', value: value.value })
+              }
+              value={null}
+            />
+            {role.permissions.length > 0 && (
+              <div className="flex flex-row items-start flex-wrap mt-4">
+                {role.permissions.map((p: any) =>
+                  OptionLabel(permissionsMap, p, onChangePermissions)
+                )}
+              </div>
+            )}
+          </Form.Field>
+        </Form>
+
+        <div className="flex items-center">
+          <div className="flex items-center mr-auto">
+            <Button
+              onClick={_save}
+              disabled={!role.validate}
+              loading={saving}
+              variant="primary"
+              className="float-left mr-2"
+            >
+              {role.exists() ? 'Update' : 'Add'}
+            </Button>
+            {role.exists() && <Button onClick={closeModal}>{'Cancel'}</Button>}
+          </div>
+          {role.exists() && (
+            <Button variant="text" onClick={() => props.deleteHandler(role)}>
+              <Icon name="trash" size="18" />
+            </Button>
+          )}
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
-export default connect(
-    (state: any) => {
-        const role = state.getIn(['roles', 'instance']);
-        const projects = state.getIn(['site', 'list']);
-        return {
-            role,
-            projectOptions: projects
-                .map((p: any) => ({
-                    key: p.get('id'),
-                    value: p.get('id'),
-                    label: p.get('name'),
-                    // isDisabled: role.projects.includes(p.get('id')),
-                }))
-                .filter(({ value }: any) => !role.projects.includes(value))
-                .toJS(),
-            permissions: state
-                .getIn(['roles', 'permissions'])
-                .filter(({ value }: any) => !role.permissions.includes(value))
-                .map(({ text, value }: any) => ({ label: text, value }))
-                .toJS(),
-            saving: state.getIn(['roles', 'saveRequest', 'loading']),
-            projectsMap: projects.reduce((acc: any, p: any) => {
-                acc[p.get('id')] = p.get('name');
-                return acc;
-            }, {}),
-        };
-    },
-    { edit, save }
-)(RoleForm);
+export default observer(RoleForm);
 
 function OptionLabel(nameMap: any, p: any, onChangeOption: (e: any) => void) {
-    return (
-        <div className="px-2 py-1 rounded bg-gray-lightest mr-2 mb-2 border flex items-center justify-between" key={p.roleId}>
-            <div>{nameMap[p]}</div>
-            <div className="cursor-pointer ml-2" onClick={() => onChangeOption(p)}>
-                <Icon name="close" size="12" />
-            </div>
-        </div>
-    );
+  return (
+    <div
+      className="px-2 py-1 rounded bg-gray-lightest mr-2 mb-2 border flex items-center justify-between"
+      key={p.roleId}
+    >
+      <div>{nameMap[p]}</div>
+      <div className="cursor-pointer ml-2" onClick={() => onChangeOption(p)}>
+        <Icon name="close" size="12" />
+      </div>
+    </div>
+  );
 }
diff --git a/frontend/app/components/Client/SessionsListingSettings.tsx b/frontend/app/components/Client/SessionsListingSettings.tsx
index 79a78061a..8dee24bf5 100644
--- a/frontend/app/components/Client/SessionsListingSettings.tsx
+++ b/frontend/app/components/Client/SessionsListingSettings.tsx
@@ -1,41 +1,29 @@
+import withPageTitle from 'HOCs/withPageTitle';
 import React from 'react';
-import { connect } from 'react-redux';
-import { PageTitle, Divider } from 'UI';
-import ListingVisibility from 'Shared/SessionSettings/components/ListingVisibility';
+import { Divider, PageTitle } from 'UI';
+
 import DefaultPlaying from 'Shared/SessionSettings/components/DefaultPlaying';
 import DefaultTimezone from 'Shared/SessionSettings/components/DefaultTimezone';
-import withPageTitle from 'HOCs/withPageTitle';
+import ListingVisibility from 'Shared/SessionSettings/components/ListingVisibility';
 import MouseTrailSettings from 'Shared/SessionSettings/components/MouseTrailSettings';
 
-
-type Props = {}
-
-const mapStateToProps = (state: any) => ({
-  isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
-  account: state.getIn(['user', 'account'])
-});
-
-const connector = connect(mapStateToProps);
-
-function SessionsListingSettings(props: Props) {
+function SessionsListingSettings() {
   return (
-    <div className='bg-white rounded-lg border shadow-sm p-5'>
+    <div className="bg-white rounded-lg border shadow-sm p-5">
       <PageTitle title={<div>Sessions Listing</div>} />
 
-      <div className='flex flex-col mt-4'>
-        <div className='max-w-lg'>
+      <div className="flex flex-col mt-4">
+        <div className="max-w-lg">
           <ListingVisibility />
         </div>
 
         <Divider />
 
-
         <div>
           <DefaultPlaying />
         </div>
         <Divider />
 
-
         <div>
           <DefaultTimezone />
         </div>
@@ -44,12 +32,11 @@ function SessionsListingSettings(props: Props) {
         <div>
           <MouseTrailSettings />
         </div>
-
       </div>
     </div>
   );
 }
 
-export default connector(
-  withPageTitle('Sessions Listings - OpenReplay Preferences')(SessionsListingSettings)
-);
\ No newline at end of file
+export default withPageTitle('Sessions Listings - OpenReplay Preferences')(
+  SessionsListingSettings
+);
diff --git a/frontend/app/components/Client/Sites/AddProjectButton/AddProjectButton.tsx b/frontend/app/components/Client/Sites/AddProjectButton/AddProjectButton.tsx
index 0a2712462..ea8ca522a 100644
--- a/frontend/app/components/Client/Sites/AddProjectButton/AddProjectButton.tsx
+++ b/frontend/app/components/Client/Sites/AddProjectButton/AddProjectButton.tsx
@@ -1,25 +1,22 @@
 import React from 'react';
 import { Tooltip, Button } from 'UI';
 import { useStore } from 'App/mstore';
-import { useObserver } from 'mobx-react-lite';
-import { init, remove, fetchGDPR } from 'Duck/site';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react-lite';
 import { useModal } from 'App/components/Modal';
 import NewSiteForm from '../NewSiteForm';
 
 const PERMISSION_WARNING = 'You don’t have the permissions to perform this action.';
 const LIMIT_WARNING = 'You have reached site limit.';
 
-function AddProjectButton({ isAdmin = false, init = () => {} }: any) {
-  const { userStore } = useStore();
+function AddProjectButton({ isAdmin = false }: any) {
+  const { userStore, projectsStore } = useStore();
+  const init = projectsStore.initProject;
   const { showModal, hideModal } = useModal();
-  const limtis = useObserver(() => userStore.limits);
-  const canAddProject = useObserver(
-    () => isAdmin && (limtis.projects === -1 || limtis.projects > 0)
-  );
+  const limits = userStore.limits;
+  const canAddProject = isAdmin && (limits.projects === -1 || limits.projects > 0)
 
   const onClick = () => {
-    init();
+    init({});
     showModal(<NewSiteForm onClose={hideModal} />, { right: true });
   };
   return (
@@ -34,4 +31,4 @@ function AddProjectButton({ isAdmin = false, init = () => {} }: any) {
   );
 }
 
-export default connect(null, { init, remove, fetchGDPR })(AddProjectButton);
+export default observer(AddProjectButton);
diff --git a/frontend/app/components/Client/Sites/GDPRForm.js b/frontend/app/components/Client/Sites/GDPRForm.js
index c65559cd3..fa54f73be 100644
--- a/frontend/app/components/Client/Sites/GDPRForm.js
+++ b/frontend/app/components/Client/Sites/GDPRForm.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react-lite';
+import { useStore } from "App/mstore";
 import { Form, Button, Input, Icon } from 'UI';
-import { editGDPR, saveGDPR } from 'Duck/site';
 import { validateNumber } from 'App/validate';
 import styles from './siteForm.module.css';
 import Select from 'Shared/Select';
@@ -12,124 +12,118 @@ const inputModeOptions = [
   { label: 'Obscure all inputs', value: 'hidden' },
 ];
 
-@connect(state => ({
-  site: state.getIn([ 'site', 'instance' ]),
-  gdpr: state.getIn([ 'site', 'instance', 'gdpr' ]),
-  saving: state.getIn([ 'site', 'saveGDPR', 'loading' ]),
-}), {
-  editGDPR,
-  saveGDPR,
-})
-export default class GDPRForm extends React.PureComponent {
-  onChange = ({ target: { name, value } }) => {
+function GDPRForm(props) {
+  const { projectsStore } = useStore();
+  const site = projectsStore.instance;
+  const gdpr = site.gdpr;
+  const saving = false //projectsStore.;
+  const editGDPR = projectsStore.editGDPR;
+  const saveGDPR = projectsStore.saveGDPR;
+  
+  
+  const onChange = ({ target: { name, value } }) => {
     if (name === "sampleRate") {
       if (!validateNumber(value, { min: 0, max: 100 })) return;
       if (value.length > 1 && value[0] === "0") {
         value = value.slice(1);
       }
     }
-    this.props.editGDPR({ [ name ]: value });
+    editGDPR({ [ name ]: value });
   }
 
-  onSampleRateBlur = ({ target: { name, value } }) => { //TODO: editState hoc
+  const onSampleRateBlur = ({ target: { name, value } }) => { //TODO: editState hoc
     if (value === ''){
-      this.props.editGDPR({ sampleRate: 100 });
+      editGDPR({ sampleRate: 100 });
     }
   }
 
-  onChangeSelect = ({ name, value }) => {
-    this.props.editGDPR({ [ name ]: value });
+  const onChangeSelect = ({ name, value }) => {
+    props.editGDPR({ [ name ]: value });
   };
 
-  onChangeOption = ({ target: { checked, name } }) => {
-    this.props.editGDPR({ [ name ]: checked });
+  const onChangeOption = ({ target: { checked, name } }) => {
+    editGDPR({ [ name ]: checked });
   }
 
-  onSubmit = (e) => {
+  const onSubmit = (e) => {
     e.preventDefault();
-    const { site, gdpr } = this.props;
-    this.props.saveGDPR(site.id, gdpr);
+    void saveGDPR(site.id);
   }
+  
+  return (
+    <Form className={ styles.formWrapper } onSubmit={ onSubmit }>
+      <div className={ styles.content }>
+        <Form.Field>
+          <label>{ 'Name' }</label>
+          <div>{ site.host }</div>
+        </Form.Field>
+        <Form.Field>
+          <label>{ 'Session Capture Rate' }</label>
+          <Input
+            icon="percent"
+            name="sampleRate"
+            value={ gdpr.sampleRate }
+            onChange={ onChange }
+            onBlur={ onSampleRateBlur }
+            className={ styles.sampleRate }
+          />
+        </Form.Field>
 
-  render() {
-    const {
-      site, onClose, saving, gdpr,
-    } = this.props;
+        <Form.Field>
+          <label htmlFor="defaultInputMode">{ 'Data Recording Options' }</label>
+          <Select
+            name="defaultInputMode"
+            options={ inputModeOptions }
+            onChange={ onChangeSelect }
+            placeholder="Default Input Mode"
+            value={ gdpr.defaultInputMode }
+          />
+        </Form.Field>
 
-    return (
-      <Form className={ styles.formWrapper } onSubmit={ this.onSubmit }>
-        <div className={ styles.content }>
-          <Form.Field>
-            <label>{ 'Name' }</label>
-            <div>{ site.host }</div>
-          </Form.Field>
-          <Form.Field>
-            <label>{ 'Session Capture Rate' }</label>
-            <Input
-              icon="percent"
-              name="sampleRate"
-              value={ gdpr.sampleRate }
-              onChange={ this.onChange }
-              onBlur={ this.onSampleRateBlur }
-              className={ styles.sampleRate }
+        <Form.Field>
+          <label>
+            <input
+              name="maskNumbers"
+              type="checkbox"
+              checked={ gdpr.maskNumbers }
+              onChange={ onChangeOption }
             />
-          </Form.Field>
+            { 'Do not record any numeric text' }
+            <div className={ styles.controlSubtext }>{ 'If enabled, OpenReplay will not record or store any numeric text for all sessions.' }</div>
+          </label>
+        </Form.Field>
 
-          <Form.Field>
-            <label htmlFor="defaultInputMode">{ 'Data Recording Options' }</label>
-            <Select
-              name="defaultInputMode"
-              options={ inputModeOptions }
-              onChange={ this.onChangeSelect }
-              placeholder="Default Input Mode"
-              value={ gdpr.defaultInputMode }
-              // className={ styles.dropdown }
+        <Form.Field>
+          <label>
+            <input
+              name="maskEmails"
+              type="checkbox"
+              checked={ gdpr.maskEmails }
+              onChange={ onChangeOption }
             />
-          </Form.Field>
+            { 'Do not record email addresses ' }
+            <div className={ styles.controlSubtext }>{ 'If enabled, OpenReplay will not record or store any email address for all sessions.' }</div>
+          </label>
+        </Form.Field>
 
-          <Form.Field>
-            <label>
-              <input
-                name="maskNumbers"
-                type="checkbox"
-                checked={ gdpr.maskNumbers }
-                onChange={ this.onChangeOption }
-              />
-              { 'Do not record any numeric text' }
-              <div className={ styles.controlSubtext }>{ 'If enabled, OpenReplay will not record or store any numeric text for all sessions.' }</div>
-            </label>
-          </Form.Field>
-
-          <Form.Field>
-            <label>
-              <input
-                name="maskEmails"
-                type="checkbox"
-                checked={ gdpr.maskEmails }
-                onChange={ this.onChangeOption }
-              />
-              { 'Do not record email addresses ' }
-              <div className={ styles.controlSubtext }>{ 'If enabled, OpenReplay will not record or store any email address for all sessions.' }</div>
-            </label>
-          </Form.Field>
-
-          <div className={ styles.blockIpWarapper }>
-            <div className={ styles.button } onClick={ this.props.toggleBlockedIp }>
-              { 'Block IP' } <Icon name="next1" size="18" />
-            </div>
+        <div className={ styles.blockIpWarapper }>
+          <div className={ styles.button } onClick={ props.toggleBlockedIp }>
+            { 'Block IP' } <Icon name="next1" size="18" />
           </div>
         </div>
+      </div>
 
-        <div className={ styles.footer }>
-          <Button
-            variant="outline"
-            className="float-left mr-2"
-            loading={ saving }
-            content="Update"
-          />
-          <Button onClick={ onClose } content="Cancel" />
-        </div>
-      </Form>
-    );
-  }
+      <div className={ styles.footer }>
+        <Button
+          variant="outline"
+          className="float-left mr-2"
+          loading={ saving }
+          content="Update"
+        />
+        <Button onClick={ onClose } content="Cancel" />
+      </div>
+    </Form>
+  )
 }
+
+export default observer(GDPRForm);
\ No newline at end of file
diff --git a/frontend/app/components/Client/Sites/NewSiteForm.tsx b/frontend/app/components/Client/Sites/NewSiteForm.tsx
index 66a31948e..7efa83678 100644
--- a/frontend/app/components/Client/Sites/NewSiteForm.tsx
+++ b/frontend/app/components/Client/Sites/NewSiteForm.tsx
@@ -1,61 +1,48 @@
 import { Segmented } from 'antd';
 import React, { ChangeEvent, FormEvent, useEffect, useState } from 'react';
-import { ConnectedProps, connect } from 'react-redux';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 import { toast } from 'react-toastify';
-
-import { withStore } from 'App/mstore';
-import { clearSearch as clearSearchLive } from 'Duck/liveSearch';
-import { clearSearch } from 'Duck/search';
-import { edit, fetchList, remove, save, update } from 'Duck/site';
-import { setSiteId } from 'Duck/site';
-import { pushNewSite } from 'Duck/user';
-import { Button, Form, Icon, Input, SegmentSelection } from 'UI';
+import { useStore } from 'App/mstore';
+import { Button, Form, Icon, Input } from 'UI';
 import { confirm } from 'UI';
+import { observer } from 'mobx-react-lite';
 
 import styles from './siteForm.module.css';
 
 type OwnProps = {
   onClose: (arg: any) => void;
-  mstore: any;
-  canDelete: boolean;
 };
 
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-type Props = PropsFromRedux & RouteComponentProps & OwnProps;
+type Props = RouteComponentProps & OwnProps;
 
 const NewSiteForm = ({
-  site,
-  loading,
-  save,
-  remove,
-  edit,
-  update,
-  pushNewSite,
-  fetchList,
-  setSiteId,
-  clearSearch,
-  clearSearchLive,
-  location: { pathname },
-  onClose,
-  mstore,
-  activeSiteId,
-  canDelete,
-}: Props) => {
+                       location: { pathname },
+                       onClose
+                     }: Props) => {
+  const mstore = useStore();
+  const { projectsStore } = mstore;
+  const activeSiteId = projectsStore.active?.id;
+  const site = projectsStore.instance;
+  const siteList = projectsStore.list;
+  const loading = projectsStore.loading;
+  const canDelete = siteList.length > 1;
+  const setSiteId = projectsStore.setSiteId;
+  const saveProject = projectsStore.save;
+  const fetchList = projectsStore.fetchList;
   const [existsError, setExistsError] = useState(false);
+  const { searchStore } = useStore();
 
   useEffect(() => {
-    if (pathname.includes('onboarding')) {
+    if (pathname.includes('onboarding') && site?.id) {
       setSiteId(site.id);
     }
+    if (!site) projectsStore.initProject({});
   }, []);
 
   const onSubmit = (e: FormEvent) => {
     e.preventDefault();
-
-    if (site.exists()) {
-      update(site, site.id).then((response: any) => {
+    if (site?.id && site.exists()) {
+      projectsStore.updateProject(site.id, site.toData()).then((response: any) => {
         if (!response || !response.errors || response.errors.size === 0) {
           onClose(null);
           if (!pathname.includes('onboarding')) {
@@ -67,11 +54,11 @@ const NewSiteForm = ({
         }
       });
     } else {
-      save(site).then((response: any) => {
+      saveProject(site!).then((response: any) => {
         if (!response || !response.errors || response.errors.size === 0) {
           onClose(null);
-          clearSearch();
-          clearSearchLive();
+          searchStore.clearSearch();
+          mstore.searchStoreLive.clearSearch();
           mstore.initClient();
           toast.success('Project added successfully');
         } else {
@@ -87,10 +74,11 @@ const NewSiteForm = ({
         header: 'Project Deletion Alert',
         confirmation: `Are you sure you want to delete this project? Deleting it will permanently remove the project, along with all associated sessions and data.`,
         confirmButton: 'Yes, delete',
-        cancelButton: 'Cancel',
+        cancelButton: 'Cancel'
       })
+      && site?.id
     ) {
-      remove(site.id).then(() => {
+      projectsStore.removeProject(site.id).then(() => {
         onClose(null);
         if (site.id === activeSiteId) {
           setSiteId(null);
@@ -100,12 +88,15 @@ const NewSiteForm = ({
   };
 
   const handleEdit = ({
-    target: { name, value },
-  }: ChangeEvent<HTMLInputElement>) => {
+                        target: { name, value }
+                      }: ChangeEvent<HTMLInputElement>) => {
     setExistsError(false);
-    edit({ [name]: value });
+    projectsStore.editInstance({ [name]: value });
   };
 
+  if (!site) {
+    return null;
+  }
   return (
     <div
       className="bg-white h-screen overflow-y-auto"
@@ -116,7 +107,7 @@ const NewSiteForm = ({
       </h3>
       <Form
         className={styles.formWrapper}
-        onSubmit={site.validate() && onSubmit}
+        onSubmit={site.validate && onSubmit}
       >
         <div className={styles.content}>
           <Form.Field>
@@ -137,16 +128,16 @@ const NewSiteForm = ({
                 options={[
                   {
                     value: 'web',
-                    label: 'Web',
+                    label: 'Web'
                   },
                   {
                     value: 'ios',
-                    label: 'Mobile',
-                  },
+                    label: 'Mobile'
+                  }
                 ]}
                 value={site.platform}
                 onChange={(value) => {
-                  edit({ platform: value });
+                  projectsStore.editInstance({ platform: value });
                 }}
               />
             </div>
@@ -157,9 +148,9 @@ const NewSiteForm = ({
               type="submit"
               className="float-left mr-2"
               loading={loading}
-              disabled={!site.validate()}
+              disabled={!site.validate}
             >
-              {site.exists() ? 'Update' : 'Add'}
+              {site?.exists() ? 'Update' : 'Add'}
             </Button>
             {site.exists() && (
               <Button
@@ -183,26 +174,4 @@ const NewSiteForm = ({
   );
 };
 
-const mapStateToProps = (state: any) => ({
-  activeSiteId: state.getIn(['site', 'active', 'id']),
-  site: state.getIn(['site', 'instance']),
-  siteList: state.getIn(['site', 'list']),
-  loading:
-    state.getIn(['site', 'save', 'loading']) ||
-    state.getIn(['site', 'remove', 'loading']),
-  canDelete: state.getIn(['site', 'list']).size > 1,
-});
-
-const connector = connect(mapStateToProps, {
-  save,
-  remove,
-  edit,
-  update,
-  pushNewSite,
-  fetchList,
-  setSiteId,
-  clearSearch,
-  clearSearchLive,
-});
-
-export default connector(withRouter(withStore(NewSiteForm)));
+export default withRouter(observer(NewSiteForm));
diff --git a/frontend/app/components/Client/Sites/Sites.tsx b/frontend/app/components/Client/Sites/Sites.tsx
index 0b716fb4c..c443e2743 100644
--- a/frontend/app/components/Client/Sites/Sites.tsx
+++ b/frontend/app/components/Client/Sites/Sites.tsx
@@ -1,9 +1,7 @@
 import React, { useState } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
 import { Tag } from 'antd';
 import cn from 'classnames';
 import { Loader, Button, TextLink, NoContent, Pagination, PageTitle, Divider, Icon } from 'UI';
-import { init, remove, fetchGDPR, setSiteId } from 'Duck/site';
 import withPageTitle from 'HOCs/withPageTitle';
 import stl from './sites.module.css';
 import NewSiteForm from './NewSiteForm';
@@ -16,9 +14,11 @@ import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 import { useModal } from 'App/components/Modal';
 import CaptureRate from 'Shared/SessionSettings/components/CaptureRate';
 import { BranchesOutlined } from '@ant-design/icons';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore'
 
 type Project = {
-  id: number;
+  id: string;
   name: string;
   conditionsCount: number;
   platform: 'web' | 'mobile';
@@ -27,9 +27,12 @@ type Project = {
   sampleRate: number;
 };
 
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-const Sites = ({ loading, sites, user, init }: PropsFromRedux) => {
+const Sites = () => {
+  const { projectsStore, userStore } = useStore();
+  const user = userStore.account;
+  const sites = projectsStore.list;
+  const loading = projectsStore.sitesLoading;
+  const init = projectsStore.initProject
   const [searchQuery, setSearchQuery] = useState('');
   const [showCaptureRate, setShowCaptureRate] = useState(true);
   const [activeProject, setActiveProject] = useState<Project | null>(null);
@@ -140,7 +143,7 @@ const Sites = ({ loading, sites, user, init }: PropsFromRedux) => {
               </div>
             }
             size="small"
-            show={!loading && filteredSites.size === 0}
+            show={!loading && filteredSites.length === 0}
           >
             <div className="grid grid-cols-12 gap-2 w-full items-center px-5 py-3 font-medium">
               <div className="col-span-4">Project Name</div>
@@ -160,7 +163,7 @@ const Sites = ({ loading, sites, user, init }: PropsFromRedux) => {
             <div className="w-full flex items-center justify-center py-10">
               <Pagination
                 page={page}
-                total={filteredSites.size}
+                total={filteredSites.length}
                 onPageChange={(page) => updatePage(page)}
                 limit={pageSize}
               />
@@ -180,19 +183,4 @@ const Sites = ({ loading, sites, user, init }: PropsFromRedux) => {
   );
 };
 
-const mapStateToProps = (state: any) => ({
-  site: state.getIn(['site', 'instance']),
-  sites: state.getIn(['site', 'list']),
-  loading: state.getIn(['site', 'loading']),
-  user: state.getIn(['user', 'account']),
-  account: state.getIn(['user', 'account']),
-});
-
-const connector = connect(mapStateToProps, {
-  init,
-  remove,
-  fetchGDPR,
-  setSiteId,
-});
-
-export default connector(withPageTitle('Projects - OpenReplay Preferences')(Sites));
+export default withPageTitle('Projects - OpenReplay Preferences')(observer(Sites));
diff --git a/frontend/app/components/Client/Users/UsersView.tsx b/frontend/app/components/Client/Users/UsersView.tsx
index 6478c7b60..faaa78ab4 100644
--- a/frontend/app/components/Client/Users/UsersView.tsx
+++ b/frontend/app/components/Client/Users/UsersView.tsx
@@ -6,18 +6,17 @@ import { useObserver } from 'mobx-react-lite';
 import UserSearch from './components/UserSearch';
 import { useModal } from 'App/components/Modal';
 import UserForm from './components/UserForm';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react-lite';
 import AddUserButton from './components/AddUserButton';
 import withPageTitle from 'HOCs/withPageTitle';
 
 interface Props {
   isOnboarding?: boolean;
-  account: any;
-  isEnterprise: boolean;
 }
-function UsersView(props: Props) {
-  const { account, isEnterprise, isOnboarding = false } = props;
+function UsersView({ isOnboarding = false }: Props) {
   const { userStore, roleStore } = useStore();
+  const account = userStore.account;
+  const isEnterprise = userStore.isEnterprise;
   const userCount = useObserver(() => userStore.list.length);
   const roles = useObserver(() => roleStore.list);
   const { showModal } = useModal();
@@ -31,7 +30,7 @@ function UsersView(props: Props) {
 
   useEffect(() => {
     if (roles.length === 0 && isEnterprise) {
-      roleStore.fetchRoles();
+      void roleStore.fetchRoles();
     }
   }, []);
 
@@ -60,7 +59,4 @@ function UsersView(props: Props) {
   );
 }
 
-export default connect((state: any) => ({
-  account: state.getIn(['user', 'account']),
-  isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
-}))(withPageTitle('Team - OpenReplay Preferences')(UsersView));
+export default withPageTitle('Team - OpenReplay Preferences')(observer(UsersView));
diff --git a/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx b/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx
index c0e050a7c..9b5b9bd03 100644
--- a/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx
+++ b/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx
@@ -1,162 +1,171 @@
-import React from 'react';
-import { Form, Input, CopyButton, Button, Icon } from 'UI'
 import cn from 'classnames';
-import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
 import { useModal } from 'App/components/Modal';
-import Select from 'Shared/Select';
+import { useStore } from 'App/mstore';
+import { Button, CopyButton, Form, Icon, Input } from 'UI';
 import { confirm } from 'UI';
-import { connect } from 'react-redux';
 
-interface Props {
-    isSmtp?: boolean;
-    isEnterprise?: boolean;
-}
-function UserForm(props: Props) {
-    const { isSmtp = false, isEnterprise = false } = props;
-    const { hideModal } = useModal();
-    const { userStore, roleStore } = useStore();
-    const isSaving = useObserver(() => userStore.saving);
-    const user: any = useObserver(() => userStore.instance || userStore.initUser());
-    const roles = useObserver(() => roleStore.list.filter(r => r.isProtected ? user.isSuperAdmin : true).map(r => ({ label: r.name, value: r.roleId })));
+import Select from 'Shared/Select';
 
-    const onChangeCheckbox = (e: any) => {
-        user.updateKey('isAdmin', !user.isAdmin);
+function UserForm() {
+  const { hideModal } = useModal();
+  const { userStore, roleStore } = useStore();
+  const isEnterprise = userStore.isEnterprise;
+  const isSmtp = userStore.account.smtp;
+  const isSaving = userStore.saving;
+  const user: any = userStore.instance || userStore.initUser();
+  const roles = roleStore.list
+    .filter((r) => (r.isProtected ? user.isSuperAdmin : true))
+    .map((r) => ({ label: r.name, value: r.roleId }));
+
+  const onChangeCheckbox = (e: any) => {
+    user.updateKey('isAdmin', !user.isAdmin);
+  };
+
+  const onSave = () => {
+    userStore.saveUser(user).then(() => {
+      hideModal();
+      userStore.fetchLimits();
+    });
+  };
+
+  const write = ({ target: { name, value } }) => {
+    user.updateKey(name, value);
+  };
+
+  const deleteHandler = async () => {
+    if (
+      await confirm({
+        header: 'Confirm',
+        confirmButton: 'Yes, delete',
+        confirmation: `Are you sure you want to permanently delete this user?`,
+      })
+    ) {
+      userStore.deleteUser(user.userId).then(() => {
+        hideModal();
+        userStore.fetchLimits();
+      });
     }
+  };
 
-    const onSave = () => {
-        userStore.saveUser(user).then(() => {
-            hideModal();
-            userStore.fetchLimits();
-        });
-    }
+  return useObserver(() => (
+    <div className="bg-white h-screen p-6">
+      <div className="">
+        <h1 className="text-2xl mb-4">{`${
+          user.exists() ? 'Update' : 'Invite'
+        } User`}</h1>
+      </div>
+      <Form onSubmit={onSave}>
+        <Form.Field>
+          <label>{'Full Name'}</label>
+          <Input
+            name="name"
+            autoFocus
+            maxLength="50"
+            value={user.name}
+            onChange={write}
+            className="w-full"
+            id="name-field"
+          />
+        </Form.Field>
 
-    const write = ({ target: { name, value } }) => {
-        user.updateKey(name, value);
-    }
-
-    const deleteHandler = async () => {
-        if (await confirm({
-            header: 'Confirm',
-            confirmButton: 'Yes, delete',
-            confirmation: `Are you sure you want to permanently delete this user?`
-          })) {
-            userStore.deleteUser(user.userId).then(() => {
-                hideModal();
-                userStore.fetchLimits();
-            });
-        }
-    }
-    
-    return useObserver(() => (
-        <div className="bg-white h-screen p-6">
-            <div className="">
-                <h1 className="text-2xl mb-4">{`${user.exists() ? 'Update' : 'Invite'} User`}</h1>
-            </div>
-            <Form onSubmit={ onSave } >
-                <Form.Field>
-                    <label>{ 'Full Name' }</label>
-                    <Input
-                        name="name"
-                        autoFocus
-                        maxLength="50"
-                        value={ user.name }
-                        onChange={ write }
-                        className="w-full"
-                        id="name-field"
-                    />
-                </Form.Field>
-
-                <div className="form-group">
-                    <label>{ 'Email Address' }</label>
-                    <Input
-                        disabled={user.exists()}
-                        name="email"
-                        maxLength="320"
-                        value={ user.email }
-                        onChange={ write }
-                        className="w-full"
-                    />
-                </div>
-                { !isSmtp &&
-                    <div className={cn("mb-4 p-2 bg-yellow rounded")}>
-                        SMTP is not configured (see <a className="link" href="https://docs.openreplay.com/configuration/configure-smtp" target="_blank">here</a> how to set it up).  You can still add new users, but you’d have to manually copy then send them the invitation link.
-                    </div>
-                }
-                <Form.Field>
-                    <label className="flex items-start cursor-pointer">
-                        <input
-                            name="admin"
-                            type="checkbox"
-                            checked={ !!user.isAdmin || !!user.isSuperAdmin }
-                            onChange={ onChangeCheckbox }
-                            disabled={user.isSuperAdmin}
-                            className="mt-1"
-                        />
-                        <div className="ml-2 select-none">
-                            <span>Admin Privileges</span>
-                            <div className="text-sm color-gray-medium -mt-1">{ 'Can manage Projects and team members.' }</div>
-                        </div>
-                    </label>
-                </Form.Field>
-                
-                { isEnterprise && (
-                    <Form.Field>
-                        <label htmlFor="role">{ 'Role' }</label>
-                        <Select
-                            placeholder="Select Role"
-                            selection
-                            options={ roles }
-                            name="roleId"
-                            defaultValue={ user.roleId }
-                            onChange={({ value }) => user.updateKey('roleId', value.value)}
-                            className="block"
-                            isDisabled={user.isSuperAdmin}
-                        />
-                    </Form.Field>
-                )}
-                </Form>
-
-                <div className="flex items-center">
-                    <div className="flex items-center mr-auto">
-                        <Button
-                            onClick={ onSave }
-                            disabled={ !user.valid(isEnterprise) || isSaving }
-                            loading={ isSaving }
-                            variant="primary"
-                            className="float-left mr-2"
-                        >
-                            { user.exists() ? 'Update' : 'Invite' }
-                        </Button>
-                        {user.exists() && (
-                            <Button onClick={ hideModal }>
-                                { 'Cancel' }
-                            </Button>
-                        )}
-                    </div>
-                    <div>
-                        <Button
-                            disabled={user.isSuperAdmin}
-                            data-hidden={ !user.exists() }
-                            onClick={ deleteHandler }
-                        >
-                            <Icon name="trash" size="16" />
-                        </Button>
-                    </div>
-                </div>
-
-                { !user.isJoined && user.invitationLink &&
-                    <CopyButton
-                        content={user.invitationLink}
-                        className="link mt-4"
-                        btnText="Copy invite link"
-                    />
-                }
+        <div className="form-group">
+          <label>{'Email Address'}</label>
+          <Input
+            disabled={user.exists()}
+            name="email"
+            maxLength="320"
+            value={user.email}
+            onChange={write}
+            className="w-full"
+          />
         </div>
-    ));
+        {!isSmtp && (
+          <div className={cn('mb-4 p-2 bg-yellow rounded')}>
+            SMTP is not configured (see{' '}
+            <a
+              className="link"
+              href="https://docs.openreplay.com/configuration/configure-smtp"
+              target="_blank"
+            >
+              here
+            </a>{' '}
+            how to set it up). You can still add new users, but you’d have to
+            manually copy then send them the invitation link.
+          </div>
+        )}
+        <Form.Field>
+          <label className="flex items-start cursor-pointer">
+            <input
+              name="admin"
+              type="checkbox"
+              checked={!!user.isAdmin || !!user.isSuperAdmin}
+              onChange={onChangeCheckbox}
+              disabled={user.isSuperAdmin}
+              className="mt-1"
+            />
+            <div className="ml-2 select-none">
+              <span>Admin Privileges</span>
+              <div className="text-sm color-gray-medium -mt-1">
+                {'Can manage Projects and team members.'}
+              </div>
+            </div>
+          </label>
+        </Form.Field>
+
+        {isEnterprise && (
+          <Form.Field>
+            <label htmlFor="role">{'Role'}</label>
+            <Select
+              placeholder="Select Role"
+              selection
+              options={roles}
+              name="roleId"
+              defaultValue={user.roleId}
+              onChange={({ value }) => user.updateKey('roleId', value.value)}
+              className="block"
+              isDisabled={user.isSuperAdmin}
+            />
+          </Form.Field>
+        )}
+      </Form>
+
+      <div className="flex items-center">
+        <div className="flex items-center mr-auto">
+          <Button
+            onClick={onSave}
+            disabled={!user.valid(isEnterprise) || isSaving}
+            loading={isSaving}
+            variant="primary"
+            className="float-left mr-2"
+          >
+            {user.exists() ? 'Update' : 'Invite'}
+          </Button>
+          {user.exists() && <Button onClick={hideModal}>{'Cancel'}</Button>}
+        </div>
+        <div>
+          <Button
+            disabled={user.isSuperAdmin}
+            data-hidden={!user.exists()}
+            onClick={deleteHandler}
+          >
+            <Icon name="trash" size="16" />
+          </Button>
+        </div>
+      </div>
+
+      {!user.isJoined && user.invitationLink && (
+        <CopyButton
+          content={user.invitationLink}
+          className="link mt-4"
+          btnText="Copy invite link"
+        />
+      )}
+    </div>
+  ));
 }
 
-export default connect((state: any) => ({
-    isEnterprise: state.getIn([ 'user', 'account', 'edition' ]) === 'ee',
-    isSmtp: state.getIn([ 'user', 'account', 'smtp' ]),
-}))(UserForm);
\ No newline at end of file
+export default observer(UserForm);
diff --git a/frontend/app/components/Dashboard/WidgetHolder/WidgetHolder.js b/frontend/app/components/Dashboard/WidgetHolder/WidgetHolder.js
deleted file mode 100644
index 7a5d8c2e2..000000000
--- a/frontend/app/components/Dashboard/WidgetHolder/WidgetHolder.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react'
-import { connect } from 'react-redux'
-import cn from 'classnames'
-import stl from './widgetHolder.module.css'
-import LazyLoad from 'react-lazyload';
-
-const WidgetHolder = props => {
-  const { comparing, Component, period, periodCompare, fullWidth = false } = props;
-  const showSync = comparing && period.rangeName === periodCompare.rangeName;
-
-  return (
-    <div className={ cn(stl.wrapper, { 'grid grid-cols-2 gap-4 mb-2' : comparing && !fullWidth })}>
-      <LazyLoad height={300} offset={320} >
-        {<Component showSync={showSync} />}
-      </LazyLoad>
-      {comparing && (
-        <LazyLoad height={300} offset={320}>
-          <React.Fragment>            
-            <div className={fullWidth ? 'mt-4' : ''}>
-              <Component compare showSync={showSync} />
-            </div>
-          </React.Fragment>
-        </LazyLoad>
-      )}
-    </div>
-  )
-}
-
-export default connect(state => ({
-  comparing: state.getIn([ 'dashboard', 'comparing' ]),
-  period: state.getIn([ 'dashboard', 'period' ]),
-  periodCompare: state.getIn([ 'dashboard', 'periodCompare' ])
-}))(WidgetHolder)
diff --git a/frontend/app/components/Dashboard/WidgetHolder/index.js b/frontend/app/components/Dashboard/WidgetHolder/index.js
deleted file mode 100644
index afb19393a..000000000
--- a/frontend/app/components/Dashboard/WidgetHolder/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './WidgetHolder';
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/WidgetHolder/widgetHolder.module.css b/frontend/app/components/Dashboard/WidgetHolder/widgetHolder.module.css
deleted file mode 100644
index c4f9d132c..000000000
--- a/frontend/app/components/Dashboard/WidgetHolder/widgetHolder.module.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.wrapper {
-  border: dotted 2px transparent;
-  border-radius: 3px;
-  margin: -5px;
-  padding: 5px;
-  transition: all 0.3s;
-
-  &:hover {
-    transition: all 0.2s;
-    border: dotted 2px $gray-medium;
-  }
-}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
index 3a1b4ebfc..4c131b20e 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
@@ -2,17 +2,13 @@ import React from 'react'
 import { useStore } from 'App/mstore'
 import { observer } from 'mobx-react-lite'
 import ClickMapRenderer from 'App/components/Session/Player/ClickMapRenderer'
-import { connect } from 'react-redux'
-import { fetchInsights } from 'App/duck/sessions'
 import { NoContent, Icon } from 'App/components/ui'
 
-function ClickMapCard({
-    insights,
-    fetchInsights,
-    insightsFilters,
-}: any) {
+function ClickMapCard() {
     const [customSession, setCustomSession] = React.useState<any>(null)
-    const { metricStore, dashboardStore } = useStore();
+    const { metricStore, dashboardStore, sessionStore } = useStore();
+    const fetchInsights = sessionStore.fetchInsights
+    const insights = sessionStore.insights
     const onMarkerClick = (s: string, innerText: string) => {
         metricStore.changeClickMapSearch(s, innerText)
     }
@@ -36,7 +32,7 @@ function ClickMapCard({
         const rangeValue = dashboardStore.drillDownPeriod.rangeValue
         const startDate = dashboardStore.drillDownPeriod.start
         const endDate = dashboardStore.drillDownPeriod.end
-        fetchInsights({ ...insightsFilters, url: mapUrl || '/', startDate, endDate, rangeValue, clickRage: metricStore.clickMapFilter })
+        void fetchInsights({ url: mapUrl || '/', startDate, endDate, rangeValue, clickRage: metricStore.clickMapFilter })
     }, [dashboardStore.drillDownPeriod.start, dashboardStore.drillDownPeriod.end, dashboardStore.drillDownPeriod.rangeValue, metricStore.clickMapFilter])
 
     if (!metricStore.instance.data.domURL || insights.size === 0) {
@@ -76,13 +72,4 @@ function ClickMapCard({
     )
 }
 
-export default connect(
-    (state: any) => ({
-        insightsFilters: state.getIn(['sessions', 'insightFilters']),
-        visitedEvents: state.getIn(['sessions', 'visitedEvents']),
-        insights: state.getIn(['sessions', 'insights']),
-        host: state.getIn(['sessions', 'host']),
-    }),
-    { fetchInsights, }
-)
-(observer(ClickMapCard))
+export default observer(ClickMapCard)
diff --git a/frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx b/frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx
index 93d4af234..02b602754 100644
--- a/frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 import { Form, SegmentSelection } from 'UI';
-import { connect } from 'react-redux';
 import { validateEmail } from 'App/validate';
 import { confirm } from 'UI';
 import { toast } from 'react-toastify';
diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
index 1588248a2..20a44c01f 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
@@ -10,7 +10,6 @@ import {
 } from 'antd';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
-import { connect } from 'react-redux';
 import { useHistory } from 'react-router';
 
 import { checkForRecent } from 'App/date';
@@ -24,11 +23,12 @@ import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
 import DashboardEditModal from '../DashboardEditModal';
 
-function DashboardList({ siteId }: { siteId: string }) {
+function DashboardList() {
+  const { dashboardStore, projectsStore } = useStore();
+  const siteId = projectsStore.siteId;
   const [focusTitle, setFocusedInput] = React.useState(true);
   const [showEditModal, setShowEditModal] = React.useState(false);
 
-  const { dashboardStore } = useStore();
   const list = dashboardStore.filteredList;
   const dashboardsSearch = dashboardStore.filter.query;
   const history = useHistory();
@@ -219,6 +219,4 @@ function DashboardList({ siteId }: { siteId: string }) {
   );
 }
 
-export default connect((state: any) => ({
-  siteId: state.getIn(['site', 'siteId']),
-}))(observer(DashboardList));
+export default observer(DashboardList);
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx
index d5a22f1fb..7e8b0d0ae 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx
@@ -1,8 +1,8 @@
 import { Modal } from 'antd';
 import React, { useEffect } from 'react';
-import { connect } from 'react-redux';
 import colors from 'tailwindcss/colors';
-
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 import CreateCard from 'Components/Dashboard/components/DashboardList/NewDashModal/CreateCard';
 
 import SelectCard from './SelectCard';
@@ -12,16 +12,16 @@ interface NewDashboardModalProps {
   open: boolean;
   isAddingFromLibrary?: boolean;
   isEnterprise?: boolean;
-  isMobile?: boolean;
 }
 
 const NewDashboardModal: React.FC<NewDashboardModalProps> = ({
   onClose,
   open,
   isAddingFromLibrary = false,
-  isEnterprise = false,
-  isMobile = false,
 }) => {
+  const { projectsStore, userStore } = useStore();
+  const isEnterprise = userStore.isEnterprise;
+  const isMobile = projectsStore.isMobile;
   const [step, setStep] = React.useState<number>(0);
   const [selectedCategory, setSelectedCategory] =
     React.useState<string>('product-analytics');
@@ -74,11 +74,4 @@ const NewDashboardModal: React.FC<NewDashboardModalProps> = ({
   );
 };
 
-const mapStateToProps = (state: any) => ({
-  isMobile: state.getIn(['site', 'instance', 'platform']) === 'ios',
-  isEnterprise:
-    state.getIn(['user', 'account', 'edition']) === 'ee' ||
-    state.getIn(['user', 'account', 'edition']) === 'msaas',
-});
-
-export default connect(mapStateToProps)(NewDashboardModal);
+export default observer(NewDashboardModal);
diff --git a/frontend/app/components/Dashboard/components/DashboardOptions/DashboardOptions.tsx b/frontend/app/components/Dashboard/components/DashboardOptions/DashboardOptions.tsx
index b2c8599ae..38d295f5f 100644
--- a/frontend/app/components/Dashboard/components/DashboardOptions/DashboardOptions.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardOptions/DashboardOptions.tsx
@@ -1,17 +1,18 @@
 import React from 'react';
 import { ItemMenu } from 'UI';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react-lite';
+import { useStore } from "App/mstore";
 import { ENTERPRISE_REQUEIRED } from 'App/constants';
 
 interface Props {
     editHandler: (isTitle: boolean) => void;
     deleteHandler: any;
     renderReport: any;
-    isEnterprise: boolean;
-    isTitlePresent?: boolean;
 }
 function DashboardOptions(props: Props) {
-    const { editHandler, deleteHandler, renderReport, isEnterprise, isTitlePresent } = props;
+    const { userStore } = useStore();
+    const isEnterprise = userStore.isEnterprise;
+    const { editHandler, deleteHandler, renderReport } = props;
     const menuItems = [
         { icon: 'pencil', text: 'Rename', onClick: () => editHandler(true) },
         { icon: 'users', text: 'Visibility & Access', onClick: editHandler },
@@ -27,6 +28,4 @@ function DashboardOptions(props: Props) {
     );
 }
 
-export default connect(state => ({
-    isEnterprise: state.getIn([ 'user', 'account', 'edition' ]) === 'ee' || state.getIn([ 'user', 'account', 'edition' ]) === 'msaas',
-}))(DashboardOptions);
+export default observer(DashboardOptions);
diff --git a/frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx b/frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx
index d2451b68e..af8ecf16e 100644
--- a/frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx
@@ -2,17 +2,13 @@ import React from 'react';
 import { SideMenuitem } from 'UI';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { withSiteId, metrics, dashboard, alerts } from 'App/routes';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { setShowAlerts } from 'Duck/dashboard';
 
 interface Props extends RouteComponentProps {
   siteId: string;
   history: any;
-  setShowAlerts: (show: boolean) => void;
 }
 function DashboardSideMenu(props: Props) {
-  const { history, siteId, setShowAlerts } = props;
+  const { history, siteId } = props;
   const isMetric = history.location.pathname.includes('metrics');
   const isDashboards = history.location.pathname.includes('dashboard');
   const isAlerts = history.location.pathname.includes('alerts');
@@ -57,4 +53,4 @@ function DashboardSideMenu(props: Props) {
   );
 }
 
-export default compose(withRouter, connect(null, { setShowAlerts }))(DashboardSideMenu);
+export default withRouter(DashboardSideMenu);
diff --git a/frontend/app/components/Dashboard/components/Errors/ErrorDetails/ErrorDetails.tsx b/frontend/app/components/Dashboard/components/Errors/ErrorDetails/ErrorDetails.tsx
deleted file mode 100644
index 3a102a9c4..000000000
--- a/frontend/app/components/Dashboard/components/Errors/ErrorDetails/ErrorDetails.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React, { useState } from 'react'
-import ErrorFrame from './ErrorFrame'
-import { IconButton, Icon } from 'UI';
-
-const docLink = 'https://docs.openreplay.com/installation/upload-sourcemaps';
-
-interface Props {
-  error: any,
-  errorStack: any,
-}
-function ErrorDetails({ className, name = "Error", message, errorStack, sourcemapUploaded }: any) {
-  const [showRaw, setShowRaw] = useState(false)
-  const firstFunc = errorStack.first() && errorStack.first().function
-
-  const openDocs = () => {
-    window.open(docLink, '_blank');
-  }
-
-  return (
-    <div className={className} >
-      { !sourcemapUploaded && (
-        <div
-          style={{ backgroundColor: 'rgba(204, 0, 0, 0.1)' }}
-          className="font-normal flex items-center text-sm font-regular color-red border p-2 rounded"
-        >
-          <Icon name="info" size="16" color="red" />
-          <div className="ml-2">Source maps must be uploaded to OpenReplay to be able to see stack traces. <a href="#" className="color-red font-medium underline" style={{ textDecoration: 'underline' }} onClick={openDocs}>Learn more.</a></div>
-        </div>
-      ) }
-      <div className="flex items-center my-3">        
-        <h3 className="text-xl mr-auto">
-          Stacktrace          
-        </h3>
-        <div className="flex justify-end mr-2">
-          <IconButton
-            onClick={() => setShowRaw(false) }
-            label="FULL"
-            plain={!showRaw}
-            primaryText={!showRaw}
-          />
-          <IconButton
-            primaryText={showRaw}
-            onClick={() => setShowRaw(true) }
-            plain={showRaw}
-            label="RAW"
-          />
-        </div>
-      </div>
-      <div className="mb-6 code-font" data-hidden={showRaw}>
-        <div className="leading-relaxed font-weight-bold">{ name }</div>
-        <div style={{ wordBreak: 'break-all'}}>{message}</div>
-      </div>
-      { showRaw &&
-        <div className="mb-3 code-font">{name} : {firstFunc ? firstFunc : '?' }</div> 
-      }
-      { errorStack.map((frame: any, i: any) => (
-          <div className="mb-3" key={frame.key}>
-            <ErrorFrame frame={frame} showRaw={showRaw} isFirst={i == 0} />
-          </div>
-        ))
-      }
-    </div>
-  )
-}
-
-ErrorDetails.displayName = "ErrorDetails";
-export default ErrorDetails;
diff --git a/frontend/app/components/Dashboard/components/Errors/ErrorDetails/ErrorFrame/ErrorFrame.tsx b/frontend/app/components/Dashboard/components/Errors/ErrorDetails/ErrorFrame/ErrorFrame.tsx
deleted file mode 100644
index ece2b816c..000000000
--- a/frontend/app/components/Dashboard/components/Errors/ErrorDetails/ErrorFrame/ErrorFrame.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, { useState } from 'react'
-import { Icon } from 'UI';
-import cn from 'classnames';
-import stl from './errorFrame.module.css';
-
-function ErrorFrame({ frame = {}, showRaw, isFirst }) {
-  const [open, setOpen] = useState(isFirst)
-  const hasContext = frame.context && frame.context.length > 0;
-  return (
-    <div>
-      { showRaw ? 
-        <div className={stl.rawLine}>at { frame.function ? frame.function : '?' } <span className="color-gray-medium">({`${frame.filename}:${frame.lineNo}:${frame.colNo}`})</span></div>
-      :
-        <div className={stl.formatted}>
-          <div className={cn(stl.header, 'flex items-center cursor-pointer')} onClick={() => setOpen(!open)}>
-            <div className="truncate">
-              <span className="font-medium">{ frame.absPath }</span>
-              { frame.function && 
-              <>
-                <span>{' in '}</span> 
-                <span className="font-medium"> {frame.function} </span>
-              </>
-              }
-              <span>{' at line '}</span> 
-              <span className="font-medium">
-                {frame.lineNo}:{frame.colNo}
-              </span>
-            </div>
-            { hasContext && 
-              <div className="ml-auto mr-3">
-                <Icon name={ open ? 'minus' : 'plus'} size="14" color="gray-medium" />
-              </div>
-            }
-          </div>
-          { open && hasContext &&
-            <ol start={ frame.context[0][0]} className={stl.content}>
-              { frame.context.map(i => (
-                <li 
-                  key={i[0]}
-                  className={ cn("leading-7  text-sm break-all h-auto pl-2", { [stl.errorLine] :i[0] == frame.lineNo }) }
-                >
-                  <span>{ i[1].replace(/ /g, "\u00a0") }</span>
-                </li>
-              ))}
-            </ol>
-          }
-        </div>
-      }
-    </div>
-  )
-}
-
-export default ErrorFrame;
diff --git a/frontend/app/components/Dashboard/components/Errors/ErrorDetails/ErrorFrame/errorFrame.module.css b/frontend/app/components/Dashboard/components/Errors/ErrorDetails/ErrorFrame/errorFrame.module.css
deleted file mode 100644
index 5e7f69e75..000000000
--- a/frontend/app/components/Dashboard/components/Errors/ErrorDetails/ErrorFrame/errorFrame.module.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.rawLine {
-  margin-left: 30px;
-  font-family: 'Menlo', 'monaco', 'consolas', monospace;
-  font-size: 13px;
-}
-.formatted {
-  border: solid thin #EEE;
-  border-radius: 3px;
-}
-.header {
-  background-color: $gray-lightest;
-  padding: 8px;
-  border-bottom: solid thin #EEE;
-}
-.content {
-  font-family: 'Menlo', 'monaco', 'consolas', monospace;
-  list-style-position: inside;
-  list-style-type: decimal-leading-zero;
-}
-
-.errorLine {
-  background-color: $teal;
-  color: white !important;
-  font-weight: bold;
-}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/components/Errors/ErrorDetails/ErrorFrame/index.js b/frontend/app/components/Dashboard/components/Errors/ErrorDetails/ErrorFrame/index.js
deleted file mode 100644
index 70caa16f6..000000000
--- a/frontend/app/components/Dashboard/components/Errors/ErrorDetails/ErrorFrame/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ErrorFrame';
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/components/Errors/ErrorDetails/index.js b/frontend/app/components/Dashboard/components/Errors/ErrorDetails/index.js
deleted file mode 100644
index 987da1320..000000000
--- a/frontend/app/components/Dashboard/components/Errors/ErrorDetails/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ErrorDetails';
diff --git a/frontend/app/components/Dashboard/components/Errors/ErrorListItem/ErrorListItem.tsx b/frontend/app/components/Dashboard/components/Errors/ErrorListItem/ErrorListItem.tsx
index b208358b8..68b30b16e 100644
--- a/frontend/app/components/Dashboard/components/Errors/ErrorListItem/ErrorListItem.tsx
+++ b/frontend/app/components/Dashboard/components/Errors/ErrorListItem/ErrorListItem.tsx
@@ -17,10 +17,7 @@ function ErrorListItem(props: Props) {
     const { error, className = '' } = props;
 	// const { showModal } = useModal();
 
-	// const onClick = () => {
-	// 	alert('test')
-	// 	showModal(<ErrorDetailsModal />, { right: true });
-	// }
+
     return (
         <div
 			className={ cn("p-3 grid grid-cols-12 gap-4 cursor-pointer py-4 hover:bg-active-blue", className) }
@@ -49,7 +46,7 @@ function ErrorListItem(props: Props) {
 					<Bar name="Sessions" minPointSize={1} dataKey="count" fill="#A8E0DA" />
 				</BarChart>
 			</div>
-			<ErrorLabel 
+			<ErrorLabel
 				// className={stl.sessions}
 				topValue={ error.sessions }
 				bottomValue="Sessions"
@@ -84,6 +81,6 @@ const CustomTooltip = ({ active, payload, label }: any) => {
         </div>
       );
     }
-  
+
     return null;
   };
diff --git a/frontend/app/components/Dashboard/components/Errors/ErrorsList/ErrorsList.tsx b/frontend/app/components/Dashboard/components/Errors/ErrorsList/ErrorsList.tsx
deleted file mode 100644
index a6a9bca4c..000000000
--- a/frontend/app/components/Dashboard/components/Errors/ErrorsList/ErrorsList.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React, { useEffect } from 'react';
-import ErrorListItem from '../ErrorListItem';
-import { useStore } from 'App/mstore';
-import { useObserver } from 'mobx-react-lite';
-
-function ErrorsList(props) {
-    const { errorStore, metricStore } = useStore();
-    const metric = useObserver(() => metricStore.instance);
-
-    useEffect(() => {
-        errorStore.fetchErrors();
-    }, []);
-    return (
-        <div>
-            Errors List
-            <ErrorListItem error={{}} />
-        </div>
-    );
-}
-
-export default ErrorsList;
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/components/Errors/ErrorsList/index.ts b/frontend/app/components/Dashboard/components/Errors/ErrorsList/index.ts
deleted file mode 100644
index 7dd28915c..000000000
--- a/frontend/app/components/Dashboard/components/Errors/ErrorsList/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ErrorsList';
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/components/Errors/ErrorsWidget/ErrorsWidget.tsx b/frontend/app/components/Dashboard/components/Errors/ErrorsWidget/ErrorsWidget.tsx
deleted file mode 100644
index b2862d040..000000000
--- a/frontend/app/components/Dashboard/components/Errors/ErrorsWidget/ErrorsWidget.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import ErrorsList from '../ErrorsList';
-
-function ErrorsWidget(props) {
-    return (
-        <div>
-            <ErrorsList />
-        </div>
-    );
-}
-
-export default ErrorsWidget;
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/components/Errors/ErrorsWidget/index.ts b/frontend/app/components/Dashboard/components/Errors/ErrorsWidget/index.ts
deleted file mode 100644
index 8f62f38a4..000000000
--- a/frontend/app/components/Dashboard/components/Errors/ErrorsWidget/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ErrorsWidget';
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/components/FilterSeries/ExcludeFilters.tsx b/frontend/app/components/Dashboard/components/FilterSeries/ExcludeFilters.tsx
index d7ae15483..d1d78c63c 100644
--- a/frontend/app/components/Dashboard/components/FilterSeries/ExcludeFilters.tsx
+++ b/frontend/app/components/Dashboard/components/FilterSeries/ExcludeFilters.tsx
@@ -1,4 +1,3 @@
-import filters from 'App/duck/filters';
 import Filter from 'App/mstore/types/filter';
 import { FilterKey } from 'App/types/filter/filterType';
 import { observer } from 'mobx-react-lite';
diff --git a/frontend/app/components/Dashboard/components/MetricTypeList/MetricTypeList.tsx b/frontend/app/components/Dashboard/components/MetricTypeList/MetricTypeList.tsx
index caeb5242d..b2cc50836 100644
--- a/frontend/app/components/Dashboard/components/MetricTypeList/MetricTypeList.tsx
+++ b/frontend/app/components/Dashboard/components/MetricTypeList/MetricTypeList.tsx
@@ -6,20 +6,20 @@ import { TYPES, LIBRARY, INSIGHTS } from 'App/constants/card';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { dashboardMetricCreate, metricCreate, withSiteId } from 'App/routes';
 import { useStore } from 'App/mstore';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react-lite';
 import { ENTERPRISE_REQUEIRED } from 'App/constants';
 
 interface Props extends RouteComponentProps {
   dashboardId?: number;
   siteId: string;
-  isEnterprise: boolean;
   isList?: boolean;
 }
 
 function MetricTypeList(props: Props) {
-  const { dashboardId, siteId, history, isEnterprise, isList = false } = props;
-  const { metricStore } = useStore();
+  const { dashboardId, siteId, history, isList = false } = props;
+  const { metricStore, userStore } = useStore();
   const { showModal, hideModal } = useModal();
+  const isEnterprise = userStore.isEnterprise;
 
   const list = React.useMemo(() => {
     return TYPES.map((metric: MetricType) => {
@@ -67,6 +67,4 @@ function MetricTypeList(props: Props) {
   );
 }
 
-export default connect((state: any) => ({
-  isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee' || state.getIn(['user', 'account', 'edition']) === 'msaas'
-}))(withRouter(MetricTypeList));
+export default withRouter(observer(MetricTypeList));
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/components/MetricTypeDropdown/MetricTypeDropdown.tsx b/frontend/app/components/Dashboard/components/WidgetForm/components/MetricTypeDropdown/MetricTypeDropdown.tsx
index 13f89586d..7155ae111 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/components/MetricTypeDropdown/MetricTypeDropdown.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/components/MetricTypeDropdown/MetricTypeDropdown.tsx
@@ -7,16 +7,14 @@ import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
 import withLocationHandlers from 'HOCs/withLocationHandlers';
 import { Icon } from 'UI';
-import { connect } from 'react-redux';
 
 interface Props {
   query: Record<string, (key: string) => any>;
   onSelect: (arg: any) => void;
-  isEnterprise?: boolean;
 }
 function MetricTypeDropdown(props: Props) {
-  const { isEnterprise } = props;
-  const { metricStore } = useStore();
+  const { metricStore, userStore } = useStore();
+  const isEnterprise = userStore.isEnterprise;
   const metric: any = metricStore.instance;
 
   const options = React.useMemo(() => {
@@ -84,6 +82,4 @@ function MetricTypeDropdown(props: Props) {
   );
 }
 
-export default connect((state: any) => ({
-  isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
-}))(withLocationHandlers()(observer(MetricTypeDropdown)));
+export default withLocationHandlers()(observer(MetricTypeDropdown));
diff --git a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
index 9371fbdbb..2de02954e 100644
--- a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
@@ -11,22 +11,20 @@ import useIsMounted from 'App/hooks/useIsMounted';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 import { numberWithCommas } from 'App/utils';
 import { HEATMAP } from 'App/constants/card';
-import { connect } from 'react-redux';
-import { Tag } from "antd";
+import { Tag } from 'antd';
 
 interface Props {
   className?: string;
-  metaList: any;
 }
 
 function WidgetSessions(props: Props) {
-  const { className = '', metaList } = props;
+  const { className = '' } = props;
   const [activeSeries, setActiveSeries] = useState('all');
   const [data, setData] = useState<any>([]);
   const isMounted = useIsMounted();
   const [loading, setLoading] = useState(false);
   const filteredSessions = getListSessionsBySeries(data, activeSeries);
-  const { dashboardStore, metricStore, sessionStore } = useStore();
+  const { dashboardStore, metricStore, sessionStore, customFieldStore } = useStore();
   const filter = dashboardStore.drillDownFilter;
   const widget = metricStore.instance;
   const startTime = DateTime.fromMillis(filter.startTimestamp).toFormat('LLL dd, yyyy HH:mm');
@@ -34,6 +32,7 @@ function WidgetSessions(props: Props) {
   const [seriesOptions, setSeriesOptions] = useState([{ label: 'All', value: 'all' }]);
   const hasFilters = filter.filters.length > 0 || (filter.startTimestamp !== dashboardStore.drillDownPeriod.start || filter.endTimestamp !== dashboardStore.drillDownPeriod.end);
   const filterText = filter.filters.length > 0 ? filter.filters[0].value : '';
+  const metaList = customFieldStore.list.map((i: any) => i.key);
 
   const writeOption = ({ value }: any) => setActiveSeries(value.value);
   useEffect(() => {
@@ -118,38 +117,39 @@ function WidgetSessions(props: Props) {
 
   return (
     <div className={cn(className, 'bg-white p-3 pb-0 rounded-lg shadow-sm border mt-3')}>
-      <div className='flex items-center justify-between'>
+      <div className="flex items-center justify-between">
         <div>
-          <div className='flex items-baseline'>
-            <h2 className='text-xl'>{metricStore.clickMapSearch ? 'Clicks' : 'Sessions'}</h2>
-            <div className='ml-2 color-gray-medium'>
+          <div className="flex items-baseline">
+            <h2 className="text-xl">{metricStore.clickMapSearch ? 'Clicks' : 'Sessions'}</h2>
+            <div className="ml-2 color-gray-medium">
               {metricStore.clickMapLabel ? `on "${metricStore.clickMapLabel}" ` : null}
-              between <span className='font-medium color-gray-darkest'>{startTime}</span> and{' '}
-              <span className='font-medium color-gray-darkest'>{endTime}</span>{' '}
+              between <span className="font-medium color-gray-darkest">{startTime}</span> and{' '}
+              <span className="font-medium color-gray-darkest">{endTime}</span>{' '}
             </div>
           </div>
-          {hasFilters && widget.metricType === 'table' && <div className="py-2"><Tag closable onClose={clearFilters}>{filterText}</Tag></div>}
+          {hasFilters && widget.metricType === 'table' &&
+            <div className="py-2"><Tag closable onClose={clearFilters}>{filterText}</Tag></div>}
         </div>
 
-        <div className='flex items-center gap-4'>
-          {hasFilters && <Button variant='text-primary' onClick={clearFilters}>Clear Filters</Button>}
+        <div className="flex items-center gap-4">
+          {hasFilters && <Button variant="text-primary" onClick={clearFilters}>Clear Filters</Button>}
           {widget.metricType !== 'table' && widget.metricType !== HEATMAP && (
-            <div className='flex items-center ml-6'>
-              <span className='mr-2 color-gray-medium'>Filter by Series</span>
+            <div className="flex items-center ml-6">
+              <span className="mr-2 color-gray-medium">Filter by Series</span>
               <Select options={seriesOptions} defaultValue={'all'} onChange={writeOption} plain />
             </div>
           )}
         </div>
       </div>
 
-      <div className='mt-3'>
+      <div className="mt-3">
         <Loader loading={loading}>
           <NoContent
             title={
-              <div className='flex items-center justify-center flex-col'>
+              <div className="flex items-center justify-center flex-col">
                 <AnimatedSVG name={ICONS.NO_SESSIONS} size={60} />
-                <div className='mt-4' />
-                <div className='text-center'>
+                <div className="mt-4" />
+                <div className="text-center">
                   No relevant sessions found for the selected time period
                 </div>
               </div>
@@ -159,22 +159,22 @@ function WidgetSessions(props: Props) {
             {filteredSessions.sessions.map((session: any) => (
               <React.Fragment key={session.sessionId}>
                 <SessionItem session={session} metaList={metaList} />
-                <div className='border-b' />
+                <div className="border-b" />
               </React.Fragment>
             ))}
 
-            <div className='flex items-center justify-between p-5'>
+            <div className="flex items-center justify-between p-5">
               <div>
                 Showing{' '}
-                <span className='font-medium'>
+                <span className="font-medium">
                   {(metricStore.sessionsPage - 1) * metricStore.sessionsPageSize + 1}
                 </span>{' '}
                 to{' '}
-                <span className='font-medium'>
+                <span className="font-medium">
                   {(metricStore.sessionsPage - 1) * metricStore.sessionsPageSize +
                     filteredSessions.sessions.length}
                 </span>{' '}
-                of <span className='font-medium'>{numberWithCommas(filteredSessions.total)}</span>{' '}
+                of <span className="font-medium">{numberWithCommas(filteredSessions.total)}</span>{' '}
                 sessions.
               </div>
               <Pagination
@@ -217,8 +217,4 @@ const getListSessionsBySeries = (data: any, seriesId: any) => {
   return arr;
 };
 
-const mapStateToProps = (state: any) => ({
-  metaList: state.getIn(['customFields', 'list']).map((i: any) => i.key),
-});
-
-export default connect(mapStateToProps)(observer(WidgetSessions));
+export default observer(WidgetSessions);
diff --git a/frontend/app/components/Errors/Error/ErrorInfo.js b/frontend/app/components/Errors/Error/ErrorInfo.js
index ff15d4589..5c70faff6 100644
--- a/frontend/app/components/Errors/Error/ErrorInfo.js
+++ b/frontend/app/components/Errors/Error/ErrorInfo.js
@@ -1,89 +1,48 @@
+import { observer } from 'mobx-react-lite';
 import React from 'react';
-import { connect } from 'react-redux';
-import withSiteIdRouter from 'HOCs/withSiteIdRouter';
-import { error as errorRoute } from 'App/routes';
-import { NoContent, Loader } from 'UI';
-import { fetch, fetchTrace } from 'Duck/errors';
-import MainSection from './MainSection';
-import SideSection from './SideSection';
+
+import { useStore } from 'App/mstore';
+import { Loader, NoContent } from 'UI';
+
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
-@connect(
-  (state) => ({
-    errorIdInStore: state.getIn(['errors', 'instance']).errorId,
-    list: state.getIn(['errors', 'instanceTrace']),
-    loading:
-      state.getIn(['errors', 'fetch', 'loading']) ||
-      state.getIn(['errors', 'fetchTrace', 'loading']),
-    errorOnFetch:
-      state.getIn(['errors', 'fetch', 'errors']) || state.getIn(['errors', 'fetchTrace', 'errors']),
-  }),
-  {
-    fetch,
-    fetchTrace,
-  }
-)
-@withSiteIdRouter
-export default class ErrorInfo extends React.PureComponent {
-  ensureInstance() {
-    const { errorId, loading, errorOnFetch } = this.props;
-    if (!loading && this.props.errorIdInStore !== errorId && errorId != null) {
-      this.props.fetch(errorId);
-      this.props.fetchTrace(errorId);
-    }
-  }
-  componentDidMount() {
-    this.ensureInstance();
-  }
-  componentDidUpdate(prevProps) {
-    if (prevProps.errorId !== this.props.errorId || prevProps.errorIdInStore !== this.props.errorIdInStore) {
-      this.ensureInstance();
-    }
-  }
-  next = () => {
-    const { list, errorId } = this.props;
-    const curIndex = list.findIndex((e) => e.errorId === errorId);
-    const next = list.get(curIndex + 1);
-    if (next != null) {
-      this.props.history.push(errorRoute(next.errorId));
-    }
-  };
-  prev = () => {
-    const { list, errorId } = this.props;
-    const curIndex = list.findIndex((e) => e.errorId === errorId);
-    const prev = list.get(curIndex - 1);
-    if (prev != null) {
-      this.props.history.push(errorRoute(prev.errorId));
-    }
-  };
-  render() {
-    const { loading, errorIdInStore, list, errorId } = this.props;
+import MainSection from './MainSection';
+import SideSection from './SideSection';
 
-    let nextDisabled = true,
-      prevDisabled = true;
-    if (list.size > 0) {
-      nextDisabled = loading || list.last().errorId === errorId;
-      prevDisabled = loading || list.first().errorId === errorId;
-    }
+function ErrorInfo(props) {
+  const { errorStore } = useStore();
+  const instance = errorStore.instance;
+  const ensureInstance = () => {
+    if (errorStore.isLoading) return;
+    errorStore.fetchError(props.errorId);
+    errorStore.fetchErrorTrace(props.errorId);
+  };
 
-    return (
-      <NoContent
-        title={
-          <div className="flex flex-col items-center justify-center">
-            <AnimatedSVG name={ICONS.EMPTY_STATE} size="170" />
-            <div className="mt-4">No Error Found!</div>
-          </div>
-        }
-        subtext="Please try to find existing one."
-        show={!loading && errorIdInStore == null}
-      >
-        <div className="flex w-full">
-          <Loader loading={loading} className="w-full">
-            <MainSection className="w-9/12" />
-            <SideSection className="w-3/12" />
-          </Loader>
+  React.useEffect(() => {
+    ensureInstance();
+  }, [props.errorId]);
+
+  const errorIdInStore = errorStore.instance?.errorId;
+  const loading = errorStore.isLoading;
+  return (
+    <NoContent
+      title={
+        <div className="flex flex-col items-center justify-center">
+          <AnimatedSVG name={ICONS.EMPTY_STATE} size="170" />
+          <div className="mt-4">No Error Found!</div>
         </div>
-      </NoContent>
-    );
-  }
+      }
+      subtext="Please try to find existing one."
+      show={!loading && errorIdInStore == null}
+    >
+      <div className="flex w-full">
+        <Loader loading={loading || !instance} className="w-full">
+          <MainSection className="w-9/12" />
+          <SideSection className="w-3/12" />
+        </Loader>
+      </div>
+    </NoContent>
+  );
 }
+
+export default observer(ErrorInfo);
diff --git a/frontend/app/components/Errors/Error/MainSection.js b/frontend/app/components/Errors/Error/MainSection.js
index a74755408..730e11088 100644
--- a/frontend/app/components/Errors/Error/MainSection.js
+++ b/frontend/app/components/Errors/Error/MainSection.js
@@ -1,154 +1,132 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import cn from 'classnames';
-import withSiteIdRouter from 'HOCs/withSiteIdRouter';
-import { ErrorDetails, Icon, Loader, Button } from 'UI';
-import { sessions as sessionsRoute } from 'App/routes';
 import { RESOLVED } from 'Types/errorInfo';
-import { addFilterByKeyAndValue } from 'Duck/search';
-import { resolve, unresolve, ignore, toggleFavorite } from 'Duck/errors';
+import { FilterKey } from 'Types/filter/filterType';
+import cn from 'classnames';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+
 import { resentOrDate } from 'App/date';
+import { useStore } from 'App/mstore';
+import { sessions as sessionsRoute } from 'App/routes';
 import Divider from 'Components/Errors/ui/Divider';
 import ErrorName from 'Components/Errors/ui/ErrorName';
 import Label from 'Components/Errors/ui/Label';
-import { FilterKey } from 'Types/filter/filterType';
+import { Button, ErrorDetails, Icon, Loader } from 'UI';
 
 import SessionBar from './SessionBar';
 
-@withSiteIdRouter
-@connect(
-  (state) => ({
-    error: state.getIn(['errors', 'instance']),
-    trace: state.getIn(['errors', 'instanceTrace']),
-    sourcemapUploaded: state.getIn(['errors', 'sourcemapUploaded']),
-    resolveToggleLoading:
-      state.getIn(['errors', 'resolve', 'loading']) ||
-      state.getIn(['errors', 'unresolve', 'loading']),
-    ignoreLoading: state.getIn(['errors', 'ignore', 'loading']),
-    toggleFavoriteLoading: state.getIn(['errors', 'toggleFavorite', 'loading']),
-    traceLoading: state.getIn(['errors', 'fetchTrace', 'loading']),
-  }),
-  {
-    resolve,
-    unresolve,
-    ignore,
-    toggleFavorite,
-    addFilterByKeyAndValue,
-  }
-)
-export default class MainSection extends React.PureComponent {
-  resolve = () => {
-    const { error } = this.props;
-    this.props.resolve(error.errorId);
-  };
+function MainSection(props) {
+  const { errorStore, searchStore } = useStore();
+  const error = errorStore.instance;
+  const trace = errorStore.instanceTrace;
+  const sourcemapUploaded = errorStore.sourcemapUploaded;
+  const loading = errorStore.isLoading;
+  const className = props.className;
 
-  unresolve = () => {
-    const { error } = this.props;
-    this.props.unresolve(error.errorId);
+  const findSessions = () => {
+    searchStore.addFilterByKeyAndValue(FilterKey.ERROR, error.message);
+    props.history.push(sessionsRoute());
   };
-
-  ignore = () => {
-    const { error } = this.props;
-    this.props.ignore(error.errorId);
-  };
-  bookmark = () => {
-    const { error } = this.props;
-    this.props.toggleFavorite(error.errorId);
-  };
-
-  findSessions = () => {
-    this.props.addFilterByKeyAndValue(FilterKey.ERROR, this.props.error.message);
-    this.props.history.push(sessionsRoute());
-  };
-
-  render() {
-    const {
-      error,
-      trace,
-      sourcemapUploaded,
-      ignoreLoading,
-      resolveToggleLoading,
-      toggleFavoriteLoading,
-      className,
-      traceLoading,
-    } = this.props;
-    const isPlayer = window.location.pathname.includes('/session/');
-
-    return (
-      <div className={cn(className, 'bg-white border-radius-3 thin-gray-border mb-6')}>
-        <div className="m-4">
-          <ErrorName
-            className="text-lg leading-relaxed"
-            name={error.name}
-            message={error.stack0InfoString}
-            lineThrough={error.status === RESOLVED}
-          />
-          <div className="flex flex-col">
-            <div
-              className="flex items-center color-gray-dark font-semibold"
-              style={{ wordBreak: 'break-all' }}
-            >
-              {error.message}
+  return (
+    <div
+      className={cn(
+        className,
+        'bg-white border-radius-3 thin-gray-border mb-6'
+      )}
+    >
+      <div className="m-4">
+        <ErrorName
+          className="text-lg leading-relaxed"
+          name={error.name}
+          message={error.stack0InfoString}
+          lineThrough={error.status === RESOLVED}
+        />
+        <div className="flex flex-col">
+          <div
+            className="flex items-center color-gray-dark font-semibold"
+            style={{ wordBreak: 'break-all' }}
+          >
+            {error.message}
+          </div>
+          <div className="flex items-center mt-2">
+            <div className="flex">
+              <Label
+                topValue={error.sessions}
+                horizontal
+                topValueSize="text-lg"
+                bottomValue="Sessions"
+              />
+              <Label
+                topValue={error.users}
+                horizontal
+                topValueSize="text-lg"
+                bottomValue="Users"
+              />
             </div>
-            <div className="flex items-center mt-2">
-              <div className="flex">
-                <Label
-                  topValue={error.sessions}
-                  horizontal
-                  topValueSize="text-lg"
-                  bottomValue="Sessions"
-                />
-                <Label
-                  topValue={error.users}
-                  horizontal
-                  topValueSize="text-lg"
-                  bottomValue="Users"
-                />
-              </div>
-              <div className="text-xs color-gray-medium">Over the past 30 days</div>
+            <div className="text-xs color-gray-medium">
+              Over the past 30 days
             </div>
           </div>
         </div>
-
-        <Divider />
-        <div className="m-4">
-          <div className="flex items-center">
-            <h3 className="text-xl inline-block mr-2">Last session with this error</h3>
-            <span className="font-thin text-sm">{resentOrDate(error.lastOccurrence)}</span>
-            <Button className="ml-auto" variant="text-primary" onClick={this.findSessions}>
-              Find all sessions with this error
-              <Icon className="ml-1" name="next1" color="teal" />
-            </Button>
-          </div>
-          <SessionBar className="my-4" session={error.lastHydratedSession} />
-          {error.customTags.length > 0 ? (
-            <div className="flex items-start flex-col">
-              <div>
-                <span className="font-semibold">More Info</span> <span className="text-disabled-text">(most recent call)</span>
-              </div>
-              <div className="mt-4 flex items-center gap-3 w-full flex-wrap">
-              {error.customTags.map((tag) => (
-                <div className="flex items-center rounded overflow-hidden bg-gray-lightest">
-                  <div className="bg-gray-light-shade py-1 px-2 text-disabled-text">{Object.entries(tag)[0][0]}</div> <div className="py-1 px-2 text-gray-dark">{Object.entries(tag)[0][1]}</div>
-                </div>
-              ))}
-              </div>
-            </div>
-          ) : null}
-        </div>
-        <Divider />
-        <div className="m-4">
-          <Loader loading={traceLoading}>
-            <ErrorDetails
-              name={error.name}
-              message={error.message}
-              errorStack={trace}
-              error={error}
-              sourcemapUploaded={sourcemapUploaded}
-            />
-          </Loader>
-        </div>
       </div>
-    );
-  }
+
+      <Divider />
+      <div className="m-4">
+        <div className="flex items-center">
+          <h3 className="text-xl inline-block mr-2">
+            Last session with this error
+          </h3>
+          <span className="font-thin text-sm">
+            {resentOrDate(error.lastOccurrence)}
+          </span>
+          <Button
+            className="ml-auto"
+            variant="text-primary"
+            onClick={findSessions}
+          >
+            Find all sessions with this error
+            <Icon className="ml-1" name="next1" color="teal" />
+          </Button>
+        </div>
+        <SessionBar className="my-4" session={error.lastHydratedSession} />
+        {error.customTags.length > 0 ? (
+          <div className="flex items-start flex-col">
+            <div>
+              <span className="font-semibold">More Info</span>{' '}
+              <span className="text-disabled-text">(most recent call)</span>
+            </div>
+            <div className="mt-4 flex items-center gap-3 w-full flex-wrap">
+              {error.customTags.map((tag) => (
+                <div className="flex items-center rounded overflow-hidden bg-gray-lightest">
+                  <div className="bg-gray-light-shade py-1 px-2 text-disabled-text">
+                    {Object.entries(tag)[0][0]}
+                  </div>
+                  {' '}
+                  <div className="py-1 px-2 text-gray-dark">
+                    {Object.entries(tag)[0][1]}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ) : null}
+      </div>
+      <Divider />
+      <div className="m-4">
+        <Loader loading={loading}>
+          <ErrorDetails
+            name={error.name}
+            message={error.message}
+            errorStack={trace}
+            error={error}
+            sourcemapUploaded={sourcemapUploaded}
+          />
+        </Loader>
+      </div>
+    </div>
+  );
 }
+
+export default withRouter(
+  (observer(MainSection))
+);
diff --git a/frontend/app/components/Errors/Error/SideSection.js b/frontend/app/components/Errors/Error/SideSection.js
index 017387f26..8be6d61d8 100644
--- a/frontend/app/components/Errors/Error/SideSection.js
+++ b/frontend/app/components/Errors/Error/SideSection.js
@@ -1,123 +1,120 @@
-import React from 'react';
-import { connect } from 'react-redux';
 import cn from 'classnames';
-import withRequest from 'HOCs/withRequest';
-import { Loader } from 'UI';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
 import { countries } from 'App/constants';
-import Trend from './Trend';
+import { useStore } from 'App/mstore';
+import { Loader } from 'UI';
+
 import DateAgo from './DateAgo';
 import DistributionBar from './DistributionBar';
+import Trend from './Trend';
+import { errorService } from 'App/services';
 
 const MAX_PERCENTAGE = 3;
 const MIN_COUNT = 4;
 const MAX_COUNT = 10;
 function hidePredicate(percentage, index) {
-	if (index < MIN_COUNT) return false;
-	if (index < MAX_COUNT && percentage < MAX_PERCENTAGE) return false;
-	return true;
+  if (index < MIN_COUNT) return false;
+  if (index < MAX_COUNT && percentage < MAX_PERCENTAGE) return false;
+  return true;
 }
 function partitionsWrapper(partitions = [], mapCountry = false) {
   const counts = partitions.map(({ count }) => count);
-  const sum = counts.reduce((a,b)=>parseInt(a)+parseInt(b),0);
+  const sum = counts.reduce((a, b) => parseInt(a) + parseInt(b), 0);
   if (sum === 0) {
-  	return [];
+    return [];
   }
-  const otherPrcs = counts
-  	.map(c => c/sum * 100)
-  	.filter(hidePredicate);
-  const otherPrcsSum = otherPrcs.reduce((a,b)=>a+b,0);
-	const showLength = partitions.length - otherPrcs.length;
-	const show = partitions
-		.sort((a, b) => b.count - a.count)
-		.slice(0, showLength)
-  	.map(p => ({
-  		label: mapCountry
-  			? (countries[p.name] || "Unknown")
-  			: p.name,
-  		prc: p.count/sum * 100,
-		}))
+  const otherPrcs = counts.map((c) => (c / sum) * 100).filter(hidePredicate);
+  const otherPrcsSum = otherPrcs.reduce((a, b) => a + b, 0);
+  const showLength = partitions.length - otherPrcs.length;
+  const show = partitions
+    .sort((a, b) => b.count - a.count)
+    .slice(0, showLength)
+    .map((p) => ({
+      label: mapCountry ? countries[p.name] || 'Unknown' : p.name,
+      prc: (p.count / sum) * 100,
+    }));
 
   if (otherPrcsSum > 0) {
     show.push({
-      label: "Other",
+      label: 'Other',
       prc: otherPrcsSum,
       other: true,
-    })
+    });
   }
   return show;
 }
 function tagsWrapper(tags = []) {
-	return tags.map(({ name, partitions }) => ({
-		name,
-		partitions: partitionsWrapper(partitions, name === "country")
-	}))
+  return tags.map(({ name, partitions }) => ({
+    name,
+    partitions: partitionsWrapper(partitions, name === 'country'),
+  }));
 }
 
 function dataWrapper(data = {}) {
-	return {
-		chart24: data.chart24 || [],
-		chart30: data.chart30 || [],
-		tags: tagsWrapper(data.tags),
-	};
+  return {
+    chart24: data.chart24 || [],
+    chart30: data.chart30 || [],
+    tags: tagsWrapper(data.tags),
+  };
 }
 
-@connect(state => ({
-	error: state.getIn([ "errors", "instance" ])
-}))
-@withRequest({
-	initialData: props => dataWrapper(props.error),
-  endpoint: props => `/errors/${ props.error.errorId }/stats`,
-  dataWrapper,
-})
-export default class SideSection extends React.PureComponent {
-	onDateChange = ({ startDate, endDate }) => {
-		this.props.request({ startDate, endDate });
-	}
+function SideSection(props) {
+  const [data, setData] = React.useState({
+    chart24: [],
+    chart30: [],
+    tags: [],
+  });
+  const [loading, setLoading] = React.useState(false);
+  const { className } = props;
+  const { errorStore } = useStore();
+  const error = errorStore.instance;
 
-	render() {
-		const {
-			className,
-			error,
-			data,
-			loading,
-		} = this.props;
 
-		return (
-			<div className={ cn(className, "pl-5") }>
-					<h3 className="text-xl mb-2">Overview</h3>
-					<Trend
-						chart={ data.chart24 }
-						title="Past 24 hours"
-					/>
-					<div className="mb-6" />
-					<Trend
-						chart={ data.chart30 }
-						title="Last 30 days"
-						timeFormat={'l'}
-					/>
-					<div className="mb-6" />
-					<DateAgo
-						className="my-4"
-						title="First Seen"
-						timestamp={ error.firstOccurrence }
-					/>
-					<DateAgo
-						className="my-4"
-						title="Last Seen"
-						timestamp={ error.lastOccurrence }
-					/>
-					{ data.tags.length > 0 && <h4 className="text-xl mt-6 mb-3">Summary</h4> }
-					<Loader loading={loading}>
-						{ data.tags.map(({ name, partitions }) =>
-							<DistributionBar
-								key={ name }
-								title={name}
-								partitions={partitions}
-								className="mb-6"
-							/>
-						)}
-					</Loader>
-			</div>
-		);
-	}
+  const grabData = async () => {
+    setLoading(true);
+    errorService.fetchErrorStats(error.errorId)
+      .then(data => {
+        setData(dataWrapper(data))
+      })
+    .finally(() => setLoading(false));
+  }
+
+  React.useEffect(() => {
+    setData(dataWrapper(error))
+  }, [error.errorId])
+
+  return (
+    <div className={cn(className, 'pl-5')}>
+      <h3 className="text-xl mb-2">Overview</h3>
+      <Trend chart={data.chart24} title="Past 24 hours" />
+      <div className="mb-6" />
+      <Trend chart={data.chart30} title="Last 30 days" timeFormat={'l'} />
+      <div className="mb-6" />
+      <DateAgo
+        className="my-4"
+        title="First Seen"
+        timestamp={error.firstOccurrence}
+      />
+      <DateAgo
+        className="my-4"
+        title="Last Seen"
+        timestamp={error.lastOccurrence}
+      />
+      {data.tags.length > 0 && <h4 className="text-xl mt-6 mb-3">Summary</h4>}
+      <Loader loading={loading}>
+        {data.tags.map(({ name, partitions }) => (
+          <DistributionBar
+            key={name}
+            title={name}
+            partitions={partitions}
+            className="mb-6"
+          />
+        ))}
+      </Loader>
+    </div>
+  );
 }
+
+export default observer(SideSection);
diff --git a/frontend/app/components/Errors/Errors.js b/frontend/app/components/Errors/Errors.js
deleted file mode 100644
index b9ec178b5..000000000
--- a/frontend/app/components/Errors/Errors.js
+++ /dev/null
@@ -1,154 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import withSiteIdRouter from 'HOCs/withSiteIdRouter';
-import withPermissions from 'HOCs/withPermissions'
-import { UNRESOLVED, RESOLVED, IGNORED, BOOKMARK } from "Types/errorInfo";
-import { fetchBookmarks, editOptions } from "Duck/errors";
-import { applyFilter } from 'Duck/search';
-import { errors as errorsRoute, isRoute } from "App/routes";
-import withPageTitle from 'HOCs/withPageTitle';
-import cn from 'classnames';
-import SelectDateRange from 'Shared/SelectDateRange';
-import Period from 'Types/app/period';
-
-import List from './List/List';
-import ErrorInfo from './Error/ErrorInfo';
-import Header from './Header';
-import SideMenuSection from './SideMenu/SideMenuSection';
-import SideMenuDividedItem from './SideMenu/SideMenuDividedItem';
-
-const ERRORS_ROUTE = errorsRoute();
-
-function getStatusLabel(status) {
-	switch(status) {
-		case UNRESOLVED:
-			return "Unresolved";
-		case RESOLVED:
-			return "Resolved";
-		case IGNORED:
-			return "Ignored";
-		default: 
-			return "";
-	}
-}
-
-@withPermissions(['ERRORS'], 'page-margin container-90')
-@withSiteIdRouter
-@connect(state => ({
-	list: state.getIn([ "errors", "list" ]),
-	status: state.getIn([ "errors", "options", "status" ]),
-	filter: state.getIn([ 'search', 'instance' ]),
-}), {
-	fetchBookmarks,
-	applyFilter,
-	editOptions,
-})
-@withPageTitle("Errors - OpenReplay")
-export default class Errors extends React.PureComponent {
-	constructor(props) {
-		super(props)
-		this.state = {
-			filter: '',
-		}
-	}
-
-	ensureErrorsPage() {
-		const { history } = this.props;
-		if (!isRoute(ERRORS_ROUTE, history.location.pathname)) {
-			history.push(ERRORS_ROUTE);
-		}
-	}
-
-	onStatusItemClick = ({ key }) => {
-		this.props.editOptions({ status: key });
-	}
-
-	onBookmarksClick = () => {
-		this.props.editOptions({ status: BOOKMARK });
-	}
-
-	onDateChange = (e) => {
-		const dateValues = e.toJSON();
-		this.props.applyFilter(dateValues);
-	};
-
-	render() {
-		const { 
-			count,
-			match: { 
-				params: { errorId } 
-			},
-			status,
-			list,
-			history,
-			filter,
-		} = this.props;
-
-		const { startDate, endDate, rangeValue } = filter;
-  		const period = new Period({ start: startDate, end: endDate, rangeName: rangeValue });
-
-		return (
-			<div className="page-margin container-90" >
-				<div className={cn("side-menu", {'disabled' : !isRoute(ERRORS_ROUTE, history.location.pathname)})}>
-					<SideMenuSection
-						title="Errors"
-						onItemClick={this.onStatusItemClick}
-						items={[
-							{
-								key: UNRESOLVED,
-								icon: "exclamation-circle",
-								label: getStatusLabel(UNRESOLVED),
-								active: status === UNRESOLVED,
-							},
-							{
-								key: RESOLVED,
-								icon: "check",
-								label: getStatusLabel(RESOLVED),
-								active: status === RESOLVED,
-							},
-							{
-								key: IGNORED,
-								icon: "ban",
-								label: getStatusLabel(IGNORED),
-								active: status === IGNORED,
-	    					}
-						]}
-					/>
-					<SideMenuDividedItem 
-						className="mt-3 mb-4"
-						iconName="star"
-						title="Bookmarks"
-						active={ status === BOOKMARK }
-						onClick={ this.onBookmarksClick }
-					/>				
-				</div>
-
-				<div className="side-menu-margined">
-					{ errorId == null ?
-						<>							
-							<div className="mb-5 flex items-baseline">
-								<Header 
-									text={ status === BOOKMARK ? "Bookmarks" : getStatusLabel(status) }
-									count={ list.size }
-								/>
-								<div className="ml-3 flex items-center">
-				          			<span className="mr-2 color-gray-medium">Seen in</span>
-									<SelectDateRange
-											period={period}
-											onChange={this.onDateChange}
-									/>
-								</div>
-				      		</div>
-							<List 
-								status={ status }
-								list={ list }
-							/>
-						</>
-						:
-						<ErrorInfo errorId={ errorId } list={ list } />
-					}
-				</div>
-			</div>
-		);
-	}
-}
\ No newline at end of file
diff --git a/frontend/app/components/Errors/Header.js b/frontend/app/components/Errors/Header.js
deleted file mode 100644
index 283eb599b..000000000
--- a/frontend/app/components/Errors/Header.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-function Header({ text, count }) {
-  return (
-    <h3 className="text-2xl capitalize">
-      <span>{ text }</span>
-      { count != null && <span className="ml-2 font-normal color-gray-medium">{ count }</span> }
-    </h3>
-	);
-}
-
-Header.displayName = "Header";
-
-export default Header;
-	   
\ No newline at end of file
diff --git a/frontend/app/components/Errors/List/List.js b/frontend/app/components/Errors/List/List.js
deleted file mode 100644
index a51a3c2b0..000000000
--- a/frontend/app/components/Errors/List/List.js
+++ /dev/null
@@ -1,259 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { Set } from "immutable";
-import { NoContent, Loader, Checkbox, IconButton, Input, Pagination } from 'UI';
-import { merge, resolve, unresolve, ignore, updateCurrentPage, editOptions } from "Duck/errors";
-import { applyFilter } from 'Duck/filters';
-import { IGNORED, UNRESOLVED } from 'Types/errorInfo';
-import Divider from 'Components/Errors/ui/Divider';
-import ListItem from './ListItem/ListItem';
-import { debounce } from 'App/utils';
-import Select from 'Shared/Select';
-import EmptyStateSvg from '../../../svg/no-results.svg';
-
-const sortOptionsMap = {
-	'occurrence-desc': 'Last Occurrence',
-	'occurrence-desc': 'First Occurrence',
-	'sessions-asc': 'Sessions Ascending',
-	'sessions-desc': 'Sessions Descending',
-	'users-asc': 'Users Ascending',
-	'users-desc': 'Users Descending',
-};
-const sortOptions = Object.entries(sortOptionsMap)
-  .map(([ value, label ]) => ({ value, label }));
-
-@connect(state => ({
-	loading: state.getIn([ "errors", "loading" ]),
-	resolveToggleLoading: state.getIn(["errors", "resolve", "loading"]) ||
-		state.getIn(["errors", "unresolve", "loading"]),
-	ignoreLoading: state.getIn([ "errors", "ignore", "loading" ]),
-	mergeLoading: state.getIn([ "errors", "merge", "loading" ]),
-	currentPage: state.getIn(["errors", "currentPage"]),
-	limit: state.getIn(["errors", "limit"]),
-	total: state.getIn([ 'errors', 'totalCount' ]),
-	sort: state.getIn([ 'errors', 'options', 'sort' ]),
-	order: state.getIn([ 'errors', 'options', 'order' ]),
-	query: state.getIn([ "errors", "options", "query" ]),
-}), {
-	merge,
-	resolve,
-	unresolve,
-	ignore,
-	applyFilter,
-  	updateCurrentPage,
-	editOptions,
-})
-export default class List extends React.PureComponent {
-	constructor(props) {
-		super(props)
-		this.state = {
-			checkedAll: false,
-			checkedIds: Set(),
-			query: props.query,
-		}
-		this.debounceFetch = debounce(this.props.editOptions, 1000);
-	}
-
-	componentDidMount() {
-		this.props.applyFilter({ });
-	}
-
-	check = ({ errorId }) => {
-		const { checkedIds } = this.state;
-		const newCheckedIds = checkedIds.contains(errorId)
-			? checkedIds.remove(errorId)
-			: checkedIds.add(errorId);
-		this.setState({
-			checkedAll: newCheckedIds.size === this.props.list.size,
-			checkedIds: newCheckedIds
-		});
-	}
-
-	checkAll = () => {
-		if (this.state.checkedAll) {
-			this.setState({
-				checkedAll: false,
-				checkedIds: Set(),
-			});
-		} else {
-			this.setState({
-				checkedAll: true,
-				checkedIds: this.props.list.map(({ errorId }) => errorId).toSet(),
-			});
-		}
-	}
-
-	resetChecked = () => {
-		this.setState({
-			checkedAll: false,
-			checkedIds: Set(),
-		});
-	}
-
-	currentCheckedIds() {
-		return this.state.checkedIds
-			.intersect(this.props.list.map(({ errorId }) => errorId).toSet());
-	}
-
-	merge = () => {
-		this.props.merge(currentCheckedIds().toJS()).then(this.resetChecked);
-	}
-
-	applyToAllChecked(f) {
-		return Promise.all(this.currentCheckedIds().map(f).toJS()).then(this.resetChecked);
-	}
-
-	resolve = () => {
-		this.applyToAllChecked(this.props.resolve);
-	}
-
-	unresolve = () => {
-		this.applyToAllChecked(this.props.unresolve);
-	}
-
-	ignore = () => {
-		this.applyToAllChecked(this.props.ignore);
-	}
-
-	addPage = () => this.props.updateCurrentPage(this.props.currentPage + 1)
-
-	writeOption = ({ name, value }) => {
-		const [ sort, order ] = value.split('-');
-		if (name === 'sort') {
-			this.props.editOptions({ sort, order });
-		}
-	}
-
-	// onQueryChange = ({ target: { value, name } }) => props.edit({ [ name ]: value })
-
-	onQueryChange = ({ target: { value, name } }) => {
-		this.setState({ query: value });
-		this.debounceFetch({ query: value });
-	}
-
-	render() {
-		const {
-			list,
-			status,
-			loading,
-			ignoreLoading,
-			resolveToggleLoading,
-			mergeLoading,
-      		currentPage,
-		  	total,
-			sort,
-			order,
-			limit,
-		} = this.props;
-		const {
-			checkedAll,
-			checkedIds,
-			query,
-		} = this.state;
-		const someLoading = loading || ignoreLoading || resolveToggleLoading || mergeLoading;
-		const currentCheckedIds = this.currentCheckedIds();
-
-		return (
-			<div className="bg-white p-5 border-radius-3 thin-gray-border">
-				<div className="flex items-center justify-between mb-4">
-					<div className="flex items-center" style={{ height: "36px" }}>
-						<Checkbox
-							className="mr-3"
-							checked={ checkedAll }
-							onChange={ this.checkAll }
-						/>
-						{ status === UNRESOLVED
-							? <IconButton
-									outline
-									className="mr-3"
-									label="Resolve"
-									icon="check"
-									size="small"
-									loading={ resolveToggleLoading }
-									onClick={ this.resolve }
-									disabled={ someLoading || currentCheckedIds.size === 0}
-								/>
-							: <IconButton
-									outline
-									className="mr-3"
-									label="Unresolve"
-									icon="exclamation-circle"
-									size="small"
-									loading={ resolveToggleLoading }
-									onClick={ this.unresolve }
-									disabled={ someLoading || currentCheckedIds.size === 0}
-								/>
-						}
-						{ status !== IGNORED &&
-							<IconButton
-								outline
-								className="mr-3"
-								label="Ignore"
-								icon="ban"
-								size="small"
-								loading={ ignoreLoading }
-								onClick={ this.ignore }
-								disabled={ someLoading || currentCheckedIds.size === 0}
-							/>
-						}
-					</div>
-					<div className="flex items-center ml-6">
-						<span className="mr-2 color-gray-medium">Sort By</span>
-						<Select
-							defaultValue={ `${sort}-${order}` }
-							name="sort"
-							plain
-							options={ sortOptions }
-							onChange={ this.writeOption }
-						/>
-						<Input
-							style={{ width: '350px'}}
-							wrapperClassName="ml-3"
-							placeholder="Filter by name or message"
-							icon="search"
-							name="filter"
-							onChange={ this.onQueryChange }
-							value={query}
-						/>
-	        			</div>
-					</div>
-					<Divider />
-					<NoContent
-						title={
-							<div className="flex flex-col items-center justify-center">
-								<object style={{ width: "180px"}} type="image/svg+xml" data={EmptyStateSvg} />
-								<span className="mr-2">No Errors Found!</span>
-							</div>
-						}
-						subtext="Please try to change your search parameters."
-						// animatedIcon="empty-state"
-						show={ !loading && list.size === 0}
-					>
-					<Loader loading={ loading }>
-						{ list.map(e =>
-							<div key={e.errorId} style={{ opacity: e.disabled ? 0.5 : 1}}>
-								<ListItem
-									disabled={someLoading || e.disabled}
-									key={e.errorId}
-									error={e}
-									checked={ checkedIds.contains(e.errorId) }
-									onCheck={ this.check }
-								/>
-								<Divider/>
-							</div>
-						)}
-						<div className="w-full flex items-center justify-center mt-4">
-							<Pagination
-								page={currentPage}
-								total={total}
-								onPageChange={(page) => this.props.updateCurrentPage(page)}
-								limit={limit}
-								debounceRequest={500}
-							/>
-						</div>
-					</Loader>
-	     		</NoContent>
-			</div>
-		);
-	}
-}
diff --git a/frontend/app/components/Errors/List/ListItem/ListItem.js b/frontend/app/components/Errors/List/ListItem/ListItem.js
deleted file mode 100644
index 0e4474567..000000000
--- a/frontend/app/components/Errors/List/ListItem/ListItem.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import React from 'react';
-import { BarChart, Bar, YAxis, Tooltip, XAxis } from 'recharts';
-import cn from 'classnames';
-import { DateTime } from 'luxon'
-import { diffFromNowString } from 'App/date';
-import { error as errorRoute } from 'App/routes';
-import { IGNORED, RESOLVED } from 'Types/errorInfo';
-import { Checkbox, Link } from 'UI';
-import ErrorName from 'Components/Errors/ui/ErrorName';
-import Label from 'Components/Errors/ui/Label';
-import stl from './listItem.module.css';
-import { Styles } from '../../../Dashboard/Widgets/common';
-
-const CustomTooltip = ({ active, payload, label }) => {
-  if (active) {
-	const p = payload[0].payload;
-		const dateStr = p.timestamp ? DateTime.fromMillis(p.timestamp).toFormat('l') : ''
-    return (
-      <div className="rounded border bg-white p-2">
-        <p className="label text-sm color-gray-medium">{dateStr}</p>
-        <p className="text-sm">Sessions: {p.count}</p>
-      </div>
-    );
-  }
-
-  return null;
-};
-
-function ListItem({ className, onCheck, checked, error, disabled }) {
-	
-	const getDateFormat = val => {
-		const d = new Date(val);
-		return  (d.getMonth()+ 1) + '/' + d.getDate()
-	}
-
-	return (
-		<div className={ cn("flex justify-between cursor-pointer py-4", className) } id="error-item">
-			<Checkbox 
-				disabled={disabled}
-				checked={ checked }
-				onChange={ () => onCheck(error) }
-			/>
-
-			<div className={ cn("ml-3 flex-1 leading-tight", stl.name) } >
-				<Link to={errorRoute(error.errorId)} >
-					<ErrorName
-						icon={error.status === IGNORED ? 'ban' : null }
-						lineThrough={error.status === RESOLVED}
-						name={ error.name }
-						message={ error.stack0InfoString }
-						bold={ !error.viewed }
-					/>
-				<div 
-					className={ cn("truncate color-gray-medium", { "line-through" : error.status === RESOLVED}) }
-				>
-					{ error.message }
-				</div>
-				</Link>
-			</div>
-			<BarChart width={ 150 } height={ 40 } data={ error.chart }>
-				<XAxis hide dataKey="timestamp"  />
-				<YAxis hide domain={[0, 'dataMax + 8']} />
-				<Tooltip {...Styles.tooltip} label="Sessions" content={<CustomTooltip />} />
-		    <Bar name="Sessions" minPointSize={1} dataKey="count" fill="#A8E0DA" />							
-		  </BarChart>
-			<Label 
-				className={stl.sessions}
-				topValue={ error.sessions }
-				bottomValue="Sessions"
-			/>
-			<Label
-				className={stl.users}
-				topValue={ error.users }
-				bottomValue="Users"
-			/>
-			<Label
-				className={stl.occurrence}
-				topValue={ `${diffFromNowString(error.lastOccurrence)} ago` }
-				bottomValue="Last Seen"
-			/>
-		</div>
-	);
-}
-
-
-ListItem.displayName = "ListItem";
-export default ListItem;
\ No newline at end of file
diff --git a/frontend/app/components/Errors/List/ListItem/listItem.module.css b/frontend/app/components/Errors/List/ListItem/listItem.module.css
deleted file mode 100644
index c9f7589b9..000000000
--- a/frontend/app/components/Errors/List/ListItem/listItem.module.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.name {
-	min-width: 55%;
-}
-
-.sessions {
-	width: 6%;
-}
-
-.users {
-	width: 5%;
-}
-
-.occurrence {
-	width: 15%;
-	min-width: 152px;
-}
diff --git a/frontend/app/components/Errors/SideMenu/SideMenuDividedItem.js b/frontend/app/components/Errors/SideMenu/SideMenuDividedItem.js
deleted file mode 100644
index 9efa63ed4..000000000
--- a/frontend/app/components/Errors/SideMenu/SideMenuDividedItem.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import { SideMenuitem } from "UI";
-import Divider from 'Components/Errors/ui/Divider';
-function SideMenuDividedItem({ className, noTopDivider = false, noBottomDivider = false, ...props }) {
-	return (
-		<div className={className}>
-			{ !noTopDivider && <Divider /> }
-	    <SideMenuitem
-	    	className="my-3"
-	      { ...props }
-	    />
-	    { !noBottomDivider && <Divider /> }
-    </div>
-	);
-}
-
-SideMenuDividedItem.displayName = "SideMenuDividedItem";
-
-export default SideMenuDividedItem;
-
diff --git a/frontend/app/components/Errors/SideMenu/SideMenuHeader.js b/frontend/app/components/Errors/SideMenu/SideMenuHeader.js
deleted file mode 100644
index 32f1f7fc6..000000000
--- a/frontend/app/components/Errors/SideMenu/SideMenuHeader.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import stl from './sideMenuHeader.module.css';
-
-function SideMenuHeader({ text, className }) {
-	return (
-    <div className={ cn(className, stl.label, "uppercase color-gray") }>
-      { text }
-    </div>
-	)
-}
-
-SideMenuHeader.displayName = "SideMenuHeader";
-export default SideMenuHeader;
diff --git a/frontend/app/components/Errors/SideMenu/SideMenuSection.js b/frontend/app/components/Errors/SideMenu/SideMenuSection.js
deleted file mode 100644
index f2d6732f2..000000000
--- a/frontend/app/components/Errors/SideMenu/SideMenuSection.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { SideMenuitem } from 'UI';
-import SideMenuHeader from './SideMenuHeader';
-
-function SideMenuSection({ title, items, onItemClick }) {
-	return (
-		<>
-			<SideMenuHeader className="mb-4" text={ title }/>
-		  { items.map(item =>
-				<SideMenuitem
-					key={ item.key }		      	
-					active={ item.active }
-					title={ item.label }
-					iconName={ item.icon }
-					onClick={() => onItemClick(item)}
-				/>
-		  )}
-		</>
-	);
-}
-
-SideMenuSection.displayName = "SideMenuSection";
-
-export default SideMenuSection;
\ No newline at end of file
diff --git a/frontend/app/components/Errors/SideMenu/sideMenuHeader.module.css b/frontend/app/components/Errors/SideMenu/sideMenuHeader.module.css
deleted file mode 100644
index 5dce4e250..000000000
--- a/frontend/app/components/Errors/SideMenu/sideMenuHeader.module.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.label {
-  letter-spacing: 0.2em;
-  color: gray;
-}
\ No newline at end of file
diff --git a/frontend/app/components/FFlags/NewFFlag/Description.tsx b/frontend/app/components/FFlags/NewFFlag/Description.tsx
index cfcbab77d..65a4ed882 100644
--- a/frontend/app/components/FFlags/NewFFlag/Description.tsx
+++ b/frontend/app/components/FFlags/NewFFlag/Description.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { Button } from 'UI';
 import cn from 'classnames';
-import FeatureFlag from 'MOBX/types/FeatureFlag';
+import FeatureFlag from 'App/mstore/types/FeatureFlag';
 
 function Description({
   isDescrEditing,
diff --git a/frontend/app/components/ForgotPassword/CreatePassword.tsx b/frontend/app/components/ForgotPassword/CreatePassword.tsx
index 00f93542f..b276e6d4f 100644
--- a/frontend/app/components/ForgotPassword/CreatePassword.tsx
+++ b/frontend/app/components/ForgotPassword/CreatePassword.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 import ReCAPTCHA from 'react-google-recaptcha';
 import { Form, Input, Loader, Button, Icon, Message } from 'UI';
-import { requestResetPassword, resetPassword, resetErrors } from 'Duck/user';
 import stl from './forgotPassword.module.css';
 import { validatePassword } from 'App/validate';
 import { PASSWORD_POLICY } from 'App/constants';
@@ -13,29 +13,26 @@ const CAPTCHA_ENABLED = window.env.CAPTCHA_ENABLED === 'true';
 const CAPTCHA_SITE_KEY = window.env.CAPTCHA_SITE_KEY;
 
 interface Props {
-  errors: any;
-  resetErrors: any;
-  loading: boolean;
   params: any;
-  resetPassword: Function;
 }
 function CreatePassword(props: Props) {
-  const { loading, params } = props;
+  const { params } = props;
+  const { userStore } = useStore();
+  const loading = userStore.loading;
+  const resetPassword = userStore.resetPassword;
   const [error, setError] = React.useState<String | null>(null);
   const [validationError, setValidationError] = React.useState<String | null>(null);
   const [updated, setUpdated] = React.useState(false);
-  const [requested, setRequested] = React.useState(false);
   const [passwordRepeat, setPasswordRepeat] = React.useState('');
   const [password, setPassword] = React.useState('');
-  const [doesntMatch, setDoesntMatch] = React.useState(false);
   const pass = params.get('pass');
   const invitation = params.get('invitation');
 
-  const handleSubmit = (token?: any) => {
+  const handleSubmit = () => {
     if (!validatePassword(password)) {
       return;
     }
-    props.resetPassword({ invitation, pass, password }).then((response: any) => {
+    resetPassword({ invitation, pass, password }).then((response: any) => {
       if (response && response.errors && response.errors.length > 0) {
         setError(response.errors[0]);
       } else {
@@ -84,7 +81,6 @@ function CreatePassword(props: Props) {
                   <ReCAPTCHA
                     ref={recaptchaRef}
                     size="invisible"
-                    data-hidden={requested}
                     sitekey={CAPTCHA_SITE_KEY}
                     onChange={(token: any) => handleSubmit(token)}
                   />
@@ -150,17 +146,4 @@ function CreatePassword(props: Props) {
   );
 }
 
-export default connect(
-  (state: any) => ({
-    errors: state.getIn(['user', 'requestResetPassowrd', 'errors']),
-    resetErrors: state.getIn(['user', 'resetPassword', 'errors']),
-    loading:
-      state.getIn(['user', 'requestResetPassowrd', 'loading']) ||
-      state.getIn(['user', 'resetPassword', 'loading']),
-  }),
-  {
-    requestResetPassword,
-    resetPassword,
-    resetErrors,
-  }
-)(CreatePassword);
+export default observer(CreatePassword);
diff --git a/frontend/app/components/ForgotPassword/ForgotPassword.tsx b/frontend/app/components/ForgotPassword/ForgotPassword.tsx
index 253c7283d..d9a98f798 100644
--- a/frontend/app/components/ForgotPassword/ForgotPassword.tsx
+++ b/frontend/app/components/ForgotPassword/ForgotPassword.tsx
@@ -1,19 +1,15 @@
 import Copyright from 'Shared/Copyright';
 import React from 'react';
-import { Form, Input, Loader, Link, Icon, Message } from 'UI';
+import { Link } from 'UI';
 import {Button} from 'antd';
 import { login as loginRoute } from 'App/routes';
-import { connect } from 'react-redux';
 import ResetPassword from './ResetPasswordRequest';
 import CreatePassword from './CreatePassword';
 
 const LOGIN = loginRoute();
 
-interface Props {
-  params: any;
-}
-function ForgotPassword(props: Props) {
-  const { params } = props;
+function ForgotPassword(props) {
+  const params = new URLSearchParams(props.location.search);
   const pass = params.get('pass');
   const invitation = params.get('invitation');
   const creatingNewPassword = pass && invitation;
@@ -54,6 +50,4 @@ function ForgotPassword(props: Props) {
   );
 }
 
-export default connect((state: any, props: any) => ({
-  params: new URLSearchParams(props.location.search),
-}))(ForgotPassword);
+export default ForgotPassword;
diff --git a/frontend/app/components/ForgotPassword/ResetPasswordRequest.tsx b/frontend/app/components/ForgotPassword/ResetPasswordRequest.tsx
index 2be473d3b..bdc170b33 100644
--- a/frontend/app/components/ForgotPassword/ResetPasswordRequest.tsx
+++ b/frontend/app/components/ForgotPassword/ResetPasswordRequest.tsx
@@ -1,15 +1,13 @@
 import React from 'react';
 import { Form, Input, Loader, Button, Icon } from 'UI';
 import ReCAPTCHA from 'react-google-recaptcha';
-import { connect } from 'react-redux';
-import { requestResetPassword } from 'Duck/user';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 
-interface Props {
-  requestResetPassword: Function;
-  loading?: boolean;
-}
-function ResetPasswordRequest(props: Props) {
-  const { loading = false } = props;
+function ResetPasswordRequest() {
+  const { userStore } = useStore();
+  const loading = userStore.loading;
+  const requestResetPassword = userStore.requestResetPassword;
   const recaptchaRef = React.createRef();
   const [requested, setRequested] = React.useState(false);
   const [email, setEmail] = React.useState('');
@@ -35,8 +33,7 @@ function ResetPasswordRequest(props: Props) {
     if (CAPTCHA_ENABLED && recaptchaRef.current && (token === null || token === undefined))  return;
 
     setError(null);
-    props
-      .requestResetPassword({ email: email.trim(), 'g-recaptcha-response': token })
+    requestResetPassword({ email: email.trim(), 'g-recaptcha-response': token })
       .then((response: any) => {
         setRequested(true);
         if (response && response.errors && response.errors.length > 0) {
@@ -106,6 +103,4 @@ function ResetPasswordRequest(props: Props) {
   );
 }
 
-export default connect((state: any) => ({
-  loading: state.getIn(['user', 'requestResetPassowrd', 'loading']),
-}), { requestResetPassword })(ResetPasswordRequest);
+export default observer(ResetPasswordRequest);
diff --git a/frontend/app/components/Funnels/FunnelDetails/FunnelDetails.js__ b/frontend/app/components/Funnels/FunnelDetails/FunnelDetails.js__
deleted file mode 100644
index 59e172c54..000000000
--- a/frontend/app/components/Funnels/FunnelDetails/FunnelDetails.js__
+++ /dev/null
@@ -1,159 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { Tabs, Loader } from 'UI'
-import FunnelHeader from 'Components/Funnels/FunnelHeader'
-import FunnelGraph from 'Components/Funnels/FunnelGraph'
-import FunnelSessionList from 'Components/Funnels/FunnelSessionList'
-import FunnelOverview from 'Components/Funnels/FunnelOverview'
-import FunnelIssues from 'Components/Funnels/FunnelIssues'
-import { connect } from 'react-redux';
-import { 
-  fetch, fetchInsights, fetchList, fetchFiltered, fetchIssuesFiltered, fetchSessionsFiltered, fetchIssueTypes, resetFunnel, refresh
-} from 'Duck/funnels';
-import { applyFilter, setFilterOptions, resetFunnelFilters, setInitialFilters } from 'Duck/funnelFilters';
-import { withRouter } from 'react-router';
-import { sessions as sessionsRoute, funnel as funnelRoute, withSiteId } from 'App/routes';
-import FunnelSearch from 'Shared/FunnelSearch';
-import cn from 'classnames';
-import IssuesEmptyMessage from 'Components/Funnels/IssuesEmptyMessage'
-
-const TAB_ISSUES = 'ANALYSIS';
-const TAB_SESSIONS = 'SESSIONS';
-
-const TABS = [ TAB_ISSUES, TAB_SESSIONS ].map(tab => ({ 
-  text: tab,
-  disabled: false,
-  key: tab,
-}));
-
-const FunnelDetails = (props) => {
-  const { insights, funnels, funnel, funnelId, loading, liveFilters, issuesLoading, sessionsLoading, refresh } = props;
-  const [activeTab, setActiveTab] = useState(TAB_ISSUES)
-  const [showFilters, setShowFilters] = useState(false)
-  const [mounted, setMounted] = useState(false);
-  const onTabClick = activeTab => setActiveTab(activeTab)
-
-  useEffect(() => {    
-    if (funnels.size === 0) {
-      props.fetchList();      
-    }
-    props.fetchIssueTypes()
-
-    props.fetch(funnelId).then(() => {      
-      setMounted(true);      
-    }).then(() => {
-      props.refresh(funnelId);
-    })
-
-  }, []);  
-
-  // useEffect(() => {        
-  //   if (funnel && funnel.filter && liveFilters.events.size === 0) {      
-  //     props.setInitialFilters();      
-  //   }
-  // }, [funnel])
-  
-  const onBack = () => {
-    props.history.push(sessionsRoute());
-  }
-
-  const redirect = funnelId => {
-    const { siteId, history } = props;
-    props.resetFunnel();
-    props.resetFunnelFilters();
-
-    history.push(withSiteId(funnelRoute(parseInt(funnelId)), siteId));
-  }
-
-  const renderActiveTab = (tab, hasNoStages) => {    
-    switch(tab) {
-      case TAB_ISSUES:
-        return !hasNoStages && <FunnelIssues funnelId={funnelId} />
-      case TAB_SESSIONS:
-        return <FunnelSessionList funnelId={funnelId} />
-    }
-  }
-
-  const hasNoStages = !loading && insights.stages.length <= 1;
-  const showEmptyMessage = hasNoStages && activeTab === TAB_ISSUES && !loading;
-
-  return (
-    <div className="page-margin container-70">
-      <FunnelHeader
-        funnel={funnel}
-        insights={insights}
-        redirect={redirect}      
-        funnels={funnels}
-        onBack={onBack}
-        funnelId={parseInt(funnelId)}
-        toggleFilters={() => setShowFilters(!showFilters)}
-        showFilters={showFilters}
-      />
-      <div className="my-3" />
-      {showFilters && (
-        <FunnelSearch />
-      )
-      }
-      <div className="my-3" />  
-      <Tabs 
-        tabs={ TABS }
-        active={ activeTab }
-        onClick={ onTabClick }        
-      />
-      <div className="my-8" />      
-        <Loader loading={loading}>
-          <IssuesEmptyMessage onAddEvent={() => setShowFilters(true)} show={showEmptyMessage}>
-            <div>
-              <div className={cn("flex items-start", { 'hidden' : activeTab === TAB_SESSIONS || hasNoStages })}>
-                <div className="flex-1">
-                  <FunnelGraph data={insights.stages} funnelId={funnelId} />
-                </div>
-                <div style={{ width: '35%'}} className="px-14">
-                  <FunnelOverview funnel={insights} />
-                </div>
-              </div>
-              <div className="my-8" />
-              <Loader loading={issuesLoading || sessionsLoading}>
-                { renderActiveTab(activeTab, hasNoStages) } 
-              </Loader>              
-            </div>
-          </IssuesEmptyMessage>
-        </Loader>                          
-        
-    </div>
-  )
-}
-
-export default connect((state, props) => {
-  const insightsLoading = state.getIn(['funnels', 'fetchInsights', 'loading']);
-  const issuesLoading = state.getIn(['funnels', 'fetchIssuesRequest', 'loading']);
-  const funnelLoading = state.getIn(['funnels', 'fetchRequest', 'loading']);
-  const sessionsLoading = state.getIn(['funnels', 'fetchSessionsRequest', 'loading']);
-  return {
-    funnels: state.getIn(['funnels', 'list']),
-    funnel: state.getIn(['funnels', 'instance']),
-    insights: state.getIn(['funnels', 'insights']),    
-    loading: funnelLoading || (insightsLoading && (issuesLoading || sessionsLoading)),
-    issuesLoading,
-    sessionsLoading,
-    funnelId: props.match.params.funnelId,
-    activeStages: state.getIn(['funnels', 'activeStages']),
-    funnelFilters: state.getIn(['funnels', 'funnelFilters']),
-    siteId: state.getIn([ 'site', 'siteId' ]),    
-    liveFilters: state.getIn(['funnelFilters', 'appliedFilter']),
-  }
-}, { 
-  fetch,
-  fetchInsights,
-  fetchFiltered,
-  fetchIssuesFiltered,
-  fetchList,
-  applyFilter,  
-  setFilterOptions,
-  fetchIssuesFiltered,
-  fetchSessionsFiltered,
-  fetchIssueTypes,
-  resetFunnel,
-  resetFunnelFilters,
-  setInitialFilters,
-  refresh,
-})(withRouter((FunnelDetails)))
diff --git a/frontend/app/components/Funnels/FunnelGraph/FunnelGraph.js b/frontend/app/components/Funnels/FunnelGraph/FunnelGraph.js
deleted file mode 100644
index 221a59e8f..000000000
--- a/frontend/app/components/Funnels/FunnelGraph/FunnelGraph.js
+++ /dev/null
@@ -1,303 +0,0 @@
-import React, { useState } from 'react';
-import { Icon, Tooltip as AppTooltip } from 'UI';
-import { numberCompact } from 'App/utils';
-import {
-  BarChart,
-  Bar,
-  Cell,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  LabelList,
-
-} from 'recharts';
-import { connect } from 'react-redux';
-import { setActiveStages } from 'Duck/funnels';
-import { Styles } from '../../Dashboard/Widgets/common';
-import { numberWithCommas } from 'App/utils';
-import { truncate } from 'App/utils';
-
-const MIN_BAR_HEIGHT = 20;
-
-function CustomTick(props) {
-  const { x, y, payload } = props;
-  return (
-    <g transform={`translate(${x},${y})`}>
-      <text x={0} y={0} dy={16} fontSize={12} textAnchor="middle" fill="#666">
-        {payload.value}
-      </text>
-    </g>
-  );
-}
-
-function FunnelGraph(props) {
-  const { data, activeStages, funnelId, liveFilters } = props;
-  const [activeIndex, setActiveIndex] = useState(activeStages);
-
-  const renderPercentage = (props) => {
-    const { x, y, width, height, value } = props;
-    const radius = 10;
-    const _x = x + width / 2 + 45;
-
-    return (
-      <g>
-        <svg width="46px" height="21px" version="1.1">
-          <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-            <path
-              d="M37.2387001,0.5 L45.3588127,10.5034561 L37.4215407,20.5 L0.5,20.5 L0.5,0.5 L37.2387001,0.5 Z"
-              id="Rectangle"
-              stroke="#AFACAC"
-              fill="#FFFFFF"
-            ></path>
-          </g>
-        </svg>
-        <text x={x} y={70} fill="#000" textAnchor="middle" dominantBaseline="middle">
-          {numberCompact(value)}
-        </text>
-      </g>
-    );
-  };
-
-  const renderCustomizedLabel = (props) => {
-    const { x, y, width, height, value, textColor = '#fff' } = props;
-    const radius = 10;
-
-    if (value === 0) return;
-
-    return (
-      <g>
-        <text
-          x={x + width / 2}
-          y={y - radius + 20}
-          fill={textColor}
-          font-size="12"
-          textAnchor="middle"
-          dominantBaseline="middle"
-        >
-          {numberCompact(value)}
-        </text>
-      </g>
-    );
-  };
-
-  const handleClick = (data, index) => {
-    if (activeStages.length === 1 && activeStages.includes(index)) {
-      // selecting the same bar
-      props.setActiveStages([], null);
-      return;
-    }
-
-    if (activeStages.length === 2) {
-      // already having two bars
-      return;
-    }
-
-    // new selection
-    const arr = activeStages.concat([index]);
-    props.setActiveStages(arr.sort(), arr.length === 2 && liveFilters, funnelId);
-  };
-
-  const resetActiveSatges = () => {
-    props.setActiveStages([], liveFilters, funnelId, true);
-  };
-
-  const renderDropLabel = ({ x, y, width, value }) => {
-    if (value === 0) return;
-    return (
-      <text fill="#cc0000" x={x + width / 2} y={y - 5} textAnchor="middle" fontSize="12">
-        {value}
-      </text>
-    );
-  };
-
-  const renderMainLabel = ({ x, y, width, value }) => {
-    return (
-      <text fill="#FFFFFF" x={x + width / 2} y={y + 14} textAnchor="middle" fontSize="12">
-        {numberWithCommas(value)}
-      </text>
-    );
-  };
-
-  const CustomBar = (props) => {
-    const { fill, x, y, width, height, sessionsCount, index, dropDueToIssues } = props;
-    const yp = sessionsCount < MIN_BAR_HEIGHT ? MIN_BAR_HEIGHT - 1 : dropDueToIssues;
-    const tmp = (height <= 20 ? 20 : height) - (TEMP[index].height > 20 ? 0 : TEMP[index].height);
-    return (
-      <svg>
-        <rect x={x} y={y} width={width} height={tmp} fill={fill} />
-      </svg>
-    );
-  };
-  const MainBar = (props) => {
-    const {
-      fill,
-      x,
-      y,
-      width,
-      height,
-      sessionsCount,
-      index,
-      dropDueToIssues,
-      hasSelection = false,
-    } = props;
-    const yp = sessionsCount < MIN_BAR_HEIGHT ? MIN_BAR_HEIGHT - 1 : dropDueToIssues;
-
-    TEMP[index] = { height, y };
-
-    return (
-      <svg style={{ cursor: hasSelection ? '' : 'pointer' }}>
-        <rect x={x} y={y} width={width} height={height} fill={fill} />
-      </svg>
-    );
-  };
-
-  const renderDropPct = (props) => {
-    // TODO
-    const { fill, x, y, width, height, value, totalBars } = props;
-    const barW = x + 730 / totalBars / 2;
-
-    return (
-      <svg>
-        <rect x={barW} y={80} width={width} height={20} fill="red" />
-      </svg>
-    );
-  };
-
-  const CustomTooltip = (props) => {
-    const { payload } = props;
-    if (payload.length === 0) return null;
-    const { value, headerText } = payload[0].payload;
-
-    // const value = payload[0].payload.value;
-    if (!value) return null;
-    return (
-      <div className="rounded border bg-white p-2">
-        <div>{headerText}</div>
-        {value.map((i) => (
-          <div className="text-sm ml-2">{truncate(i, 30)}</div>
-        ))}
-      </div>
-    );
-  };
-  // const CustomTooltip = ({ active, payload, msg = ''  }) => {
-  //   return (
-  //     <div className="rounded border bg-white p-2">
-  //       <p className="text-sm">{msg}</p>
-  //     </div>
-  //   );
-  // };
-
-  const TEMP = {};
-
-  return (
-    <div className="relative">
-      {activeStages.length === 2 && (
-        <div
-          className="absolute right-0 top-0 cursor-pointer z-10"
-          style={{ marginRight: '60px', marginTop: '0' }}
-          onClick={resetActiveSatges}
-        >
-          <AppTooltip title={`Reset Selection`}>
-            <Icon name="sync-alt" size="15" color="teal" />
-          </AppTooltip>
-        </div>
-      )}
-      <BarChart
-        width={800}
-        height={190}
-        data={data}
-        margin={{ top: 20, right: 20, left: 0, bottom: 0 }}
-        background={'transparent'}
-      >
-        <CartesianGrid strokeDasharray="1 3" stroke="#BBB" vertical={false} />
-        {/* {activeStages.length < 2 && <Tooltip cursor={{ fill: 'transparent' }} content={<CustomTooltip msg={activeStages.length > 0 ? 'Select one more event.' : 'Select any two events to analyze in depth.'} />} />} */}
-        <Tooltip cursor={{ fill: 'transparent' }} content={CustomTooltip} />
-
-        <Bar
-          dataKey="sessionsCount"
-          onClick={handleClick}
-          maxBarSize={80}
-          stackId="a"
-          shape={<MainBar hasSelection={activeStages.length === 2} />}
-          cursor="pointer"
-          minPointSize={MIN_BAR_HEIGHT}
-          background={false}
-        >
-          <LabelList dataKey="sessionsCount" content={renderMainLabel} />
-          {data.map((entry, index) => {
-            const selected =
-              activeStages.includes(index) || (index > activeStages[0] && index < activeStages[1]);
-            const opacity = activeStages.length > 0 && !selected ? 0.4 : 1;
-            return (
-              <Cell
-                cursor="pointer"
-                fill={selected ? '#394EFF' : opacity === 1 ? '#3EAAAF' : '#CCC'}
-                key={`cell-${index}`}
-              />
-            );
-          })}
-        </Bar>
-
-        <Bar
-          hide={activeStages.length !== 2}
-          dataKey="dropDueToIssues"
-          onClick={handleClick}
-          maxBarSize={80}
-          stackId="a"
-          shape={<CustomBar />}
-          minPointSize={MIN_BAR_HEIGHT}
-        >
-          <LabelList dataKey="dropDueToIssues" content={renderDropLabel} />
-          {data.map((entry, index) => {
-            const selected =
-              activeStages.includes(index) || (index > activeStages[0] && index < activeStages[1]);
-            const opacity = activeStages.length > 0 && !selected ? 0.4 : 1;
-            return (
-              <Cell
-                opacity={opacity}
-                cursor="pointer"
-                fill={activeStages[1] === index ? '#cc000040' : 'transparent'}
-                key={`cell-${index}`}
-              />
-            );
-          })}
-        </Bar>
-
-        <XAxis
-          stroke={0}
-          dataKey="label"
-          strokeWidth={0}
-          interval={0}
-          // tick ={{ fill: '#666', fontSize: 12 }}
-          tick={<CustomTick />}
-          xAxisId={0}
-        />
-        {/* <XAxis
-            stroke={0}
-            xAxisId={1} 
-            dataKey="value"
-            strokeWidth={0}
-            interval={0}
-            dy={-15} dx={0}
-            tick ={{ fill: '#666', fontSize: 12 }}
-            tickFormatter={val => '"' + val + '"'}
-          /> */}
-        <YAxis
-          interval={0}
-          strokeWidth={0}
-          tick={{ fill: '#999999', fontSize: 11 }}
-          tickFormatter={(val) => Styles.tickFormatter(val)}
-        />
-      </BarChart>
-    </div>
-  );
-}
-
-export default connect(
-  (state) => ({
-    activeStages: state.getIn(['funnels', 'activeStages']).toJS(),
-    liveFilters: state.getIn(['funnelFilters', 'appliedFilter']),
-  }),
-  { setActiveStages }
-)(FunnelGraph);
diff --git a/frontend/app/components/Funnels/FunnelGraph/index.js b/frontend/app/components/Funnels/FunnelGraph/index.js
deleted file mode 100644
index 990d34099..000000000
--- a/frontend/app/components/Funnels/FunnelGraph/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './FunnelGraph'
\ No newline at end of file
diff --git a/frontend/app/components/Funnels/FunnelHeader/FunnelDropdown.js b/frontend/app/components/Funnels/FunnelHeader/FunnelDropdown.js
deleted file mode 100644
index a5b3bf445..000000000
--- a/frontend/app/components/Funnels/FunnelHeader/FunnelDropdown.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react'
-import { connect } from 'react-redux'
-import { withRouter } from 'react-router'
-import { Dropdown } from 'UI'
-import { funnel as funnelRoute, withSiteId } from 'App/routes';
-
-function FunnelDropdown(props) {  
-  const { options, funnel } = props;
-
-  const writeOption = (e, { name, value }) => {
-    const { siteId, history } = props;
-    history.push(withSiteId(funnelRoute(parseInt(value)), siteId));
-  }
-
-  return (
-    <div>
-      <Dropdown
-        selection
-        basic          
-        options={ options.toJS() }
-        name="funnel"
-        value={ funnel.funnelId || ''}
-        defaultValue={ funnel.funnelId }
-        icon={null}
-        style={{ border: 'none' }}
-        onChange={ writeOption }
-        selectOnBlur={false}
-      />
-    </div>
-  )
-}
-
-export default connect((state, props) => ({
-  funnels: state.getIn(['funnels', 'list']),
-  funnel: state.getIn(['funnels', 'instance']),
-  siteId: state.getIn([ 'site', 'siteId' ]),
-}), { })(withRouter(FunnelDropdown))
diff --git a/frontend/app/components/Funnels/FunnelHeader/FunnelHeader.js b/frontend/app/components/Funnels/FunnelHeader/FunnelHeader.js
deleted file mode 100644
index 58e64d295..000000000
--- a/frontend/app/components/Funnels/FunnelHeader/FunnelHeader.js
+++ /dev/null
@@ -1,149 +0,0 @@
-import React, { useState } from 'react';
-import { Icon, BackLink, IconButton, Dropdown, Tooltip, TextEllipsis, Button } from 'UI';
-import {
-  remove as deleteFunnel,
-  fetch,
-  fetchInsights,
-  fetchIssuesFiltered,
-  fetchSessionsFiltered,
-} from 'Duck/funnels';
-import { editFilter, editFunnelFilter, refresh } from 'Duck/funnels';
-import DateRange from 'Shared/DateRange';
-import { connect } from 'react-redux';
-import { confirm } from 'UI';
-import FunnelSaveModal from 'Components/Funnels/FunnelSaveModal';
-import stl from './funnelHeader.module.css';
-
-const Info = ({ label = '', value = '', className = 'mx-4' }) => {
-  return (
-    <div className={className}>
-      <span className="color-gray-medium">{label}</span>
-      <span className="font-medium ml-2">{value}</span>
-    </div>
-  );
-};
-
-const FunnelHeader = (props) => {
-  const {
-    funnel,
-    insights,
-    funnels,
-    onBack,
-    funnelId,
-    showFilters = false,
-    funnelFilters,
-    renameHandler,
-  } = props;
-  const [showSaveModal, setShowSaveModal] = useState(false);
-
-  const writeOption = (e, { name, value }) => {
-    props.redirect(value);
-    props.fetch(value).then(() => props.refresh(value));
-  };
-
-  const deleteFunnel = async (e, funnel) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (
-      await confirm({
-        header: 'Delete Funnel',
-        confirmButton: 'Delete',
-        confirmation: `Are you sure you want to permanently delete "${funnel.name}"?`,
-      })
-    ) {
-      props.deleteFunnel(funnel.funnelId).then(props.onBack);
-    } else {
-    }
-  };
-
-  const onDateChange = (e) => {
-    props.editFunnelFilter(e, funnelId);
-  };
-
-  const options = funnels.map(({ funnelId, name }) => ({ text: name, value: funnelId })).toJS();
-  const selectedFunnel = funnels.filter((i) => i.funnelId === parseInt(funnelId)).first() || {};
-  const eventsCount = funnel.filter.filters.filter((i) => i.isEvent).size;
-
-  return (
-    <div>
-      <div className="bg-white border rounded flex items-center w-full relative group pr-2">
-        <BackLink
-          onClick={onBack}
-          vertical
-          className="absolute"
-          style={{ left: '-50px', top: '8px' }}
-        />
-        <FunnelSaveModal show={showSaveModal} closeHandler={() => setShowSaveModal(false)} />
-        <div className="flex items-center mr-auto relative">
-          <Dropdown
-            scrolling
-            trigger={
-              <div
-                className="text-xl capitalize font-medium"
-                style={{ maxWidth: '300px', overflow: 'hidden' }}
-              >
-                <TextEllipsis text={selectedFunnel.name} />
-              </div>
-            }
-            options={options}
-            className={stl.dropdown}
-            name="funnel"
-            value={parseInt(funnelId)}
-            // icon={null}
-            onChange={writeOption}
-            selectOnBlur={false}
-            icon={
-              <Icon name="chevron-down" color="gray-dark" size="14" className={stl.dropdownIcon} />
-            }
-          />
-          <Info label="Events" value={eventsCount} />
-          <span>-</span>
-          <Button variant="text-primary" onClick={props.toggleFilters}>
-            {showFilters ? 'HIDE' : 'EDIT FUNNEL'}
-          </Button>
-          <Info label="Sessions" value={insights.sessionsCount} />
-          <Info label="Conversion" value={`${insights.conversions}%`} />
-        </div>
-        <div className="flex items-center">
-          <div className="flex items-center invisible group-hover:visible">
-            <Tooltip title={`Edit Funnel`}>
-              <IconButton icon="edit" onClick={() => setShowSaveModal(true)} />
-            </Tooltip>
-            <Tooltip title={`Remove Funnel`}>
-              <IconButton
-                icon="trash"
-                onClick={(e) => deleteFunnel(e, funnel)}
-                className="ml-2 mr-2"
-              />
-            </Tooltip>
-          </div>
-          <DateRange
-            rangeValue={funnelFilters.rangeValue}
-            startDate={funnelFilters.startDate}
-            endDate={funnelFilters.endDate}
-            onDateChange={onDateChange}
-            customRangeRight
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default connect(
-  (state) => ({
-    funnelFilters: state.getIn(['funnels', 'funnelFilters']).toJS(),
-    funnel: state.getIn(['funnels', 'instance']),
-  }),
-  {
-    editFilter,
-    editFunnelFilter,
-    deleteFunnel,
-    fetch,
-    fetchInsights,
-    fetchIssuesFiltered,
-    fetchSessionsFiltered,
-    refresh,
-  }
-)(FunnelHeader);
diff --git a/frontend/app/components/Funnels/FunnelHeader/funnelHeader.module.css b/frontend/app/components/Funnels/FunnelHeader/funnelHeader.module.css
deleted file mode 100644
index 7ab834b76..000000000
--- a/frontend/app/components/Funnels/FunnelHeader/funnelHeader.module.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.dropdown {
-  display: flex !important;
-  align-items: center;
-  padding: 0 20px;
-  border-radius: 0;  
-  border-radius: 0;
-  color: $gray-darkest;
-  font-weight: 500;
-  height: 54px;
-  padding-right: 20px;
-  border-right: solid thin #eee;
-  border-bottom-left-radius: 3px;
-  border-top-left-radius: 3px;
-  &:hover {
-    background-color: $gray-lightest;
-  }
-}
-
-.dropdownTrigger {
-  padding: 4px 8px;
-  border-radius: 3px;
-  &:hover {
-    background-color: $gray-light;
-  }
-}
-
-.dropdownIcon {  
-  margin-top: 4px;
-  margin-left: 6px;
-}
\ No newline at end of file
diff --git a/frontend/app/components/Funnels/FunnelHeader/index.js b/frontend/app/components/Funnels/FunnelHeader/index.js
deleted file mode 100644
index a5efa97af..000000000
--- a/frontend/app/components/Funnels/FunnelHeader/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './FunnelHeader';
\ No newline at end of file
diff --git a/frontend/app/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.js b/frontend/app/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.js
deleted file mode 100644
index 77017e4ac..000000000
--- a/frontend/app/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, { useEffect } from 'react'
-import IssueItem from 'Components/Funnels/IssueItem'
-import FunnelSessionList from 'Components/Funnels/FunnelSessionList'
-import { connect } from 'react-redux'
-import { withRouter } from 'react-router'
-import { fetchIssue, setNavRef, resetIssue } from 'Duck/funnels'
-import { funnel as funnelRoute, withSiteId } from 'App/routes'
-import { Loader } from 'UI'
-
-function FunnelIssueDetails(props) {
-  const { issue, issueId, funnelId, loading = false } = props;
-  
-  useEffect(() => {    
-    props.fetchIssue(funnelId, issueId)    
-
-    return () => {
-      props.resetIssue();
-    }
-  }, [issueId])
-
-  const onBack = () => {
-    const { siteId, history } = props;
-    history.push(withSiteId(funnelRoute(parseInt(funnelId)), siteId));
-  }
-
-  return (
-    <div className="page-margin container-70" >
-      <Loader loading={loading}>
-        <IssueItem issue={issue} inDetails onBack={onBack} />
-        <div className="my-6" />
-        <FunnelSessionList funnelId={funnelId} issueId={issueId} inDetails />
-      </Loader>
-    </div>
-  )
-}
-
-export default connect((state, props) => ({  
-  loading: state.getIn(['funnels', 'fetchIssueRequest', 'loading']),
-  issue: state.getIn(['funnels', 'issue']),  
-  issueId: props.match.params.issueId,
-  funnelId: props.match.params.funnelId,
-  siteId: state.getIn([ 'site', 'siteId' ]),
-}), { fetchIssue, setNavRef, resetIssue })(withRouter(FunnelIssueDetails))
diff --git a/frontend/app/components/Funnels/FunnelIssueDetails/index.js b/frontend/app/components/Funnels/FunnelIssueDetails/index.js
index 3ac32a034..0c66aec5b 100644
--- a/frontend/app/components/Funnels/FunnelIssueDetails/index.js
+++ b/frontend/app/components/Funnels/FunnelIssueDetails/index.js
@@ -1 +1 @@
-export { default } from './FunnelIssueDetails'
\ No newline at end of file
+//export { default } from './FunnelIssueDetails'
diff --git a/frontend/app/components/Funnels/FunnelIssues/FunnelIssues.js b/frontend/app/components/Funnels/FunnelIssues/FunnelIssues.js
deleted file mode 100644
index 3a6070afe..000000000
--- a/frontend/app/components/Funnels/FunnelIssues/FunnelIssues.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React,  { useState } from 'react'
-import { connect } from 'react-redux'
-import { fetchIssues, fetchIssuesFiltered } from 'Duck/funnels'
-import { LoadMoreButton, NoContent } from 'UI'
-import FunnelIssuesHeader from '../FunnelIssuesHeader'
-import IssueItem from '../IssueItem';
-import { funnelIssue as funnelIssueRoute, withSiteId } from 'App/routes'
-import { withRouter } from 'react-router'
-import IssueFilter from '../IssueFilter';
-import SortDropdown from './SortDropdown';
-import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
-
-const PER_PAGE = 10;
-
-function FunnelIssues(props) {
-  const {
-    funnel, list, loading = false,
-    criticalIssuesCount, issueFilters, sort
-  } = props;
-
-  const [showPages, setShowPages] = useState(1)
-
-  const addPage = () => setShowPages(showPages + 1);
-  
-  const onClick = ({ issueId }) => {
-    const { siteId, history } = props;    
-    history.push(withSiteId(funnelIssueRoute(funnel.funnelId, issueId), siteId));
-  }
-
-  let filteredList = issueFilters.size > 0 ? list.filter(item => issueFilters.includes(item.type)) : list;
-  filteredList = sort.sort ? filteredList.sortBy(i => i[sort.sort]) : filteredList;
-  filteredList = sort.order === 'desc' ? filteredList.reverse() : filteredList;
-  const displayedCount = Math.min(showPages * PER_PAGE, filteredList.size);
-
-  return (
-    <div>
-      <FunnelIssuesHeader criticalIssuesCount={criticalIssuesCount} />
-      <div className="my-5 flex items-start justify-between">
-        <IssueFilter />
-        <div className="flex items-center ml-6 flex-shrink-0">
-          <span className="mr-2 color-gray-medium">Sort By</span>
-          <SortDropdown />
-        </div>
-      </div>      
-      <NoContent
-        title={
-          <div className="flex flex-col items-center justify-center">
-              <AnimatedSVG name={ICONS.NO_RESULTS} size="60" />
-              <div className="mt-4">No Issues Found!</div>
-            </div>
-        }
-        subtext="Please try changing your search parameters."
-        // animatedIcon="no-results"
-        show={ !loading && filteredList.size === 0}
-      >        
-        { filteredList.take(displayedCount).map(issue => (
-          <div className="mb-4">
-            <IssueItem
-              key={ issue.issueId }
-              issue={ issue }
-              onClick={() => onClick(issue)}       
-            />
-          </div>
-        ))}
-
-        <LoadMoreButton
-          className="mt-12 mb-12"
-          displayedCount={displayedCount}
-          totalCount={filteredList.size}
-          loading={loading}
-          onClick={addPage}
-        />
-      </NoContent>
-    </div>
-  )
-}
-
-export default connect(state => ({  
-  list: state.getIn(['funnels', 'issues']),
-  criticalIssuesCount: state.getIn(['funnels', 'criticalIssuesCount']),
-  loading: state.getIn(['funnels', 'fetchIssuesRequest', 'loading']),
-  siteId: state.getIn([ 'site', 'siteId' ]),
-  funnel: state.getIn(['funnels', 'instance']),
-  activeStages: state.getIn(['funnels', 'activeStages']),
-  funnelFilters: state.getIn(['funnels', 'funnelFilters']),
-  liveFilters: state.getIn(['funnelFilters', 'appliedFilter']),
-  issueFilters: state.getIn(['funnels', 'issueFilters', 'filters']),
-  sort: state.getIn(['funnels', 'issueFilters', 'sort']),
-}), { fetchIssues, fetchIssuesFiltered })(withRouter(FunnelIssues))
diff --git a/frontend/app/components/Funnels/FunnelIssues/SortDropdown/SortDropdown.js b/frontend/app/components/Funnels/FunnelIssues/SortDropdown/SortDropdown.js
deleted file mode 100644
index a9d22f2f0..000000000
--- a/frontend/app/components/Funnels/FunnelIssues/SortDropdown/SortDropdown.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import Select from 'Shared/Select'
-import { sort } from 'Duck/sessions';
-import { applyIssueFilter } from 'Duck/funnels';
-
-const sortOptionsMap = {
-  'afectedUsers-desc': 'Affected Users (High)',
-  'afectedUsers-asc': 'Affected Users (Low)',
-  'conversionImpact-desc': 'Conversion Impact (High)',
-  'conversionImpact-asc': 'Conversion Impact (Low)',
-  'lostConversions-desc': 'Lost Conversions (High)',
-  'lostConversions-asc': 'Lost Conversions (Low)',
-};
-
-const sortOptions = Object.entries(sortOptionsMap)
-  .map(([ value, label ]) => ({ value, label }));
-
-@connect(state => ({
-  sorts: state.getIn(['funnels', 'issueFilters', 'sort'])
-}), { sort, applyIssueFilter })
-export default class SortDropdown extends React.PureComponent {
-  state = { value: null }
-  sort = ({ value }) => {
-    this.setState({ value: value })
-    const [ sort, order ] = value.split('-');
-    const sign = order === 'desc' ? -1 : 1;
-    this.props.applyIssueFilter({ sort: { order, sort } });
-
-    this.props.sort(sort, sign)
-    setTimeout(() => this.props.sort(sort, sign), 3000); //AAA
-  }
-
-  render() {    
-    const { sorts } = this.props;        
-
-    return (
-      <Select
-        plain
-        right
-        name="sortSessions"
-        defaultValue={sorts.sort + '-' + sorts.order}
-        options={sortOptions}
-        onChange={ this.sort }
-      />
-    );
-  }
-}
diff --git a/frontend/app/components/Funnels/FunnelIssues/SortDropdown/index.js b/frontend/app/components/Funnels/FunnelIssues/SortDropdown/index.js
deleted file mode 100644
index 9018d24ac..000000000
--- a/frontend/app/components/Funnels/FunnelIssues/SortDropdown/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SortDropdown';
diff --git a/frontend/app/components/Funnels/FunnelIssues/SortDropdown/sortDropdown.module.css b/frontend/app/components/Funnels/FunnelIssues/SortDropdown/sortDropdown.module.css
deleted file mode 100644
index 87e26bc68..000000000
--- a/frontend/app/components/Funnels/FunnelIssues/SortDropdown/sortDropdown.module.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.dropdown {
-  display: flex !important;
-  padding: 4px 6px;
-  border-radius: 3px;
-  color: $gray-darkest;
-  font-weight: 500;
-  &:hover {
-    background-color: $gray-light;
-  }
-}
-
-.dropdownTrigger {
-  padding: 4px 8px;
-  border-radius: 3px;
-  &:hover {
-    background-color: $gray-light;
-  }
-}
-
-.dropdownIcon {
-  margin-top: 2px;
-  margin-left: 3px;
-}
\ No newline at end of file
diff --git a/frontend/app/components/Funnels/FunnelIssues/index.js b/frontend/app/components/Funnels/FunnelIssues/index.js
deleted file mode 100644
index 051a19336..000000000
--- a/frontend/app/components/Funnels/FunnelIssues/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './FunnelIssues'
\ No newline at end of file
diff --git a/frontend/app/components/Funnels/FunnelIssuesHeader/DateRange.js b/frontend/app/components/Funnels/FunnelIssuesHeader/DateRange.js
deleted file mode 100644
index 4780f8c75..000000000
--- a/frontend/app/components/Funnels/FunnelIssuesHeader/DateRange.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { applyFilter, fetchList } from 'Duck/filters';
-import { fetchList as fetchFunnelsList } from 'Duck/funnels';
-import DateRangeDropdown from 'Shared/DateRangeDropdown';
-
-@connect(state => ({
-  rangeValue: state.getIn([ 'filters', 'appliedFilter', 'rangeValue' ]),
-  startDate: state.getIn([ 'filters', 'appliedFilter', 'startDate' ]),
-  endDate: state.getIn([ 'filters', 'appliedFilter', 'endDate' ]),
-}), {
-  applyFilter, fetchList, fetchFunnelsList
-})
-export default class DateRange extends React.PureComponent {  
-  render() {
-    const { startDate, endDate, rangeValue, className } = this.props;
-    return (
-      <DateRangeDropdown
-        button        
-        rangeValue={ rangeValue }
-        startDate={ startDate }
-        endDate={ endDate }
-        className={ className }
-      />
-    );
-  }
-}
\ No newline at end of file
diff --git a/frontend/app/components/Funnels/FunnelIssuesHeader/FunnelIssuesHeader.js b/frontend/app/components/Funnels/FunnelIssuesHeader/FunnelIssuesHeader.js
deleted file mode 100644
index 76688e6f0..000000000
--- a/frontend/app/components/Funnels/FunnelIssuesHeader/FunnelIssuesHeader.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-import { connect } from 'react-redux';
-
-function FunnelIssuesHeader({ criticalIssuesCount, filters }) {  
-  return (
-    <div className="flex items-center">
-      <div className="flex items-center mr-auto text-xl">
-        <div className="font-medium mr-2">          
-          Significant issues
-        </div>
-        <div className="mr-2">in this funnel</div>        
-      </div>      
-    </div>
-  )
-}
-
-export default connect(state => ({
-  filters: state.getIn(['funnels', 'issueFilters'])
-}))(FunnelIssuesHeader)
diff --git a/frontend/app/components/Funnels/FunnelIssuesHeader/index.js b/frontend/app/components/Funnels/FunnelIssuesHeader/index.js
deleted file mode 100644
index fc29e310d..000000000
--- a/frontend/app/components/Funnels/FunnelIssuesHeader/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './FunnelIssuesHeader';
\ No newline at end of file
diff --git a/frontend/app/components/Funnels/FunnelItem/FunnelItem.js__ b/frontend/app/components/Funnels/FunnelItem/FunnelItem.js__
deleted file mode 100644
index 3cb024a69..000000000
--- a/frontend/app/components/Funnels/FunnelItem/FunnelItem.js__
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react'
-import FunnelGraphSmall from '../FunnelGraphSmall'
-
-function FunnelItem({ funnel, onClick = () => null }) {  
-  return (
-    <div className="w-full flex items-center p-4 bg-white rounded border cursor-pointer" onClick={onClick}>
-      <div className="mr-4">
-        <FunnelGraphSmall data={funnel.stages} />
-      </div>
-
-      <div className="mr-auto">
-        <div className="text-xl mb-2">{funnel.name}</div>
-        <div className="flex items-center text-sm">
-          <div className="mr-3"><span className="font-medium">{funnel.stepsCount}</span> Steps</div>
-          <div><span className="font-medium">{funnel.sessionsCount}</span> Sessions</div>
-        </div>
-      </div>
-
-      <div className="text-center text-sm px-6">
-        <div className="text-xl mb-2 color-red">{funnel.criticalIssuesCount}</div>
-        <div>Critical Issues</div>
-      </div>
-
-      <div className="text-center text-sm px-6">
-        <div className="text-xl mb-2">{funnel.missedConversions}%</div>
-        <div>Missed Conversions</div>
-      </div>
-    </div>
-  )
-}
-
-export default FunnelItem
diff --git a/frontend/app/components/Funnels/FunnelSaveModal/FunnelSaveModal.js b/frontend/app/components/Funnels/FunnelSaveModal/FunnelSaveModal.js
deleted file mode 100644
index e0d43d1d7..000000000
--- a/frontend/app/components/Funnels/FunnelSaveModal/FunnelSaveModal.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { Button, Modal, Form, Icon, Checkbox, Input } from 'UI';
-import styles from './funnelSaveModal.module.css';
-import { edit, save, fetchList as fetchFunnelsList } from 'Duck/funnels';
-
-@connect(
-  (state) => ({
-    filter: state.getIn(['search', 'instance']),
-    funnel: state.getIn(['funnels', 'instance']),
-    loading:
-      state.getIn(['funnels', 'saveRequest', 'loading']) ||
-      state.getIn(['funnels', 'updateRequest', 'loading']),
-  }),
-  { edit, save, fetchFunnelsList }
-)
-export default class FunnelSaveModal extends React.PureComponent {
-  state = { name: 'Untitled', isPublic: false };
-  static getDerivedStateFromProps(props) {
-    if (!props.show) {
-      return {
-        name: props.funnel.name || 'Untitled',
-        isPublic: props.funnel.isPublic,
-      };
-    }
-    return null;
-  }
-
-  onNameChange = ({ target: { value } }) => {
-    this.props.edit({ name: value });
-  };
-
-  onChangeOption = (e, { checked, name }) => this.props.edit({ [name]: checked });
-
-  onSave = () => {
-    const { funnel, filter } = this.props;
-    if (funnel.name && funnel.name.trim() === '') return;
-    this.props.save(funnel).then(
-      function () {
-        this.props.fetchFunnelsList();
-        this.props.closeHandler();
-      }.bind(this)
-    );
-  };
-
-  render() {
-    const { show, closeHandler, loading, funnel } = this.props;
-
-    return (
-      <Modal size="small" open={show} onClose={this.props.closeHandler}>
-        <Modal.Header className={styles.modalHeader}>
-          <div>{'Save Funnel'}</div>
-          <Icon
-            role="button"
-            tabIndex="-1"
-            color="gray-dark"
-            size="14"
-            name="close"
-            onClick={closeHandler}
-          />
-        </Modal.Header>
-
-        <Modal.Content>
-          <Form onSubmit={this.onSave}>
-            <Form.Field>
-              <label>{'Title:'}</label>
-              <Input
-                autoFocus={true}
-                className={styles.name}
-                name="name"
-                value={funnel.name}
-                onChange={this.onNameChange}
-                placeholder="Title"
-              />
-            </Form.Field>
-
-            <Form.Field>
-              <div className="flex items-center">
-                <Checkbox
-                  name="isPublic"
-                  className="font-medium"
-                  type="checkbox"
-                  checked={funnel.isPublic}
-                  onClick={this.onChangeOption}
-                  className="mr-3"
-                />
-                <div
-                  className="flex items-center cursor-pointer"
-                  onClick={() => this.props.edit({ isPublic: !funnel.isPublic })}
-                >
-                  <Icon name="user-friends" size="16" />
-                  <span className="ml-2"> Team Visible</span>
-                </div>
-              </div>
-            </Form.Field>
-          </Form>
-        </Modal.Content>
-        <Modal.Footer className="">
-          <Button
-            variant="primary"
-            onClick={this.onSave}
-            loading={loading}
-            className="float-left mr-2"
-          >
-            {funnel.exists() ? 'Modify' : 'Save'}
-          </Button>
-          <Button onClick={closeHandler}>{'Cancel'}</Button>
-        </Modal.Footer>
-      </Modal>
-    );
-  }
-}
diff --git a/frontend/app/components/Funnels/FunnelSaveModal/funnelSaveModal.module.css b/frontend/app/components/Funnels/FunnelSaveModal/funnelSaveModal.module.css
deleted file mode 100644
index ed2600745..000000000
--- a/frontend/app/components/Funnels/FunnelSaveModal/funnelSaveModal.module.css
+++ /dev/null
@@ -1,15 +0,0 @@
-@import 'mixins.css';
-
-.modalHeader {
-    display: flex !important;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.cancelButton {
-    @mixin plainButton;
-}
-
-.applyButton {
-    @mixin basicButton;
-}
\ No newline at end of file
diff --git a/frontend/app/components/Funnels/FunnelSaveModal/index.js b/frontend/app/components/Funnels/FunnelSaveModal/index.js
deleted file mode 100644
index 1265b5b10..000000000
--- a/frontend/app/components/Funnels/FunnelSaveModal/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './FunnelSaveModal'
\ No newline at end of file
diff --git a/frontend/app/components/Funnels/FunnelSessionList/FunnelSessionList.js b/frontend/app/components/Funnels/FunnelSessionList/FunnelSessionList.js
deleted file mode 100644
index c7aca3149..000000000
--- a/frontend/app/components/Funnels/FunnelSessionList/FunnelSessionList.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { connect } from 'react-redux'
-import SessionItem from 'Shared/SessionItem'
-import { fetchSessions, fetchSessionsFiltered } from 'Duck/funnels'
-import { setFunnelPage } from 'Duck/sessions'
-import { LoadMoreButton, NoContent } from 'UI'
-import FunnelSessionsHeader from '../FunnelSessionsHeader'
-import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
-
-const PER_PAGE = 10;
-
-function FunnelSessionList(props) {
-  const { funnelId, issueId, list, sessionsTotal, sessionsSort, inDetails = false } = props;
-
-  const [showPages, setShowPages] = useState(1)
-  const displayedCount = Math.min(showPages * PER_PAGE, list.size);
-
-  const addPage = () => setShowPages(showPages + 1);
-
-  useEffect(() => {
-    props.setFunnelPage({
-      funnelId,
-      issueId
-    })
-  }, [])
-
-  return (
-    <div>
-      <FunnelSessionsHeader sessionsCount={inDetails ? sessionsTotal : list.size} inDetails={inDetails} />
-      <div className="mb-4" />
-      <NoContent
-        title={
-          <div className="flex flex-col items-center justify-center">
-            <AnimatedSVG name={ICONS.NO_RESULTS} size="60" />
-            <div className="mt-4">No recordings found!</div>
-          </div>
-        }
-        subtext="Please try changing your search parameters."
-        // animatedIcon="no-results"
-        show={ list.size === 0}
-      >
-        { list.take(displayedCount).map(session => (
-          <SessionItem
-            key={ session.sessionId }
-            session={ session }            
-          />
-        ))}
-
-        <LoadMoreButton
-          className="mt-12 mb-12"
-          displayedCount={displayedCount}
-          totalCount={list.size}
-          onClick={addPage}
-        />
-      </NoContent>
-    </div>
-  )
-}
-
-export default connect(state => ({  
-  list: state.getIn(['funnels', 'sessions']),
-  sessionsTotal: state.getIn(['funnels', 'sessionsTotal']),  
-  funnel: state.getIn(['funnels', 'instance']),
-  activeStages: state.getIn(['funnels', 'activeStages']).toJS(),
-  liveFilters: state.getIn(['funnelFilters', 'appliedFilter']),
-  funnelFilters: state.getIn(['funnels', 'funnelFilters']),
-  sessionsSort: state.getIn(['funnels', 'sessionsSort']),
-}), { fetchSessions, fetchSessionsFiltered, setFunnelPage })(FunnelSessionList)
diff --git a/frontend/app/components/Funnels/FunnelSessionList/index.js b/frontend/app/components/Funnels/FunnelSessionList/index.js
deleted file mode 100644
index 45c8e472e..000000000
--- a/frontend/app/components/Funnels/FunnelSessionList/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './FunnelSessionList'
\ No newline at end of file
diff --git a/frontend/app/components/Funnels/FunnelSessionsHeader/DateRange.js b/frontend/app/components/Funnels/FunnelSessionsHeader/DateRange.js
deleted file mode 100644
index c532f5af6..000000000
--- a/frontend/app/components/Funnels/FunnelSessionsHeader/DateRange.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { applyFilter, fetchList } from 'Duck/filters';
-import { fetchList as fetchFunnelsList } from 'Duck/funnels';
-import DateRangeDropdown from 'Shared/DateRangeDropdown';
-
-@connect(state => ({
-  rangeValue: state.getIn([ 'filters', 'appliedFilter', 'rangeValue' ]),
-  startDate: state.getIn([ 'filters', 'appliedFilter', 'startDate' ]),
-  endDate: state.getIn([ 'filters', 'appliedFilter', 'endDate' ]),
-}), {
-  applyFilter, fetchList, fetchFunnelsList
-})
-export default class DateRange extends React.PureComponent {  
-  render() {
-    const { startDate, endDate, rangeValue, className } = this.props;
-    return (
-      <DateRangeDropdown
-        button
-        // onChange={ this.onDateChange }
-        rangeValue={ rangeValue }
-        startDate={ startDate }
-        endDate={ endDate }
-        className={ className }
-      />
-    );
-  }
-}
\ No newline at end of file
diff --git a/frontend/app/components/Funnels/FunnelSessionsHeader/SortDropdown/SortDropdown.js b/frontend/app/components/Funnels/FunnelSessionsHeader/SortDropdown/SortDropdown.js
deleted file mode 100644
index b865a6b57..000000000
--- a/frontend/app/components/Funnels/FunnelSessionsHeader/SortDropdown/SortDropdown.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import Select from 'Shared/Select';
-import { setSessionsSort as sort } from 'Duck/funnels';
-import { setSessionsSort } from 'Duck/funnels';
-
-@connect(state => ({
-  sessionsSort: state.getIn(['funnels','sessionsSort'])
-}), { sort, setSessionsSort })
-export default class SortDropdown extends React.PureComponent {
-  state = { value: null }
-  sort = ({ value }) => {
-    this.setState({ value: value })
-    const [ sort, order ] = value.split('-');
-    const sign = order === 'desc' ? -1 : 1;    
-    setTimeout(() => this.props.sort(sort, sign), 100);
-  }
-
-  render() {
-    const { options, issuesSort } = this.props;    
-    return (
-      <Select
-        right
-        plain
-        name="sortSessions"
-        options={options}
-        defaultValue={ options[ 0 ].value }
-        onChange={ this.sort }
-      />
-    );
-  }
-}
diff --git a/frontend/app/components/Funnels/FunnelSessionsHeader/SortDropdown/index.js b/frontend/app/components/Funnels/FunnelSessionsHeader/SortDropdown/index.js
deleted file mode 100644
index 9018d24ac..000000000
--- a/frontend/app/components/Funnels/FunnelSessionsHeader/SortDropdown/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SortDropdown';
diff --git a/frontend/app/components/Funnels/FunnelSessionsHeader/SortDropdown/sortDropdown.module.css b/frontend/app/components/Funnels/FunnelSessionsHeader/SortDropdown/sortDropdown.module.css
deleted file mode 100644
index 87e26bc68..000000000
--- a/frontend/app/components/Funnels/FunnelSessionsHeader/SortDropdown/sortDropdown.module.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.dropdown {
-  display: flex !important;
-  padding: 4px 6px;
-  border-radius: 3px;
-  color: $gray-darkest;
-  font-weight: 500;
-  &:hover {
-    background-color: $gray-light;
-  }
-}
-
-.dropdownTrigger {
-  padding: 4px 8px;
-  border-radius: 3px;
-  &:hover {
-    background-color: $gray-light;
-  }
-}
-
-.dropdownIcon {
-  margin-top: 2px;
-  margin-left: 3px;
-}
\ No newline at end of file
diff --git a/frontend/app/components/Funnels/IssueFilter/IssueFilter.js b/frontend/app/components/Funnels/IssueFilter/IssueFilter.js
deleted file mode 100644
index 3996b9939..000000000
--- a/frontend/app/components/Funnels/IssueFilter/IssueFilter.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react'
-import { connect } from 'react-redux';
-import { Icon, Dropdown, TagBadge } from 'UI'
-import { applyIssueFilter, removeIssueFilter } from 'Duck/funnels';
-import cn from 'classnames';
-import stl from './issueFilter.module.css';
-import { List } from 'immutable';
-
-function IssueFilter(props) {
-  const { filters, issueTypes, issueTypesMap } = props;  
-
-  const onChangeFilter = (e, { name, value }) => {
-    const errors = filters.toJS();
-    errors.push(value);    
-    props.applyIssueFilter({ filters: List(errors) });
-  }
-
-  return (
-    <div className="flex items-start">
-      <Dropdown
-        trigger={
-          <div className={cn("py-2 px-3 bg-white rounded-full flex items-center text-sm mb-2", stl.filterBtn)}> 
-            <Icon name="filter" size="12" color="teal" />
-            <span className="ml-2 font-medium leading-none">Filter</span>
-          </div>
-        }          
-        options={ issueTypes.filter(i => !filters.includes(i.value)) }
-        name="change"
-        icon={null}
-        onChange={onChangeFilter}
-        basic
-        scrolling        
-        selectOnBlur={false}        
-      />
-      <div className="flex items-center ml-3 flex-wrap">
-        {filters.map(err => (
-          <TagBadge
-            className="mb-2"
-            key={ err }
-            hashed={false}
-            text={ issueTypesMap[err] }
-            onRemove={ () => props.removeIssueFilter(err) }            
-            outline
-          />          
-        ))}
-      </div>
-    </div>
-  )
-}
-
-export default connect(state => ({
-  filters: state.getIn(['funnels', 'issueFilters', 'filters']),
-  issueTypes: state.getIn(['funnels', 'issueTypes']).toJS(),
-  issueTypesMap: state.getIn(['funnels', 'issueTypesMap']),
-}), { applyIssueFilter, removeIssueFilter })(IssueFilter)
diff --git a/frontend/app/components/Funnels/IssueFilter/index.js b/frontend/app/components/Funnels/IssueFilter/index.js
deleted file mode 100644
index ac69d0f3e..000000000
--- a/frontend/app/components/Funnels/IssueFilter/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './IssueFilter'
\ No newline at end of file
diff --git a/frontend/app/components/Funnels/IssueFilter/issueFilter.module.css b/frontend/app/components/Funnels/IssueFilter/issueFilter.module.css
deleted file mode 100644
index 575c3d319..000000000
--- a/frontend/app/components/Funnels/IssueFilter/issueFilter.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.filterBtn {
-  border: dashed 1px $teal !important; 
-  color: $teal;
-  &:hover {
-    background-color: $active-blue;
-  }
-}
\ No newline at end of file
diff --git a/frontend/app/components/Funnels/IssuesEmptyMessage/IssuesEmptyMessage.js b/frontend/app/components/Funnels/IssuesEmptyMessage/IssuesEmptyMessage.js
deleted file mode 100644
index f1fbcc453..000000000
--- a/frontend/app/components/Funnels/IssuesEmptyMessage/IssuesEmptyMessage.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react'
-import { Button } from 'UI'
-import { addEvent } from 'Duck/funnelFilters'
-import Event, { TYPES } from 'Types/filter/event';
-import { connect } from 'react-redux';
-
-function IssuesEmptyMessage(props) {
-  const { children, show } = props;
-  const createHandler = () => {
-    props.addEvent(Event({ type: TYPES.LOCATION, key: TYPES.LOCATION } ))
-    props.onAddEvent();
-  }
-  return (show ? (
-        <div className="flex flex-col items-center justify-center">
-          <div className="flex flex-col items-center justify-center text-center my-6">
-            <div className="text-3xl font-medium mb-4">See what's impacting conversions</div>
-            <div className="mb-4 text-xl">Add events to your funnel to identify potential issues that are causing conversion loss.</div>
-            <Button variant="primary" onClick={ createHandler }>+ ADD EVENTS</Button>
-          </div>
-          <img src="/assets/img/funnel_intro.png" />
-        </div>
-    ) : children
-  )  
-}
-
-export default connect(null, { addEvent })(IssuesEmptyMessage)
diff --git a/frontend/app/components/Funnels/IssuesEmptyMessage/index.js b/frontend/app/components/Funnels/IssuesEmptyMessage/index.js
deleted file mode 100644
index fccfd2545..000000000
--- a/frontend/app/components/Funnels/IssuesEmptyMessage/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './IssuesEmptyMessage'
\ No newline at end of file
diff --git a/frontend/app/components/Header/NewProjectButton/NewProjectButton.tsx b/frontend/app/components/Header/NewProjectButton/NewProjectButton.tsx
index 2ac9e95ae..241136a63 100644
--- a/frontend/app/components/Header/NewProjectButton/NewProjectButton.tsx
+++ b/frontend/app/components/Header/NewProjectButton/NewProjectButton.tsx
@@ -1,40 +1,26 @@
+import { observer } from 'mobx-react-lite';
 import React from 'react';
-import { Icon } from 'UI';
-import { useStore } from 'App/mstore';
-import { useObserver } from 'mobx-react-lite';
-import { useModal } from 'App/components/Modal';
+
 import NewSiteForm from 'App/components/Client/Sites/NewSiteForm';
-import { init } from 'Duck/site';
-import { connect } from 'react-redux';
-interface Props {
-    isAdmin?: boolean;
-    init?: (data: any) => void;
-}
-function NewProjectButton(props: Props) {
-    const { isAdmin = false } = props;
-    const { userStore } = useStore();
-    const limtis = useObserver(() => userStore.limits);
-    const canAddProject = useObserver(() => isAdmin && (limtis.projects === -1 || limtis.projects > 0));
-    const { showModal, hideModal } = useModal();
+import { useModal } from 'App/components/Modal';
+import { useStore } from 'App/mstore';
+import { Icon } from 'UI';
 
-    const onClick = () => {
-        props.init({});
-        showModal(<NewSiteForm onClose={hideModal} />, { right: true });
-    };
+function NewProjectButton() {
+  const { projectsStore } = useStore();
+  const { showModal, hideModal } = useModal();
 
-    return (
-        <li onClick={onClick}>
-            <Icon name="folder-plus" size="16" color="teal" />
-            <span className="ml-3 color-teal">Add Project</span>
-        </li>
-        // <div
-        //     className={cn('flex items-center justify-center py-3 cursor-pointer hover:bg-active-blue ', { disabled: !canAddProject })}
-        //     onClick={onClick}
-        // >
-        //     <Icon name="plus" size={12} className="mr-2" color="teal" />
-        //     <span className="color-teal">Add New Project</span>
-        // </div>
-    );
+  const onClick = () => {
+    projectsStore.initProject({});
+    showModal(<NewSiteForm onClose={hideModal} />, { right: true });
+  };
+
+  return (
+    <li onClick={onClick}>
+      <Icon name="folder-plus" size="16" color="teal" />
+      <span className="ml-3 color-teal">Add Project</span>
+    </li>
+  );
 }
 
-export default connect(null, { init })(NewProjectButton);
+export default observer(NewProjectButton);
diff --git a/frontend/app/components/Header/SiteDropdown.js b/frontend/app/components/Header/SiteDropdown.js
deleted file mode 100644
index f8dda8b9d..000000000
--- a/frontend/app/components/Header/SiteDropdown.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { setSiteId } from 'Duck/site';
-import { withRouter } from 'react-router-dom';
-import { hasSiteId, siteChangeAvailable } from 'App/routes';
-import { Icon } from 'UI';
-import { pushNewSite } from 'Duck/user';
-import { init } from 'Duck/site';
-import styles from './siteDropdown.module.css';
-import cn from 'classnames';
-import { clearSearch } from 'Duck/search';
-import { clearSearch as clearSearchLive } from 'Duck/liveSearch';
-import { fetchListActive as fetchIntegrationVariables } from 'Duck/customField';
-import { withStore } from 'App/mstore';
-import NewProjectButton from './NewProjectButton';
-
-@withStore
-@withRouter
-@connect(
-  (state) => ({
-    sites: state.getIn(['site', 'list']),
-    siteId: state.getIn(['site', 'siteId']),
-    account: state.getIn(['user', 'account']),
-  }),
-  {
-    setSiteId,
-    pushNewSite,
-    init,
-    clearSearch,
-    clearSearchLive,
-    fetchIntegrationVariables,
-  }
-)
-export default class SiteDropdown extends React.PureComponent {
-  state = { showProductModal: false };
-
-  closeModal = (e, newSite) => {
-    this.setState({ showProductModal: false });
-  };
-
-  newSite = () => {
-    this.props.init({});
-    this.setState({ showProductModal: true });
-  };
-
-  switchSite = (siteId) => {
-    const { mstore, location } = this.props;
-
-    this.props.setSiteId(siteId);
-    this.props.fetchIntegrationVariables();
-    this.props.clearSearch(location.pathname.includes('/sessions'));
-    this.props.clearSearchLive();
-
-    mstore.initClient();
-  };
-
-  render() {
-    const {
-      sites,
-      siteId,
-      account,
-      location: { pathname },
-    } = this.props;
-    const isAdmin = account.admin || account.superAdmin;
-    const activeSite = sites.find((s) => s.id == siteId);
-    const disabled = !siteChangeAvailable(pathname);
-    const showCurrent = hasSiteId(pathname) || siteChangeAvailable(pathname);
-
-    return (
-      <div style={{ width: '180px'}}>
-        <div className={styles.wrapper}>
-          <div className={cn(styles.currentSite)}>
-            {showCurrent && activeSite ? activeSite.host : 'All Projects'}
-          </div>
-          <Icon className={styles.dropdownIcon} color="gray-dark" name="chevron-down" size="16" />
-          <div className={styles.menu}>
-            <ul data-can-disable={disabled}>
-              {isAdmin && <NewProjectButton onClick={this.newSite} isAdmin={isAdmin} />}
-              <div className="border-b border-dashed my-1" />
-              {sites.map((site) => (
-                <li key={site.id} onClick={() => this.switchSite(site.id)}>
-                  <Icon name={site.platform === 'web' ? 'browser/browser' : 'mobile'} size="16" />
-                  <span className="ml-3">{site.host}</span>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
diff --git a/frontend/app/components/Header/UserMenu/UserMenu.tsx b/frontend/app/components/Header/UserMenu/UserMenu.tsx
index 45efd156a..9b642593f 100644
--- a/frontend/app/components/Header/UserMenu/UserMenu.tsx
+++ b/frontend/app/components/Header/UserMenu/UserMenu.tsx
@@ -1,23 +1,21 @@
 import React from 'react';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
-import { connect } from 'react-redux';
-import { logout } from 'Duck/user';
+import { withRouter } from 'react-router-dom';
 import { client, CLIENT_DEFAULT_TAB } from 'App/routes';
 import { Icon } from 'UI';
 import { getInitials } from 'App/utils';
 import { useStore } from "App/mstore";
+import { observer } from 'mobx-react-lite';
 
 const CLIENT_PATH = client(CLIENT_DEFAULT_TAB);
 
 interface Props {
   history: any;
-  onLogoutClick?: any;
-  className?: string;
-  account: any;
 }
-function UserMenu(props: RouteComponentProps<Props>) {
-  const { account, history, className, onLogoutClick }: any = props;
-  const { loginStore } = useStore();
+function UserMenu(props: Props) {
+  const { history }: any = props;
+  const { loginStore, userStore } = useStore();
+  const account = userStore.account;
+  const onLogoutClick = userStore.logout;
 
   const onAccountClick = () => {
     history.push(CLIENT_PATH);
@@ -28,7 +26,7 @@ function UserMenu(props: RouteComponentProps<Props>) {
     window.postMessage({
       type: "orspot:invalidate"
     }, "*")
-    onLogoutClick();
+    void onLogoutClick();
   }
   return (
     <div
@@ -61,11 +59,4 @@ function UserMenu(props: RouteComponentProps<Props>) {
   );
 }
 
-export default connect(
-  (state: any) => ({
-    account: state.getIn(['user', 'account']),
-  }),
-  { onLogoutClick: logout }
-)(withRouter(UserMenu)) as React.FunctionComponent<RouteComponentProps<Props>>;
-
-// export default UserMenu;
+export default withRouter(observer(UserMenu))
diff --git a/frontend/app/components/Header/VersionTag.tsx b/frontend/app/components/Header/VersionTag.tsx
index 602b7ec4c..817001b96 100644
--- a/frontend/app/components/Header/VersionTag.tsx
+++ b/frontend/app/components/Header/VersionTag.tsx
@@ -1,19 +1,21 @@
+import { Space } from 'antd';
+import { observer } from 'mobx-react-lite';
 import React from 'react';
-import {connect} from "react-redux";
-import {updateModule} from "Duck/user";
-import {Space} from "antd";
+
+import { useStore } from 'App/mstore';
 
 const Logo = require('../../svg/logo-gray.svg').default;
 
-function VersionTag({version}: { version: string }) {
-    return (
-        <Space>
-            <img src={Logo} width={20}/>
-            <div>{version}</div>
-        </Space>
-    );
+function VersionTag() {
+  const { userStore } = useStore();
+  const version = userStore.account.versionNumber;
+
+  return (
+    <Space>
+      <img src={Logo} width={20} />
+      <div>{version}</div>
+    </Space>
+  );
 }
 
-export default connect((state: any) => ({
-    version: state.getIn(['user', 'account', 'versionNumber'])
-}), {updateModule})(VersionTag)
+export default observer(VersionTag);
diff --git a/frontend/app/components/Login/Login.tsx b/frontend/app/components/Login/Login.tsx
index 7e13373ee..4ed4d258b 100644
--- a/frontend/app/components/Login/Login.tsx
+++ b/frontend/app/components/Login/Login.tsx
@@ -3,20 +3,13 @@ import cn from 'classnames';
 import React, { useEffect, useRef, useState } from 'react';
 // Consider using a different approach for titles in functional components
 import ReCAPTCHA from 'react-google-recaptcha';
-import { connect } from 'react-redux';
 import { useHistory } from 'react-router-dom';
+import { observer } from 'mobx-react-lite';
 import { toast } from 'react-toastify';
 
 import { ENTERPRISE_REQUEIRED } from 'App/constants';
 import { useStore } from 'App/mstore';
-import { forgotPassword, signup, spotsList } from 'App/routes';
-import {
-  fetchTenants,
-  loadingLogin,
-  loginFailure,
-  loginSuccess,
-  setJwt,
-} from 'Duck/user';
+import { forgotPassword, signup } from 'App/routes';
 import { Button, Form, Icon, Input, Link, Loader, Tooltip } from 'UI';
 
 import Copyright from 'Shared/Copyright';
@@ -27,35 +20,24 @@ const FORGOT_PASSWORD = forgotPassword();
 const SIGNUP_ROUTE = signup();
 
 interface LoginProps {
-  errors: any; // Adjust the type based on your state shape
-  loading: boolean;
-  authDetails: any; // Adjust the type based on your state shape
-  loginSuccess: typeof loginSuccess;
-  setJwt: typeof setJwt;
-  fetchTenants: typeof fetchTenants;
-  loadingLogin: typeof loadingLogin;
-  loginFailure: typeof loginFailure;
   location: Location;
 }
 
-const Login: React.FC<LoginProps> = ({
-  errors,
-  loading,
-  authDetails,
-  loginSuccess,
-  setJwt,
-  fetchTenants,
+const Login = ({
   location,
-  loadingLogin,
-  loginFailure,
-}) => {
+}: LoginProps) => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [CAPTCHA_ENABLED, setCAPTCHA_ENABLED] = useState(
-    window.env.CAPTCHA_ENABLED === 'true'
-  );
+  const CAPTCHA_ENABLED = React.useMemo(() => {
+    return window.env.CAPTCHA_ENABLED === 'true'
+  }, []);
   const recaptchaRef = useRef<ReCAPTCHA>(null);
-  const { loginStore } = useStore();
+  const { loginStore, userStore } = useStore();
+  const errors = userStore.loginRequest.errors;
+  const loading = userStore.loginRequest.loading;
+  const authDetails = userStore.authDetails;
+  const setJwt = userStore.updateJwt;
+  const fetchTenants = userStore.fetchTenants;
   const history = useHistory();
   const params = new URLSearchParams(location.search);
 
@@ -68,7 +50,7 @@ const Login: React.FC<LoginProps> = ({
   }, [authDetails]);
 
   useEffect(() => {
-    fetchTenants();
+    void fetchTenants();
     const jwt = params.get('jwt');
     const spotJwt = params.get('spotJwt');
     if (spotJwt) {
@@ -116,7 +98,6 @@ const Login: React.FC<LoginProps> = ({
     if (!email || !password) {
       return;
     }
-    loadingLogin();
     loginStore.setEmail(email.trim());
     loginStore.setPassword(password);
     if (token) {
@@ -126,13 +107,13 @@ const Login: React.FC<LoginProps> = ({
       .generateJWT()
       .then((resp) => {
         if (resp) {
-          loginSuccess({ ...resp, spotJwt: resp.spotJwt ?? null });
+          userStore.syntheticLogin(resp)
           setJwt({ jwt: resp.jwt, spotJwt: resp.spotJwt ?? null });
           handleSpotLogin(resp.spotJwt);
         }
       })
       .catch((e) => {
-        loginFailure(e);
+        userStore.syntheticLoginError(e.errors)
       });
   };
 
@@ -160,7 +141,7 @@ const Login: React.FC<LoginProps> = ({
           <h2 className="text-center text-2xl font-medium mb-6 border-b p-5 w-full">
             Login to your account
           </h2>
-          <div className={cn(authDetails.enforceSSO ? '!hidden' : '')}>
+          <div className={cn(authDetails?.enforceSSO ? '!hidden' : '')}>
             <Form
               onSubmit={onSubmit}
               className={cn('flex items-center justify-center flex-col')}
@@ -285,7 +266,7 @@ const Login: React.FC<LoginProps> = ({
           </div>
           <div
             className={cn('flex items-center w-96 justify-center my-8', {
-              '!hidden': !authDetails.enforceSSO,
+              '!hidden': !authDetails?.enforceSSO,
             })}
           >
             <a href={ssoLink} rel="noopener noreferrer">
@@ -302,21 +283,4 @@ const Login: React.FC<LoginProps> = ({
   );
 };
 
-const mapStateToProps = (state: any, ownProps: any) => ({
-  errors: state.getIn(['user', 'loginRequest', 'errors']),
-  loading: state.getIn(['user', 'loginRequest', 'loading']),
-  authDetails: state.getIn(['user', 'authDetails']),
-  params: new URLSearchParams(ownProps.location.search),
-});
-
-const mapDispatchToProps = {
-  loginSuccess,
-  setJwt,
-  fetchTenants,
-  loadingLogin,
-  loginFailure,
-};
-
-export default withPageTitle('Login - OpenReplay')(
-  connect(mapStateToProps, mapDispatchToProps)(Login)
-);
+export default withPageTitle('Login - OpenReplay')(observer(Login));
diff --git a/frontend/app/components/Onboarding/components/MetadataList/MetadataList.tsx b/frontend/app/components/Onboarding/components/MetadataList/MetadataList.tsx
new file mode 100644
index 000000000..da9cc1c62
--- /dev/null
+++ b/frontend/app/components/Onboarding/components/MetadataList/MetadataList.tsx
@@ -0,0 +1,62 @@
+import React, { useEffect } from 'react';
+import { Button, TagBadge } from 'UI';
+import CustomFieldForm from '../../../Client/CustomFields/CustomFieldForm';
+import { confirm } from 'UI';
+import { useModal } from 'App/components/Modal';
+import { toast } from 'react-toastify';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
+
+const MetadataList = () => {
+  const { customFieldStore, projectsStore } = useStore();
+  const site = projectsStore.instance;
+  const fields = customFieldStore.list;
+
+  const { showModal, hideModal } = useModal();
+
+  useEffect(() => {
+    customFieldStore.fetchList(site?.id);
+  }, [site?.id]);
+
+  const save = (field: any) => {
+    if (!site) return;
+    customFieldStore.save(site.id!, field).then((response) => {
+      if (!response || !response.errors || response.errors.size === 0) {
+        hideModal();
+        toast.success('Metadata added successfully!');
+      } else {
+        toast.error(response.errors[0]);
+      }
+    });
+  };
+
+  const openModal = () => {
+    showModal(<CustomFieldForm siteId={site.id} onClose={hideModal} onSave={save} />, { right: true });
+  };
+
+  const removeMetadata = async (field: { index: number }) => {
+    if (
+      await confirm({
+        header: 'Metadata',
+        confirmation: 'Are you sure you want to remove?'
+      })
+    ) {
+      customFieldStore.remove(site.id, field.index + '');
+    }
+  };
+
+  return (
+    <div className="py-2 flex">
+      <Button variant="outline" onClick={() => openModal()}>
+        Add Metadata
+      </Button>
+      <div className="flex ml-2">
+        {fields.map((f, index) => (
+          <TagBadge key={index} text={f.key} onRemove={() => removeMetadata(f)} outline />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default observer(MetadataList);
diff --git a/frontend/app/components/Onboarding/components/OnboardingNavButton/OnboardingNavButton.js b/frontend/app/components/Onboarding/components/OnboardingNavButton/OnboardingNavButton.js
index f43caa3f5..fb92cd8e2 100644
--- a/frontend/app/components/Onboarding/components/OnboardingNavButton/OnboardingNavButton.js
+++ b/frontend/app/components/Onboarding/components/OnboardingNavButton/OnboardingNavButton.js
@@ -1,13 +1,10 @@
 import React from 'react'
-import { connect } from 'react-redux'
 import { withRouter } from 'react-router'
 import { Button } from 'UI'
-import { OB_TABS, onboarding as onboardingRoute } from 'App/routes'
-import * as routes from '../../../../routes'
+import { OB_TABS, onboarding as onboardingRoute, withSiteId } from 'App/routes'
 import { sessions } from 'App/routes';
-import { setOnboarding } from 'Duck/user';
+import { useStore } from 'App/mstore'
 
-const withSiteId = routes.withSiteId;
 const MENU_ITEMS = [OB_TABS.INSTALLING, OB_TABS.IDENTIFY_USERS, OB_TABS.MANAGE_USERS, OB_TABS.INTEGRATIONS]
 const BTN_MSGS = [
   'Next: Identify Users',
@@ -16,8 +13,8 @@ const BTN_MSGS = [
   'See Recorded Sessions'
 ]
 
-const OnboardingNavButton = (props) => {
-  const { match: { params: { activeTab, siteId } }, history } = props;
+const OnboardingNavButton = ({ match: { params: { activeTab, siteId } }, history }) => {
+  const { userStore } = useStore();
   const activeIndex = MENU_ITEMS.findIndex(i => i === activeTab);
   const completed = activeIndex == MENU_ITEMS.length - 1;
 
@@ -31,7 +28,7 @@ const OnboardingNavButton = (props) => {
   }
 
   const onDone = () => {
-    props.setOnboarding(true);
+    userStore.setOnboarding(true);
     history.push(sessions());
   }
   
@@ -56,4 +53,4 @@ const OnboardingNavButton = (props) => {
   )
 }
 
-export default withRouter(connect(null, { setOnboarding })(OnboardingNavButton))
\ No newline at end of file
+export default withRouter(OnboardingNavButton)
\ No newline at end of file
diff --git a/frontend/app/components/Onboarding/components/OnboardingTabs/ProjectCodeSnippet/ProjectCodeSnippet.js b/frontend/app/components/Onboarding/components/OnboardingTabs/ProjectCodeSnippet/ProjectCodeSnippet.js
index 831f962b6..e4ee5e2c4 100644
--- a/frontend/app/components/Onboarding/components/OnboardingTabs/ProjectCodeSnippet/ProjectCodeSnippet.js
+++ b/frontend/app/components/Onboarding/components/OnboardingTabs/ProjectCodeSnippet/ProjectCodeSnippet.js
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { connect } from 'react-redux';
-import { editGDPR, saveGDPR, init } from 'Duck/site';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 import { Checkbox, Loader, Toggler } from 'UI';
-import GDPR from 'Types/site/gdpr';
+import GDPR from 'App/mstore/types/gdpr';
 import cn from 'classnames';
 import stl from './projectCodeSnippet.module.css';
 import CircleNumber from '../../CircleNumber';
@@ -18,37 +18,39 @@ const inputModeOptions = [
 const inputModeOptionsMap = {};
 inputModeOptions.forEach((o, i) => (inputModeOptionsMap[o.value] = i));
 
-const ProjectCodeSnippet = (props) => {
-  const { site } = props;
-  const { gdpr } = props.site;
+const ProjectCodeSnippet = () => {
+  const { projectsStore } = useStore();
+  const siteId = projectsStore.siteId;
+  const site = projectsStore.instance;
+  const gdpr = site.gdpr;
+  const sites = projectsStore.list;
+  const editGDPR = projectsStore.editGDPR;
+  const onSaveGDPR = projectsStore.saveGDPR;
+  const init = projectsStore.initProject;
   const [changed, setChanged] = useState(false);
   const [isAssistEnabled, setAssistEnabled] = useState(false);
   const [showLoader, setShowLoader] = useState(false);
 
   useEffect(() => {
-    const site = props.sites.find((s) => s.id === props.siteId);
+    const site = sites.find((s) => s.id === siteId);
     if (site) {
-      props.init(site);
+      init(site);
     }
   }, []);
 
-  const saveGDPR = (value) => {
+  const saveGDPR = () => {
     setChanged(true);
-    props.saveGDPR(site.id, GDPR({ ...value }));
+    void onSaveGDPR(site.id);
   };
 
   const onChangeSelect = ({ name, value }) => {
-    const _gdpr = { ...gdpr.toData() };
-    _gdpr[name] = value;
-    props.editGDPR({ [name]: value });
-    saveGDPR(_gdpr);
+    editGDPR({ [name]: value });
+    saveGDPR();
   };
 
   const onChangeOption = ({ target: { name, checked } }) => {
-    const _gdpr = { ...gdpr.toData() };
-    _gdpr[name] = checked;
-    props.editGDPR({ [name]: checked });
-    saveGDPR(_gdpr);
+    editGDPR({ [name]: checked });
+    saveGDPR();
   };
 
   useEffect(() => {
@@ -159,12 +161,4 @@ const ProjectCodeSnippet = (props) => {
   );
 };
 
-export default connect(
-  (state) => ({
-    siteId: state.getIn(['site', 'siteId']),
-    site: state.getIn(['site', 'instance']),
-    sites: state.getIn(['site', 'list']),
-    saving: state.getIn(['site', 'saveGDPR', 'loading']),
-  }),
-  { editGDPR, saveGDPR, init }
-)(ProjectCodeSnippet);
+export default observer(ProjectCodeSnippet);
diff --git a/frontend/app/components/Onboarding/components/ProjectFormButton/ProjectFormButton.js b/frontend/app/components/Onboarding/components/ProjectFormButton/ProjectFormButton.js
index da9f4211b..22405aead 100644
--- a/frontend/app/components/Onboarding/components/ProjectFormButton/ProjectFormButton.js
+++ b/frontend/app/components/Onboarding/components/ProjectFormButton/ProjectFormButton.js
@@ -1,10 +1,14 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import NewSiteForm from '../../../Client/Sites/NewSiteForm';
-import { init } from 'Duck/site';
 import { useModal } from 'App/components/Modal';
+import { observer } from 'mobx-react-lite'
+import { useStore } from 'App/mstore';
 
-const ProjectFormButton = ({ sites, siteId, init }) => {
+const ProjectFormButton = () => {
+  const { projectsStore } = useStore();
+  const sites = projectsStore.list;
+  const siteId = projectsStore.siteId;
+  const init = projectsStore.initProject;
   const site = sites.find(({ id }) => id === siteId);
   const { showModal, hideModal } = useModal();
   const openModal = (e) => {
@@ -26,10 +30,4 @@ const ProjectFormButton = ({ sites, siteId, init }) => {
   );
 };
 
-export default connect(
-  (state) => ({
-    siteId: state.getIn(['site', 'siteId']),
-    sites: state.getIn(['site', 'list']),
-  }),
-  { init }
-)(ProjectFormButton);
+export default observer(ProjectFormButton);
diff --git a/frontend/app/components/Onboarding/components/withOnboarding.tsx b/frontend/app/components/Onboarding/components/withOnboarding.tsx
index 931609428..054f59265 100644
--- a/frontend/app/components/Onboarding/components/withOnboarding.tsx
+++ b/frontend/app/components/Onboarding/components/withOnboarding.tsx
@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
-import { connect, ConnectedProps } from 'react-redux';
-import { setOnboarding } from 'Duck/user';
 import { sessions, withSiteId, onboarding as onboardingRoute } from 'App/routes';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 
 export interface WithOnboardingProps {
   history: RouteComponentProps['history'];
@@ -17,22 +17,14 @@ export interface WithOnboardingProps {
   };
 }
 
-const connector = connect(
-  (state: any) => ({
-    siteId: state.getIn(['site', 'siteId']),
-    sites: state.getIn(['site', 'list']),
-  }),
-  { setOnboarding }
-);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
 
 const withOnboarding = <P extends RouteComponentProps>(
-  Component: React.ComponentType<P & WithOnboardingProps & PropsFromRedux>
+  Component: React.ComponentType<P & WithOnboardingProps>
 ) => {
-  const WithOnboarding: React.FC<P & WithOnboardingProps & PropsFromRedux> = (props) => {
+  const WithOnboarding: React.FC<P & WithOnboardingProps> = (props) => {
+    const { projectsStore, userStore } = useStore();
+    const sites = projectsStore.list;
     const {
-      sites,
       match: {
         params: { siteId },
       },
@@ -40,10 +32,10 @@ const withOnboarding = <P extends RouteComponentProps>(
     const site = useMemo(() => sites.find((s: any) => s.id === siteId), [sites, siteId]);
 
     const skip = () => {
-      props.setOnboarding(true);
+      userStore.setOnboarding(true);
       props.history.push(withSiteId(sessions(), siteId));
     };
-    
+
     const navTo = (tab: string) => {
       props.history.push(withSiteId(onboardingRoute(tab), siteId));
     };
@@ -51,7 +43,11 @@ const withOnboarding = <P extends RouteComponentProps>(
     return <Component skip={skip} navTo={navTo} {...props} site={site} />;
   };
 
-  return withRouter(connector(WithOnboarding as React.ComponentType<any>));
+  return withRouter(
+    observer(
+      WithOnboarding
+    )
+  );
 };
 
 export default withOnboarding;
diff --git a/frontend/app/components/Overview/Overview.tsx b/frontend/app/components/Overview/Overview.tsx
index 0d73da1e1..fdbdea7ad 100644
--- a/frontend/app/components/Overview/Overview.tsx
+++ b/frontend/app/components/Overview/Overview.tsx
@@ -4,14 +4,13 @@ import NoSessionsMessage from 'Shared/NoSessionsMessage';
 import MainSearchBar from 'Shared/MainSearchBar';
 import SessionSearch from 'Shared/SessionSearch';
 import SessionsTabOverview from 'Shared/SessionsTabOverview/SessionsTabOverview';
-import cn from 'classnames';
-import OverviewMenu from 'Shared/OverviewMenu';
 import FFlagsList from 'Components/FFlags';
 import NewFFlag from 'Components/FFlags/NewFFlag';
 import { Switch, Route } from 'react-router';
 import { sessions, fflags, withSiteId, newFFlag, fflag, notes, fflagRead, bookmarks } from 'App/routes';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import FlagView from 'Components/FFlags/FlagView/FlagView';
+import { observer } from 'mobx-react-lite';
 
 // @ts-ignore
 interface IProps extends RouteComponentProps {
@@ -30,11 +29,11 @@ function Overview({ match: { params } }: IProps) {
     <Switch>
       <Route exact strict
              path={[withSiteId(sessions(), siteId), withSiteId(notes(), siteId), withSiteId(bookmarks(), siteId)]}>
-        <div className='mb-5 w-full mx-auto' style={{ maxWidth: '1360px' }}>
+        <div className="mb-5 w-full mx-auto" style={{ maxWidth: '1360px' }}>
           <NoSessionsMessage siteId={siteId} />
           <MainSearchBar />
           <SessionSearch />
-          <div className='my-4' />
+          <div className="my-4" />
           <SessionsTabOverview />
         </div>
       </Route>
@@ -54,4 +53,4 @@ function Overview({ match: { params } }: IProps) {
   );
 }
 
-export default withPageTitle('Sessions - OpenReplay')(withRouter(Overview));
+export default withPageTitle('Sessions - OpenReplay')(withRouter(observer(Overview)));
diff --git a/frontend/app/components/ScopeForm/ScopeForm.tsx b/frontend/app/components/ScopeForm/ScopeForm.tsx
index e86310c0e..deabf9879 100644
--- a/frontend/app/components/ScopeForm/ScopeForm.tsx
+++ b/frontend/app/components/ScopeForm/ScopeForm.tsx
@@ -1,23 +1,32 @@
 import { ArrowRightOutlined } from '@ant-design/icons';
 import { Button, Card, Radio } from 'antd';
 import React from 'react';
-import { connect } from 'react-redux';
-import { upgradeScope, downgradeScope, getScope } from 'App/duck/user';
 import { useHistory } from 'react-router-dom';
 import * as routes from 'App/routes'
-import { SPOT_ONBOARDING } from "../../constants/storageKeys";
+import { SPOT_ONBOARDING } from "App/constants/storageKeys";
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 
 const Scope = {
   FULL: 'full',
   SPOT: 'spot',
 };
 
-function ScopeForm({
-  upgradeScope,
-  downgradeScope,
-  scopeState,
-}: any) {
-  const [scope, setScope] = React.useState(Scope.FULL);
+function getDefaultSetup() {
+  const isSpotSetup = localStorage.getItem(SPOT_ONBOARDING)
+  if (isSpotSetup) {
+    localStorage.removeItem(SPOT_ONBOARDING)
+    return Scope.SPOT
+  }
+  return Scope.FULL
+}
+
+function ScopeForm() {
+  const { userStore } = useStore();
+  const upgradeScope = userStore.upgradeScope
+  const downgradeScope = userStore.downgradeScope
+  const scopeState = userStore.scopeState
+  const [scope, setScope] = React.useState(getDefaultSetup);
   React.useEffect(() => {
     if (scopeState !== 0) {
       if (scopeState === 2) {
@@ -27,20 +36,14 @@ function ScopeForm({
       }
     }
   }, [scopeState])
-  React.useEffect(() => {
-    const isSpotSetup = localStorage.getItem(SPOT_ONBOARDING)
-    if (isSpotSetup) {
-      setScope(Scope.SPOT)
-      localStorage.removeItem(SPOT_ONBOARDING)
-    }
-  }, [])
+
   const history = useHistory();
   const onContinue = () => {
     if (scope === Scope.FULL) {
-      upgradeScope();
+      void upgradeScope();
       history.replace(routes.onboarding())
     } else {
-      downgradeScope();
+      void downgradeScope();
       history.replace(routes.spotsList())
     }
   };
@@ -92,6 +95,4 @@ function ScopeForm({
   );
 }
 
-export default connect((state) => ({
-  scopeState: getScope(state),
-}), { upgradeScope, downgradeScope })(ScopeForm);
+export default observer(ScopeForm);
diff --git a/frontend/app/components/Session/LivePlayer.tsx b/frontend/app/components/Session/LivePlayer.tsx
index 516427d11..a866c47d3 100644
--- a/frontend/app/components/Session/LivePlayer.tsx
+++ b/frontend/app/components/Session/LivePlayer.tsx
@@ -1,7 +1,6 @@
 import { audioContextManager } from 'App/utils/screenRecorder';
 import React from 'react';
 import { useEffect, useState } from 'react';
-import { connect } from 'react-redux';
 import withPermissions from 'HOCs/withPermissions';
 import { PlayerContext, defaultContextValue, ILivePlayerContext } from './playerContext';
 import { makeAutoObservable } from 'mobx';
@@ -14,34 +13,28 @@ import withLocationHandlers from 'HOCs/withLocationHandlers';
 import APIClient from 'App/api_client';
 import { useLocation } from 'react-router-dom';
 import { toast } from 'react-toastify';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 
 interface Props {
-  session: Session;
-  assistCredentials: RTCIceServer[];
-  isEnterprise: boolean;
-  userEmail: string;
-  userName: string;
   customSession?: Session;
   isMultiview?: boolean;
   query?: Record<string, (key: string) => any>;
-  request: () => void;
-  userId: number;
-  siteId: number;
 }
 
 let playerInst: ILivePlayerContext['player'] | undefined;
 
 function LivePlayer({
-  session,
-  userEmail,
-  userName,
   isMultiview,
   customSession,
   query,
-  isEnterprise,
-  userId,
-  siteId,
 }: Props) {
+  const { projectsStore, sessionStore, userStore } = useStore();
+  const isEnterprise = userStore.isEnterprise;
+  const userEmail = userStore.account.email;
+  const userName = userStore.account.name;
+  const userId = userStore.account.id;
+  const session = sessionStore.current;
   // @ts-ignore
   const [contextValue, setContextValue] = useState<ILivePlayerContext>(defaultContextValue);
   const [fullView, setFullView] = useState(false);
@@ -50,6 +43,7 @@ function LivePlayer({
   const location = useLocation();
 
   useEffect(() => {
+    const projectId = projectsStore.getSiteId();
     playerInst = undefined;
     if (!usedSession.sessionId || contextValue.player !== undefined) return;
     console.debug('creating live player for', usedSession.sessionId);
@@ -69,7 +63,7 @@ function LivePlayer({
             sessionWithAgentData,
             data,
             userId,
-            siteId,
+            projectId,
             (state) => makeAutoObservable(state),
             toast
           );
@@ -81,7 +75,7 @@ function LivePlayer({
         sessionWithAgentData,
         null,
         userId,
-        siteId,
+        projectId,
         (state) => makeAutoObservable(state),
         toast
       );
@@ -138,15 +132,5 @@ function LivePlayer({
 }
 
 export default withPermissions(['ASSIST_LIVE', 'SERVICE_ASSIST_LIVE'], '', true, false)(
-  connect((state: any) => {
-    return {
-      siteId: state.getIn([ 'site', 'siteId' ]),
-      session: state.getIn(['sessions', 'current']),
-      showAssist: state.getIn(['sessions', 'showChatWindow']),
-      isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
-      userEmail: state.getIn(['user', 'account', 'email']),
-      userName: state.getIn(['user', 'account', 'name']),
-      userId: state.getIn(['user', 'account', 'id']),
-    };
-  })(withLocationHandlers()(React.memo(LivePlayer)))
+  withLocationHandlers()(observer(LivePlayer))
 );
diff --git a/frontend/app/components/Session/LiveSession.js b/frontend/app/components/Session/LiveSession.js
index a9bba11b9..7faa1570e 100644
--- a/frontend/app/components/Session/LiveSession.js
+++ b/frontend/app/components/Session/LiveSession.js
@@ -1,30 +1,29 @@
 import React from 'react';
 import { useEffect } from 'react';
-import { connect } from 'react-redux';
 import usePageTitle from 'App/hooks/usePageTitle';
-import { fetch as fetchSession, clearCurrentSession } from 'Duck/sessions';
-import { fetchList as fetchSlackList } from 'Duck/integrations/slack';
 import { Loader } from 'UI';
 import withPermissions from 'HOCs/withPermissions';
 import LivePlayer from './LivePlayer';
 import { clearLogs } from 'App/dev/console';
 import { toast } from 'react-toastify';
+import { useStore } from 'App/mstore'
+import { observer } from 'mobx-react-lite';
 
 function LiveSession({
-    sessionId,
-    fetchSession,
-    fetchSlackList,
-    hasSessionsPath,
-    session,
-    fetchFailed,
-    clearCurrentSession,
+     match: {
+        params: { sessionId },
+     },
 }) {
+    const { integrationsStore, sessionStore } = useStore();
+    const session = sessionStore.current;
+    const fetchFailed = sessionStore.fetchFailed;
+    const fetchSlackList = integrationsStore.slack.fetchIntegrations;
     const [initialLoading, setInitialLoading] = React.useState(true);
     usePageTitle('OpenReplay Assist');
 
     useEffect(() => {
         clearLogs();
-        fetchSlackList();
+        void fetchSlackList();
 
         return () => {
             clearCurrentSession()
@@ -37,7 +36,7 @@ function LiveSession({
         } else {
             console.error('No sessionID in route.');
         }
-    }, [sessionId, hasSessionsPath]);
+    }, [sessionId]);
 
     useEffect(() => {
         if (fetchFailed) {
@@ -57,28 +56,5 @@ function LiveSession({
 }
 
 export default withPermissions(['ASSIST_LIVE', 'SERVICE_ASSIST_LIVE'], '', true, false)(
-    connect(
-        (state, props) => {
-            const {
-                match: {
-                    params: { sessionId },
-                },
-            } = props;
-            const isAssist = state.getIn(['sessions', 'activeTab']).type === 'live';
-            const hasSessiosPath = state
-                .getIn(['sessions', 'sessionPath'])
-                .pathname.includes('/sessions');
-            return {
-                sessionId,
-                fetchFailed: state.getIn(['sessions', 'fetchFailed']),
-                session: state.getIn(['sessions', 'current']),
-                hasSessionsPath: hasSessiosPath && !isAssist,
-            };
-        },
-        {
-            fetchSession,
-            fetchSlackList,
-            clearCurrentSession,
-        }
-    )(LiveSession)
+    observer(LiveSession)
 );
diff --git a/frontend/app/components/Session/MobilePlayer.tsx b/frontend/app/components/Session/MobilePlayer.tsx
index 6915af74e..46a070006 100644
--- a/frontend/app/components/Session/MobilePlayer.tsx
+++ b/frontend/app/components/Session/MobilePlayer.tsx
@@ -1,8 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { connect } from 'react-redux';
 import { Modal, Loader } from 'UI';
-import { toggleFullscreen, closeBottomBlock } from 'Duck/components/player';
-import { fetchList } from 'Duck/integrations';
 import { createIOSPlayer } from 'Player';
 import { makeAutoObservable } from 'mobx';
 import withLocationHandlers from 'HOCs/withLocationHandlers';
@@ -24,19 +21,21 @@ const TABS = {
 let playerInst: IOSPlayerContext['player'] | undefined;
 
 function MobilePlayer(props: any) {
-  const { session, toggleFullscreen, closeBottomBlock, fullscreen, fetchList } = props;
-
-  const { notesStore, sessionStore } = useStore();
+  const { notesStore, sessionStore, uiPlayerStore, integrationsStore, userStore } = useStore();
+  const session = sessionStore.current;
   const [activeTab, setActiveTab] = useState('');
   const [noteItem, setNoteItem] = useState<Note | undefined>(undefined);
   // @ts-ignore
   const [contextValue, setContextValue] = useState<IOSPlayerContext>(defaultContextValue);
   const params: { sessionId: string } = useParams();
+  const fullscreen = uiPlayerStore.fullscreen
+  const toggleFullscreen = uiPlayerStore.toggleFullscreen
+  const closeBottomBlock = uiPlayerStore.closeBottomBlock
 
   useEffect(() => {
     playerInst = undefined;
     if (!session.sessionId || contextValue.player !== undefined) return;
-    fetchList('issues');
+    void integrationsStore.issues.fetchIntegrations();
     sessionStore.setUserTimezone(session.timezone);
     const [IOSPlayerInst, PlayerStore] = createIOSPlayer(
       session,
@@ -142,18 +141,4 @@ function MobilePlayer(props: any) {
   );
 }
 
-export default connect(
-  (state: any) => ({
-    session: state.getIn(['sessions', 'current']),
-    visitedEvents: state.getIn(['sessions', 'visitedEvents']),
-    jwt: state.getIn(['user', 'jwt']),
-    fullscreen: state.getIn(['components', 'player', 'fullscreen']),
-    showEvents: state.get('showEvents'),
-    members: state.getIn(['members', 'list']),
-  }),
-  {
-    toggleFullscreen,
-    closeBottomBlock,
-    fetchList,
-  }
-)(withLocationHandlers()(observer(MobilePlayer)));
+export default withLocationHandlers()(observer(MobilePlayer));
diff --git a/frontend/app/components/Session/Player/ClickMapRenderer/ThinPlayer.tsx b/frontend/app/components/Session/Player/ClickMapRenderer/ThinPlayer.tsx
index d5a90ecfc..002c4fe56 100644
--- a/frontend/app/components/Session/Player/ClickMapRenderer/ThinPlayer.tsx
+++ b/frontend/app/components/Session/Player/ClickMapRenderer/ThinPlayer.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { connect } from 'react-redux';
 import { createClickMapPlayer } from 'Player';
 import { makeAutoObservable } from 'mobx';
 import withLocationHandlers from 'HOCs/withLocationHandlers';
@@ -7,11 +6,13 @@ import PlayerContent from './ThinPlayerContent';
 import { IPlayerContext, PlayerContext, defaultContextValue } from '../../playerContext';
 import { observer } from 'mobx-react-lite';
 import { toast } from 'react-toastify'
+import { useStore } from 'App/mstore';
 
 function WebPlayer(props: any) {
+  const { sessionStore } = useStore();
+  const insights = sessionStore.insights;
   const {
     session,
-    insights,
     jumpTimestamp,
   } = props;
   // @ts-ignore
@@ -75,9 +76,4 @@ function WebPlayer(props: any) {
   );
 }
 
-export default connect(
-  (state: any) => ({
-    insights: state.getIn(['sessions', 'insights']),
-    jwt: state.getIn(['user', 'jwt']),
-  })
-)(withLocationHandlers()(observer(WebPlayer)));
+export default withLocationHandlers()(observer(WebPlayer));
diff --git a/frontend/app/components/Session/Player/LivePlayer/AssistSessionsTabs/AssistSessionsTabs.tsx b/frontend/app/components/Session/Player/LivePlayer/AssistSessionsTabs/AssistSessionsTabs.tsx
index b156ee3f4..28b3945dd 100644
--- a/frontend/app/components/Session/Player/LivePlayer/AssistSessionsTabs/AssistSessionsTabs.tsx
+++ b/frontend/app/components/Session/Player/LivePlayer/AssistSessionsTabs/AssistSessionsTabs.tsx
@@ -5,7 +5,6 @@ import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
 import { useHistory } from 'react-router-dom';
 import { multiview, liveSession, withSiteId } from 'App/routes';
-import { connect } from 'react-redux';
 import { PlayerContext, ILivePlayerContext } from 'App/components/Session/playerContext';
 
 interface ITab {
@@ -44,13 +43,14 @@ const CurrentTab = React.memo(() => (
   </Tab>
 ));
 
-function AssistTabs({ session, siteId }: { session: Record<string, any>; siteId: string }) {
+function AssistTabs({ session }: { session: Record<string, any> }) {
   const history = useHistory();
   const { store } = React.useContext(PlayerContext) as unknown as ILivePlayerContext
   const { recordingState, calling, remoteControl } = store.get()
   const isDisabled = recordingState !== 0 || calling !== 0 || remoteControl !== 0
 
-  const { assistMultiviewStore } = useStore();
+  const { assistMultiviewStore, projectsStore } = useStore();
+  const siteId = projectsStore.siteId!;
 
   const placeholder = new Array(4 - assistMultiviewStore.sessions.length).fill(0);
 
@@ -91,6 +91,4 @@ function AssistTabs({ session, siteId }: { session: Record<string, any>; siteId:
   );
 }
 
-export default connect((state: any) => ({ siteId: state.getIn(['site', 'siteId']) }))(
-  observer(AssistTabs)
-);
+export default observer(AssistTabs);
diff --git a/frontend/app/components/Session/Player/LivePlayer/LiveControls.tsx b/frontend/app/components/Session/Player/LivePlayer/LiveControls.tsx
index d9f2f2bf3..2af37505c 100644
--- a/frontend/app/components/Session/Player/LivePlayer/LiveControls.tsx
+++ b/frontend/app/components/Session/Player/LivePlayer/LiveControls.tsx
@@ -1,23 +1,26 @@
 import React from 'react';
 import cn from 'classnames';
-import { connect } from 'react-redux';
+import { useStore } from 'App/mstore';
 import LiveTag from './LiveTag';
 import AssistSessionsTabs from './AssistSessionsTabs';
 
 import {
-  CONSOLE, toggleBottomBlock,
-} from 'Duck/components/player';
+  CONSOLE
+} from 'App/mstore/uiPlayerStore';
 import { PlayerContext, ILivePlayerContext } from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
-import { fetchSessions } from 'Duck/liveSearch';
-import { useLocation } from "react-router-dom";
+import { useLocation } from 'react-router-dom';
 import AssistDuration from './AssistDuration';
 import Timeline from './Timeline';
 import ControlButton from 'Components/Session_/Player/Controls/ControlButton';
-import { SKIP_INTERVALS } from 'Components/Session_/Player/Controls/Controls'
+import { SKIP_INTERVALS } from 'Components/Session_/Player/Controls/Controls';
 import styles from 'Components/Session_/Player/Controls/controls.module.css';
 
 function Controls(props: any) {
+  const { uiPlayerStore, searchStoreLive, sessionStore } = useStore();
+  const toggleBottomBlock = uiPlayerStore.toggleBottomBlock;
+  const bottomBlock = uiPlayerStore.bottomBlock;
+  const skipInterval = uiPlayerStore.skipInterval;
   // @ts-ignore ?? TODO
   const { player, store } = React.useContext<ILivePlayerContext>(PlayerContext);
   const [noControls, setNoControls] = React.useState(false);
@@ -34,15 +37,10 @@ function Controls(props: any) {
   const exceptionsList = tabStates[currentTab]?.exceptionsList || [];
   const logRedCount = tabStates[currentTab]?.logMarkedCountNow || 0;
   const showExceptions = exceptionsList.length > 0;
-  const {
-    bottomBlock,
-    toggleBottomBlock,
-    closedLive,
-    skipInterval,
-    session,
-    fetchSessions: fetchAssistSessions,
-    totalAssistSessions,
-  } = props;
+  const session = sessionStore.current;
+  const fetchAssistSessions = sessionStore.fetchLiveSessions;
+  const totalAssistSessions = sessionStore.totalLiveSessions;
+  const closedLive = !!sessionStore.errorStack || !!sessionStore.current;
 
   const onKeyDown = (e: any) => {
     if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
@@ -89,14 +87,14 @@ function Controls(props: any) {
   };
 
   const toggleBottomTools = (blockName: number) => {
-      toggleBottomBlock(blockName);
+    toggleBottomBlock(blockName);
   };
 
   return (
     <div className={styles.controls}>
       {session.liveOnly ? null : <Timeline />}
       {!noControls ?
-        <div className={cn(styles.buttons, '!px-5 !pt-0')} data-is-live style={{ height: noGrid ? '40px' : ''}}>
+        <div className={cn(styles.buttons, '!px-5 !pt-0')} data-is-live style={{ height: noGrid ? '40px' : '' }}>
           <div className="flex items-center">
             {!closedLive && (
               <div className={styles.buttonsLeft}>
@@ -123,24 +121,11 @@ function Controls(props: any) {
             />
           </div>
         </div>
-      : null}
+        : null}
     </div>
   );
 }
 
 const ControlPlayer = observer(Controls);
 
-export default connect(
-  (state: any) => {
-    return {
-      session: state.getIn(['sessions', 'current']),
-      totalAssistSessions: state.getIn(['liveSearch', 'total']),
-      closedLive:
-        !!state.getIn(['sessions', 'errors']) || !state.getIn(['sessions', 'current']).live,
-    };
-  },
-  {
-    fetchSessions,
-    toggleBottomBlock
-  }
-)(ControlPlayer);
\ No newline at end of file
+export default ControlPlayer;
diff --git a/frontend/app/components/Session/Player/LivePlayer/LivePlayerBlockHeader.tsx b/frontend/app/components/Session/Player/LivePlayer/LivePlayerBlockHeader.tsx
index df37e1684..2d3e3fc9a 100644
--- a/frontend/app/components/Session/Player/LivePlayer/LivePlayerBlockHeader.tsx
+++ b/frontend/app/components/Session/Player/LivePlayer/LivePlayerBlockHeader.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import {
-  assist as assistRoute,
   withSiteId,
   multiview,
 } from 'App/routes';
@@ -16,23 +14,20 @@ import { useStore } from 'App/mstore'
 import stl from '../ReplayPlayer/playerBlockHeader.module.css';
 import AssistActions from 'Components/Assist/components/AssistActions';
 
-const ASSIST_ROUTE = assistRoute();
-
-// TODO props
-function LivePlayerBlockHeader(props: any) {
+function LivePlayerBlockHeader({
+  isMultiview,
+}: { isMultiview?: boolean }) {
   const [hideBack, setHideBack] = React.useState(false);
   const { store } = React.useContext(PlayerContext);
-  const { assistMultiviewStore } = useStore();
+  const { assistMultiviewStore, projectsStore, customFieldStore, sessionStore } = useStore();
+  const isAssist = window.location.pathname.includes('/assist/');
+  const session = sessionStore.current;
+  const closedLive = sessionStore.fetchFailed || (isAssist && !session.live);
+  const siteId = projectsStore.siteId;
   const history = useHistory();
   const { width, height } = store.get();
 
-  const {
-    session,
-    metaList,
-    closedLive = false,
-    siteId,
-    isMultiview,
-  } = props;
+  const metaList = customFieldStore.list.map((i: any) => i.key)
 
   React.useEffect(() => {
     const queryParams = new URLSearchParams(document.location.search);
@@ -41,7 +36,6 @@ function LivePlayerBlockHeader(props: any) {
 
   const backHandler = () => {
     history.goBack();
-    // history.push(withSiteId(ASSIST_ROUTE, siteId));
   };
 
   const { userId, metadata, isCallActive, agentIds } = session;
@@ -100,20 +94,6 @@ function LivePlayerBlockHeader(props: any) {
   );
 }
 
-const PlayerHeaderCont = connect(
-  (state: any) => {
-    const isAssist = window.location.pathname.includes('/assist/');
-    const session = state.getIn(['sessions', 'current']);
-
-    return {
-      isAssist,
-      session,
-      sessionPath: state.getIn(['sessions', 'sessionPath']),
-      siteId: state.getIn(['site', 'siteId']),
-      metaList: state.getIn(['customFields', 'list']).map((i: any) => i.key),
-      closedLive: !!state.getIn(['sessions', 'errors']) || (isAssist && !session.live),
-    };
-  }
-)(observer(LivePlayerBlockHeader));
+const PlayerHeaderCont = observer(LivePlayerBlockHeader);
 
 export default PlayerHeaderCont;
diff --git a/frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx b/frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx
index 94b20cdf1..b1e0b2f58 100644
--- a/frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx
+++ b/frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx
@@ -1,38 +1,48 @@
+import cn from 'classnames';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import { findDOMNode } from 'react-dom';
+
+import {
+  ILivePlayerContext,
+  PlayerContext,
+} from 'App/components/Session/playerContext';
+import { useStore } from 'App/mstore';
+import { CONSOLE } from 'App/mstore/uiPlayerStore';
 import {
   debounceUpdate,
   getDefaultPanelHeight,
 } from 'Components/Session/Player/ReplayPlayer/PlayerInst';
-import React from 'react';
-import { connect } from 'react-redux';
-import { findDOMNode } from 'react-dom';
-import cn from 'classnames';
-import LiveControls from './LiveControls';
-import ConsolePanel from 'Shared/DevTools/ConsolePanel';
-import { observer } from 'mobx-react-lite';
-import Overlay from './Overlay';
 import stl from 'Components/Session_/Player/player.module.css';
-import { PlayerContext, ILivePlayerContext } from 'App/components/Session/playerContext';
-import { CONSOLE } from 'Duck/components/player';
+
+import ConsolePanel from 'Shared/DevTools/ConsolePanel';
+
+import LiveControls from './LiveControls';
+import Overlay from './Overlay';
 
 interface IProps {
-  closedLive: boolean;
   fullView: boolean;
   isMultiview?: boolean;
-  bottomBlock: number;
 }
 
-function Player(props: IProps) {
+function Player({ fullView, isMultiview }: IProps) {
+  const { uiPlayerStore, sessionStore } = useStore();
+  const isAssist = window.location.pathname.includes('/assist/');
+  const closedLive =
+    sessionStore.fetchFailed || (isAssist && !sessionStore.current.live);
   const defaultHeight = getDefaultPanelHeight();
   const [panelHeight, setPanelHeight] = React.useState(defaultHeight);
-  const { closedLive, fullView, isMultiview, bottomBlock } = props;
   // @ts-ignore TODO
   const playerContext = React.useContext<ILivePlayerContext>(PlayerContext);
   const screenWrapper = React.useRef<HTMLDivElement>(null);
   const ready = playerContext.store.get().ready;
+  const bottomBlock = uiPlayerStore.bottomBlock;
 
   React.useEffect(() => {
-    if (!props.closedLive || isMultiview) {
-      const parentElement = findDOMNode(screenWrapper.current) as HTMLDivElement | null; //TODO: good architecture
+    if (!closedLive || isMultiview) {
+      const parentElement = findDOMNode(
+        screenWrapper.current
+      ) as HTMLDivElement | null; //TODO: good architecture
       if (parentElement) {
         playerContext.player.attach(parentElement);
         playerContext.player.play();
@@ -76,10 +86,21 @@ function Player(props: IProps) {
     <div className={cn(stl.playerBody, 'flex flex-1 flex-col relative')}>
       <div className="relative flex-1 overflow-hidden">
         <Overlay closedLive={closedLive} />
-        <div className={cn(stl.screenWrapper, stl.checkers)} ref={screenWrapper} />
+        <div
+          className={cn(stl.screenWrapper, stl.checkers)}
+          ref={screenWrapper}
+        />
       </div>
       {bottomBlock === CONSOLE ? (
-        <div style={{ maxWidth, width: '100%', height: panelHeight, position: 'relative', overflow: 'hidden' }}>
+        <div
+          style={{
+            maxWidth,
+            width: '100%',
+            height: panelHeight,
+            position: 'relative',
+            overflow: 'hidden',
+          }}
+        >
           <div
             onMouseDown={handleResize}
             className={'w-full h-2 cursor-ns-resize absolute top-0 left-0 z-20'}
@@ -87,18 +108,11 @@ function Player(props: IProps) {
             <ConsolePanel isLive />
         </div>
       ) : null}
-      {!fullView && !isMultiview ? <LiveControls jump={playerContext.player.jump} /> : null}
+      {!fullView && !isMultiview ? (
+        <LiveControls jump={playerContext.player.jump} />
+      ) : null}
     </div>
   );
 }
 
-export default connect((state: any) => {
-  const isAssist = window.location.pathname.includes('/assist/');
-  return {
-    sessionId: state.getIn(['sessions', 'current']).sessionId,
-    bottomBlock: state.getIn(['components', 'player', 'bottomBlock']),
-    closedLive:
-      !!state.getIn(['sessions', 'errors']) ||
-      (isAssist && !state.getIn(['sessions', 'current']).live),
-  };
-})(observer(Player));
+export default observer(Player);
diff --git a/frontend/app/components/Session/Player/LivePlayer/Timeline.tsx b/frontend/app/components/Session/Player/LivePlayer/Timeline.tsx
index cba5547b9..e88845981 100644
--- a/frontend/app/components/Session/Player/LivePlayer/Timeline.tsx
+++ b/frontend/app/components/Session/Player/LivePlayer/Timeline.tsx
@@ -1,8 +1,7 @@
 import React, { useMemo, useContext, useState, useRef } from 'react';
-import { connect } from 'react-redux';
+import { useStore } from 'App/mstore';
 import TimeTracker from 'Components/Session_/Player/Controls/TimeTracker';
 import stl from 'Components/Session_/Player/Controls/timeline.module.css';
-import { setTimelinePointer, setTimelineHoverTime } from 'Duck/sessions';
 import DraggableCircle from 'Components/Session_/Player/Controls/components/DraggableCircle';
 import CustomDragLayer, { OnDragCallback } from 'Components/Session_/Player/Controls/components/CustomDragLayer';
 import { debounce } from 'App/utils';
@@ -11,13 +10,11 @@ import { PlayerContext, ILivePlayerContext } from 'App/components/Session/player
 import { observer } from 'mobx-react-lite';
 import { Duration } from 'luxon';
 
-interface IProps {
-  setTimelineHoverTime: (t: number) => void
-  startedAt: number
-  tooltipVisible: boolean
-}
-
-function Timeline(props: IProps) {
+function Timeline() {
+  const { sessionStore } = useStore();
+  const startedAt = sessionStore.current.startedAt ?? 0;
+  const tooltipVisible = sessionStore.timeLineTooltip.isVisible;
+  const setTimelineHoverTime = sessionStore.setTimelineTooltip;
   // @ts-ignore
   const { player, store } = useContext<ILivePlayerContext>(PlayerContext)
   const [wasPlaying, setWasPlaying] = useState(false)
@@ -35,7 +32,7 @@ function Timeline(props: IProps) {
   const scale = 100 / endTime;
 
   const debouncedJump = useMemo(() => debounce(player.jump, 500), [])
-  const debouncedTooltipChange = useMemo(() => debounce(props.setTimelineHoverTime, 50), [])
+  const debouncedTooltipChange = useMemo(() => debounce(setTimelineHoverTime, 50), [])
 
   const onDragEnd = () => {
     if (!liveTimeTravel) return;
@@ -59,7 +56,7 @@ function Timeline(props: IProps) {
   };
 
   const getLiveTime = (e: React.MouseEvent) => {
-    const duration = new Date().getTime() - props.startedAt;
+    const duration = new Date().getTime() - startedAt;
     // @ts-ignore type mismatch from react?
     const p = e.nativeEvent.offsetX / e.target.offsetWidth;
     const time = Math.max(Math.round(p * duration), 0);
@@ -69,7 +66,7 @@ function Timeline(props: IProps) {
 
   const showTimeTooltip = (e: React.MouseEvent<HTMLDivElement>) => {
     if (e.target !== progressRef.current && e.target !== timelineRef.current) {
-      return props.tooltipVisible && hideTimeTooltip();
+      return tooltipVisible && hideTimeTooltip();
     }
 
     const [time, duration] = getLiveTime(e);
@@ -136,7 +133,7 @@ function Timeline(props: IProps) {
         onMouseEnter={showTimeTooltip}
         onMouseLeave={hideTimeTooltip}
       >
-        <TooltipContainer live />
+        <TooltipContainer />
         <DraggableCircle
           left={time * scale}
           onDrop={onDragEnd}
@@ -156,10 +153,4 @@ function Timeline(props: IProps) {
   )
 }
 
-export default connect(
-  (state: any) => ({
-    startedAt: state.getIn(['sessions', 'current']).startedAt || 0,
-    tooltipVisible: state.getIn(['sessions', 'timeLineTooltip', 'isVisible']),
-  }),
-  { setTimelinePointer, setTimelineHoverTime }
-)(observer(Timeline))
+export default observer(Timeline)
diff --git a/frontend/app/components/Session/Player/MobilePlayer/MobileControls.tsx b/frontend/app/components/Session/Player/MobilePlayer/MobileControls.tsx
index 31de09d1c..7aa775733 100644
--- a/frontend/app/components/Session/Player/MobilePlayer/MobileControls.tsx
+++ b/frontend/app/components/Session/Player/MobilePlayer/MobileControls.tsx
@@ -1,7 +1,6 @@
 import cn from 'classnames';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
-import { connect } from 'react-redux';
 import { useHistory } from 'react-router';
 
 import { MobilePlayerContext } from 'App/components/Session/playerContext';
@@ -13,28 +12,22 @@ import {
   LaunchEventsShortcut,
   LaunchNetworkShortcut,
   LaunchPerformanceShortcut,
-  LaunchXRaShortcut,
+  LaunchXRaShortcut
 } from 'Components/Session_/Player/Controls/components/KeyboardHelp';
 import PlayerControls from 'Components/Session_/Player/Controls/components/PlayerControls';
 import styles from 'Components/Session_/Player/Controls/controls.module.css';
+import { Tooltip } from 'UI';
 import {
   CONSOLE,
   EXCEPTIONS,
   NETWORK,
   OVERVIEW,
   PERFORMANCE,
-  STACKEVENTS,
-  changeSkipInterval,
-  fullscreenOff,
-  fullscreenOn,
-  toggleBottomBlock,
-} from 'Duck/components/player';
-import { fetchSessions } from 'Duck/liveSearch';
-import { Tooltip } from 'UI';
-
-import { useStore } from '../../../../mstore';
-import { session as sessionRoute, withSiteId } from '../../../../routes';
-import { SummaryButton } from '../../../Session_/Player/Controls/Controls';
+  STACKEVENTS
+} from 'App/mstore/uiPlayerStore';
+import { useStore } from 'App/mstore';
+import { session as sessionRoute, withSiteId } from 'App/routes';
+import { SummaryButton } from 'Components/Session_/Player/Controls/Controls';
 import useShortcuts from '../ReplayPlayer/useShortcuts';
 
 export const SKIP_INTERVALS = {
@@ -44,27 +37,31 @@ export const SKIP_INTERVALS = {
   15: 15e3,
   20: 2e4,
   30: 3e4,
-  60: 6e4,
+  60: 6e4
 };
 
 function Controls(props: any) {
+  const { sessionStore, userStore } = useStore();
+  const permissions = userStore.account.permissions || [];
+  const disableDevtools = userStore.isEnterprise && !(permissions.includes('DEV_TOOLS') || permissions.includes('SERVICE_DEV_TOOLS'));
   const { player, store } = React.useContext(MobilePlayerContext);
   const history = useHistory();
   const { playing, completed, skip, speed, messagesLoading } = store.get();
-
+  const { uiPlayerStore, projectsStore } = useStore();
+  const fullscreen = uiPlayerStore.fullscreen;
+  const bottomBlock = uiPlayerStore.bottomBlock;
+  const toggleBottomBlock = uiPlayerStore.toggleBottomBlock;
+  const fullscreenOn = uiPlayerStore.fullscreenOn;
+  const fullscreenOff = uiPlayerStore.fullscreenOff;
+  const changeSkipInterval = uiPlayerStore.changeSkipInterval;
+  const skipInterval = uiPlayerStore.skipInterval;
+  const siteId = projectsStore.siteId;
   const {
-    bottomBlock,
-    toggleBottomBlock,
-    fullscreen,
-    changeSkipInterval,
-    skipInterval,
-    session,
     setActiveTab,
-    previousSessionId,
-    nextSessionId,
-    siteId,
-    disableDevtools,
   } = props;
+  const session = sessionStore.current;
+  const previousSessionId = sessionStore.previousId;
+  const nextSessionId = sessionStore.nextId;
 
   const disabled = messagesLoading;
   const sessionTz = session?.timezone;
@@ -79,8 +76,8 @@ function Controls(props: any) {
 
   useShortcuts({
     skipInterval,
-    fullScreenOn: props.fullscreenOn,
-    fullScreenOff: props.fullscreenOff,
+    fullScreenOn: fullscreenOn,
+    fullScreenOff: fullscreenOff,
     toggleBottomBlock,
     openNextSession: nextHandler,
     openPrevSession: prevHandler,
@@ -103,10 +100,10 @@ function Controls(props: any) {
   };
 
   const state = completed
-                ? PlayingState.Completed
-                : playing
-                  ? PlayingState.Playing
-                  : PlayingState.Paused;
+    ? PlayingState.Completed
+    : playing
+      ? PlayingState.Playing
+      : PlayingState.Paused;
 
   return (
     <div className={styles.controls}>
@@ -151,7 +148,7 @@ function Controls(props: any) {
             >
               <FullScreenButton
                 size={16}
-                onClick={props.fullscreenOn}
+                onClick={fullscreenOn}
                 customClasses={
                   'rounded hover:bg-gray-light-shade color-gray-medium'
                 }
@@ -170,10 +167,11 @@ interface DevtoolsButtonsProps {
 }
 
 const DevtoolsButtons = observer(({
-  toggleBottomTools,
-  bottomBlock,
-}: DevtoolsButtonsProps) => {
+                                    toggleBottomTools,
+                                    bottomBlock
+                                  }: DevtoolsButtonsProps) => {
   const { aiSummaryStore } = useStore();
+
   const { store, player } = React.useContext(MobilePlayerContext);
 
   const {
@@ -181,7 +179,7 @@ const DevtoolsButtons = observer(({
     logMarkedCountNow,
     messagesLoading,
     stackMarkedCountNow,
-    resourceMarkedCountNow,
+    resourceMarkedCountNow
   } = store.get();
 
   const showExceptions = exceptionsList.length > 0;
@@ -277,43 +275,8 @@ const DevtoolsButtons = observer(({
       />
     </>
   );
-})
+});
 
 const ControlPlayer = observer(Controls);
 
-export default connect(
-  (state: any) => {
-    const permissions = state.getIn(['user', 'account', 'permissions']) || [];
-    const isEnterprise = state.getIn(['user', 'account', 'edition']) === 'ee';
-    return {
-      disableDevtools: isEnterprise && !(permissions.includes('DEV_TOOLS') || permissions.includes('SERVICE_DEV_TOOLS')),
-      fullscreen: state.getIn(['components', 'player', 'fullscreen']),
-      bottomBlock: state.getIn(['components', 'player', 'bottomBlock']),
-      showStorageRedux: !state.getIn([
-        'components',
-        'player',
-        'hiddenHints',
-        'storage',
-      ]),
-      showStackRedux: !state.getIn([
-        'components',
-        'player',
-        'hiddenHints',
-        'stack',
-      ]),
-      session: state.getIn(['sessions', 'current']),
-      totalAssistSessions: state.getIn(['liveSearch', 'total']),
-      skipInterval: state.getIn(['components', 'player', 'skipInterval']),
-      previousSessionId: state.getIn(['sessions', 'previousId']),
-      nextSessionId: state.getIn(['sessions', 'nextId']),
-      siteId: state.getIn(['site', 'siteId']),
-    };
-  },
-  {
-    fullscreenOn,
-    fullscreenOff,
-    toggleBottomBlock,
-    fetchSessions,
-    changeSkipInterval,
-  }
-)(ControlPlayer);
+export default ControlPlayer
diff --git a/frontend/app/components/Session/Player/MobilePlayer/MobileOverlay.tsx b/frontend/app/components/Session/Player/MobilePlayer/MobileOverlay.tsx
index 00de8365a..9ed68b5df 100644
--- a/frontend/app/components/Session/Player/MobilePlayer/MobileOverlay.tsx
+++ b/frontend/app/components/Session/Player/MobilePlayer/MobileOverlay.tsx
@@ -4,8 +4,7 @@ import {
   PERFORMANCE,
   STACKEVENTS,
   STORAGE,
-  toggleBottomBlock,
-} from 'Duck/components/player';
+} from 'App/mstore/uiPlayerStore';
 import React from 'react';
 import AutoplayTimer from 'Components/Session_/Player/Overlay/AutoplayTimer';
 import PlayIconLayer from 'Components/Session_/Player/Overlay/PlayIconLayer';
@@ -14,14 +13,13 @@ import { PlayerContext } from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
 import { Dropdown } from 'antd';
 import type { MenuProps } from 'antd';
-import { connect } from 'react-redux';
 import { Icon } from 'UI';
+import { useStore } from 'App/mstore'
 
 interface Props {
   nextId?: string;
   closedLive?: boolean;
   isClickmap?: boolean;
-  toggleBottomBlock: (block: number) => void;
 }
 
 enum ItemKey {
@@ -62,9 +60,10 @@ const menuItems: MenuProps['items'] = [
   },
 ];
 
-function Overlay({ nextId, isClickmap, toggleBottomBlock }: Props) {
+function Overlay({ nextId, isClickmap }: Props) {
   const { player, store } = React.useContext(PlayerContext);
-
+  const { uiPlayerStore } = useStore();
+  const toggleBottomBlock = uiPlayerStore.toggleBottomBlock;
   const togglePlay = () => player.togglePlay();
   const { playing, messagesLoading, completed, autoplay } = store.get();
   const loading = messagesLoading
@@ -110,6 +109,4 @@ function Overlay({ nextId, isClickmap, toggleBottomBlock }: Props) {
   );
 }
 
-export default connect(null, {
-  toggleBottomBlock,
-})(observer(Overlay));
+export default observer(Overlay);
diff --git a/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerHeader.tsx b/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerHeader.tsx
index dce61eee8..cae799c50 100644
--- a/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerHeader.tsx
+++ b/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerHeader.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
-import { sessions as sessionsRoute, liveSession as liveSessionRoute, withSiteId } from 'App/routes';
-import { BackLink, Link } from 'UI';
-import { toggleFavorite, setSessionPath } from 'Duck/sessions';
+import { sessions as sessionsRoute, withSiteId } from 'App/routes';
+import { BackLink } from 'UI';
 import cn from 'classnames';
 import SessionMetaList from 'Shared/SessionItem/SessionMetaList';
 import UserCard from '../ReplayPlayer/EventsBlock/UserCard';
@@ -11,8 +9,8 @@ import Tabs from 'Components/Session/Tabs';
 import { PlayerContext } from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
 import stl from '../ReplayPlayer/playerBlockHeader.module.css';
-import { fetchListActive as fetchMetadata } from 'Duck/customField';
 import { IFRAME } from 'App/constants/storageKeys';
+import { useStore } from 'App/mstore';
 
 const SESSIONS_ROUTE = sessionsRoute();
 
@@ -23,24 +21,22 @@ function PlayerBlockHeader(props: any) {
 
   const playerState = store?.get?.() || { width: 0, height: 0, showEvents: false };
   const { width = 0, height = 0, showEvents = false } = playerState;
-
+  const { customFieldStore, projectsStore, sessionStore } = useStore();
+  const session = sessionStore.current;
+  const siteId = projectsStore.siteId!;
   const {
-    session,
     fullscreen,
-    metaList,
-    siteId,
     setActiveTab,
     activeTab,
     history,
-    sessionPath,
-    fetchMetadata,
   } = props;
+  const metaList = customFieldStore.list.map((i: any) => i.key)
 
   React.useEffect(() => {
     const iframe = localStorage.getItem(IFRAME) || false;
     setHideBack(!!iframe && iframe === 'true');
 
-    if (metaList.size === 0) fetchMetadata();
+    if (metaList.length === 0) customFieldStore.fetchList();
   }, []);
 
   const backHandler = () => {
@@ -100,24 +96,6 @@ function PlayerBlockHeader(props: any) {
   );
 }
 
-const PlayerHeaderCont = connect(
-  (state: any) => {
-    const session = state.getIn(['sessions', 'current']);
-
-    return {
-      session,
-      sessionPath: state.getIn(['sessions', 'sessionPath']),
-      local: state.getIn(['sessions', 'timezone']),
-      funnelRef: state.getIn(['funnels', 'navRef']),
-      siteId: state.getIn(['site', 'siteId']),
-      metaList: state.getIn(['customFields', 'list']).map((i: any) => i.key),
-    };
-  },
-  {
-    toggleFavorite,
-    setSessionPath,
-    fetchMetadata,
-  }
-)(observer(PlayerBlockHeader));
+const PlayerHeaderCont = observer(PlayerBlockHeader);
 
 export default withRouter(PlayerHeaderCont);
diff --git a/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerSubheader.tsx b/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerSubheader.tsx
index 853fd1184..c33ee9abb 100644
--- a/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerSubheader.tsx
+++ b/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerSubheader.tsx
@@ -3,18 +3,20 @@ import QueueControls from 'Components/Session_/QueueControls';
 import Bookmark from 'Shared/Bookmark';
 import Issues from 'Components/Session_/Issues/Issues';
 import NotePopup from 'Components/Session_/components/NotePopup';
-import { observer } from 'mobx-react-lite';
-import { connect } from 'react-redux';
 import { Tag } from 'antd'
 import { ShareAltOutlined } from '@ant-design/icons';
 import { Button as AntButton, Popover } from 'antd';
 import SharePopup from 'Components/shared/SharePopup/SharePopup';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 
 function SubHeader(props: any) {
+  const { sessionStore, integrationsStore} = useStore();
+  const integrations = integrationsStore.issues.list;
+  const isIOS = sessionStore.current.platform === 'ios';
 
   const enabledIntegration = useMemo(() => {
-    const { integrations } = props;
-    if (!integrations || !integrations.size) {
+    if (!integrations || !integrations.length) {
       return false;
     }
 
@@ -24,7 +26,7 @@ function SubHeader(props: any) {
   return (
     <>
       <div className="w-full px-4 flex items-center border-b relative">
-        <Tag color="green" bordered={false} className='rounded-full'>{props.isIOS ? 'iOS' : 'Android'} BETA</Tag>
+        <Tag color="green" bordered={false} className='rounded-full'>{isIOS ? 'iOS' : 'Android'} BETA</Tag>
         <div
           className="ml-auto text-sm flex items-center color-gray-medium gap-2"
           style={{ width: 'max-content' }}
@@ -55,9 +57,4 @@ function SubHeader(props: any) {
   );
 }
 
-export default connect((state: any) => ({
-  siteId: state.getIn(['site', 'siteId']),
-  integrations: state.getIn(['issues', 'list']),
-  modules: state.getIn(['user', 'account', 'modules']) || [],
-  isIOS: state.getIn(['sessions', 'current']).platform === 'ios',
-}))(observer(SubHeader));
+export default observer(SubHeader);
diff --git a/frontend/app/components/Session/Player/MobilePlayer/PerfWarnings.tsx b/frontend/app/components/Session/Player/MobilePlayer/PerfWarnings.tsx
index 0fe38f492..91d3d5e5f 100644
--- a/frontend/app/components/Session/Player/MobilePlayer/PerfWarnings.tsx
+++ b/frontend/app/components/Session/Player/MobilePlayer/PerfWarnings.tsx
@@ -1,12 +1,12 @@
-import {IosPerformanceEvent} from "Player/web/messages";
+import { MobilePerformanceEvent } from "Player/web/messages";
 import React from 'react';
 import { MobilePlayerContext } from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
 import { Icon } from 'UI';
 import { mapIphoneModel } from 'Player/mobile/utils';
 import cn from 'classnames';
-import { connect } from 'react-redux';
-import { NONE } from 'Duck/components/player';
+import { NONE } from 'App/mstore/uiPlayerStore';
+import { useStore } from "App/mstore";
 
 type warningsType =
   | 'thermalState'
@@ -38,13 +38,14 @@ const elements = {
   },
 } as const;
 
-function PerfWarnings({ userDevice, bottomBlock }: { userDevice: string; bottomBlock: number }) {
+function PerfWarnings({ userDevice }: { userDevice: string }) {
   const { store } = React.useContext(MobilePlayerContext);
+  const { uiPlayerStore } = useStore();
   const { scale, performanceListNow, performanceList } = store.get()
-
+  const bottomBlock = uiPlayerStore.bottomBlock;
   const allElements = Object.keys(elements) as warningsType[];
   const list = React.useMemo(() => allElements
-    .filter(el => performanceList.findIndex((pw: IosPerformanceEvent & { techName: warningsType }) => pw.techName === el) !== -1)
+    .filter(el => performanceList.findIndex((pw: MobilePerformanceEvent & { techName: warningsType }) => pw.techName === el) !== -1)
   , [performanceList.length])
 
   const contStyles = {
@@ -105,6 +106,4 @@ function PerfWarnings({ userDevice, bottomBlock }: { userDevice: string; bottomB
   );
 }
 
-export default connect((state: any) => ({
-  bottomBlock: state.getIn(['components', 'player', 'bottomBlock']),
-}))(observer(PerfWarnings));
+export default observer(PerfWarnings);
diff --git a/frontend/app/components/Session/Player/MobilePlayer/PlayerBlock.tsx b/frontend/app/components/Session/Player/MobilePlayer/PlayerBlock.tsx
index 59a31de3c..5ab57b408 100644
--- a/frontend/app/components/Session/Player/MobilePlayer/PlayerBlock.tsx
+++ b/frontend/app/components/Session/Player/MobilePlayer/PlayerBlock.tsx
@@ -1,15 +1,14 @@
 import React from 'react';
 import cn from 'classnames';
-import { connect } from 'react-redux';
 import Player from './PlayerInst';
 import MobilePlayerSubheader from './MobilePlayerSubheader';
-
+import { useStore } from 'App/mstore'
+import { observer } from 'mobx-react-lite';
 import styles from 'Components/Session_/playerBlock.module.css';
 
 interface IProps {
   fullscreen: boolean;
   sessionId: string;
-  disabled: boolean;
   activeTab: string;
   jiraConfig: Record<string, any>
   fullView?: boolean
@@ -18,22 +17,21 @@ interface IProps {
 
 function PlayerBlock(props: IProps) {
   const {
-    fullscreen,
-    sessionId,
-    disabled,
     activeTab,
-    jiraConfig,
     fullView = false,
     setActiveTab,
   } = props;
-
+  const { uiPlayerStore, integrationsStore, sessionStore } = useStore();
+  const sessionId = sessionStore.current.sessionId;
+  const jiraConfig = integrationsStore.issues.list[0];
+  const fullscreen = uiPlayerStore.fullscreen;
   const shouldShowSubHeader = !fullscreen && !fullView
   return (
     <div
       className={cn(styles.playerBlock, 'flex flex-col', 'overflow-x-hidden')}
     >
       {shouldShowSubHeader ? (
-        <MobilePlayerSubheader sessionId={sessionId} disabled={disabled} jiraConfig={jiraConfig} />
+        <MobilePlayerSubheader sessionId={sessionId} jiraConfig={jiraConfig} />
       ) : null}
       <Player
         setActiveTab={setActiveTab}
@@ -44,9 +42,4 @@ function PlayerBlock(props: IProps) {
   );
 }
 
-export default connect((state: any) => ({
-  fullscreen: state.getIn(['components', 'player', 'fullscreen']),
-  sessionId: state.getIn(['sessions', 'current']).sessionId,
-  disabled: state.getIn(['components', 'targetDefiner', 'inspectorMode']),
-  jiraConfig: state.getIn(['issues', 'list'])[0],
-}))(PlayerBlock)
\ No newline at end of file
+export default observer(PlayerBlock)
\ No newline at end of file
diff --git a/frontend/app/components/Session/Player/MobilePlayer/PlayerInst.tsx b/frontend/app/components/Session/Player/MobilePlayer/PlayerInst.tsx
index 188f286ef..c696a8f32 100644
--- a/frontend/app/components/Session/Player/MobilePlayer/PlayerInst.tsx
+++ b/frontend/app/components/Session/Player/MobilePlayer/PlayerInst.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { findDOMNode } from 'react-dom';
 import cn from 'classnames';
 import { EscapeButton } from 'UI';
@@ -11,15 +10,13 @@ import {
   PERFORMANCE,
   EXCEPTIONS,
   OVERVIEW,
-  fullscreenOff,
-} from 'Duck/components/player';
+} from 'App/mstore/uiPlayerStore';
 import { MobileNetworkPanel } from 'Shared/DevTools/NetworkPanel';
 import { MobilePerformance } from 'Components/Session_/Performance';
 import { MobileExceptions } from 'Components/Session_/Exceptions/Exceptions';
 import MobileControls from './MobileControls';
 import Overlay from './MobileOverlay'
 import stl from 'Components/Session_/Player/player.module.css';
-import { updateLastPlayedSession } from 'Duck/sessions';
 import { MobileOverviewPanel } from 'Components/Session_/OverviewPanel';
 import MobileConsolePanel from 'Shared/DevTools/ConsolePanel/MobileConsolePanel';
 import { MobilePlayerContext } from 'App/components/Session/playerContext';
@@ -27,41 +24,37 @@ import { MobileStackEventPanel } from 'Shared/DevTools/StackEventPanel';
 import ReplayWindow from "Components/Session/Player/MobilePlayer/ReplayWindow";
 import PerfWarnings from "Components/Session/Player/MobilePlayer/PerfWarnings";
 import { debounceUpdate, getDefaultPanelHeight } from "Components/Session/Player/ReplayPlayer/PlayerInst";
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 
 interface IProps {
   fullView: boolean;
   isMultiview?: boolean;
-  bottomBlock: number;
-  fullscreen: boolean;
-  fullscreenOff: () => any;
-  nextId: string;
-  sessionId: string;
   activeTab: string;
-  updateLastPlayedSession: (id: string) => void
-  videoURL: string[];
   setActiveTab: (tab: string) => void;
-  userDevice: string;
-  screenWidth: number;
-  screenHeight: number;
-  platform: string;
+  bottomBlock: any;
+  fullscreen?: boolean;
 }
 
 function Player(props: IProps) {
   const defaultHeight = getDefaultPanelHeight()
   const [panelHeight, setPanelHeight] = React.useState(defaultHeight);
   const {
-    fullscreen,
-    fullscreenOff,
-    nextId,
-    bottomBlock,
     activeTab,
     fullView,
-    videoURL,
-    userDevice,
-    screenWidth,
-    screenHeight,
-    platform,
   } = props;
+  const { uiPlayerStore, sessionStore } = useStore();
+  const nextId = sessionStore.nextId;
+  const sessionId = sessionStore.current.sessionId;
+  const userDevice = sessionStore.current.userDevice;
+  const videoURL = sessionStore.current.videoURL;
+  const platform = sessionStore.current.platform;
+  const screenWidth = sessionStore.current.screenWidth!;
+  const screenHeight = sessionStore.current.screenHeight!;
+  const updateLastPlayedSession = sessionStore.updateLastPlayedSession;
+  const fullscreenOff = uiPlayerStore.fullscreenOff;
+  const fullscreen = uiPlayerStore.fullscreen;
+  const bottomBlock = uiPlayerStore.bottomBlock;
   const playerContext = React.useContext(MobilePlayerContext);
   const isReady = playerContext.store.get().ready
   const screenWrapper = React.useRef<HTMLDivElement>(null);
@@ -69,7 +62,7 @@ function Player(props: IProps) {
   const [isAttached, setAttached] = React.useState(false);
 
   React.useEffect(() => {
-    props.updateLastPlayedSession(props.sessionId);
+    updateLastPlayedSession(sessionId);
     const parentElement = findDOMNode(screenWrapper.current) as HTMLDivElement | null; //TODO: good architecture
     if (parentElement && !isAttached) {
       playerContext.player.attach(parentElement);
@@ -167,20 +160,4 @@ function Player(props: IProps) {
   );
 }
 
-export default connect(
-  (state: any) => ({
-    fullscreen: state.getIn(['components', 'player', 'fullscreen']),
-    nextId: state.getIn(['sessions', 'nextId']),
-    sessionId: state.getIn(['sessions', 'current']).sessionId,
-    userDevice: state.getIn(['sessions', 'current']).userDevice,
-    videoURL: state.getIn(['sessions', 'current']).videoURL,
-    bottomBlock: state.getIn(['components', 'player', 'bottomBlock']),
-    platform: state.getIn(['sessions', 'current']).platform,
-    screenWidth: state.getIn(['sessions', 'current']).screenWidth,
-    screenHeight: state.getIn(['sessions', 'current']).screenHeight,
-  }),
-  {
-    fullscreenOff,
-    updateLastPlayedSession,
-  }
-)(Player);
+export default observer(Player);
diff --git a/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/Metadata/Metadata.js b/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/Metadata/Metadata.js
index ca0a953a2..c118277a1 100644
--- a/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/Metadata/Metadata.js
+++ b/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/Metadata/Metadata.js
@@ -1,25 +1,26 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import MetadataItem from './MetadataItem';
+import { useStore } from "App/mstore";
+import { observer } from 'mobx-react-lite';
 
-export default connect(state => ({
-  metadata: state.getIn([ 'sessions', 'current' ]).metadata,
-}))(function Metadata ({ metadata }) {
+function Metadata () {
+  const { sessionStore } = useStore();
+  const metadata = sessionStore.current.metadata;
 
-  const metaLenth = Object.keys(metadata).length;
-
-  if (metaLenth === 0) {
+  const metaLength = Object.keys(metadata).length;
+  if (metaLength === 0) {
     return (
       (<span className="text-sm color-gray-medium">Check <a href="https://docs.openreplay.com/installation/metadata" target="_blank" className="link">how to use Metadata</a> if you haven’t yet done so.</span>)
     )
   }
   return (
-      <div>
-        { Object.keys(metadata).map((key) => {
-          // const key = Object.keys(i)[0]
-          const value = metadata[key]
-          return <MetadataItem item={ { value, key } } key={ key } />
-        }) }
+    <div>
+      { Object.keys(metadata).map((key) => {
+        const value = metadata[key]
+        return <MetadataItem item={ { value, key } } key={ key } />
+      }) }
     </div>
   );
-});
+}
+
+export default observer(Metadata)
diff --git a/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/Metadata/SessionList.js b/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/Metadata/SessionList.js
index 886db62a8..61e376ab8 100644
--- a/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/Metadata/SessionList.js
+++ b/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/Metadata/SessionList.js
@@ -1,60 +1,59 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 import { NoContent, Icon, Loader } from 'UI';
 import Session from 'Types/session';
 import SessionItem from 'Shared/SessionItem';
 import stl from './sessionList.module.css';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
-@connect((state) => ({
-    currentSessionId: state.getIn(['sessions', 'current']).sessionId,
-}))
-class SessionList extends React.PureComponent {
-    render() {
-        const { similarSessions, loading, currentSessionId } = this.props;
+function SessionList(props) {
+  const { sessionStore } = useStore();
+  const currentSessionId = sessionStore.current.sessionId;
+  const { similarSessions, loading } = props;
 
-        const similarSessionWithoutCurrent = similarSessions
-            .map(({ sessions, ...rest }) => {
-                return {
-                    ...rest,
-                    sessions: sessions.map(s => new Session(s)).filter(({ sessionId }) => sessionId !== currentSessionId),
-                };
-            })
-            .filter((site) => site.sessions.length > 0);
+  const similarSessionWithoutCurrent = similarSessions
+    .map(({ sessions, ...rest }) => {
+      return {
+        ...rest,
+        sessions: sessions.map(s => new Session(s)).filter(({ sessionId }) => sessionId !== currentSessionId),
+      };
+    })
+    .filter((site) => site.sessions.length > 0);
 
-        return (
-            <Loader loading={loading}>
-                <NoContent
-                    show={!loading && (similarSessionWithoutCurrent.length === 0 || similarSessionWithoutCurrent.size === 0)}
-                    title={
-                        <div className="flex items-center justify-center flex-col">
-                            <AnimatedSVG name={ICONS.NO_SESSIONS} size={60} />
-                            <div className="mt-2" />
-                            <div className="text-center text-gray-600">No sessions found</div>
-                        </div>
-                    }
-                >
-                    <div className={stl.sessionList}>
-                        {similarSessionWithoutCurrent.map((site) => (
-                            <div className={stl.siteWrapper} key={site.host}>
-                                <div className={stl.siteHeader}>
-                                    <Icon name="window" size="14" color="gray-medium" marginRight="10" />
-                                    <span>{site.name}</span>
-                                </div>
-                                <div className="bg-white p-3 rounded border">
-                                    {site.sessions.map((session) => (
-                                        <div className="border-b last:border-none">
-                                            <SessionItem key={session.sessionId} session={session} />
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-                        ))}
-                    </div>
-                </NoContent>
-            </Loader>
-        );
-    }
+
+  return (
+    <Loader loading={loading}>
+      <NoContent
+        show={!loading && (similarSessionWithoutCurrent.length === 0 || similarSessionWithoutCurrent.size === 0)}
+        title={
+          <div className="flex items-center justify-center flex-col">
+            <AnimatedSVG name={ICONS.NO_SESSIONS} size={60} />
+            <div className="mt-2" />
+            <div className="text-center text-gray-600">No sessions found</div>
+          </div>
+        }
+      >
+        <div className={stl.sessionList}>
+          {similarSessionWithoutCurrent.map((site) => (
+            <div className={stl.siteWrapper} key={site.host}>
+              <div className={stl.siteHeader}>
+                <Icon name="window" size="14" color="gray-medium" marginRight="10" />
+                <span>{site.name}</span>
+              </div>
+              <div className="bg-white p-3 rounded border">
+                {site.sessions.map((session) => (
+                  <div className="border-b last:border-none">
+                    <SessionItem key={session.sessionId} session={session} />
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </NoContent>
+    </Loader>
+  );
 }
 
 export default SessionList;
diff --git a/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js b/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js
index ea13c5ba6..29b2a2019 100644
--- a/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js
+++ b/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { List } from 'immutable';
 import { countries } from 'App/constants';
 import { useStore } from 'App/mstore';
@@ -14,9 +13,11 @@ import UserSessionsModal from 'Shared/UserSessionsModal';
 import { IFRAME } from 'App/constants/storageKeys';
 import { capitalize } from "App/utils";
 import { Popover } from 'antd'
+import { observer } from 'mobx-react-lite';
 
-function UserCard({ className, request, session, width, height, similarSessions, loading }) {
-    const { settingsStore } = useStore();
+function UserCard({ className, width, height }) {
+    const { settingsStore, sessionStore } = useStore();
+    const session = sessionStore.current;
     const { timezone } = settingsStore.sessionSettings;
     const [showMore, setShowMore] = React.useState(false)
 
@@ -155,7 +156,7 @@ function UserCard({ className, request, session, width, height, similarSessions,
     );
 }
 
-const component = React.memo(connect((state) => ({ session: state.getIn(['sessions', 'current']) }))(UserCard));
+const component = observer(UserCard);
 
 export default withRequest({
     initialData: List(),
diff --git a/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlock.tsx b/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlock.tsx
index aa30ae5a1..bb645f4fa 100644
--- a/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlock.tsx
+++ b/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlock.tsx
@@ -1,14 +1,15 @@
-import React from 'react';
 import cn from 'classnames';
-import { connect } from 'react-redux';
-import Player from './PlayerInst';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import { useStore } from 'App/mstore';
 import SubHeader from 'Components/Session_/Subheader';
 import styles from 'Components/Session_/playerBlock.module.css';
 
+import Player from './PlayerInst';
+
 interface IProps {
-  fullscreen: boolean;
   sessionId: string;
-  disabled: boolean;
   activeTab: string;
   jiraConfig: Record<string, any>;
   fullView?: boolean;
@@ -16,22 +17,30 @@ interface IProps {
 }
 
 function PlayerBlock(props: IProps) {
-  const { fullscreen, sessionId, disabled, activeTab, jiraConfig, fullView = false, setActiveTab } = props;
-
+  const {
+    activeTab,
+    fullView = false,
+    setActiveTab,
+  } = props;
+  const { uiPlayerStore, sessionStore, integrationsStore } = useStore();
+  const jiraConfig = integrationsStore.issues.list[0];
+  const sessionId = sessionStore.current.sessionId;
+  const fullscreen = uiPlayerStore.fullscreen;
   const shouldShowSubHeader = !fullscreen && !fullView;
   return (
-    <div className={cn(styles.playerBlock, 'flex flex-col', 'overflow-x-hidden')}>
-      {shouldShowSubHeader
-       ? <SubHeader sessionId={sessionId} disabled={disabled} jiraConfig={jiraConfig} />
-       : null}
-      <Player setActiveTab={setActiveTab} activeTab={activeTab} fullView={fullView} />
+    <div
+      className={cn(styles.playerBlock, 'flex flex-col', 'overflow-x-hidden')}
+    >
+      {shouldShowSubHeader ? (
+        <SubHeader sessionId={sessionId} jiraConfig={jiraConfig} />
+      ) : null}
+      <Player
+        setActiveTab={setActiveTab}
+        activeTab={activeTab}
+        fullView={fullView}
+      />
     </div>
   );
 }
 
-export default connect((state: Record<string, any>) => ({
-  fullscreen: state.getIn(['components', 'player', 'fullscreen']),
-  sessionId: state.getIn(['sessions', 'current']).sessionId,
-  disabled: state.getIn(['components', 'targetDefiner', 'inspectorMode']),
-  jiraConfig: state.getIn(['issues', 'list'])[0],
-}))(PlayerBlock);
+export default observer(PlayerBlock);
diff --git a/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx b/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx
index 75cb9cbe7..d7f3a861c 100644
--- a/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx
+++ b/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx
@@ -1,6 +1,5 @@
 import { useStore } from "App/mstore";
 import React from 'react';
-import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import {
   sessions as sessionsRoute,
@@ -8,7 +7,6 @@ import {
   withSiteId,
 } from 'App/routes';
 import { BackLink, Link } from 'UI';
-import { toggleFavorite, setSessionPath } from 'Duck/sessions';
 import cn from 'classnames';
 import SessionMetaList from 'Shared/SessionItem/SessionMetaList';
 import UserCard from './EventsBlock/UserCard';
@@ -16,37 +14,34 @@ import Tabs from 'Components/Session/Tabs';
 import { PlayerContext } from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
 import stl from './playerBlockHeader.module.css';
-import { fetchListActive as fetchMetadata } from 'Duck/customField';
 import { IFRAME } from 'App/constants/storageKeys';
 
 const SESSIONS_ROUTE = sessionsRoute();
 
-// TODO props
 function PlayerBlockHeader(props: any) {
   const [hideBack, setHideBack] = React.useState(false);
   const { player, store } = React.useContext(PlayerContext);
-  const { uxtestingStore } = useStore()
+  const { uxtestingStore, customFieldStore, projectsStore, sessionStore } = useStore()
+  const session = sessionStore.current;
+  const sessionPath = sessionStore.sessionPath;
+  const siteId = projectsStore.siteId!;
   const playerState = store?.get?.() || { width: 0, height: 0, showEvents: false }
   const { width = 0, height = 0, showEvents = false } = playerState
+  const metaList = customFieldStore.list.map((i: any) => i.key)
 
   const {
-    session,
     fullscreen,
-    metaList,
     closedLive = false,
-    siteId,
     setActiveTab,
     activeTab,
     history,
-    sessionPath,
-    fetchMetadata,
   } = props;
 
   React.useEffect(() => {
     const iframe = localStorage.getItem(IFRAME) || false;
     setHideBack(!!iframe && iframe === 'true');
 
-    if (metaList.size === 0) fetchMetadata();
+    if (metaList.length === 0) customFieldStore.fetchList();
   }, []);
 
   const backHandler = () => {
@@ -130,24 +125,6 @@ function PlayerBlockHeader(props: any) {
   );
 }
 
-const PlayerHeaderCont = connect(
-  (state: any) => {
-    const session = state.getIn(['sessions', 'current']);
-
-    return {
-      session,
-      sessionPath: state.getIn(['sessions', 'sessionPath']),
-      local: state.getIn(['sessions', 'timezone']),
-      funnelRef: state.getIn(['funnels', 'navRef']),
-      siteId: state.getIn(['site', 'siteId']),
-      metaList: state.getIn(['customFields', 'list']).map((i: any) => i.key),
-    };
-  },
-  {
-    toggleFavorite,
-    setSessionPath,
-    fetchMetadata,
-  }
-)(observer(PlayerBlockHeader));
+const PlayerHeaderCont = observer(PlayerBlockHeader);
 
 export default withRouter(PlayerHeaderCont);
diff --git a/frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx b/frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx
index 9433b75cc..c1082c92f 100644
--- a/frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx
+++ b/frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { findDOMNode } from 'react-dom';
 import cn from 'classnames';
 import { WebStackEventPanel } from 'Shared/DevTools/StackEventPanel/StackEventPanel';
@@ -16,35 +15,27 @@ import {
   EXCEPTIONS,
   INSPECTOR,
   OVERVIEW,
-  fullscreenOff,
-} from 'Duck/components/player';
+} from 'App/mstore/uiPlayerStore';
 import { WebNetworkPanel } from 'Shared/DevTools/NetworkPanel';
 import Storage from 'Components/Session_/Storage';
 import { ConnectedPerformance } from 'Components/Session_/Performance';
 import GraphQL from 'Components/Session_/GraphQL';
 import { Exceptions } from 'Components/Session_/Exceptions/Exceptions';
-import Inspector from 'Components/Session_/Inspector';
 import Controls from 'Components/Session_/Player/Controls';
 import Overlay from 'Components/Session_/Player/Overlay';
 import stl from 'Components/Session_/Player/player.module.css';
-import { updateLastPlayedSession } from 'Duck/sessions';
 import { OverviewPanel } from 'Components/Session_/OverviewPanel';
 import ConsolePanel from 'Shared/DevTools/ConsolePanel';
 import ProfilerPanel from 'Shared/DevTools/ProfilerPanel';
 import { PlayerContext } from 'App/components/Session/playerContext';
 import { debounce } from 'App/utils';
 import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 
 interface IProps {
   fullView: boolean;
   isMultiview?: boolean;
-  bottomBlock: number;
-  fullscreen: boolean;
-  fullscreenOff: () => any;
-  nextId: string;
-  sessionId: string;
   activeTab: string;
-  updateLastPlayedSession: (id: string) => void;
   setActiveTab: (tab: string) => void;
 }
 
@@ -63,9 +54,16 @@ export const getDefaultPanelHeight = () => {
 }
 
 function Player(props: IProps) {
+  const { uiPlayerStore, sessionStore } = useStore();
+  const nextId = sessionStore.nextId;
+  const sessionId = sessionStore.current.sessionId;
+  const updateLastPlayedSession = sessionStore.updateLastPlayedSession;
+  const fullscreenOff = uiPlayerStore.fullscreenOff;
+  const bottomBlock = uiPlayerStore.bottomBlock;
+  const fullscreen = uiPlayerStore.fullscreen;
   const defaultHeight = getDefaultPanelHeight()
   const [panelHeight, setPanelHeight] = React.useState(defaultHeight);
-  const { fullscreen, fullscreenOff, nextId, bottomBlock, activeTab, fullView } = props;
+  const { activeTab, fullView } = props;
   const playerContext = React.useContext(PlayerContext);
   const isReady = playerContext.store.get().ready;
   const screenWrapper = React.useRef<HTMLDivElement>(null);
@@ -73,7 +71,7 @@ function Player(props: IProps) {
   const [isAttached, setAttached] = React.useState(false);
 
   React.useEffect(() => {
-    props.updateLastPlayedSession(props.sessionId);
+    updateLastPlayedSession(sessionId);
     const parentElement = findDOMNode(screenWrapper.current) as HTMLDivElement | null; //TODO: good architecture
     if (parentElement && !isAttached) {
       playerContext.player.attach(parentElement);
@@ -83,7 +81,7 @@ function Player(props: IProps) {
 
   React.useEffect(() => {
     playerContext.player.scale();
-  }, [props.bottomBlock, props.fullscreen, playerContext.player, activeTab, fullView]);
+  }, [bottomBlock, fullscreen, playerContext.player, activeTab, fullView]);
 
   if (!playerContext.player) return null;
 
@@ -161,15 +159,4 @@ function Player(props: IProps) {
   );
 }
 
-export default connect(
-  (state: any) => ({
-    fullscreen: state.getIn(['components', 'player', 'fullscreen']),
-    nextId: state.getIn(['sessions', 'nextId']),
-    sessionId: state.getIn(['sessions', 'current']).sessionId,
-    bottomBlock: state.getIn(['components', 'player', 'bottomBlock']),
-  }),
-  {
-    fullscreenOff,
-    updateLastPlayedSession,
-  }
-)(observer(Player));
+export default observer(Player);
diff --git a/frontend/app/components/Session/Player/ReplayPlayer/SummaryBlock/index.tsx b/frontend/app/components/Session/Player/ReplayPlayer/SummaryBlock/index.tsx
index 5d528fada..c5a8ff254 100644
--- a/frontend/app/components/Session/Player/ReplayPlayer/SummaryBlock/index.tsx
+++ b/frontend/app/components/Session/Player/ReplayPlayer/SummaryBlock/index.tsx
@@ -1,6 +1,5 @@
 import { observer } from 'mobx-react-lite';
 import React from 'react';
-import { connect } from 'react-redux';
 
 import { useStore } from 'App/mstore';
 import { debounce } from 'App/utils';
@@ -19,22 +18,17 @@ function isTitleLine(line: string): boolean {
 
 function SummaryBlock({
   sessionId,
-  zoomEnabled,
-  zoomStartTs,
-  zoomEndTs,
-  zoomTab,
-  duration,
 }: {
   sessionId: string;
-  zoomEnabled: boolean;
-  zoomStartTs: number;
-  zoomEndTs: number;
-  zoomTab: 'overview' | 'journey' | 'issues' | 'errors';
-  duration: any;
 }) {
   const { store } = React.useContext(PlayerContext)
   const { tabStates } = store.get();
-  const { aiSummaryStore } = useStore();
+  const { aiSummaryStore, uiPlayerStore, sessionStore } = useStore();
+  const duration = sessionStore.current.durationSeconds;
+  const zoomEnabled = uiPlayerStore.timelineZoom.enabled;
+  const zoomStartTs = uiPlayerStore.timelineZoom.startTs;
+  const zoomEndTs = uiPlayerStore.timelineZoom.endTs;
+  const zoomTab = uiPlayerStore.zoomTab;
 
   React.useEffect(() => {
     debounceUpdate = debounce(
@@ -154,10 +148,4 @@ const summaryBlockStyle: React.CSSProperties = {
   padding: '1rem',
 };
 
-export default connect((state: Record<string, any>) => ({
-  zoomEnabled: state.getIn(['components', 'player']).timelineZoom.enabled,
-  zoomStartTs: state.getIn(['components', 'player']).timelineZoom.startTs,
-  zoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs,
-  zoomTab: state.getIn(['components', 'player']).zoomTab,
-  duration: state.getIn(['sessions', 'current']).durationSeconds,
-}))(observer(SummaryBlock));
+export default observer(SummaryBlock);
diff --git a/frontend/app/components/Session/Player/ReplayPlayer/useShortcuts.ts b/frontend/app/components/Session/Player/ReplayPlayer/useShortcuts.ts
index 0c7e8fdb2..44f264711 100644
--- a/frontend/app/components/Session/Player/ReplayPlayer/useShortcuts.ts
+++ b/frontend/app/components/Session/Player/ReplayPlayer/useShortcuts.ts
@@ -4,7 +4,7 @@ import { toast } from 'react-toastify';
 
 import { PlayerContext } from 'Components/Session/playerContext';
 import { SKIP_INTERVALS } from 'Components/Session_/Player/Controls/Controls';
-import { blockValues, blocks } from 'Duck/components/player';
+import { blockValues, blocks } from 'App/mstore/uiPlayerStore';
 
 function useShortcuts({
   skipInterval,
diff --git a/frontend/app/components/Session/Player/TagWatch/SaveModal.tsx b/frontend/app/components/Session/Player/TagWatch/SaveModal.tsx
index 3fa29e4ef..d612d94d7 100644
--- a/frontend/app/components/Session/Player/TagWatch/SaveModal.tsx
+++ b/frontend/app/components/Session/Player/TagWatch/SaveModal.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Checkbox, Input } from 'antd';
 import { useHistory } from 'react-router-dom';
 import { withSiteId, sessions } from 'App/routes';
-import store from 'App/store';
+import { useStore } from 'App/mstore';
 
 interface Props {
   onSave: (name: string, ignoreClRage: boolean, ignoreDeadCl: boolean) => Promise<any>;
@@ -11,6 +11,7 @@ interface Props {
 
 function SaveModal({ onSave, hideModal }: Props) {
   const history = useHistory();
+  const { projectsStore } = useStore();
   const [name, setName] = React.useState('');
   const [ignoreClRage, setIgnoreClRage] = React.useState(false);
   const [ignoreDeadCl, setIgnoreDeadCl] = React.useState(false);
@@ -22,7 +23,7 @@ function SaveModal({ onSave, hideModal }: Props) {
   const saveAndOpen = () => {
     onSave(name, ignoreClRage, ignoreDeadCl).then((tagId) => {
       hideModal();
-      const siteId = store.getState().getIn(['site', 'siteId']);
+      const siteId = projectsStore.getSiteId() as unknown as string;
       history.push(withSiteId(sessions({ tnw: `is|${tagId}`, range: 'LAST_24_HOURS' }), siteId));
     });
   };
diff --git a/frontend/app/components/Session/Session.tsx b/frontend/app/components/Session/Session.tsx
index 026ae0c7b..5e5b7b415 100644
--- a/frontend/app/components/Session/Session.tsx
+++ b/frontend/app/components/Session/Session.tsx
@@ -1,42 +1,33 @@
 import withPermissions from 'HOCs/withPermissions';
 import React from 'react';
 import { useEffect } from 'react';
-import { connect } from 'react-redux';
 
 import { clearLogs } from 'App/dev/console';
 import usePageTitle from 'App/hooks/usePageTitle';
 import { useStore } from 'App/mstore';
 import { sessions as sessionsRoute } from 'App/routes';
 import MobilePlayer from 'Components/Session/MobilePlayer';
-import { fetchList as fetchSlackList } from 'Duck/integrations/slack';
-import { clearCurrentSession, fetchV2 } from 'Duck/sessions';
 import { Link, Loader, NoContent } from 'UI';
-
+import { observer } from 'mobx-react-lite';
 import WebPlayer from './WebPlayer';
 
 const SESSIONS_ROUTE = sessionsRoute();
 
-interface Props {
-  sessionId: string;
-  loading: boolean;
-  hasErrors: boolean;
-  fetchV2: (sessionId: string) => void;
-  clearCurrentSession: () => void;
-  session: Record<string, any>;
-}
-
 function Session({
-  sessionId,
-  hasErrors,
-  fetchV2,
-  clearCurrentSession,
-  session,
-}: Props) {
+  match: {
+    params: { sessionId },
+  },
+}: { match: any }) {
   usePageTitle('OpenReplay Session Player');
   const { sessionStore } = useStore();
+  const hasErrors = sessionStore.fetchFailed
+  const session = sessionStore.current;
+  const fetchV2 = sessionStore.fetchSessionData;
+  const clearCurrentSession = sessionStore.clearCurrentSession;
+
   useEffect(() => {
     if (sessionId != null) {
-      fetchV2(sessionId);
+      void fetchV2(sessionId);
     } else {
       console.error('No sessionID in route.');
     }
@@ -73,25 +64,4 @@ function Session({
 
 export default withPermissions(
   ['SESSION_REPLAY', 'SERVICE_SESSION_REPLAY'], '', true, false
-)(
-  connect(
-    (state: any, props: any) => {
-      const {
-        match: {
-          params: { sessionId },
-        },
-      } = props;
-      return {
-        sessionId,
-        loading: state.getIn(['sessions', 'loading']),
-        hasErrors: !!state.getIn(['sessions', 'errors']),
-        session: state.getIn(['sessions', 'current']),
-      };
-    },
-    {
-      fetchSlackList,
-      fetchV2,
-      clearCurrentSession,
-    }
-  )(Session)
-);
+)(observer(Session));
diff --git a/frontend/app/components/Session/WebPlayer.tsx b/frontend/app/components/Session/WebPlayer.tsx
index b7e052140..b7829acbb 100644
--- a/frontend/app/components/Session/WebPlayer.tsx
+++ b/frontend/app/components/Session/WebPlayer.tsx
@@ -3,24 +3,22 @@ import { createWebPlayer } from 'Player';
 import { makeAutoObservable } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useState } from 'react';
-import { connect } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
+
+
 import { useStore } from 'App/mstore';
 import { Note } from 'App/services/NotesService';
-import { closeBottomBlock, toggleFullscreen } from 'Duck/components/player';
-import { fetchList } from 'Duck/integrations';
 import { Loader, Modal } from 'UI';
 
+
+
 import ReadNote from '../Session_/Player/Controls/components/ReadNote';
 import PlayerBlockHeader from './Player/ReplayPlayer/PlayerBlockHeader';
 import PlayerContent from './Player/ReplayPlayer/PlayerContent';
-import {
-  IPlayerContext,
-  PlayerContext,
-  defaultContextValue,
-} from './playerContext';
+import { IPlayerContext, PlayerContext, defaultContextValue } from './playerContext';
+
 
 const TABS = {
   EVENTS: 'Activity',
@@ -35,15 +33,13 @@ const UXTTABS = {
 let playerInst: IPlayerContext['player'] | undefined;
 
 function WebPlayer(props: any) {
-  const {
-    session,
-    toggleFullscreen,
-    closeBottomBlock,
-    fullscreen,
-    fetchList,
-    startedAt,
-  } = props;
-  const { notesStore, sessionStore, uxtestingStore } = useStore();
+  const { notesStore, sessionStore, uxtestingStore, uiPlayerStore, integrationsStore, userStore } = useStore();
+  const session = sessionStore.current;
+  const prefetched = sessionStore.prefetched;
+  const startedAt = sessionStore.current.startedAt || 0;
+  const fullscreen = uiPlayerStore.fullscreen;
+  const toggleFullscreen = uiPlayerStore.toggleFullscreen;
+  const closeBottomBlock = uiPlayerStore.closeBottomBlock;
   const [activeTab, setActiveTab] = useState('');
   const [noteItem, setNoteItem] = useState<Note | undefined>(undefined);
   const [visuallyAdjusted, setAdjusted] = useState(false);
@@ -72,14 +68,14 @@ function WebPlayer(props: any) {
     const mobData = sessionStore.prefetchedMobUrls[session.sessionId] as
       | Record<string, any>
       | undefined;
-    const usePrefetched = props.prefetched && mobData?.data;
-    fetchList('issues');
+    const usePrefetched = prefetched && mobData?.data;
+    void integrationsStore.issues.fetchIntegrations();
     sessionStore.setUserTimezone(session.timezone);
     const [WebPlayerInst, PlayerStore] = createWebPlayer(
       session,
       (state) => makeAutoObservable(state),
       toast,
-      props.prefetched
+      prefetched
     );
     if (usePrefetched) {
       if (mobData?.data) {
@@ -105,10 +101,10 @@ function WebPlayer(props: any) {
 
   const domFiles = session?.domURL?.length ?? 0
   useEffect(() => {
-    if (!props.prefetched && domFiles > 0) {
+    if (!prefetched && domFiles > 0) {
       playerInst?.reinit(session);
     }
-  }, [session, domFiles, props.prefetched]);
+  }, [session, domFiles, prefetched]);
 
   const {
     firstVisualEvent: visualOffset,
@@ -124,11 +120,14 @@ function WebPlayer(props: any) {
   React.useEffect(() => {
     if (
       messagesProcessed &&
-      (session.events.length > 0 || session.errors.length > 0)
+      (session.events.length > 0 ||
+        session.errors.length > 0 ||
+        session.stackEvents.length > 0 ||
+        session.addedEvents)
     ) {
       contextValue.player?.updateLists?.(session);
     }
-  }, [session.events, session.errors, contextValue.player, messagesProcessed]);
+  }, [session.events, session.errors, session.addedEvents, contextValue.player, messagesProcessed]);
 
   React.useEffect(() => {
     if (noteItem === undefined) {
@@ -248,21 +247,4 @@ function WebPlayer(props: any) {
   );
 }
 
-export default connect(
-  (state: any) => ({
-    session: state.getIn(['sessions', 'current']),
-    insights: state.getIn(['sessions', 'insights']),
-    prefetched: state.getIn(['sessions', 'prefetched']),
-    visitedEvents: state.getIn(['sessions', 'visitedEvents']),
-    jwt: state.getIn(['user', 'jwt']),
-    fullscreen: state.getIn(['components', 'player', 'fullscreen']),
-    showEvents: state.get('showEvents'),
-    members: state.getIn(['members', 'list']),
-    startedAt: state.getIn(['sessions', 'current']).startedAt || 0,
-  }),
-  {
-    toggleFullscreen,
-    closeBottomBlock,
-    fetchList,
-  }
-)(withLocationHandlers()(observer(WebPlayer)));
+export default withLocationHandlers()(observer(WebPlayer));
diff --git a/frontend/app/components/Session_/BottomBlock/Header.js b/frontend/app/components/Session_/BottomBlock/Header.js
index 05b361bee..18ef3fe5f 100644
--- a/frontend/app/components/Session_/BottomBlock/Header.js
+++ b/frontend/app/components/Session_/BottomBlock/Header.js
@@ -1,28 +1,31 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import cn from 'classnames';
-import { closeBottomBlock } from 'Duck/components/player';
 import { CloseButton } from 'UI';
 import stl from './header.module.css';
+import { useStore } from 'App/mstore';
 
 const Header = ({
   children,
   className,
-  closeBottomBlock,
   onFilterChange,
   showClose = true,
   customStyle,
   customClose,
   ...props
-}) => (
-  <div className={ cn("relative border-r border-l py-1", stl.header) } style={customStyle} >
-    <div className={ cn("w-full h-full flex justify-between items-center", className) } >
-      <div className="w-full flex items-center justify-between">{ children }</div>
-      { showClose && <CloseButton onClick={ customClose ? customClose : closeBottomBlock } size="18" className="ml-2" /> }
+}) => {
+  const { uiPlayerStore } = useStore();
+  const closeBottomBlock = uiPlayerStore.closeBottomBlock;
+
+  return (
+    <div className={cn("relative border-r border-l py-1", stl.header)} style={customStyle}>
+      <div className={cn("w-full h-full flex justify-between items-center", className)}>
+        <div className="w-full flex items-center justify-between">{children}</div>
+        {showClose && <CloseButton onClick={customClose ? customClose : closeBottomBlock} size="18" className="ml-2" />}
+      </div>
     </div>
-  </div>
-);
+  )
+};
 
 Header.displayName = 'Header';
 
-export default connect(null, { closeBottomBlock })(Header);
+export default Header;
diff --git a/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js b/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js
index 67a130dc9..463bd01b8 100644
--- a/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js
+++ b/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js
@@ -1,169 +1,175 @@
-import UxtEvent from "Components/Session_/EventsBlock/UxtEvent";
-import React from 'react';
-import { connect } from 'react-redux';
-import { TextEllipsis, Icon } from 'UI';
 import { TYPES } from 'Types/session/event';
+import React from 'react';
+import { observer } from 'mobx-react-lite'
+import { useStore } from 'App/mstore';
+import UxtEvent from 'Components/Session_/EventsBlock/UxtEvent';
+import { Icon, TextEllipsis } from 'UI';
+
 import Event from './Event';
-import stl from './eventGroupWrapper.module.css';
 import NoteEvent from './NoteEvent';
+import stl from './eventGroupWrapper.module.css';
 
-@connect(
-  (state) => ({
-    members: state.getIn(['members', 'list']),
-    currentUserId: state.getIn(['user', 'account', 'id'])
-  }),
-)
-class EventGroupWrapper extends React.Component {
+function EventGroupWrapper(props) {
+  const { userStore } = useStore();
+  const currentUserId = userStore.account.id;
 
-  onEventClick = (e) => this.props.onEventClick(e, this.props.event);
+  const onEventClick = (e) => props.onEventClick(e, props.event);
 
-  onCheckboxClick = (e) => this.props.onCheckboxClick(e, this.props.event);
+  const onCheckboxClick = (e) => props.onCheckboxClick(e, props.event);
 
-  render() {
-    const {
-      event,
-      isLastEvent,
-      isLastInGroup,
-      isSelected,
-      isCurrent,
-      isEditing,
-      showSelection,
-      isFirst,
-      presentInSearch,
-      isNote,
-      isTabChange,
-      filterOutNote,
-    } = this.props;
-    const isLocation = event.type === TYPES.LOCATION;
-    const isUxtEvent = event.type === TYPES.UXT_EVENT;
+  const {
+    event,
+    isLastEvent,
+    isLastInGroup,
+    isSelected,
+    isCurrent,
+    isEditing,
+    showSelection,
+    isFirst,
+    presentInSearch,
+    isNote,
+    isTabChange,
+    filterOutNote,
+  } = props;
+  const isLocation = event.type === TYPES.LOCATION;
+  const isUxtEvent = event.type === TYPES.UXT_EVENT;
 
-    const whiteBg =
-      (isLastInGroup && event.type !== TYPES.LOCATION) ||
-      (!isLastEvent && event.type !== TYPES.LOCATION);
-    const safeRef = String(event.referrer || '');
+  const whiteBg =
+    (isLastInGroup && event.type !== TYPES.LOCATION) ||
+    (!isLastEvent && event.type !== TYPES.LOCATION);
+  const safeRef = String(event.referrer || '');
 
-    const returnEvt = () => {
-      if (isUxtEvent) {
-        return (
-          <UxtEvent event={event} />
-        )
-      }
-      if (isNote) {
-        return (
-          <NoteEvent
-            note={event}
-            filterOutNote={filterOutNote}
-            noEdit={this.props.currentUserId !== event.userId}
-          />
-        )
-      }
-      if (isLocation) {
-        return (
-          <Event
-            extended={isFirst}
-            key={event.key}
-            event={event}
-            onClick={this.onEventClick}
-            selected={isSelected}
-            isCurrent={isCurrent}
-            presentInSearch={presentInSearch}
-            isLastInGroup={isLastInGroup}
-            whiteBg={true}
-          />
-        )
-      }
-      if (isTabChange) {
-        return (
-          <TabChange onClick={this.onEventClick} from={event.fromTab} to={event.toTab} activeUrl={event.activeUrl} />
-        )
-      }
+  const returnEvt = () => {
+    if (isUxtEvent) {
+      return <UxtEvent event={event} />;
+    }
+    if (isNote) {
+      return (
+        <NoteEvent
+          note={event}
+          filterOutNote={filterOutNote}
+          noEdit={currentUserId !== event.userId}
+        />
+      );
+    }
+    if (isLocation) {
       return (
         <Event
+          extended={isFirst}
           key={event.key}
           event={event}
-          onClick={this.onEventClick}
-          onCheckboxClick={this.onCheckboxClick}
+          onClick={onEventClick}
           selected={isSelected}
+          showLoadInfo={showLoadInfo}
           isCurrent={isCurrent}
-          showSelection={showSelection}
-          overlayed={isEditing}
           presentInSearch={presentInSearch}
           isLastInGroup={isLastInGroup}
-          whiteBg={whiteBg}
+          whiteBg={true}
         />
-      )
+      );
+    }
+    if (isTabChange) {
+      return (
+        <TabChange
+          onClick={onEventClick}
+          from={event.fromTab}
+          to={event.toTab}
+          activeUrl={event.activeUrl}
+        />
+      );
     }
-
-    const shadowColor = this.props.isPrev
-      ? '#A7BFFF'
-      : this.props.isCurrent ? '#394EFF' : 'transparent'
     return (
-      <>
-        <div>
+      <Event
+        key={event.key}
+        event={event}
+        onClick={onEventClick}
+        onCheckboxClick={onCheckboxClick}
+        selected={isSelected}
+        isCurrent={isCurrent}
+        showSelection={showSelection}
+        overlayed={isEditing}
+        presentInSearch={presentInSearch}
+        isLastInGroup={isLastInGroup}
+        whiteBg={whiteBg}
+      />
+    );
+  };
+
+  const shadowColor = props.isPrev
+    ? '#A7BFFF'
+    : props.isCurrent
+    ? '#394EFF'
+    : 'transparent';
+  return (
+    <>
+      <div>
+        <div
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: 1.5,
+            height: '100%',
+            backgroundColor: shadowColor,
+            zIndex: 98,
+          }}
+        />
+        {props.isCurrent ? (
           <div
             style={{
               position: 'absolute',
-              left: 0,
-              top: 0,
-              width: 1.5,
-              height: '100%',
-              backgroundColor: shadowColor,
-              zIndex: 98,
+              top: '50%',
+              left: -10,
+              width: 10,
+              height: 10,
+              transform: 'rotate(45deg) translate(0, -50%)',
+              background: '#394EFF',
+              zIndex: 99,
+              borderRadius: '.15rem',
             }}
           />
-          {this.props.isCurrent ? (
-            <div
-             style={{
-               position: 'absolute',
-               top: '50%',
-               left: -10,
-               width: 10,
-               height: 10,
-               transform: 'rotate(45deg) translate(0, -50%)',
-               background: '#394EFF',
-               zIndex: 99,
-               borderRadius: '.15rem',
-            }}
-            />
-          ) : null}
-          {isFirst && isLocation && event.referrer && (
-            <TextEllipsis>
-              <div className={stl.referrer}>
-                Referrer: <span className={stl.url}>{safeRef}</span>
-              </div>
-            </TextEllipsis>
-          )}
-          {returnEvt()}
-        </div>
-        {(isLastInGroup && !isTabChange) && <div className='border-color-gray-light-shade' />}
-      </>
-    );
-  }
+        ) : null}
+        {isFirst && isLocation && event.referrer && (
+          <TextEllipsis>
+            <div className={stl.referrer}>
+              Referrer: <span className={stl.url}>{safeRef}</span>
+            </div>
+          </TextEllipsis>
+        )}
+        {returnEvt()}
+      </div>
+      {isLastInGroup && !isTabChange && (
+        <div className="border-color-gray-light-shade" />
+      )}
+    </>
+  );
 }
 
 function TabChange({ from, to, activeUrl, onClick }) {
-    if (!from) {
-        return null;
-    }
-    return (
-        <div
-            onClick={onClick}
-            className={'cursor-pointer bg-gray-lightest w-full py-2 border-b hover:bg-active-blue'}
-        >
-            <div className={'flex items-center gap-2 px-4'}>
-              <span style={{ fontWeight: 500 }}>
-                {from}
-              </span>
-              <Icon name={"arrow-right-short"} size={18} color={"gray-dark"}/>
-              <span style={{ fontWeight: 500 }}>
-                {to}
-              </span>
-            </div>
-            <div className={'break-words mt-1 px-4 text-sm font-normal color-gray-medium whitespace-nowrap'}>
-                {activeUrl}
-            </div>
-        </div>
-    )
+  if (!from) {
+    return null;
+  }
+  return (
+    <div
+      onClick={onClick}
+      className={
+        'cursor-pointer bg-gray-lightest w-full py-2 border-b hover:bg-active-blue'
+      }
+    >
+      <div className={'flex items-center gap-2 px-4'}>
+        <span style={{ fontWeight: 500 }}>{from}</span>
+        <Icon name={'arrow-right-short'} size={18} color={'gray-dark'} />
+        <span style={{ fontWeight: 500 }}>{to}</span>
+      </div>
+      <div
+        className={
+          'break-words mt-1 px-4 text-sm font-normal color-gray-medium whitespace-nowrap'
+        }
+      >
+        {activeUrl}
+      </div>
+    </div>
+  );
 }
 
-export default React.memo(EventGroupWrapper);
+export default observer(EventGroupWrapper);
diff --git a/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx b/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx
index 79045ebde..e322e48fb 100644
--- a/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx
+++ b/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx
@@ -1,16 +1,12 @@
-import Session, { mergeEventLists, sortEvents } from 'Types/session';
+import { mergeEventLists, sortEvents } from 'Types/session';
 import { TYPES } from 'Types/session/event';
-import { InjectedEvent } from 'Types/session/event';
 import cn from 'classnames';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
-import { connect } from 'react-redux';
 import { VList, VListHandle } from 'virtua';
 
 import { PlayerContext } from 'App/components/Session/playerContext';
-import { RootStore } from 'App/duck';
 import { useStore } from 'App/mstore';
-import { filterOutNote, setEventFilter } from 'Duck/sessions';
 import { Icon } from 'UI';
 
 import EventGroupWrapper from './EventGroupWrapper';
@@ -18,25 +14,24 @@ import EventSearch from './EventSearch/EventSearch';
 import styles from './eventsBlock.module.css';
 
 interface IProps {
-  setEventFilter: (filter: { query: string }) => void;
-  filteredEvents: InjectedEvent[];
   setActiveTab: (tab?: string) => void;
-  query: string;
-  events: Session['events'];
-  notesWithEvents: Session['notesWithEvents'];
-  filterOutNote: (id: string) => void;
-  eventsIndex: number[];
-  uxtVideo: string;
-  zoomEnabled: boolean;
-  zoomStartTs: number;
-  zoomEndTs: number;
 }
 
 function EventsBlock(props: IProps) {
-  const { notesStore, uxtestingStore } = useStore();
+  const { notesStore, uxtestingStore, uiPlayerStore, sessionStore } = useStore();
+  const session = sessionStore.current;
+  const notesWithEvents = session.notesWithEvents;
+  const uxtVideo = session.uxtVideo;
+  const filteredEvents = sessionStore.filteredEvents;
+  const query = sessionStore.eventsQuery;
+  const eventsIndex = sessionStore.eventsIndex;
+  const setEventFilter = sessionStore.setEventQuery;
+  const filterOutNote = sessionStore.filterOutNote;
   const [mouseOver, setMouseOver] = React.useState(false);
   const scroller = React.useRef<VListHandle>(null);
-
+  const zoomEnabled = uiPlayerStore.timelineZoom.enabled;
+  const zoomStartTs = uiPlayerStore.timelineZoom.startTs;
+  const zoomEndTs = uiPlayerStore.timelineZoom.endTs;
   const { store, player } = React.useContext(PlayerContext);
 
   const {
@@ -48,12 +43,7 @@ function EventsBlock(props: IProps) {
   } = store.get();
 
   const {
-    filteredEvents,
-    eventsIndex,
-    filterOutNote,
-    query,
     setActiveTab,
-    notesWithEvents = [],
   } = props;
   const notes = notesStore.sessionNotes;
 
@@ -88,9 +78,9 @@ function EventsBlock(props: IProps) {
       filteredLength > 0 ? filteredEvents : eventsWithMobxNotes,
       tabChangeEvents
     ).filter((e) =>
-      props.zoomEnabled
+      zoomEnabled
         ? 'time' in e
-          ? e.time >= props.zoomStartTs && e.time <= props.zoomEndTs
+          ? e.time >= zoomStartTs && e.time <= zoomEndTs
           : false
         : true
     );
@@ -98,9 +88,9 @@ function EventsBlock(props: IProps) {
     filteredLength,
     notesWithEvtsLength,
     notesLength,
-    props.zoomEnabled,
-    props.zoomStartTs,
-    props.zoomEndTs,
+    zoomEnabled,
+    zoomStartTs,
+    zoomEndTs,
   ]);
   const findLastFitting = React.useCallback(
     (time: number) => {
@@ -130,7 +120,7 @@ function EventsBlock(props: IProps) {
   const write = ({
     target: { value },
   }: React.ChangeEvent<HTMLInputElement>) => {
-    props.setEventFilter({ query: value });
+    setEventFilter({ query: value });
 
     setTimeout(() => {
       if (!scroller.current) return;
@@ -140,7 +130,7 @@ function EventsBlock(props: IProps) {
   };
 
   const clearSearch = () => {
-    props.setEventFilter({ query: '' });
+    setEventFilter({ query: '' });
 
     setTimeout(() => {
       if (!scroller.current) return;
@@ -164,7 +154,7 @@ function EventsBlock(props: IProps) {
 
   const onEventClick = (_: React.MouseEvent, event: { time: number }) => {
     player.jump(event.time);
-    props.setEventFilter({ query: '' });
+    setEventFilter({ query: '' });
   };
   const onMouseOver = () => setMouseOver(true);
   const onMouseLeave = () => setMouseOver(false);
@@ -214,7 +204,7 @@ function EventsBlock(props: IProps) {
               muted
               autoPlay
               controls
-              src={props.uxtVideo}
+              src={uxtVideo}
               width={240}
             />
             <div
@@ -266,21 +256,4 @@ function EventsBlock(props: IProps) {
   );
 }
 
-export default connect(
-  (state: RootStore) => ({
-    session: state.getIn(['sessions', 'current']),
-    notesWithEvents: state.getIn(['sessions', 'current']).notesWithEvents,
-    events: state.getIn(['sessions', 'current']).events,
-    uxtVideo: state.getIn(['sessions', 'current']).uxtVideo,
-    filteredEvents: state.getIn(['sessions', 'filteredEvents']),
-    query: state.getIn(['sessions', 'eventsQuery']),
-    eventsIndex: state.getIn(['sessions', 'eventsIndex']),
-    zoomEnabled: state.getIn(['components', 'player']).timelineZoom.enabled,
-    zoomStartTs: state.getIn(['components', 'player']).timelineZoom.startTs,
-    zoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs,
-  }),
-  {
-    setEventFilter,
-    filterOutNote,
-  }
-)(observer(EventsBlock));
+export default observer(EventsBlock);
diff --git a/frontend/app/components/Session_/EventsBlock/Metadata/Metadata.js b/frontend/app/components/Session_/EventsBlock/Metadata/Metadata.js
index ca0a953a2..055019286 100644
--- a/frontend/app/components/Session_/EventsBlock/Metadata/Metadata.js
+++ b/frontend/app/components/Session_/EventsBlock/Metadata/Metadata.js
@@ -1,25 +1,26 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import MetadataItem from './MetadataItem';
+import { useStore } from "App/mstore";
+import { observer } from 'mobx-react-lite';
 
-export default connect(state => ({
-  metadata: state.getIn([ 'sessions', 'current' ]).metadata,
-}))(function Metadata ({ metadata }) {
+function Metadata () {
+  const { sessionStore } = useStore();
+  const metadata = sessionStore.current.metadata;
 
-  const metaLenth = Object.keys(metadata).length;
-
-  if (metaLenth === 0) {
+  const metaLength = Object.keys(metadata).length;
+  if (metaLength === 0) {
     return (
       (<span className="text-sm color-gray-medium">Check <a href="https://docs.openreplay.com/installation/metadata" target="_blank" className="link">how to use Metadata</a> if you haven’t yet done so.</span>)
     )
   }
   return (
-      <div>
-        { Object.keys(metadata).map((key) => {
-          // const key = Object.keys(i)[0]
-          const value = metadata[key]
-          return <MetadataItem item={ { value, key } } key={ key } />
-        }) }
+    <div>
+      { Object.keys(metadata).map((key) => {
+        const value = metadata[key]
+        return <MetadataItem item={ { value, key } } key={ key } />
+      }) }
     </div>
   );
-});
+}
+
+export default observer(Metadata)
\ No newline at end of file
diff --git a/frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js b/frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js
index 886db62a8..2aba32ace 100644
--- a/frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js
+++ b/frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js
@@ -1,60 +1,57 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 import { NoContent, Icon, Loader } from 'UI';
 import Session from 'Types/session';
 import SessionItem from 'Shared/SessionItem';
 import stl from './sessionList.module.css';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
-@connect((state) => ({
-    currentSessionId: state.getIn(['sessions', 'current']).sessionId,
-}))
-class SessionList extends React.PureComponent {
-    render() {
-        const { similarSessions, loading, currentSessionId } = this.props;
+function SessionList({ similarSessions, loading }) {
+  const { sessionStore } = useStore();
+  const currentSessionId = sessionStore.current.sessionId;
 
-        const similarSessionWithoutCurrent = similarSessions
-            .map(({ sessions, ...rest }) => {
-                return {
-                    ...rest,
-                    sessions: sessions.map(s => new Session(s)).filter(({ sessionId }) => sessionId !== currentSessionId),
-                };
-            })
-            .filter((site) => site.sessions.length > 0);
+  const similarSessionWithoutCurrent = similarSessions
+    .map(({ sessions, ...rest }) => {
+      return {
+        ...rest,
+        sessions: sessions.map(s => new Session(s)).filter(({ sessionId }) => sessionId !== currentSessionId),
+      };
+    })
+    .filter((site) => site.sessions.length > 0);
 
-        return (
-            <Loader loading={loading}>
-                <NoContent
-                    show={!loading && (similarSessionWithoutCurrent.length === 0 || similarSessionWithoutCurrent.size === 0)}
-                    title={
-                        <div className="flex items-center justify-center flex-col">
-                            <AnimatedSVG name={ICONS.NO_SESSIONS} size={60} />
-                            <div className="mt-2" />
-                            <div className="text-center text-gray-600">No sessions found</div>
-                        </div>
-                    }
-                >
-                    <div className={stl.sessionList}>
-                        {similarSessionWithoutCurrent.map((site) => (
-                            <div className={stl.siteWrapper} key={site.host}>
-                                <div className={stl.siteHeader}>
-                                    <Icon name="window" size="14" color="gray-medium" marginRight="10" />
-                                    <span>{site.name}</span>
-                                </div>
-                                <div className="bg-white p-3 rounded border">
-                                    {site.sessions.map((session) => (
-                                        <div className="border-b last:border-none">
-                                            <SessionItem key={session.sessionId} session={session} />
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-                        ))}
-                    </div>
-                </NoContent>
-            </Loader>
-        );
-    }
+  return (
+    <Loader loading={loading}>
+      <NoContent
+        show={!loading && (similarSessionWithoutCurrent.length === 0 || similarSessionWithoutCurrent.size === 0)}
+        title={
+          <div className="flex items-center justify-center flex-col">
+            <AnimatedSVG name={ICONS.NO_SESSIONS} size={60} />
+            <div className="mt-2" />
+            <div className="text-center text-gray-600">No sessions found</div>
+          </div>
+        }
+      >
+        <div className={stl.sessionList}>
+          {similarSessionWithoutCurrent.map((site) => (
+            <div className={stl.siteWrapper} key={site.host}>
+              <div className={stl.siteHeader}>
+                <Icon name="window" size="14" color="gray-medium" marginRight="10" />
+                <span>{site.name}</span>
+              </div>
+              <div className="bg-white p-3 rounded border">
+                {site.sessions.map((session) => (
+                  <div className="border-b last:border-none">
+                    <SessionItem key={session.sessionId} session={session} />
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </NoContent>
+    </Loader>
+  );
 }
 
-export default SessionList;
+export default observer(SessionList);
diff --git a/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js b/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js
index bda25ad88..bcefdda85 100644
--- a/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js
+++ b/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { List } from 'immutable';
 import { countries } from 'App/constants';
 import { useStore } from 'App/mstore';
@@ -11,9 +10,11 @@ import { withRequest } from 'HOCs';
 import SessionInfoItem from '../../SessionInfoItem';
 import { useModal } from 'App/components/Modal';
 import UserSessionsModal from 'Shared/UserSessionsModal';
+import { observer } from 'mobx-react-lite';
 
-function UserCard({ className, request, session, width, height, similarSessions, loading }) {
-    const { settingsStore } = useStore();
+function UserCard({ className, width, height }) {
+    const { settingsStore, sessionStore } = useStore();
+    const session = sessionStore.current;
     const { timezone } = settingsStore.sessionSettings;
 
     const {
@@ -53,7 +54,6 @@ function UserCard({ className, request, session, width, height, similarSessions,
                     <TextEllipsis
                         noHint
                         className={cn('font-medium', { 'color-teal cursor-pointer': hasUserDetails })}
-                        // onClick={hasUserDetails ? showSimilarSessions : undefined}
                     >
                         <UserName name={userDisplayName} userId={userId} hash={userNumericHash} />
                     </TextEllipsis>
@@ -104,14 +104,7 @@ function UserCard({ className, request, session, width, height, similarSessions,
     );
 }
 
-const component = React.memo(connect((state) => ({ session: state.getIn(['sessions', 'current']) }))(UserCard));
-
-export default withRequest({
-    initialData: List(),
-    endpoint: '/metadata/session_search',
-    dataWrapper: (data) => Object.values(data),
-    dataName: 'similarSessions',
-})(component);
+export default observer(UserCard);
 
 // inner component
 function UserName({ name, userId, hash }) {
diff --git a/frontend/app/components/Session_/Exceptions/Exceptions.tsx b/frontend/app/components/Session_/Exceptions/Exceptions.tsx
index 0f97d921e..c62732b0a 100644
--- a/frontend/app/components/Session_/Exceptions/Exceptions.tsx
+++ b/frontend/app/components/Session_/Exceptions/Exceptions.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { getRE } from 'App/utils';
 import {
   NoContent,
@@ -12,6 +11,7 @@ import {
   QuestionMarkHint,
 } from 'UI';
 import { error as errorRoute } from 'App/routes';
+import { useStore } from "App/mstore";
 import Autoscroll from '../Autoscroll';
 import BottomBlock from '../BottomBlock';
 import { MobilePlayerContext, PlayerContext } from 'App/components/Session/playerContext';
@@ -68,7 +68,11 @@ function MobileExceptionsCont() {
   );
 }
 
-function ExceptionsCont({ errorStack, sourcemapUploaded, loading }: IProps) {
+function ExceptionsCont() {
+  const { sessionStore } = useStore();
+  const errorStack = sessionStore.errorStack;
+  const sourcemapUploaded = sessionStore.sourcemapUploaded;
+  const loading = sessionStore.loadingSessionData;
   const { player, store } = React.useContext(PlayerContext);
   const { tabStates, currentTab } = store.get();
   const { logListNow: logs = [], exceptionsList: exceptions = [] } = tabStates[currentTab]
@@ -164,10 +168,6 @@ function ExceptionsCont({ errorStack, sourcemapUploaded, loading }: IProps) {
   );
 }
 
-export const Exceptions = connect((state: any) => ({
-  errorStack: state.getIn(['sessions', 'errorStack']),
-  sourcemapUploaded: state.getIn(['sessions', 'sourcemapUploaded']),
-  loading: state.getIn(['sessions', 'fetchErrorStackList', 'loading']),
-}))(observer(ExceptionsCont));
+export const Exceptions = observer(ExceptionsCont);
 
 export const MobileExceptions = observer(MobileExceptionsCont)
\ No newline at end of file
diff --git a/frontend/app/components/Session_/Issues/ActiveIssueClose.js b/frontend/app/components/Session_/Issues/ActiveIssueClose.js
deleted file mode 100644
index c51bd326e..000000000
--- a/frontend/app/components/Session_/Issues/ActiveIssueClose.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { Button } from 'UI';
-import { resetActiveIsue } from 'Duck/issues';
-
-const ActiveIssueClose = ({ resetActiveIsue }) => {
-    return (
-        <div className="absolute right-0 top-0 mr-4 mt-4">
-            <Button
-                variant="text"
-                onClick={ resetActiveIsue }
-            >
-                Close
-            </Button>
-        </div>
-    );
-};
-
-export default connect(null, {
-    resetActiveIsue
-})(ActiveIssueClose);
diff --git a/frontend/app/components/Session_/Issues/ActivityList.js b/frontend/app/components/Session_/Issues/ActivityList.js
deleted file mode 100644
index 361477d54..000000000
--- a/frontend/app/components/Session_/Issues/ActivityList.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-
-class ActivityList extends React.Component {
-  render() {
-    return (
-      <div>
-        Hello
-      </div>
-    );
-  }
-}
-
-export default ActivityList;
diff --git a/frontend/app/components/Session_/Issues/AuthoAvatar.js b/frontend/app/components/Session_/Issues/AuthoAvatar.js
deleted file mode 100644
index 59ce52864..000000000
--- a/frontend/app/components/Session_/Issues/AuthoAvatar.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-
-const AuthorAvatar = ({ className, imgUrl, width = 32, height = 32 }) => {
-    return (
-        <div className={ cn(className, "img-crcle")}>
-            <img src={ imgUrl } alt="" width={ width } height={ height } />
-        </div>
-    );
-};
-
-export default AuthorAvatar;
diff --git a/frontend/app/components/Session_/Issues/ContentRender.js b/frontend/app/components/Session_/Issues/ContentRender.js
deleted file mode 100644
index c09b0b517..000000000
--- a/frontend/app/components/Session_/Issues/ContentRender.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import React from 'react';
-
-import { CodeBlock } from 'UI';
-
-import stl from './contentRender.module.css';
-
-const elType = {
-  PARAGRAPH: 'paragraph',
-  TEXT: 'text',
-  QUOTE: 'blockquote',
-  CODE_BLOCK: 'codeBlock',
-  MENTION: 'mention',
-  RULE: 'rule',
-  HARD_BREAK: 'hardBreak',
-};
-
-const renderElement = (el, provider) => {
-  if (provider === 'github') return el;
-
-  switch (el.type) {
-    case elType.PARAGRAPH:
-      return (
-        <p className={stl.para}>
-          <ContentRender message={el} />
-        </p>
-      );
-    case elType.QUOTE:
-      return (
-        <blockquote className={stl.quote}>
-          <ContentRender message={el} />
-        </blockquote>
-      );
-    case elType.CODE_BLOCK:
-      return (
-        <CodeBlock
-          code={codeRender(el.content)[0]}
-          language={el.attrs.language || ''}
-        />
-      );
-    // return <CodeMirror
-    //     className={ stl.codeMirror }
-    //     value={ codeRender(el.content)[0] }
-    //     options={{
-    //         mode: el.attrs.language || '',
-    //         theme: 'material',
-    //         lineNumbers: true,
-    //         readOnly: true,
-    //         showCursorWhenSelecting: false,
-    //         scroll: true
-    //     }}
-    // />
-    case elType.MENTION:
-      return <span className={stl.mention}>{`@${el.attrs.text}`}</span>;
-    case elType.RULE:
-      return <hr className={stl.rule} />;
-    case elType.HARD_BREAK:
-      return <br />;
-    case elType.RULE:
-      return <hr className={stl.rule} />;
-    case elType.TEXT:
-      return el.text;
-  }
-  return <ContentRender key={el.text} message={el} />;
-};
-
-const codeRender = (content) => content.map((el) => el.text);
-
-const ContentRender = (props) => {
-  const { message, provider } = props;
-  return (
-    <React.Fragment>
-      {provider === 'github'
-        ? message
-        : message &&
-          message.content &&
-          message.content.map((el) => (
-            <React.Fragment>{renderElement(el, provider)}</React.Fragment>
-          ))}
-    </React.Fragment>
-  );
-};
-
-export default ContentRender;
diff --git a/frontend/app/components/Session_/Issues/IssueComment.js b/frontend/app/components/Session_/Issues/IssueComment.js
deleted file mode 100644
index a3071ff82..000000000
--- a/frontend/app/components/Session_/Issues/IssueComment.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { checkRecentTime } from 'App/date';
-import AuthorAvatar from './AuthoAvatar';
-import ContentRender from './ContentRender';
-
-const IssueComment = ({ activity, provider }) => {
-  return (
-    <div className="mb-4 flex">
-      <AuthorAvatar
-        className="flex-shrink-0 mr-4"
-        imgUrl={ activity.user && activity.user.avatarUrls['24x24'] }
-        width={24}
-        height={24}
-      />
-      <div className="flex flex-col flex-1 mb-2">
-        <div className="flex">
-          <span className="font-medium mr-3">{ activity.user && activity.user.name }</span>
-          <span className="text-sm ">{ activity.createdAt && checkRecentTime(activity.createdAt) }</span>
-        </div>
-        <div>{ <ContentRender message={ activity.message } provider={provider} /> }</div>
-      </div>
-    </div>
-  );
-};
-
-export default IssueComment;
diff --git a/frontend/app/components/Session_/Issues/IssueCommentForm.js b/frontend/app/components/Session_/Issues/IssueCommentForm.js
deleted file mode 100644
index ac688205b..000000000
--- a/frontend/app/components/Session_/Issues/IssueCommentForm.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { Input, Button, Form } from 'UI';
-import { addMessage } from 'Duck/assignments';
-
-class IssueCommentForm extends React.PureComponent {
-  state = { comment: '' }
-
-  write = (e) => {
-    e.stopPropagation();
-    const { target: { name, value } } = e
-    this.setState({ comment: value });
-  }
-
-  addComment = () => {
-    const { comment } = this.state;
-    const { sessionId, issueId, addMessage, loading } = this.props;
-    if (loading) return;
-    
-    addMessage(sessionId, issueId, { message: comment, type: 'message' }).then(() => {
-      this.setState({comment: ''});
-    })
-  }
-
-  render() {
-    const { comment } = this.state;
-    const { loading } = this.props;
-
-    return (
-      <div className="p-6 bg-white">
-        <h5 className="mb-1">Add Comment</h5>
-        <Form onSubmit={ this.addComment }>
-          <div className="flex mt-2 items-center">
-            <Input
-              onChange={ this.write }
-              value={ comment }
-              fluid
-              placeholder="Type here"
-              className="flex-1 mr-3"
-            />
-            <Button
-              disabled={ comment.length === 0 }
-              variant="primary"
-              loading={ loading }>{'Comment'}</Button>
-          </div>
-        </Form>
-      </div>
-    );
-  }
-};
-
-export default connect(state => ({
-  loading: state.getIn(['assignments', 'addMessage', 'loading'])
-}), { addMessage })(IssueCommentForm)
diff --git a/frontend/app/components/Session_/Issues/IssueDescription.js b/frontend/app/components/Session_/Issues/IssueDescription.js
deleted file mode 100644
index 9087df233..000000000
--- a/frontend/app/components/Session_/Issues/IssueDescription.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import ContentRender from './ContentRender';
-
-const IssueDescription = ({ className, description, provider }) => {
-    return (
-        <div className={ className }>
-            <h5 className="mb-4">Description</h5>
-            <ContentRender message={ description } provider={provider} />
-        </div>
-    );
-};
-
-export default IssueDescription;
diff --git a/frontend/app/components/Session_/Issues/IssueDetails.js b/frontend/app/components/Session_/Issues/IssueDetails.js
deleted file mode 100644
index f2f8f5d0c..000000000
--- a/frontend/app/components/Session_/Issues/IssueDetails.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import { connect } from 'react-redux';
-import React from 'react';
-import cn from 'classnames';
-import { Loader } from 'UI';
-import IssueHeader from './IssueHeader';
-import IssueCommentForm from './IssueCommentForm';
-import IssueComment from './IssueComment';
-import stl from './issueDetails.module.css';
-import IssueDescription from './IssueDescription';
-
-class IssueDetails extends React.PureComponent {
-  state =  { searchQuery: ''}
-
-  write = (e, { name, value }) => this.setState({ [ name ]: value });
-
-  render() {
-    const { sessionId, issue, loading, users, issueTypeIcons, issuesIntegration } = this.props;
-    const activities = issue.activities;
-    const provider = issuesIntegration.provider;
-    const assignee = users.filter(({id}) => issue.assignee === id).first();
-
-    return (
-      <div className="flex flex-col">
-        <Loader loading={ loading }>
-          <div>
-            <IssueHeader
-              issue={ issue }
-              typeIcon={ issueTypeIcons[issue.issueType] }
-              assignee={ assignee }
-              onSearchComment={ this.write }
-            />
-            <div className={ cn( stl.activitiesList, 'p-6') }>
-              <IssueDescription
-                className="mb-10"
-                description={ issue.description }
-                provider={provider}
-              />
-              
-              { activities.size > 0 && <h5 className="mb-4">Comments</h5>}
-              { activities.map(activity => (
-                <IssueComment activity={ activity } key={activity.key} provider={provider} />
-              ))}
-            </div>
-            <IssueCommentForm sessionId={ sessionId } issueId={ issue.id } />
-          </div>
-        </Loader>
-      </div>
-    );
-  }
-}
-
-export default connect(state => ({
-  users: state.getIn(['assignments', 'users']),
-  loading: state.getIn(['assignments', 'fetchAssignment', 'loading']),
-  issueTypeIcons: state.getIn(['assignments', 'issueTypeIcons']),
-  issuesIntegration: state.getIn([ 'issues', 'list'])[0] || {},
-}))(IssueDetails);
diff --git a/frontend/app/components/Session_/Issues/IssueForm.js b/frontend/app/components/Session_/Issues/IssueForm.js
index 248fd478c..f83e6b79a 100644
--- a/frontend/app/components/Session_/Issues/IssueForm.js
+++ b/frontend/app/components/Session_/Issues/IssueForm.js
@@ -1,182 +1,178 @@
+import { observer } from 'mobx-react-lite';
 import React from 'react';
-import { connect } from 'react-redux';
-import { Form, Input, Button, CircularLoader, Loader } from 'UI';
-import { addActivity, init, edit, fetchAssignments, fetchMeta } from 'Duck/assignments';
+
+import { useStore } from 'App/mstore';
+import { Button, CircularLoader, Form, Input, Loader } from 'UI';
+
 import Select from 'Shared/Select';
 
 const SelectedValue = ({ icon, text }) => {
   return (
     <div className="flex items-center">
-      {/* <img className="mr-2" src={ icon } width="13" height="13" /> */}
       {icon}
       <span>{text}</span>
     </div>
   );
 };
 
-class IssueForm extends React.PureComponent {
-  componentDidMount() {
-    const { projects, issueTypes } = this.props;
-    this.props.init({
+function IssueForm(props) {
+  const { closeHandler } = props;
+  const { issueReportingStore } = useStore();
+  const creating = issueReportingStore.createLoading;
+  const projects = issueReportingStore.projects;
+  const projectsLoading = issueReportingStore.projectsLoading;
+  const users = issueReportingStore.users;
+  const instance = issueReportingStore.instance;
+  const metaLoading = issueReportingStore.metaLoading;
+  const issueTypes = issueReportingStore.issueTypes;
+  const addActivity = issueReportingStore.saveIssue;
+  const init = issueReportingStore.init;
+  const edit = issueReportingStore.editInstance;
+  const fetchMeta = issueReportingStore.fetchMeta;
+
+  React.useEffect(() => {
+    init({
       projectId: projects[0] ? projects[0].id : '',
       issueType: issueTypes[0] ? issueTypes[0].id : '',
     });
-  }
+  }, []);
 
-  componentWillReceiveProps(newProps) {
-    const { instance } = this.props;
-    if (newProps.instance.projectId && newProps.instance.projectId != instance.projectId) {
-      this.props.fetchMeta(newProps.instance.projectId).then(() => {
-        this.props.edit({ issueType: '', assignee: '', projectId: newProps.instance.projectId });
+  React.useEffect(() => {
+    if (instance?.projectId) {
+      fetchMeta(instance?.projectId).then(() => {
+        edit({
+          issueType: '',
+          assignee: '',
+          projectId: instance?.projectId,
+        });
       });
     }
-  }
+  }, [instance?.projectId]);
 
-  onSubmit = () => {
-    const { sessionId, addActivity } = this.props;
-    const { instance } = this.props;
-
-    addActivity(sessionId, instance.toJS()).then(() => {
-      const { errors } = this.props;
+  const onSubmit = () => {
+    const { sessionId } = props;
+    addActivity(sessionId, instance).then(() => {
+      const { errors } = props;
       if (!errors || errors.length === 0) {
-        this.props.init({ projectId: instance.projectId });
-        this.props.fetchAssignments(sessionId);
-        this.props.closeHandler();
+        init({ projectId: instance?.projectId });
+        void issueReportingStore.fetchList(sessionId);
+        closeHandler();
       }
     });
   };
 
-  write = (e) => {
+  const write = (e) => {
     const {
       target: { name, value },
     } = e;
-    this.props.edit({ [name]: value });
+    edit({ [name]: value });
   };
-  writeOption = ({ name, value }) => this.props.edit({ [name]: value.value });
 
-  render() {
-    const {
-      creating,
-      projects,
-      users,
-      issueTypes,
-      instance,
-      closeHandler,
-      metaLoading,
-      projectsLoading,
-    } = this.props;
-    const projectOptions = projects.map(({ name, id }) => ({ label: name, value: id })).toArray();
-    const userOptions = users.map(({ name, id }) => ({ label: name, value: id })).toArray();
+  const writeOption = ({ name, value }) => edit({ [name]: value.value });
+  const projectOptions = projects.map(({ name, id }) => ({
+    label: name,
+    value: id,
+  }));
+  const userOptions = users.map(({ name, id }) => ({ label: name, value: id }));
 
-    const issueTypeOptions = issueTypes.map(({ name, id, iconUrl, color }) => {
-      return { label: name, value: id, iconUrl, color };
-    });
+  const issueTypeOptions = issueTypes.map(({ name, id, iconUrl, color }) => {
+    return { label: name, value: id, iconUrl, color };
+  });
 
-    const selectedIssueType = issueTypes.filter((issue) => issue.id == instance.issueType)[0];
+  const selectedIssueType = issueTypes.filter(
+    (issue) => issue.id == instance?.issueType
+  )[0];
 
-    return (
-      <Loader loading={projectsLoading} size={40}>
-        <Form onSubmit={this.onSubmit} className="text-left">
-          <Form.Field className="mb-15-imp">
-            <label htmlFor="issueType" className="flex items-center">
-              <span className="mr-2">Project</span>
-              <CircularLoader loading={metaLoading} />
-            </label>
-            <Select
-              name="projectId"
-              options={projectOptions}
-              defaultValue={instance.projectId}
-              fluid
-              onChange={this.writeOption}
-              placeholder="Project"
-            />
-          </Form.Field>
-          <Form.Field className="mb-15-imp">
-            <label htmlFor="issueType">Issue Type</label>
-            <Select
-              selection
-              name="issueType"
-              labeled
-              options={issueTypeOptions}
-              defaultValue={instance.issueType}
-              fluid
-              onChange={this.writeOption}
-              placeholder="Select issue type"
-              text={
-                selectedIssueType ? (
-                  <SelectedValue icon={selectedIssueType.iconUrl} text={selectedIssueType.name} />
-                ) : (
-                  ''
-                )
-              }
-            />
-          </Form.Field>
+  return (
+    <Loader loading={projectsLoading} size={40}>
+      <Form onSubmit={onSubmit} className="text-left">
+        <Form.Field className="mb-15-imp">
+          <label htmlFor="issueType" className="flex items-center">
+            <span className="mr-2">Project</span>
+            <CircularLoader loading={metaLoading} />
+          </label>
+          <Select
+            name="projectId"
+            options={projectOptions}
+            defaultValue={instance?.projectId}
+            fluid
+            onChange={writeOption}
+            placeholder="Project"
+          />
+        </Form.Field>
+        <Form.Field className="mb-15-imp">
+          <label htmlFor="issueType">Issue Type</label>
+          <Select
+            selection
+            name="issueType"
+            labeled
+            options={issueTypeOptions}
+            defaultValue={instance?.issueType}
+            fluid
+            onChange={writeOption}
+            placeholder="Select issue type"
+            text={
+              selectedIssueType ? (
+                <SelectedValue
+                  icon={selectedIssueType.iconUrl}
+                  text={selectedIssueType.name}
+                />
+              ) : (
+                ''
+              )
+            }
+          />
+        </Form.Field>
 
-          <Form.Field className="mb-15-imp">
-            <label htmlFor="assignee">Assignee</label>
-            <Select
-              selection
-              name="assignee"
-              options={userOptions}
-              fluid
-              onChange={this.writeOption}
-              placeholder="Select a user"
-            />
-          </Form.Field>
+        <Form.Field className="mb-15-imp">
+          <label htmlFor="assignee">Assignee</label>
+          <Select
+            selection
+            name="assignee"
+            options={userOptions}
+            fluid
+            onChange={writeOption}
+            placeholder="Select a user"
+          />
+        </Form.Field>
 
-          <Form.Field className="mb-15-imp">
-            <label htmlFor="title">Summary</label>
-            <Input
-              name="title"
-              value={instance.title}
-              placeholder="Issue Title / Summary"
-              onChange={this.write}
-            />
-          </Form.Field>
+        <Form.Field className="mb-15-imp">
+          <label htmlFor="title">Summary</label>
+          <Input
+            name="title"
+            value={instance?.title}
+            placeholder="Issue Title / Summary"
+            onChange={write}
+          />
+        </Form.Field>
 
-          <Form.Field className="mb-15-imp">
-            <label htmlFor="description">
-              Description
-              {/* <span className="text-sm text-gray-500">(Optional)</span> */}
-            </label>
-            <textarea
-              name="description"
-              rows="2"
-              value={instance.description}
-              placeholder="E.g. Found this issue at 3:29secs"
-              onChange={this.write}
-              className="text-area"
-            />
-          </Form.Field>
+        <Form.Field className="mb-15-imp">
+          <label htmlFor="description">Description</label>
+          <textarea
+            name="description"
+            rows="2"
+            value={instance?.description}
+            placeholder="E.g. Found this issue at 3:29secs"
+            onChange={write}
+            className="text-area"
+          />
+        </Form.Field>
 
-          <Button
-            loading={creating}
-            variant="primary"
-            disabled={!instance.isValid}
-            className="float-left mr-2"
-            type="submit"
-          >
-            {'Create'}
-          </Button>
-          <Button type="button" onClick={closeHandler}>
-            {'Cancel'}
-          </Button>
-        </Form>
-      </Loader>
-    );
-  }
+        <Button
+          loading={creating}
+          variant="primary"
+          disabled={!instance?.isValid}
+          className="float-left mr-2"
+          type="submit"
+        >
+          {'Create'}
+        </Button>
+        <Button type="button" onClick={closeHandler}>
+          {'Cancel'}
+        </Button>
+      </Form>
+    </Loader>
+  );
 }
 
-export default connect(
-  (state) => ({
-    creating: state.getIn(['assignments', 'addActivity', 'loading']),
-    projects: state.getIn(['assignments', 'projects']),
-    projectsLoading: state.getIn(['assignments', 'fetchProjects', 'loading']),
-    users: state.getIn(['assignments', 'users']),
-    instance: state.getIn(['assignments', 'instance']),
-    metaLoading: state.getIn(['assignments', 'fetchMeta', 'loading']),
-    issueTypes: state.getIn(['assignments', 'issueTypes']),
-    errors: state.getIn(['assignments', 'addActivity', 'errors']),
-  }),
-  { addActivity, init, edit, fetchAssignments, fetchMeta }
-)(IssueForm);
+export default observer(IssueForm);
diff --git a/frontend/app/components/Session_/Issues/IssueHeader.js b/frontend/app/components/Session_/Issues/IssueHeader.js
deleted file mode 100644
index 6d666382b..000000000
--- a/frontend/app/components/Session_/Issues/IssueHeader.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import { Icon } from 'UI';
-
-const GotoSessionLink = props => (
-  <a className="flex items-center absolute right-0 mr-3 cursor-pointer">
-    {'Go to session'}
-    <Icon name="next1" size="16" />
-  </a> 
-)
-
-const IssueHeader = ({issue, typeIcon, assignee}) => {
-  return (
-    <div className="relative p-6 bg-white">
-      {/* <GotoSessionLink /> */}
-      {/* <ActiveIssueClose /> */}
-      <div className="flex leading-none mb-2 items-center">
-        { typeIcon }
-        {/* <img className="mr-2" src={typeIcon} alt="" width={16} height={16} /> */}
-        <span className="mr-2 font-medium">{ issue.id }</span>
-        {/* <div className="text-gray-700 text-sm">{ '@ 00:13 Secs'}</div> */}
-        { assignee && 
-          <div>
-            <span className="text-gray-600 mr-2">{'Assigned to'}</span>
-            <span className="font-medium" key={ assignee.id }>{ assignee.name }</span>   
-          </div>
-        }
-      </div>
-      <h2 className="text-xl font-medium mb-2 truncate">{issue.title}</h2>
-    </div>
-  );
-};
-
-export default IssueHeader;
diff --git a/frontend/app/components/Session_/Issues/IssueListItem.js b/frontend/app/components/Session_/Issues/IssueListItem.js
deleted file mode 100644
index c0e561a33..000000000
--- a/frontend/app/components/Session_/Issues/IssueListItem.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import { Tooltip } from 'UI';
-import stl from './issueListItem.module.css';
-
-const IssueListItem = ({ issue, onClick, icon, user, active }) => {
-  return (
-    <div
-      onClick={() => onClick(issue)}
-      className={cn(
-        stl.wrapper,
-        active ? 'active-bg' : '',
-        'flex flex-col justify-between cursor-pointer text-base text-gray-800'
-      )}
-    >
-      <div className="flex items-center justify-between">
-        <div className="flex items-center">
-          {icon}
-          <span>{issue.id}</span>
-        </div>
-        <div className="flex items-center">
-          {user && (
-            <Tooltip title={'Assignee ' + user.name}>
-              <img src={user.avatarUrls['24x24']} width="24" height="24" />
-            </Tooltip>
-          )}
-        </div>
-      </div>
-      <div className={stl.title}>{issue.title}</div>
-    </div>
-  );
-};
-
-export default IssueListItem;
diff --git a/frontend/app/components/Session_/Issues/Issues.js b/frontend/app/components/Session_/Issues/Issues.js
index db5671454..a4df27e72 100644
--- a/frontend/app/components/Session_/Issues/Issues.js
+++ b/frontend/app/components/Session_/Issues/Issues.js
@@ -1,81 +1,50 @@
+import { Button, Tooltip } from 'antd';
+import { observer } from 'mobx-react-lite';
 import React from 'react';
-import { connect } from 'react-redux';
-import { Popover, Icon } from 'UI';
+
+import { useStore } from 'App/mstore';
+import { Icon, Popover } from 'UI';
+
 import IssuesModal from './IssuesModal';
-import { fetchProjects, fetchMeta } from 'Duck/assignments';
-import { Tooltip, Button } from 'antd';
 
-@connect(
-  (state) => ({
-    issues: state.getIn(['assignments', 'list']),
-    metaLoading: state.getIn(['assignments', 'fetchMeta', 'loading']),
-    projects: state.getIn(['assignments', 'projects']),
-    projectsFetched: state.getIn(['assignments', 'projectsFetched']),
-    activeIssue: state.getIn(['assignments', 'activeIssue']),
-    fetchIssueLoading: state.getIn(['assignments', 'fetchAssignment', 'loading']),
-    fetchIssuesLoading: state.getIn(['assignments', 'fetchAssignments', 'loading']),
-    projectsLoading: state.getIn(['assignments', 'fetchProjects', 'loading']),
-    issuesIntegration: state.getIn(['issues', 'list']) || {},
-    issuesFetched: state.getIn(['issues', 'issuesFetched']),
-  }),
-  { fetchMeta, fetchProjects }
-)
-class Issues extends React.Component {
-  state = { showModal: false };
-
-  constructor(props) {
-    super(props);
-    this.state = { showModal: false };
-  }
-
-  closeModal = () => {
-    this.setState({ showModal: false });
-  };
-
-  showIssuesList = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    this.setState({ showModal: true });
-  };
-
-  handleOpen = () => {
-    this.setState({ showModal: true });
-    if (!this.props.projectsFetched) {
-      // cache projects fetch
-      this.props.fetchProjects().then(
-        function () {
-          const { projects } = this.props;
-          if (projects && projects.first()) {
-            this.props.fetchMeta(projects.first().id);
-          }
-        }.bind(this)
-      );
+function Issues({ sessionId }) {
+  const { issueReportingStore, integrationsStore } = useStore();
+  const issuesIntegration = integrationsStore.issues.list;
+  const handleOpen = () => {
+    issueReportingStore.init();
+    if (!issueReportingStore.projectsFetched) {
+      issueReportingStore.fetchProjects().then((projects) => {
+        if (projects && projects[0]) {
+          void issueReportingStore.fetchMeta(projects[0].id);
+        }
+      });
     }
   };
 
-  render() {
-    const { sessionId, issuesIntegration } = this.props;
-    const provider = issuesIntegration.first()?.provider || '';
+  const provider = issuesIntegration[0]?.provider || '';
 
-    return (
-      <Popover
-        onOpen={this.handleOpen}
-        render={({ close }) => (
-          <div>
-            <IssuesModal provider={provider} sessionId={sessionId} closeHandler={close} />
-          </div>
-        )}
-      >
+  return (
+    <Popover
+      onOpen={handleOpen}
+      render={({ close }) => (
         <div>
-          <Tooltip title={'Create Issue'} placement='bottom'>
-            <Button size={'small'} className={'flex items-center justify-center'}>
-              <Icon name={`integrations/${provider === 'jira' ? 'jira' : 'github'}`} />
-            </Button>
-          </Tooltip>
+          <IssuesModal
+            provider={provider}
+            sessionId={sessionId}
+            closeHandler={close}
+          />
         </div>
-      </Popover>
-    );
-  }
+      )}
+    >
+      <div>
+        <Tooltip title={'Create Issue'} placement="bottom">
+          <Button size={'small'} className={'flex items-center justify-center'}>
+            <Icon name={`integrations/${provider ?? 'github'}`} />
+          </Button>
+        </Tooltip>
+      </div>
+    </Popover>
+  );
 }
 
-export default Issues;
+export default observer(Issues);
diff --git a/frontend/app/components/Session_/Issues/IssuesModal.js b/frontend/app/components/Session_/Issues/IssuesModal.js
index c1a0d0724..4e298f6a7 100644
--- a/frontend/app/components/Session_/Issues/IssuesModal.js
+++ b/frontend/app/components/Session_/Issues/IssuesModal.js
@@ -1,23 +1,17 @@
 import React from 'react';
 import stl from './issuesModal.module.css';
 import IssueForm from './IssueForm';
-import { Provider } from 'react-redux';
-import store from 'App/store';
 
 const IssuesModal = ({
   sessionId,
   closeHandler,
-  provider
 }) => {
   return (
     <div className={ stl.wrapper }>
       <h3 className="text-xl font-semibold">
-        {/* <Icon name={headerIcon} size="18" color="color-gray-darkest" />  */}
         <span>Create Issue</span>
       </h3>
-      <Provider store={store}>
-        <IssueForm sessionId={ sessionId } closeHandler={ closeHandler } />
-      </Provider>
+      <IssueForm sessionId={ sessionId } closeHandler={ closeHandler } />
     </div>
   );
 }
diff --git a/frontend/app/components/Session_/Issues/contentRender.module.css b/frontend/app/components/Session_/Issues/contentRender.module.css
deleted file mode 100644
index d18d50630..000000000
--- a/frontend/app/components/Session_/Issues/contentRender.module.css
+++ /dev/null
@@ -1,32 +0,0 @@
-
-
-.codeMirror > div {
-    border: 1px solid #eee;
-    height: auto;
-}
-
-.para {
-    padding: 3px 0;
-}
-.mention {
-    font-weight: 500;
-    margin-right: 5px;
-}
-
-.quote {
-    padding: 5px;
-    padding-left: 10px;
-    border-left: solid 2px $gray-light;
-    color: $gray-dark;
-    margin: 5px 0;
-    margin-left: 10px;
-}
-
-.code {
-    background-color: lightgray;
-    padding: 2px 5px;
-}
-
-.rule {
-    margin: 6px 0;
-}
\ No newline at end of file
diff --git a/frontend/app/components/Session_/Issues/index.js b/frontend/app/components/Session_/Issues/index.js
index 161b5b097..36cf3fdd9 100644
--- a/frontend/app/components/Session_/Issues/index.js
+++ b/frontend/app/components/Session_/Issues/index.js
@@ -1,2 +1 @@
-export { defualt as Issues } from './Issues';
-export { defualt as IssueModal } from './IssuesModal';
\ No newline at end of file
+export { defualt as Issues } from './Issues';
\ No newline at end of file
diff --git a/frontend/app/components/Session_/Issues/issueDetails.module.css b/frontend/app/components/Session_/Issues/issueDetails.module.css
deleted file mode 100644
index 40d132a04..000000000
--- a/frontend/app/components/Session_/Issues/issueDetails.module.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.activitiesList {
-  max-height: calc(100vh - 186px);
-  overflow-y: auto;
-
-  &::-webkit-scrollbar {
-    width: 4px;
-  }
-}
\ No newline at end of file
diff --git a/frontend/app/components/Session_/Issues/issueHeader.module.css b/frontend/app/components/Session_/Issues/issueHeader.module.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/frontend/app/components/Session_/Issues/issueListItem.module.css b/frontend/app/components/Session_/Issues/issueListItem.module.css
deleted file mode 100644
index 73ed34c6f..000000000
--- a/frontend/app/components/Session_/Issues/issueListItem.module.css
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-.title {
-  max-width: 90%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.wrapper {
-  transition: all 0.4s;
-  padding: 8px 14px;
-  /* margin: 0 -14px; */
-  height: 70px;
-  background-color: white;
-  border-bottom: solid thin $gray-light;
-  &:hover {
-    background-color: $active-blue;
-    transition: all 0.2s;
-  }
-}
\ No newline at end of file
diff --git a/frontend/app/components/Session_/Issues/issuesModal.stories.js b/frontend/app/components/Session_/Issues/issuesModal.stories.js
deleted file mode 100644
index 60769df9f..000000000
--- a/frontend/app/components/Session_/Issues/issuesModal.stories.js
+++ /dev/null
@@ -1,300 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import { List } from 'immutable';
-import IssuesModal from './IssuesModal';
-import IssueHeader from './IssueHeader';
-import IssueComment from './IssueComment';
-import IssueCommentForm from './IssueCommentForm';
-import IssueDetails from './IssueDetails';
-import IssueForm from './IssueForm';
-import IssueListItem from './IssueListItem';
-import IssueDescription from './IssueDescription';
-
-const description = {
-  "version": 1,
-  "type": "doc",
-  "content": [
-    {
-      "type": "paragraph",
-      "content": [
-        {
-          "type": "text",
-          "text": "test para"
-        }
-      ]
-    },
-    {
-      "type": "blockquote",
-      "content": [
-        {
-          "type": "paragraph",
-          "content": [
-            {
-              "type": "text",
-              "text": "test quote"
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "type": "rule"
-    },
-    {
-      "type": "paragraph",
-      "content": [
-        {
-          "type": "text",
-          "text": "another para"
-        }
-      ]
-    },
-    {
-      "type": "paragraph",
-      "content": []
-    },
-    {
-      "type": "paragraph",
-      "content": []
-    },
-    {
-      "type": "codeBlock",
-      "attrs": {},
-      "content": [
-        {
-          "type": "text",
-          "text": "var d = \"test code\"\nvar e = \"test new line\""
-        }
-      ]
-    },
-    {
-      "type": "paragraph",
-      "content": []
-    }
-  ]
-}
-const issueTypeIcons = {
-  '1': 'https://openreplay.atlassian.net/secure/viewavatar?size=medium&avatarId=10310&avatarType=issuetype',
-}
-const issueTypes = [
-  {
-    id: 1,
-    iconUrl: 'https://openreplay.atlassian.net/secure/viewavatar?size=medium&avatarId=10310&avatarType=issuetype',
-    name: 'Improvement'
-  },
-  {
-    id: 2,
-    iconUrl: 'https://openreplay.atlassian.net/secure/viewavatar?size=medium&avatarId=10310&avatarType=issuetype',
-    name: 'Bug'
-  }
-]
-const user = {
-  id: 1,
-  name: 'test',
-  avatarUrls: {
-   "16x16": "https://secure.gravatar.com/avatar/900294aa68b33490b16615b57e9709fc?d=https%3A%2F%2Favatar-management--avatars.us-west-2.prod.public.atl-paas.net%2Finitials%2FMO-3.png&size=16&s=16",
-   "24x24": "https://secure.gravatar.com/avatar/900294aa68b33490b16615b57e9709fc?d=https%3A%2F%2Favatar-management--avatars.us-west-2.prod.public.atl-paas.net%2Finitials%2FMO-3.png&size=24&s=24"
-  }
-}
-const activities = [
-  {
-    id: 1,
-    message: {
-      "version": 1,
-      "type": "doc",
-      "content": [
-        {
-          "type": "paragraph",
-          "content": [
-            {
-              "type": "text",
-              "text": "First Para"
-            }
-          ]
-        },
-        {
-          "type": "paragraph",
-          "content": [
-            {
-              "type": "text",
-              "text": "Second para"
-            }
-          ]
-        },
-        {
-          "type": "paragraph",
-          "content": [
-            {
-              "type": "text",
-              "text": "Third para",
-              "marks": [
-                {
-                  "type": "strong"
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "type": "blockquote",
-          "content": [
-            {
-              "type": "paragraph",
-              "content": [
-                {
-                  "type": "text",
-                  "text": "Quote"
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "type": "paragraph",
-          "content": []
-        },
-        {
-          "type": "codeBlock",
-          "attrs": {},
-          "content": [
-            {
-              "type": "text",
-              "text": "alert('test')\nvar dd = \"Another line\""
-            }
-          ]
-        },
-        {
-          "type": "rule"
-        },
-        {
-          "type": "paragraph",
-          "content": [
-            {
-              "type": "mention",
-              "attrs": {
-                "id": "5d8398868a50e80c2feed3f6",
-                "text": "Someone"
-              }
-            },
-            {
-              "type": "text",
-              "text": " "
-            }
-          ]
-        },
-        {
-          "type": "paragraph",
-          "content": []
-        },
-        {
-          "type": "codeBlock",
-          "attrs": {
-            "language": "javascript"
-          },
-          "content": [
-            {
-              "type": "text",
-              "text": "var d = \"test\""
-            }
-          ]
-        },
-        {
-          "type": "paragraph",
-          "content": []
-        }
-      ]
-    },
-    author: 1,
-    user: user
-  },
-  {
-    id: 1,
-    message: {
-      "version": 1,
-      "type": "doc",
-      "content": [
-          {
-              "type": "paragraph",
-              "content": [
-                  {
-                      "type": "text",
-                      "text": "happy debugging"
-                  }
-              ]
-          }
-      ]
-  },
-    author: 1,
-    user: user
-  }
-]
-const issues = [
-  {
-    title: 'Crash Report - runtime error: index out of range',
-    description: description,
-    commentsCount: 4,
-    activities: List(activities),
-    assignee: user.id,
-    issueType: 1,
-    id: 'APP-222'
-  },
-  {
-    title: 'this is the second one',
-    description: description,
-    commentsCount: 10,
-    activities: activities,
-    assignee: user.id,
-    issueType: 1,
-    id: 'APP-333'
-  },
-  {
-    title: 'this is the third one',
-    description: description,
-    commentsCount: 0,
-    activities: activities,
-    assignee: user.id,
-    issueType: 1,
-    id: 'APP-444'
-  }
-];
-
-const onIssueClick = (issue) => {
-  console.log(issue);
-}
-
-storiesOf('Issues', module)
-  .add('IssuesModal', () => (
-    <IssuesModal issues={ issues } />
-  ))
-  .add('IssueHeader', () => (
-    <IssueHeader issue={ issues[0] } typeIcon={ issueTypeIcons[1] }/>
-  ))
-  .add('IssueComment', () => (
-    <div className="p-4">
-      <IssueComment activity={ activities[0] } />
-    </div>
-  ))
-  .add('IssueDescription', () => (
-    <div className="p-4 bg-gray-100">
-      <IssueDescription description={ description } />
-    </div>
-  ))
-  .add('IssueCommentForm', () => (
-    <IssueCommentForm />
-  ))
-  .add('IssueDetails', () => (
-    <IssueDetails
-      sessionId={ 1}
-      issue={ issues[0] }
-      users={ List([user]) }
-      issueTypeIcons={ issueTypeIcons }
-    />
-  ))
-  .add('IssueListItem', () => (
-    <IssueListItem issue={ issues[0] } icon={ issueTypeIcons[1] } user={ user } />
-  ))
-  .add('IssueForm', () => (
-    <div className="p-4">
-      <IssueForm issueTypes={ List(issueTypes) } />
-    </div>
-  ))
-
diff --git a/frontend/app/components/Session_/Multiview/Multiview.tsx b/frontend/app/components/Session_/Multiview/Multiview.tsx
index de5ab0865..695d9ad1c 100644
--- a/frontend/app/components/Session_/Multiview/Multiview.tsx
+++ b/frontend/app/components/Session_/Multiview/Multiview.tsx
@@ -2,36 +2,27 @@ import React from 'react';
 import { useStore } from 'App/mstore';
 import { BackLink } from 'UI';
 import { observer } from 'mobx-react-lite';
-import { connect } from 'react-redux';
-import { fetchSessions, customSetSessions } from 'Duck/liveSearch';
 import { useHistory, useParams } from 'react-router-dom';
 import { liveSession, assist, withSiteId, multiview } from 'App/routes';
 import AssistSessionsModal from 'App/components/Session_/Player/Controls/AssistSessionsModal';
 import { useModal } from 'App/components/Modal';
 import LivePlayer from 'App/components/Session/LivePlayer';
-import EmptyTile from './EmptyTile'
-import SessionTileFooter from './SessionTileFooter'
+import EmptyTile from './EmptyTile';
+import SessionTileFooter from './SessionTileFooter';
 
 function Multiview({
-  total,
-  fetchSessions,
-  siteId,
-  assistCredentials,
-  customSetSessions,
-}: {
-  total: number;
-  customSetSessions: (data: any) => void;
-  fetchSessions: (filter: any) => void;
-  siteId: string;
+                     assistCredentials
+                   }: {
   assistCredentials: any;
   list: Record<string, any>[];
 }) {
   const { showModal, hideModal } = useModal();
-
-  const { assistMultiviewStore } = useStore();
+  const { assistMultiviewStore, projectsStore, searchStoreLive, sessionStore } = useStore();
+  const siteId = projectsStore.siteId!;
   const history = useHistory();
   // @ts-ignore
   const { sessionsquery } = useParams();
+  const total = sessionStore.totalLiveSessions;
 
   const onSessionsChange = (sessions: Array<Record<string, any> | undefined>) => {
     const sessionIdQuery = encodeURIComponent(sessions.map((s) => s && s.sessionId).join(','));
@@ -45,21 +36,21 @@ function Multiview({
       const sessionIds = decodeURIComponent(sessionsquery).split(',');
       // preset
       assistMultiviewStore.presetSessions(sessionIds).then((data) => {
-        customSetSessions(data);
+        sessionStore.customSetSessions(data);
       });
     } else {
-      fetchSessions({});
+      searchStoreLive.fetchSessions();
     }
   }, []);
 
   const openLiveSession = (e: React.MouseEvent, sessionId: string) => {
     e.stopPropagation();
     assistMultiviewStore.setActiveSession(sessionId);
-    history.push(withSiteId(liveSession(sessionId)+'?multi=true', siteId));
+    history.push(withSiteId(liveSession(sessionId) + '?multi=true', siteId));
   };
 
   const returnToList = () => {
-    assistMultiviewStore.reset()
+    assistMultiviewStore.reset();
     history.push(withSiteId(assist(), siteId));
   };
 
@@ -79,7 +70,7 @@ function Multiview({
 
   const emptySpace = 4 - assistMultiviewStore.sessions.length;
 
-  const placeholder = emptySpace > 0 ? new Array(emptySpace).fill(0) : []
+  const placeholder = emptySpace > 0 ? new Array(emptySpace).fill(0) : [];
 
   return (
     <div style={{ height: '95vh' }} className="full flex flex-col">
@@ -125,13 +116,4 @@ function Multiview({
   );
 }
 
-export default connect(
-  (state: any) => ({
-    total: state.getIn(['liveSearch', 'total']),
-    siteId: state.getIn(['site', 'siteId']),
-  }),
-  {
-    fetchSessions,
-    customSetSessions,
-  }
-)(observer(Multiview));
+export default observer(Multiview);
diff --git a/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx b/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx
index d3fade552..8228c0495 100644
--- a/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx
+++ b/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx
@@ -2,7 +2,6 @@ import { Segmented } from 'antd';
 import cn from 'classnames';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect } from 'react';
-import { connect } from 'react-redux';
 
 import {
   MobilePlayerContext,
@@ -12,7 +11,6 @@ import { useStore } from 'App/mstore';
 import SummaryBlock from 'Components/Session/Player/ReplayPlayer/SummaryBlock';
 import { SummaryButton } from 'Components/Session_/Player/Controls/Controls';
 import TimelineZoomButton from 'Components/Session_/Player/Controls/components/TimelineZoomButton';
-import { setZoomTab, toggleBottomBlock } from 'Duck/components/player';
 import { Icon, NoContent } from 'UI';
 
 import BottomBlock from '../BottomBlock';
@@ -25,24 +23,15 @@ import TimelinePointer from './components/TimelinePointer';
 import TimelineScale from './components/TimelineScale';
 import VerticalPointerLine, { VerticalPointerLineComp } from './components/VerticalPointerLine';
 
-function MobileOverviewPanelCont({
-  issuesList,
-  sessionId,
-  zoomEnabled,
-  zoomStartTs,
-  zoomEndTs,
-  setZoomTab,
-  zoomTab,
-}: {
-  issuesList: Record<string, any>[];
-  sessionId: string;
-  zoomEnabled: boolean;
-  zoomStartTs: number;
-  zoomEndTs: number;
-  setZoomTab: (tab: string) => void;
-  zoomTab: 'overview' | 'journey' | 'issues' | 'errors';
-}) {
-  const { aiSummaryStore } = useStore();
+function MobileOverviewPanelCont() {
+  const { aiSummaryStore, uiPlayerStore, sessionStore } = useStore();
+  const sessionId = sessionStore.current.sessionId;
+  const issuesList = sessionStore.current.issues;
+  const zoomEnabled = uiPlayerStore.timelineZoom.enabled;
+  const zoomStartTs = uiPlayerStore.timelineZoom.startTs;
+  const zoomEndTs = uiPlayerStore.timelineZoom.endTs;
+  const setZoomTab = uiPlayerStore.setZoomTab;
+  const zoomTab = uiPlayerStore.zoomTab;
   const { store, player } = React.useContext(MobilePlayerContext);
   const [dataLoaded, setDataLoaded] = React.useState(false);
   const [selectedFeatures, setSelectedFeatures] = React.useState([
@@ -129,22 +118,14 @@ function MobileOverviewPanelCont({
   );
 }
 
-function WebOverviewPanelCont({
-  sessionId,
-  zoomEnabled,
-  zoomStartTs,
-  zoomEndTs,
-  setZoomTab,
-  zoomTab,
-}: {
-  sessionId: string;
-  zoomEnabled: boolean;
-  zoomStartTs: number;
-  zoomEndTs: number;
-  setZoomTab: (tab: string) => void;
-  zoomTab: 'overview' | 'journey' | 'issues' | 'errors';
-}) {
-  const { aiSummaryStore } = useStore();
+function WebOverviewPanelCont() {
+  const { aiSummaryStore, uiPlayerStore, sessionStore } = useStore();
+  const sessionId = sessionStore.current.sessionId;
+  const zoomEnabled = uiPlayerStore.timelineZoom.enabled;
+  const zoomStartTs = uiPlayerStore.timelineZoom.startTs;
+  const zoomEndTs = uiPlayerStore.timelineZoom.endTs;
+  const setZoomTab = uiPlayerStore.setZoomTab;
+  const zoomTab = uiPlayerStore.zoomTab;
   const { store } = React.useContext(PlayerContext);
   const [selectedFeatures, setSelectedFeatures] = React.useState([
     'PERFORMANCE',
@@ -382,31 +363,6 @@ function PanelComponent({
   );
 }
 
-export const OverviewPanel = connect(
-  (state: Record<string, any>) => ({
-    issuesList: state.getIn(['sessions', 'current']).issues,
-    sessionId: state.getIn(['sessions', 'current']).sessionId,
-    zoomEnabled: state.getIn(['components', 'player']).timelineZoom.enabled,
-    zoomStartTs: state.getIn(['components', 'player']).timelineZoom.startTs,
-    zoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs,
-  }),
-  {
-    toggleBottomBlock,
-    setZoomTab,
-  }
-)(observer(WebOverviewPanelCont));
+export const OverviewPanel = observer(WebOverviewPanelCont);
 
-export const MobileOverviewPanel = connect(
-  (state: Record<string, any>) => ({
-    issuesList: state.getIn(['sessions', 'current']).issues,
-    sessionId: state.getIn(['sessions', 'current']).sessionId,
-    zoomEnabled: state.getIn(['components', 'player']).timelineZoom.enabled,
-    zoomStartTs: state.getIn(['components', 'player']).timelineZoom.startTs,
-    zoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs,
-    zoomTab: state.getIn(['components', 'player']).zoomTab,
-  }),
-  {
-    toggleBottomBlock,
-    setZoomTab,
-  }
-)(observer(MobileOverviewPanelCont));
+export const MobileOverviewPanel = observer(MobileOverviewPanelCont);
diff --git a/frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/TimelinePointer.tsx b/frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/TimelinePointer.tsx
index d67e03781..028f54922 100644
--- a/frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/TimelinePointer.tsx
+++ b/frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/TimelinePointer.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { NETWORK, EXCEPTIONS } from 'Duck/components/player';
+import { NETWORK, EXCEPTIONS } from 'App/mstore/uiPlayerStore';
 import { useModal } from 'App/components/Modal';
 import { Icon } from 'UI';
 import StackEventModal from '../StackEventModal';
diff --git a/frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx b/frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx
index 9dfc6a344..c836ed21b 100644
--- a/frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx
+++ b/frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx
@@ -1,48 +1,37 @@
 import React, { useEffect, useState } from 'react';
 import { Loader, Icon } from 'UI';
-import { connect } from 'react-redux';
-import { fetchSessionClickmap } from 'Duck/sessions';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 import SelectorsList from './components/SelectorsList/SelectorsList';
 import { PlayerContext } from 'App/components/Session/playerContext';
 import { compareJsonObjects } from 'App/utils';
 
 import Select from 'Shared/Select';
-import SelectDateRange from 'Shared/SelectDateRange';
-import Period from 'Types/app/period';
 
 const JUMP_OFFSET = 1000;
 interface Props {
-    filters: any;
-    fetchSessionClickmap: (sessionId: string, filters: Record<string, any>) => void;
-    insights: any;
-    events: Array<any>;
-    urlOptions: Array<any>;
-    loading: boolean;
-    host: string;
     setActiveTab: (tab: string) => void;
-    sessionId: string;
 }
 
-function PageInsightsPanel({ filters, fetchSessionClickmap, events = [], insights, urlOptions, host, loading = true, setActiveTab, sessionId }: Props) {
+function PageInsightsPanel({ setActiveTab }: Props) {
+    const { sessionStore } = useStore();
+    const sessionId = sessionStore.current.sessionId;
+    const loading = sessionStore.loadingSessionData;
+    const events = sessionStore.visitedEvents;
+    const filters = sessionStore.insightsFilters;
+    const fetchSessionClickmap = sessionStore.fetchSessionClickmap;
+    const host = sessionStore.host;
+    const insights = sessionStore.insights;
+    const urlOptions = events.map(({ url, host }: any) => ({ label: url, value: url, host }));
+
     const { player: Player } = React.useContext(PlayerContext)
     const markTargets = (t: any) => Player.markTargets(t)
     const defaultValue = urlOptions && urlOptions[0] ? urlOptions[0].value : '';
     const [insightsFilters, setInsightsFilters] = useState({ ...filters, url: host + defaultValue });
     const prevInsights = React.useRef<any>();
 
-    const period = Period({
-        start: insightsFilters.startDate,
-        end: insightsFilters.endDate,
-        rangeName: insightsFilters.rangeValue,
-    });
-
-    const onDateChange = (e: any) => {
-        const { startDate, endDate, rangeValue } = e.toJSON();
-        setInsightsFilters({ ...insightsFilters, startDate, endDate, rangeValue });
-    };
-
     useEffect(() => {
-        markTargets(insights.toJS());
+        markTargets(insights);
         return () => {
             markTargets(null);
         };
@@ -55,7 +44,7 @@ function PageInsightsPanel({ filters, fetchSessionClickmap, events = [], insight
         if (urlOptions && urlOptions[0]) {
             const url = insightsFilters.url ? insightsFilters.url : host + urlOptions[0].value;
             Player.pause();
-            fetchSessionClickmap(sessionId, { ...insightsFilters, sessionId, url });
+            void fetchSessionClickmap(sessionId, { ...insightsFilters, sessionId, url });
             markTargets([]);
         }
         prevInsights.current = insightsFilters;
@@ -104,18 +93,4 @@ function PageInsightsPanel({ filters, fetchSessionClickmap, events = [], insight
     );
 }
 
-export default connect(
-    (state: any) => {
-        const events = state.getIn(['sessions', 'visitedEvents']);
-        return {
-            filters: state.getIn(['sessions', 'insightFilters']),
-            host: state.getIn(['sessions', 'host']),
-            insights: state.getIn(['sessions', 'insights']),
-            events: events,
-            urlOptions: events.map(({ url, host }: any) => ({ label: url, value: url, host })),
-            loading: state.getIn(['sessions', 'fetchInsightsRequest', 'loading']),
-            sessionId: state.getIn(['sessions', 'current']).sessionId,
-        };
-    },
-    { fetchSessionClickmap }
-)(PageInsightsPanel);
+export default observer(PageInsightsPanel);
diff --git a/frontend/app/components/Session_/Performance/Performance.tsx b/frontend/app/components/Session_/Performance/Performance.tsx
index 236d97422..34a7eb3b8 100644
--- a/frontend/app/components/Session_/Performance/Performance.tsx
+++ b/frontend/app/components/Session_/Performance/Performance.tsx
@@ -1,7 +1,6 @@
 import {Timed} from "Player";
 import {PerformanceChartPoint} from "Player/mobile/managers/IOSPerformanceTrackManager";
 import React from 'react';
-import { connect } from 'react-redux';
 import {MobilePlayerContext, PlayerContext} from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
 import {
@@ -23,7 +22,7 @@ import stl from './performance.module.css';
 
 import BottomBlock from '../BottomBlock';
 import InfoLine from '../BottomBlock/InfoLine';
-import { toJS } from "mobx";
+import { useStore } from 'App/mstore'
 
 const CPU_VISUAL_OFFSET = 10;
 
@@ -222,9 +221,7 @@ function generateMobileChart(data: PerformanceChartPoint[], biggestMemSpike: num
   }))
 }
 
-export const MobilePerformance = connect((state: any) => ({
-  userDeviceMemorySize: state.getIn(['sessions', 'current']).userDeviceMemorySize || 0,
-}))(observer(({ userDeviceMemorySize }:  { userDeviceMemorySize: number }) => {
+export const MobilePerformance = observer(() => {
   const { player, store } = React.useContext(MobilePlayerContext);
   const [_timeTicks, setTicks] = React.useState<number[]>([])
   const [_data, setData] = React.useState<any[]>([])
@@ -407,14 +404,12 @@ export const MobilePerformance = connect((state: any) => ({
         </BottomBlock.Content>
       </BottomBlock>
   );
-}));
+});
 
 
-function Performance({
-  userDeviceHeapSize,
-}: {
-  userDeviceHeapSize: number;
-}) {
+function Performance() {
+  const { sessionStore } = useStore();
+  const userDeviceHeapSize = sessionStore.current.userDeviceHeapSize || 0;
   const { player, store } = React.useContext(PlayerContext);
   const [_timeTicks, setTicks] = React.useState<number[]>([])
   const [_data, setData] = React.useState<any[]>([])
@@ -721,6 +716,4 @@ function Performance({
   );
 }
 
-export const ConnectedPerformance = connect((state: any) => ({
-  userDeviceHeapSize: state.getIn(['sessions', 'current']).userDeviceHeapSize || 0,
-}))(observer(Performance));
+export const ConnectedPerformance = observer(Performance);
diff --git a/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx b/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx
index 6fd6043fc..6106326b0 100644
--- a/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx
+++ b/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx
@@ -1,17 +1,12 @@
 import React from 'react';
 import { Loader, Pagination, Tooltip, Button } from 'UI';
-import { connect } from 'react-redux';
 import SessionItem from 'Shared/SessionItem';
-import { addFilterByKeyAndValue, updateCurrentPage, applyFilter } from 'Duck/liveSearch';
-import { List } from 'immutable';
-import { FilterKey } from 'App/types/filter/filterType';
 import Select from 'Shared/Select';
 import SortOrderButton from 'Shared/SortOrderButton';
 import { KEYS } from 'Types/filter/customFilter';
 import { capitalize } from 'App/utils';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
-import { fetchList as fetchMeta } from 'Duck/customField';
 import AssistSearchField from 'App/components/Assist/AssistSearchField';
 import LiveSessionSearch from 'Shared/LiveSessionSearch';
 import cn from 'classnames';
@@ -19,49 +14,39 @@ import Session from 'App/mstore/types/session';
 
 const PER_PAGE = 10;
 
-interface OwnProps {}
 interface ConnectProps {
-  loading: boolean;
-  metaListLoading: boolean;
-  list: List<any>;
-  filter: any;
-  currentPage: number;
-  metaList: any;
-  sort: any;
-  total: number;
-  replaceTarget?: string;
-  addFilterByKeyAndValue: (key: FilterKey, value: string) => void;
-  updateCurrentPage: (page: number) => void;
-  applyFilter: (filter: any) => void;
   onAdd: () => void;
-  fetchMeta: () => void;
+  replaceTarget?: string;
 }
 
-type Props = OwnProps & ConnectProps;
-
-function AssistSessionsModal(props: Props) {
-  const { assistMultiviewStore } = useStore();
-  const { loading, list, metaList = [], filter, currentPage, total, onAdd, fetchMeta } = props;
+function AssistSessionsModal(props: ConnectProps) {
+  const { assistMultiviewStore, customFieldStore, searchStoreLive, sessionStore } = useStore();
+  const loading = sessionStore.loadingLiveSessions;
+  const list = sessionStore.liveSessions;
+  const filter = searchStoreLive.instance;
+  const currentPage = searchStoreLive.currentPage;
+  const total = sessionStore.totalLiveSessions;
   const onUserClick = () => false;
   const { filters } = filter;
   const hasUserFilter = filters.map((i: any) => i.key).includes(KEYS.USERID);
+  const metaList = customFieldStore.list;
 
   const sortOptions = metaList
     .map((i: any) => ({
       label: capitalize(i),
-      value: i,
-    }))
-    .toJS();
+      value: i
+    }));
 
   React.useEffect(() => {
     if (total === 0) {
       reloadSessions();
     }
-    fetchMeta();
+    // fetchMeta();
+    customFieldStore.fetchList();
   }, []);
-  const reloadSessions = () => props.applyFilter({ ...filter });
+  const reloadSessions = () => searchStoreLive.edit({ ...filter });
   const onSortChange = ({ value }: any) => {
-    props.applyFilter({ sort: value.value });
+    searchStoreLive.edit({ sort: value.value });
   };
   const onSessionAdd = (session: Session) => {
     if (props.replaceTarget) {
@@ -69,7 +54,7 @@ function AssistSessionsModal(props: Props) {
     } else {
       assistMultiviewStore.addSession(session);
     }
-    assistMultiviewStore.fetchAgentTokenInfo(session.sessionId).then(() => onAdd());
+    assistMultiviewStore.fetchAgentTokenInfo(session.sessionId).then(() => props.onAdd());
   };
 
   return (
@@ -99,7 +84,7 @@ function AssistSessionsModal(props: Props) {
                 value={sortOptions.find((i: any) => i.value === filter.sort) || sortOptions[0]}
               />
               <SortOrderButton
-                onChange={(state: any) => props.applyFilter({ order: state })}
+                onChange={(state: any) => searchStoreLive.edit({ order: state })}
                 sortOrder={filter.order}
               />
             </div>
@@ -109,37 +94,37 @@ function AssistSessionsModal(props: Props) {
       <LiveSessionSearch />
       <div className="my-4" />
       <Loader loading={loading}>
-        <div className={'overflow-y-scroll'} style={{ maxHeight: '85vh'}}>
-        {list.map((session) => (
-          <React.Fragment key={session.sessionId}>
-            <div
-              className={cn(
-                'rounded bg-white mb-2 overflow-hidden border',
-                assistMultiviewStore.sessions.findIndex(
-                  (s: Record<string, any>) => s.sessionId === session.sessionId
-                ) !== -1
-                  ? 'cursor-not-allowed opacity-60'
-                  : ''
-              )}
-            >
-              <SessionItem
-                key={session.sessionId}
-                session={session}
-                live
-                hasUserFilter={hasUserFilter}
-                onUserClick={onUserClick}
-                metaList={metaList}
-                isDisabled={
+        <div className={'overflow-y-scroll'} style={{ maxHeight: '85vh' }}>
+          {list.map((session) => (
+            <React.Fragment key={session.sessionId}>
+              <div
+                className={cn(
+                  'rounded bg-white mb-2 overflow-hidden border',
                   assistMultiviewStore.sessions.findIndex(
                     (s: Record<string, any>) => s.sessionId === session.sessionId
                   ) !== -1
-                }
-                isAdd
-                onClick={() => onSessionAdd(session)}
-              />
-            </div>
-          </React.Fragment>
-        ))}
+                    ? 'cursor-not-allowed opacity-60'
+                    : ''
+                )}
+              >
+                <SessionItem
+                  key={session.sessionId}
+                  session={session}
+                  live
+                  hasUserFilter={hasUserFilter}
+                  onUserClick={onUserClick}
+                  metaList={metaList}
+                  isDisabled={
+                    assistMultiviewStore.sessions.findIndex(
+                      (s: Record<string, any>) => s.sessionId === session.sessionId
+                    ) !== -1
+                  }
+                  isAdd
+                  onClick={() => onSessionAdd(session)}
+                />
+              </div>
+            </React.Fragment>
+          ))}
         </div>
       </Loader>
 
@@ -148,7 +133,7 @@ function AssistSessionsModal(props: Props) {
           <Pagination
             page={currentPage}
             total={total}
-            onPageChange={(page: any) => props.updateCurrentPage(page)}
+            onPageChange={(page: any) => searchStoreLive.updateCurrentPage(page)}
             limit={PER_PAGE}
           />
         </div>
@@ -157,21 +142,4 @@ function AssistSessionsModal(props: Props) {
   );
 }
 
-export default connect(
-  (state: any) => ({
-    list: state.getIn(['liveSearch', 'list']),
-    loading: state.getIn(['liveSearch', 'fetchList', 'loading']),
-    metaListLoading: state.getIn(['customFields', 'fetchRequest', 'loading']),
-    filter: state.getIn(['liveSearch', 'instance']),
-    total: state.getIn(['liveSearch', 'total']),
-    currentPage: state.getIn(['liveSearch', 'currentPage']),
-    metaList: state.getIn(['customFields', 'list']).map((i: any) => i.key),
-    sort: state.getIn(['liveSearch', 'sort']),
-  }),
-  {
-    applyFilter,
-    addFilterByKeyAndValue,
-    updateCurrentPage,
-    fetchMeta,
-  }
-)(observer(AssistSessionsModal));
+export default observer(AssistSessionsModal);
diff --git a/frontend/app/components/Session_/Player/Controls/AssistSessionsTabs/AssistSessionsTabs.tsx b/frontend/app/components/Session_/Player/Controls/AssistSessionsTabs/AssistSessionsTabs.tsx
index 07311665a..bd62eba45 100644
--- a/frontend/app/components/Session_/Player/Controls/AssistSessionsTabs/AssistSessionsTabs.tsx
+++ b/frontend/app/components/Session_/Player/Controls/AssistSessionsTabs/AssistSessionsTabs.tsx
@@ -5,7 +5,6 @@ import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
 import { useHistory } from 'react-router-dom';
 import { multiview, liveSession, withSiteId } from 'App/routes';
-import { connect } from 'react-redux';
 
 interface ITab {
   onClick?: () => void;
@@ -42,9 +41,10 @@ const CurrentTab = React.memo(() => (
   </Tab>
 ));
 
-function AssistTabs({ session, siteId }: { session: Record<string, any>; siteId: string }) {
+function AssistTabs({ session }: { session: Record<string, any> }) {
   const history = useHistory();
-  const { assistMultiviewStore } = useStore();
+  const { assistMultiviewStore, projectsStore } = useStore();
+  const siteId = projectsStore.siteId!;
 
   const placeholder = new Array(4 - assistMultiviewStore.sessions.length).fill(0);
 
@@ -83,6 +83,4 @@ function AssistTabs({ session, siteId }: { session: Record<string, any>; siteId:
   );
 }
 
-export default connect((state: any) => ({ siteId: state.getIn(['site', 'siteId']) }))(
-  observer(AssistTabs)
-);
+export default observer(AssistTabs)
diff --git a/frontend/app/components/Session_/Player/Controls/Controls.tsx b/frontend/app/components/Session_/Player/Controls/Controls.tsx
index 76a111f82..1154c4337 100644
--- a/frontend/app/components/Session_/Player/Controls/Controls.tsx
+++ b/frontend/app/components/Session_/Player/Controls/Controls.tsx
@@ -3,9 +3,7 @@ import { Switch } from 'antd';
 import cn from 'classnames';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
-import { connect } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-
 import { PlayerContext } from 'App/components/Session/playerContext';
 import { useStore } from 'App/mstore';
 import { FullScreenButton, PlayButton, PlayingState } from 'App/player-ui';
@@ -18,7 +16,7 @@ import {
   LaunchNetworkShortcut,
   LaunchPerformanceShortcut,
   LaunchStateShortcut,
-  LaunchXRaShortcut,
+  LaunchXRaShortcut
 } from 'Components/Session_/Player/Controls/components/KeyboardHelp';
 import {
   CONSOLE,
@@ -29,13 +27,8 @@ import {
   PERFORMANCE,
   PROFILER,
   STACKEVENTS,
-  STORAGE,
-  changeSkipInterval,
-  fullscreenOff,
-  fullscreenOn,
-  toggleBottomBlock,
-} from 'Duck/components/player';
-import { fetchSessions } from 'Duck/liveSearch';
+  STORAGE
+} from 'App/mstore/uiPlayerStore';
 import { Icon } from 'UI';
 
 import ControlButton from './ControlButton';
@@ -50,7 +43,7 @@ export const SKIP_INTERVALS = {
   15: 15e3,
   20: 2e4,
   30: 3e4,
-  60: 6e4,
+  60: 6e4
 };
 
 function getStorageName(type: any) {
@@ -72,10 +65,23 @@ function getStorageName(type: any) {
   }
 }
 
-function Controls(props: any) {
+function Controls({
+  setActiveTab
+}: any) {
   const { player, store } = React.useContext(PlayerContext);
-  const { uxtestingStore } = useStore();
+  const { uxtestingStore, uiPlayerStore, projectsStore, sessionStore, userStore } = useStore();
+  const permissions = userStore.account.permissions || [];
+  const disableDevtools = userStore.isEnterprise && !(permissions.includes('DEV_TOOLS') || permissions.includes('SERVICE_DEV_TOOLS'));
+  const fullscreen = uiPlayerStore.fullscreen;
+  const bottomBlock = uiPlayerStore.bottomBlock;
+  const toggleBottomBlock = uiPlayerStore.toggleBottomBlock;
+  const fullscreenOn = uiPlayerStore.fullscreenOn;
+  const fullscreenOff = uiPlayerStore.fullscreenOff;
+  const changeSkipInterval = uiPlayerStore.changeSkipInterval;
+  const skipInterval = uiPlayerStore.skipInterval;
+  const showStorageRedux = !uiPlayerStore.hiddenHints.storage;
   const history = useHistory();
+  const siteId = projectsStore.siteId;
   const {
     playing,
     completed,
@@ -83,23 +89,12 @@ function Controls(props: any) {
     speed,
     messagesLoading,
     markedTargets,
-    inspectorMode,
+    inspectorMode
   } = store.get();
 
-  const {
-    bottomBlock,
-    toggleBottomBlock,
-    fullscreen,
-    changeSkipInterval,
-    skipInterval,
-    disableDevtools,
-    showStorageRedux,
-    session,
-    previousSessionId,
-    nextSessionId,
-    siteId,
-    setActiveTab,
-  } = props;
+  const session = sessionStore.current;
+  const previousSessionId = sessionStore.previousId;
+  const nextSessionId = sessionStore.nextId;
 
   const disabled =
     disableDevtools || messagesLoading || inspectorMode || markedTargets;
@@ -115,13 +110,13 @@ function Controls(props: any) {
 
   useShortcuts({
     skipInterval,
-    fullScreenOn: props.fullscreenOn,
-    fullScreenOff: props.fullscreenOff,
+    fullScreenOn: fullscreenOn,
+    fullScreenOff: fullscreenOff,
     toggleBottomBlock,
     openNextSession: nextHandler,
     openPrevSession: prevHandler,
     setActiveTab,
-    disableDevtools,
+    disableDevtools
   });
 
   const forthTenSeconds = () => {
@@ -142,8 +137,8 @@ function Controls(props: any) {
   const state = completed
     ? PlayingState.Completed
     : playing
-    ? PlayingState.Playing
-    : PlayingState.Paused;
+      ? PlayingState.Playing
+      : PlayingState.Paused;
 
   const events = session.stackEvents ?? [];
   return (
@@ -189,7 +184,7 @@ function Controls(props: any) {
 
             <FullScreenButton
               size={16}
-              onClick={props.fullscreenOn}
+              onClick={fullscreenOn}
               customClasses={
                 'rounded hover:bg-gray-light-shade color-gray-medium'
               }
@@ -211,12 +206,12 @@ interface IDevtoolsButtons {
 
 const DevtoolsButtons = observer(
   ({
-    showStorageRedux,
-    toggleBottomTools,
-    bottomBlock,
-    disabled,
-    events,
-  }: IDevtoolsButtons) => {
+     showStorageRedux,
+     toggleBottomTools,
+     bottomBlock,
+     disabled,
+     events
+   }: IDevtoolsButtons) => {
     const { aiSummaryStore } = useStore();
     const { store, player } = React.useContext(PlayerContext);
 
@@ -363,11 +358,11 @@ const DevtoolsButtons = observer(
 );
 
 export function SummaryButton({
-  onClick,
-  withToggle,
-  onToggle,
-  toggleValue,
-}: {
+                                onClick,
+                                withToggle,
+                                onToggle,
+                                toggleValue
+                              }: {
   onClick?: () => void;
   withToggle?: boolean;
   onToggle?: () => void;
@@ -403,7 +398,7 @@ export const gradientButton = {
   height: 24,
   display: 'flex',
   alignItems: 'center',
-  justifyContent: 'center',
+  justifyContent: 'center'
 };
 const onHoverFillStyle = {
   width: '100%',
@@ -413,7 +408,7 @@ const onHoverFillStyle = {
   gap: 2,
   alignItems: 'center',
   padding: '1px 8px',
-  background: 'linear-gradient(156deg, #E3E6FF 0%, #E4F3F4 69.48%)',
+  background: 'linear-gradient(156deg, #E3E6FF 0%, #E4F3F4 69.48%)'
 };
 const fillStyle = {
   width: '100%',
@@ -422,87 +417,7 @@ const fillStyle = {
   borderRadius: '60px',
   gap: 2,
   alignItems: 'center',
-  padding: '1px 8px',
+  padding: '1px 8px'
 };
 
-const ControlPlayer = observer(Controls);
-
-export default connect(
-  (state: any) => {
-    const permissions = state.getIn(['user', 'account', 'permissions']) || [];
-    const isEnterprise = state.getIn(['user', 'account', 'edition']) === 'ee';
-    return {
-      disableDevtools:
-        isEnterprise &&
-        !(
-          permissions.includes('DEV_TOOLS') ||
-          permissions.includes('SERVICE_DEV_TOOLS')
-        ),
-      fullscreen: state.getIn(['components', 'player', 'fullscreen']),
-      bottomBlock: state.getIn(['components', 'player', 'bottomBlock']),
-      showStorageRedux: !state.getIn([
-        'components',
-        'player',
-        'hiddenHints',
-        'storage',
-      ]),
-      showStackRedux: !state.getIn([
-        'components',
-        'player',
-        'hiddenHints',
-        'stack',
-      ]),
-      session: state.getIn(['sessions', 'current']),
-      totalAssistSessions: state.getIn(['liveSearch', 'total']),
-      skipInterval: state.getIn(['components', 'player', 'skipInterval']),
-      previousSessionId: state.getIn(['sessions', 'previousId']),
-      nextSessionId: state.getIn(['sessions', 'nextId']),
-      siteId: state.getIn(['site', 'siteId']),
-    };
-  },
-  {
-    fullscreenOn,
-    fullscreenOff,
-    toggleBottomBlock,
-    fetchSessions,
-    changeSkipInterval,
-  }
-)(ControlPlayer);
-
-// shouldComponentUpdate(nextProps) {
-//   if (
-//     nextProps.fullscreen !== props.fullscreen ||
-//     nextProps.bottomBlock !== props.bottomBlock ||
-//     nextProps.live !== props.live ||
-//     nextProps.livePlay !== props.livePlay ||
-//     nextProps.playing !== props.playing ||
-//     nextProps.completed !== props.completed ||
-//     nextProps.skip !== props.skip ||
-//     nextProps.skipToIssue !== props.skipToIssue ||
-//     nextProps.speed !== props.speed ||
-//     nextProps.disabled !== props.disabled ||
-//     nextProps.fullscreenDisabled !== props.fullscreenDisabled ||
-//     // nextProps.inspectorMode !== props.inspectorMode ||
-//     // nextProps.logCount !== props.logCount ||
-//     nextProps.logRedCount !== props.logRedCount ||
-//     nextProps.showExceptions !== props.showExceptions ||
-//     nextProps.resourceRedCount !== props.resourceRedCount ||
-//     nextProps.fetchRedCount !== props.fetchRedCount ||
-//     nextProps.showStack !== props.showStack ||
-//     nextProps.stackCount !== props.stackCount ||
-//     nextProps.stackRedCount !== props.stackRedCount ||
-//     nextProps.profilesCount !== props.profilesCount ||
-//     nextProps.storageCount !== props.storageCount ||
-//     nextProps.storageType !== props.storageType ||
-//     nextProps.showStorage !== props.showStorage ||
-//     nextProps.showProfiler !== props.showProfiler ||
-//     nextProps.showGraphql !== props.showGraphql ||
-//     nextProps.showFetch !== props.showFetch ||
-//     nextProps.fetchCount !== props.fetchCount ||
-//     nextProps.graphqlCount !== props.graphqlCount ||
-//     nextProps.liveTimeTravel !== props.liveTimeTravel ||
-//     nextProps.skipInterval !== props.skipInterval
-//   )
-//     return true;
-//   return false;
-// }
+export default observer(Controls);
diff --git a/frontend/app/components/Session_/Player/Controls/Timeline.tsx b/frontend/app/components/Session_/Player/Controls/Timeline.tsx
index 040480cc7..db241a30c 100644
--- a/frontend/app/components/Session_/Player/Controls/Timeline.tsx
+++ b/frontend/app/components/Session_/Player/Controls/Timeline.tsx
@@ -1,8 +1,6 @@
 import DraggableMarkers from 'Components/Session_/Player/Controls/components/ZoomDragLayer';
 import React, { useEffect, useMemo, useContext, useState, useRef } from 'react';
-import { connect } from 'react-redux';
 import stl from './timeline.module.css';
-import { setTimelinePointer, setTimelineHoverTime } from 'Duck/sessions';
 import CustomDragLayer, { OnDragCallback } from './components/CustomDragLayer';
 import { debounce } from 'App/utils';
 import TooltipContainer from './components/TooltipContainer';
@@ -10,31 +8,27 @@ import { PlayerContext } from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
 import { DateTime, Duration } from 'luxon';
-import Issue from 'Types/session/issue';
 import { WebEventsList, MobEventsList } from './EventsList';
 import NotesList from './NotesList';
 import SkipIntervalsList from './SkipIntervalsList';
 import TimelineTracker from 'Components/Session_/Player/Controls/TimelineTracker';
 
 interface IProps {
-  issues: Issue[];
-  setTimelineHoverTime: (t: number) => void;
-  startedAt: number;
-  tooltipVisible: boolean;
-  timezone?: string;
   isMobile?: boolean;
-  timelineZoomEnabled: boolean;
-  timelineZoomStartTs: number;
-  timelineZoomEndTs: number;
 }
 
 function Timeline(props: IProps) {
   const { player, store } = useContext(PlayerContext);
   const [wasPlaying, setWasPlaying] = useState(false);
   const [maxWidth, setMaxWidth] = useState(0);
-  const { settingsStore } = useStore();
+  const { settingsStore, uiPlayerStore, sessionStore } = useStore();
+  const startedAt = sessionStore.current.startedAt ?? 0;
+  const tooltipVisible = sessionStore.timeLineTooltip.isVisible;
+  const setTimelineHoverTime = sessionStore.setTimelineTooltip;
+  const timezone = sessionStore.current.timezone;
+  const issues = sessionStore.current.issues;
+  const timelineZoomEnabled = uiPlayerStore.timelineZoom.enabled;
   const { playing, skipToIssue, ready, endTime, devtoolsLoading, domLoading } = store.get();
-  const { issues, timezone, timelineZoomEnabled } = props;
 
   const progressRef = useRef<HTMLDivElement>(null);
   const timelineRef = useRef<HTMLDivElement>(null);
@@ -53,7 +47,7 @@ function Timeline(props: IProps) {
   }, []);
 
   const debouncedJump = useMemo(() => debounce(player.jump, 500), []);
-  const debouncedTooltipChange = useMemo(() => debounce(props.setTimelineHoverTime, 50), []);
+  const debouncedTooltipChange = useMemo(() => debounce(setTimelineHoverTime, 50), []);
 
   const onDragEnd = () => {
     if (wasPlaying) {
@@ -80,17 +74,17 @@ function Timeline(props: IProps) {
       // @ts-ignore black magic
       !progressRef.current.contains(e.target)
     ) {
-      return props.tooltipVisible && hideTimeTooltip();
+      return tooltipVisible && hideTimeTooltip();
     }
 
     const time = getTime(e);
     if (!time) return;
     const tz = settingsStore.sessionSettings.timezone.value;
-    const timeStr = DateTime.fromMillis(props.startedAt + time)
+    const timeStr = DateTime.fromMillis(startedAt + time)
       .setZone(tz)
       .toFormat(`hh:mm:ss a`);
     const userTimeStr = timezone
-      ? DateTime.fromMillis(props.startedAt + time)
+      ? DateTime.fromMillis(startedAt + time)
           .setZone(timezone)
           .toFormat(`hh:mm:ss a`)
       : undefined;
@@ -179,15 +173,4 @@ function Timeline(props: IProps) {
   );
 }
 
-export default connect(
-  (state: any) => ({
-    issues: state.getIn(['sessions', 'current']).issues || [],
-    startedAt: state.getIn(['sessions', 'current']).startedAt || 0,
-    timezone: state.getIn(['sessions', 'current']).timezone,
-    tooltipVisible: state.getIn(['sessions', 'timeLineTooltip', 'isVisible']),
-    timelineZoomEnabled: state.getIn(['components', 'player']).timelineZoom.enabled,
-    timelineZoomStartTs: state.getIn(['components', 'player']).timelineZoom.startTs,
-    timelineZoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs,
-  }),
-  { setTimelinePointer, setTimelineHoverTime }
-)(observer(Timeline));
+export default observer(Timeline);
diff --git a/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx b/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx
index 3da4a31d7..c272126a2 100644
--- a/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx
@@ -1,10 +1,8 @@
 import { Tag } from 'antd';
-import { List } from 'immutable';
 import { Duration } from 'luxon';
 import React from 'react';
-import { connect } from 'react-redux';
 import { toast } from 'react-toastify';
-
+import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
 import {
   Note,
@@ -13,39 +11,30 @@ import {
   iTag,
   tagProps,
 } from 'App/services/NotesService';
-import { fetchList as fetchSlack } from 'Duck/integrations/slack';
-import { fetchList as fetchTeams } from 'Duck/integrations/teams';
-import { addNote, updateNote } from 'Duck/sessions';
 import { Button, Checkbox, Icon } from 'UI';
 
 import Select from 'Shared/Select';
 
 interface Props {
   time: number;
-  addNote: (note: Note) => void;
-  updateNote: (note: Note) => void;
-  sessionId: string;
   isEdit?: boolean;
   editNote?: WriteNote;
-  slackChannels: List<Record<string, any>>;
-  teamsChannels: List<Record<string, any>>;
-  fetchSlack: () => void;
-  fetchTeams: () => void;
   hideModal: () => void;
 }
 
 function CreateNote({
   time,
-  sessionId,
   isEdit,
   editNote,
-  updateNote,
-  slackChannels,
-  fetchSlack,
-  teamsChannels,
-  fetchTeams,
   hideModal,
 }: Props) {
+  const { notesStore, integrationsStore, sessionStore } = useStore();
+  const sessionId = sessionStore.current.sessionId;
+  const updateNote = sessionStore.updateNote;
+  const slackChannels = integrationsStore.slack.list;
+  const fetchSlack = integrationsStore.slack.fetchIntegrations;
+  const teamsChannels = integrationsStore.msteams.list;
+  const fetchTeams = integrationsStore.msteams.fetchIntegrations;
   const [text, setText] = React.useState('');
   const [slackChannel, setSlackChannel] = React.useState('');
   const [teamsChannel, setTeamsChannel] = React.useState('');
@@ -56,7 +45,6 @@ function CreateNote({
   const [useTeams, setTeams] = React.useState(false);
 
   const inputRef = React.createRef<HTMLTextAreaElement>();
-  const { notesStore } = useStore();
 
   React.useEffect(() => {
     if (isEdit && editNote) {
@@ -151,14 +139,12 @@ function CreateNote({
     .map(({ webhookId, name }) => ({
       value: webhookId,
       label: name,
-    }))
-    .toJS() as unknown as { value: string; label: string }[];
+    })) as unknown as { value: string; label: string }[];
   const teamsChannelsOptions = teamsChannels
     .map(({ webhookId, name }) => ({
       value: webhookId,
       label: name,
-    }))
-    .toJS() as unknown as { value: string; label: string }[];
+    })) as unknown as { value: string; label: string }[];
 
   slackChannelsOptions.unshift({
     // @ts-ignore
@@ -332,12 +318,4 @@ function CreateNote({
   );
 }
 
-export default connect(
-  (state: any) => {
-    const slackChannels = state.getIn(['slack', 'list']);
-    const teamsChannels = state.getIn(['teams', 'list']);
-    const sessionId = state.getIn(['sessions', 'current']).sessionId;
-    return { sessionId, slackChannels, teamsChannels };
-  },
-  { addNote, updateNote, fetchSlack, fetchTeams }
-)(CreateNote);
+export default observer(CreateNote);
diff --git a/frontend/app/components/Session_/Player/Controls/components/TimeTooltip.tsx b/frontend/app/components/Session_/Player/Controls/components/TimeTooltip.tsx
index 02a6b6ad5..89d8f4a84 100644
--- a/frontend/app/components/Session_/Player/Controls/components/TimeTooltip.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/TimeTooltip.tsx
@@ -1,22 +1,12 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 import stl from './styles.module.css';
 
-interface Props {
-  time: number;
-  offset: number;
-  isVisible: boolean;
-  localTime: string;
-  userTime?: string;
-}
-
-function TimeTooltip({
-  time,
-  offset,
-  isVisible,
-  localTime,
-  userTime
-}: Props) {
+function TimeTooltip() {
+  const { sessionStore } = useStore();
+  const timeLineTooltip = sessionStore.timeLineTooltip;
+  const { time = 0, offset = 0, isVisible, localTime, userTime } = timeLineTooltip;
   return (
     <div
       className={stl.timeTooltip}
@@ -46,8 +36,4 @@ function TimeTooltip({
   );
 }
 
-export default connect((state) => {
-  // @ts-ignore
-  const { time = 0, offset = 0, isVisible, localTime, userTime } = state.getIn(['sessions', 'timeLineTooltip']);
-  return { time, offset, isVisible, localTime, userTime };
-})(TimeTooltip);
+export default observer(TimeTooltip);
diff --git a/frontend/app/components/Session_/Player/Controls/components/TimelineZoomButton.tsx b/frontend/app/components/Session_/Player/Controls/components/TimelineZoomButton.tsx
index e7d5bf9e3..5db0182c8 100644
--- a/frontend/app/components/Session_/Player/Controls/components/TimelineZoomButton.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/TimelineZoomButton.tsx
@@ -1,18 +1,13 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { Button, Tooltip } from 'antd';
-import { toggleZoom } from 'Duck/components/player';
 import { PlayerContext } from 'Components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 
-interface Props {
-  enabled: boolean;
-  startTs: number;
-  endTs: number;
-  toggleZoom: typeof toggleZoom;
-}
-
-function TimelineZoomButton({ enabled, toggleZoom }: Props) {
+function TimelineZoomButton() {
+  const { uiPlayerStore } = useStore();
+  const toggleZoom = uiPlayerStore.toggleZoom;
+  const enabled = uiPlayerStore.timelineZoom.enabled;
   const { store } = React.useContext(PlayerContext);
 
   const onClickHandler = () => {
@@ -41,11 +36,4 @@ function TimelineZoomButton({ enabled, toggleZoom }: Props) {
   );
 }
 
-export default connect(
-  (state: Record<string, any>) => ({
-    enabled: state.getIn(['components', 'player']).timelineZoom.enabled,
-    startTs: state.getIn(['components', 'player']).timelineZoom.startTs,
-    endTs: state.getIn(['components', 'player']).timelineZoom.endTs,
-  }),
-  { toggleZoom }
-)(observer(TimelineZoomButton));
+export default observer(TimelineZoomButton);
diff --git a/frontend/app/components/Session_/Player/Controls/components/TooltipContainer.tsx b/frontend/app/components/Session_/Player/Controls/components/TooltipContainer.tsx
index 1c02d77d0..182dcf873 100644
--- a/frontend/app/components/Session_/Player/Controls/components/TooltipContainer.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/TooltipContainer.tsx
@@ -1,15 +1,9 @@
 import React from 'react'
 import TimeTooltip from './TimeTooltip';
-import store from 'App/store';
-import { Provider } from 'react-redux';
 
 function TooltipContainer() {
   return (
-    <Provider store={store}>
-      <>
-        <TimeTooltip />
-      </>
-    </Provider>
+      <TimeTooltip />
   )
 }
 
diff --git a/frontend/app/components/Session_/Player/Controls/components/ZoomDragLayer.tsx b/frontend/app/components/Session_/Player/Controls/components/ZoomDragLayer.tsx
index 67e5e6e5f..edbd53a8f 100644
--- a/frontend/app/components/Session_/Player/Controls/components/ZoomDragLayer.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/ZoomDragLayer.tsx
@@ -1,22 +1,19 @@
 import React, { useCallback, useState } from 'react';
-import { connect } from 'react-redux';
-
+import { observer } from 'mobx-react-lite';
+import { useStore } from "App/mstore";
 import { getTimelinePosition } from 'Components/Session_/Player/Controls/getTimelinePosition';
-import { toggleZoom } from 'Duck/components/player';
 
 interface Props {
-  timelineZoomStartTs: number;
-  timelineZoomEndTs: number;
   scale: number;
-  toggleZoom: typeof toggleZoom;
 }
 
 const DraggableMarkers = ({
-  timelineZoomStartTs,
-  timelineZoomEndTs,
   scale,
-  toggleZoom,
 }: Props) => {
+  const { uiPlayerStore } = useStore();
+  const toggleZoom = uiPlayerStore.toggleZoom;
+  const timelineZoomStartTs = uiPlayerStore.timelineZoom.startTs;
+  const timelineZoomEndTs = uiPlayerStore.timelineZoom.endTs;
   const [startPos, setStartPos] = useState(
     getTimelinePosition(timelineZoomStartTs, scale)
   );
@@ -195,11 +192,4 @@ const DraggableMarkers = ({
   );
 };
 
-export default connect(
-  (state: Record<string, any>) => ({
-    timelineZoomStartTs: state.getIn(['components', 'player']).timelineZoom
-      .startTs,
-    timelineZoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs,
-  }),
-  { toggleZoom }
-)(DraggableMarkers);
+export default observer(DraggableMarkers);
diff --git a/frontend/app/components/Session_/Player/Overlay.tsx b/frontend/app/components/Session_/Player/Overlay.tsx
index fda1a2403..3fe1dc5c1 100644
--- a/frontend/app/components/Session_/Player/Overlay.tsx
+++ b/frontend/app/components/Session_/Player/Overlay.tsx
@@ -2,7 +2,6 @@ import { Dropdown } from 'antd';
 import type { MenuProps } from 'antd';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
-import { connect } from 'react-redux';
 import { Link2 } from 'lucide-react';
 import copy from 'copy-to-clipboard';
 import { toast } from 'react-toastify';
@@ -14,8 +13,7 @@ import {
   PERFORMANCE,
   STACKEVENTS,
   STORAGE,
-  toggleBottomBlock,
-} from 'Duck/components/player';
+} from 'App/mstore/uiPlayerStore';
 import { Icon } from 'UI';
 
 import { useModal } from '../../Modal';
@@ -24,12 +22,12 @@ import AutoplayTimer from './Overlay/AutoplayTimer';
 import ElementsMarker from './Overlay/ElementsMarker';
 import Loader from './Overlay/Loader';
 import PlayIconLayer from './Overlay/PlayIconLayer';
+import { useStore } from 'App/mstore'
 
 interface Props {
   nextId?: string;
   closedLive?: boolean;
   isClickmap?: boolean;
-  toggleBottomBlock: (block: number) => void;
 }
 
 enum ItemKey {
@@ -87,9 +85,10 @@ const menuItems: MenuProps['items'] = [
   },
 ];
 
-function Overlay({ nextId, isClickmap, toggleBottomBlock }: Props) {
+function Overlay({ nextId, isClickmap }: Props) {
   const { player, store } = React.useContext(PlayerContext);
-
+  const { uiPlayerStore } = useStore();
+  const toggleBottomBlock = uiPlayerStore.toggleBottomBlock;
   const togglePlay = () => player.togglePlay();
   const {
     playing,
@@ -178,6 +177,4 @@ function Overlay({ nextId, isClickmap, toggleBottomBlock }: Props) {
   );
 }
 
-export default connect(null, {
-  toggleBottomBlock,
-})(observer(Overlay));
+export default observer(Overlay);
diff --git a/frontend/app/components/Session_/Player/Overlay/AutoplayTimer.tsx b/frontend/app/components/Session_/Player/Overlay/AutoplayTimer.tsx
index 144d28208..a4180d056 100644
--- a/frontend/app/components/Session_/Player/Overlay/AutoplayTimer.tsx
+++ b/frontend/app/components/Session_/Player/Overlay/AutoplayTimer.tsx
@@ -1,22 +1,20 @@
 import React, { useEffect, useState } from 'react';
 import cn from 'classnames';
-import { connect } from 'react-redux';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
-import { Button, Link, Icon } from 'UI';
+import { observer } from 'mobx-react-lite';
+import { withRouter } from 'react-router-dom';
+import { Button, Link } from 'UI';
 import { session as sessionRoute, withSiteId } from 'App/routes';
 import stl from './AutoplayTimer.module.css';
 import clsOv from './overlay.module.css';
 import AutoplayToggle from 'Shared/AutoplayToggle';
+import { useStore } from 'App/mstore';
 
-interface IProps extends RouteComponentProps {
-  nextId: number;
-  siteId: string;
-}
-
-function AutoplayTimer({ nextId, siteId, history }: IProps) {
+function AutoplayTimer({ history }: any) {
   let timer: NodeJS.Timer;
   const [cancelled, setCancelled] = useState(false);
   const [counter, setCounter] = useState(5);
+  const { projectsStore, sessionStore } = useStore();
+  const nextId = sessionStore.nextId;
 
   useEffect(() => {
     if (counter > 0) {
@@ -26,6 +24,7 @@ function AutoplayTimer({ nextId, siteId, history }: IProps) {
     }
 
     if (counter === 0) {
+      const siteId = projectsStore.getSiteId().siteId;
       history.push(withSiteId(sessionRoute(nextId), siteId));
     }
 
@@ -69,8 +68,5 @@ function AutoplayTimer({ nextId, siteId, history }: IProps) {
 }
 
 export default withRouter(
-  connect((state: any) => ({
-    siteId: state.getIn(['site', 'siteId']),
-    nextId: state.getIn(['sessions', 'nextId']),
-  }))(AutoplayTimer)
+  observer(AutoplayTimer)
 );
diff --git a/frontend/app/components/Session_/Player/Overlay/PlayIconLayer.tsx b/frontend/app/components/Session_/Player/Overlay/PlayIconLayer.tsx
index 71ef1a76b..9c1adc4af 100644
--- a/frontend/app/components/Session_/Player/Overlay/PlayIconLayer.tsx
+++ b/frontend/app/components/Session_/Player/Overlay/PlayIconLayer.tsx
@@ -1,17 +1,19 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import cn from 'classnames';
 import { Icon } from 'UI';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 import cls from './PlayIconLayer.module.css';
 import clsOv from './overlay.module.css';
 
 interface Props {
   togglePlay: () => void;
   playing: boolean;
-  notesEdit: boolean;
 }
 
-function PlayIconLayer({ playing, togglePlay, notesEdit }: Props) {
+function PlayIconLayer({ playing, togglePlay }: Props) {
+  const { sessionStore } = useStore();
+  const notesEdit = sessionStore.createNoteTooltip.isVisible
   const [showPlayOverlayIcon, setShowPlayOverlayIcon] = useState(false);
 
   useEffect(() => {
@@ -51,7 +53,4 @@ function PlayIconLayer({ playing, togglePlay, notesEdit }: Props) {
   );
 }
 
-export default connect((state) => ({
-  // @ts-ignore
-  notesEdit: state.getIn(['sessions', 'createNoteTooltip', 'isVisible']),
-}))(PlayIconLayer);
+export default observer(PlayIconLayer);
diff --git a/frontend/app/components/Session_/QueueControls/QueueControls.tsx b/frontend/app/components/Session_/QueueControls/QueueControls.tsx
index a3ebb0557..21c50c80c 100644
--- a/frontend/app/components/Session_/QueueControls/QueueControls.tsx
+++ b/frontend/app/components/Session_/QueueControls/QueueControls.tsx
@@ -1,63 +1,59 @@
 import React, { useEffect } from 'react';
-import { connect } from 'react-redux';
-import { setAutoplayValues } from 'Duck/sessions';
 import { withSiteId, session as sessionRoute } from 'App/routes';
-import AutoplayToggle from "Shared/AutoplayToggle/AutoplayToggle";
+import AutoplayToggle from 'Shared/AutoplayToggle/AutoplayToggle';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import cn from 'classnames';
-import { fetchAutoplaySessions } from 'Duck/search';
 import { LeftOutlined, RightOutlined } from '@ant-design/icons';
-import { Button, Popover } from 'antd'
+import { Button, Popover } from 'antd';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 
 const PER_PAGE = 10;
 
 interface Props extends RouteComponentProps {
-  siteId: string;
-  previousId: string;
-  nextId: string;
   defaultList: any;
   currentPage: number;
-  total: number;
-  setAutoplayValues: () => void;
   latestRequestTime: any;
   sessionIds: any;
-  fetchAutoplaySessions: (page: number) => Promise<void>;
 }
+
 function QueueControls(props: Props) {
+  const { projectsStore, sessionStore, searchStore } = useStore();
+  const previousId = sessionStore.previousId;
+  const nextId = sessionStore.nextId;
+  const total = sessionStore.total;
+  const sessionIds = sessionStore.sessionIds ?? [];
+  const setAutoplayValues = sessionStore.setAutoplayValues;
   const {
-    siteId,
-    previousId,
-    nextId,
-    currentPage,
-    total,
-    sessionIds,
-    latestRequestTime,
     match: {
       // @ts-ignore
-      params: { sessionId },
-    },
+      params: { sessionId }
+    }
   } = props;
 
-  const disabled = sessionIds.length === 0;
+  const currentPage = searchStore.currentPage;
+  const latestRequestTime = searchStore.latestRequestTime;
 
   useEffect(() => {
     if (latestRequestTime) {
-      props.setAutoplayValues();
+      setAutoplayValues();
       const totalPages = Math.ceil(total / PER_PAGE);
       const index = sessionIds.indexOf(sessionId);
 
       // check for the last page and load the next
       if (currentPage !== totalPages && index === sessionIds.length - 1) {
-        props.fetchAutoplaySessions(currentPage + 1).then(props.setAutoplayValues);
+        searchStore.fetchAutoplaySessions(currentPage + 1).then(setAutoplayValues);
       }
     }
   }, []);
 
   const nextHandler = () => {
+    const siteId = projectsStore.getSiteId().siteId!;
     props.history.push(withSiteId(sessionRoute(nextId), siteId));
   };
 
   const prevHandler = () => {
+    const siteId = projectsStore.getSiteId().siteId!;
     props.history.push(withSiteId(sessionRoute(previousId), siteId));
   };
 
@@ -67,7 +63,7 @@ function QueueControls(props: Props) {
         onClick={prevHandler}
         className={cn('p-1 group rounded-full', {
           'pointer-events-none opacity-50': !previousId,
-          'cursor-pointer': !!previousId,
+          'cursor-pointer': !!previousId
         })}
       >
         <Popover
@@ -85,7 +81,7 @@ function QueueControls(props: Props) {
         onClick={nextHandler}
         className={cn('p-1 group ml-1 rounded-full', {
           'pointer-events-none opacity-50': !nextId,
-          'cursor-pointer': !!nextId,
+          'cursor-pointer': !!nextId
         })}
       >
         <Popover
@@ -102,15 +98,4 @@ function QueueControls(props: Props) {
   );
 }
 
-export default connect(
-  (state: any) => ({
-    previousId: state.getIn(['sessions', 'previousId']),
-    nextId: state.getIn(['sessions', 'nextId']),
-    siteId: state.getIn(['site', 'siteId']),
-    currentPage: state.getIn(['search', 'currentPage']) || 1,
-    total: state.getIn(['sessions', 'total']) || 0,
-    sessionIds: state.getIn(['sessions', 'sessionIds']) || [],
-    latestRequestTime: state.getIn(['search', 'latestRequestTime']),
-  }),
-  { setAutoplayValues, fetchAutoplaySessions }
-)(withRouter(QueueControls));
+export default withRouter(observer(QueueControls));
diff --git a/frontend/app/components/Session_/ScreenRecorder/ScreenRecorder.tsx b/frontend/app/components/Session_/ScreenRecorder/ScreenRecorder.tsx
index 10f4595ee..fbfcce9ae 100644
--- a/frontend/app/components/Session_/ScreenRecorder/ScreenRecorder.tsx
+++ b/frontend/app/components/Session_/ScreenRecorder/ScreenRecorder.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { screenRecorder } from 'App/utils/screenRecorder';
 import { Tooltip } from 'antd'
-import { connect } from 'react-redux';
 import { Button } from 'UI';
 import { SessionRecordingStatus } from 'Player';
 let stopRecorderCb: () => void;
@@ -11,6 +10,7 @@ import { formatTimeOrDate } from 'App/date';
 import { PlayerContext, ILivePlayerContext } from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
 import { ENTERPRISE_REQUEIRED } from 'App/constants';
+import { useStore } from 'App/mstore';
 
 /**
  * "edge" || "edg/"   chromium based edge (dev or canary)
@@ -31,17 +31,12 @@ function isSupported() {
 const supportedBrowsers = ['Chrome v91+', 'Edge v90+'];
 const supportedMessage = `Supported Browsers: ${supportedBrowsers.join(', ')}`;
 
-function ScreenRecorder({
-  siteId,
-  sessionId,
-  agentId,
-  isEnterprise,
-}: {
-  siteId: string;
-  sessionId: string;
-  isEnterprise: boolean;
-  agentId: number,
-}) {
+function ScreenRecorder() {
+  const { projectsStore, sessionStore, userStore } = useStore();
+  const isEnterprise = userStore.isEnterprise;
+  const agentId = userStore.account.id;
+  const sessionId = sessionStore.current.sessionId;
+  const siteId = projectsStore.siteId;
   const { player, store } = React.useContext(PlayerContext) as ILivePlayerContext;
   const recordingState = store.get().recordingState;
 
@@ -141,10 +136,4 @@ function ScreenRecorder({
   );
 }
 
-export default connect((state: any) => ({
-  isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee' ||
-    state.getIn(['user', 'account', 'edition']) === 'msaas',
-  siteId: state.getIn(['site', 'siteId']),
-  sessionId: state.getIn(['sessions', 'current']).sessionId,
-  agentId: state.getIn(['user', 'account', 'id']),
-}))(observer(ScreenRecorder));
+export default observer(ScreenRecorder);
diff --git a/frontend/app/components/Session_/Storage/Storage.tsx b/frontend/app/components/Session_/Storage/Storage.tsx
index c959d6348..2b138728e 100644
--- a/frontend/app/components/Session_/Storage/Storage.tsx
+++ b/frontend/app/components/Session_/Storage/Storage.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { connect } from 'react-redux';
-import { hideHint } from 'Duck/components/player';
+import { useStore } from 'App/mstore'
 import { PlayerContext } from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
 import { JSONTree, NoContent, Tooltip } from 'UI';
@@ -33,12 +32,11 @@ const storageDecodeKeys = {
   [STORAGE_TYPES.MOBX]: ['payload'],
   [STORAGE_TYPES.NONE]: ['state, action', 'payload', 'mutation'],
 }
-interface Props {
-  hideHint: (args: string) => void;
-  hintIsHidden: boolean;
-}
 
-function Storage(props: Props) {
+function Storage() {
+  const { uiPlayerStore } = useStore();
+  const hintIsHidden = uiPlayerStore.hiddenHints.storage;
+  const hideHint = uiPlayerStore.hideHint;
   const lastBtnRef = React.useRef<HTMLButtonElement>();
   const [showDiffs, setShowDiffs] = React.useState(false);
   const [stateObject, setState] = React.useState({});
@@ -223,8 +221,6 @@ function Storage(props: Props) {
     );
   };
 
-  const { hintIsHidden } = props;
-
   if (type === STORAGE_TYPES.REDUX) {
     return <ReduxViewer />
   }
@@ -311,7 +307,7 @@ function Storage(props: Props) {
                   .
                   <br />
                   <br />
-                  <button className="color-teal" onClick={() => props.hideHint('storage')}>
+                  <button className="color-teal" onClick={() => hideHint('storage')}>
                     Got It!
                   </button>
                 </>
@@ -344,14 +340,7 @@ function Storage(props: Props) {
   );
 }
 
-export default connect(
-  (state: any) => ({
-    hintIsHidden: state.getIn(['components', 'player', 'hiddenHints', 'storage']),
-  }),
-  {
-    hideHint,
-  }
-)(observer(Storage));
+export default observer(Storage);
 
 
 /**
diff --git a/frontend/app/components/Session_/Subheader.js b/frontend/app/components/Session_/Subheader.js
index a7fa9a45f..dcadfad65 100644
--- a/frontend/app/components/Session_/Subheader.js
+++ b/frontend/app/components/Session_/Subheader.js
@@ -1,36 +1,41 @@
+import { ShareAltOutlined } from '@ant-design/icons';
+import { Button as AntButton, Switch, Tooltip } from 'antd';
+import cn from 'classnames';
+import { Link2 } from 'lucide-react';
+import { observer } from 'mobx-react-lite';
 import React, { useMemo } from 'react';
+
+import { PlayerContext } from 'App/components/Session/playerContext';
+import { IFRAME } from 'App/constants/storageKeys';
 import { useStore } from 'App/mstore';
+import { checkParam, truncateStringToFit } from 'App/utils';
+import SessionTabs from 'Components/Session/Player/SharedComponents/SessionTabs';
 import KeyboardHelp from 'Components/Session_/Player/Controls/components/KeyboardHelp';
 import { Icon } from 'UI';
-import {Link2} from 'lucide-react';
-import QueueControls from './QueueControls';
+
 import Bookmark from 'Shared/Bookmark';
+
 import SharePopup from '../shared/SharePopup/SharePopup';
 import Issues from './Issues/Issues';
+import QueueControls from './QueueControls';
 import NotePopup from './components/NotePopup';
-import { PlayerContext } from 'App/components/Session/playerContext';
-import { observer } from 'mobx-react-lite';
-import { connect } from 'react-redux';
-import SessionTabs from 'Components/Session/Player/SharedComponents/SessionTabs';
-import { IFRAME } from 'App/constants/storageKeys';
-import cn from 'classnames';
-import { Switch, Button as AntButton, Popover, Tooltip } from 'antd';
-import { ShareAltOutlined } from '@ant-design/icons';
-import { checkParam, truncateStringToFit } from 'App/utils';
 
 const localhostWarn = (project) => project + '_localhost_warn';
 const disableDevtools = 'or_devtools_uxt_toggle';
 
 function SubHeader(props) {
-  const localhostWarnKey = localhostWarn(props.siteId);
-  const defaultLocalhostWarn = localStorage.getItem(localhostWarnKey) !== '1';
+  const { uxtestingStore, projectsStore, userStore, integrationsStore } = useStore();
+  const integrations = integrationsStore.issues.list;
+  const defaultLocalhostWarn = React.useMemo(() => {
+    const siteId = projectsStore.siteId;
+    const localhostWarnKey = localhostWarn(siteId);
+    return localStorage.getItem(localhostWarnKey) !== '1';
+  }, [projectsStore.siteId]);
   const [showWarningModal, setWarning] = React.useState(defaultLocalhostWarn);
   const { store } = React.useContext(PlayerContext);
   const { location: currentLocation = 'loading...' } = store.get();
   const hasIframe = localStorage.getItem(IFRAME) === 'true';
-  const { uxtestingStore } = useStore();
   const [hideTools, setHideTools] = React.useState(false);
-
   React.useEffect(() => {
     const hideDevtools = checkParam('hideTools');
     if (hideDevtools) {
@@ -39,18 +44,22 @@ function SubHeader(props) {
   }, []);
 
   const enabledIntegration = useMemo(() => {
-    const { integrations } = props;
-    if (!integrations || !integrations.size) {
+    if (!integrations || !integrations.length) {
       return false;
     }
 
     return integrations.some((i) => i.token);
-  }, [props.integrations]);
+  }, [integrations]);
 
-  const locationTruncated = truncateStringToFit(currentLocation, window.innerWidth - 200);
+  const locationTruncated = truncateStringToFit(
+    currentLocation,
+    window.innerWidth - 200
+  );
 
   const showWarning =
-    currentLocation && /(localhost)|(127.0.0.1)|(0.0.0.0)/.test(currentLocation) && showWarningModal;
+    currentLocation &&
+    /(localhost)|(127.0.0.1)|(0.0.0.0)/.test(currentLocation) &&
+    showWarningModal;
   const closeWarning = () => {
     localStorage.setItem(localhostWarnKey, '1');
     setWarning(false);
@@ -66,7 +75,11 @@ function SubHeader(props) {
       <div
         className="w-full px-4 flex items-center border-b relative"
         style={{
-          background: uxtestingStore.isUxt() ? (props.live ? '#F6FFED' : '#EBF4F5') : undefined
+          background: uxtestingStore.isUxt()
+            ? props.live
+              ? '#F6FFED'
+              : '#EBF4F5'
+            : undefined,
         }}
       >
         {showWarning ? (
@@ -78,7 +91,7 @@ function SubHeader(props) {
               left: '50%',
               bottom: '-24px',
               transform: 'translate(-50%, 0)',
-              fontWeight: 500
+              fontWeight: 500,
             }}
           >
             Some assets may load incorrectly on localhost.
@@ -115,7 +128,10 @@ function SubHeader(props) {
               trigger={
                 <div className="relative">
                   <Tooltip title="Share Session" placement="bottom">
-                    <AntButton size={'small'} className="flex items-center justify-center">
+                    <AntButton
+                      size={'small'}
+                      className="flex items-center justify-center"
+                    >
                       <ShareAltOutlined />
                     </AntButton>
                   </Tooltip>
@@ -142,8 +158,8 @@ function SubHeader(props) {
       {locationTruncated && (
         <div className={'w-full bg-white border-b border-gray-lighter'}>
           <div className="flex w-fit items-center cursor-pointer color-gray-medium text-sm p-1">
-          <Link2 className="mx-2" size={16} />
-            <Tooltip title="Open in new tab" delay={0} placement='bottom'>
+            <Link2 className="mx-2" size={16} />
+            <Tooltip title="Open in new tab" delay={0} placement="bottom">
               <a href={currentLocation} target="_blank" className="truncate">
                 {locationTruncated}
               </a>
@@ -155,8 +171,4 @@ function SubHeader(props) {
   );
 }
 
-export default connect((state) => ({
-  siteId: state.getIn(['site', 'siteId']),
-  integrations: state.getIn(['issues', 'list']),
-  modules: state.getIn(['user', 'account', 'modules']) || []
-}))(observer(SubHeader));
+export default observer(SubHeader);
diff --git a/frontend/app/components/Session_/components/NotePopup.tsx b/frontend/app/components/Session_/components/NotePopup.tsx
index cedeec750..5f38f1ba3 100644
--- a/frontend/app/components/Session_/components/NotePopup.tsx
+++ b/frontend/app/components/Session_/components/NotePopup.tsx
@@ -1,12 +1,15 @@
 import CreateNote from 'Components/Session_/Player/Controls/components/CreateNote';
 import React from 'react';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 import { PlayerContext } from 'App/components/Session/playerContext';
 import { Button, Tooltip } from 'antd';
 import { MessageOutlined } from '@ant-design/icons';
 import { useModal } from 'App/components/Modal';
 
-function NotePopup({ tooltipActive }: { tooltipActive: boolean }) {
+function NotePopup() {
+  const { sessionStore } = useStore();
+  const tooltipActive = sessionStore.createNoteTooltip.isVisible;
   const { player, store } = React.useContext(PlayerContext);
   const { showModal, hideModal } = useModal();
   const toggleNotePopup = () => {
@@ -35,8 +38,4 @@ function NotePopup({ tooltipActive }: { tooltipActive: boolean }) {
   );
 }
 
-const NotePopupComp = connect(
-  (state: any) => ({ tooltipActive: state.getIn(['sessions', 'createNoteTooltip', 'isVisible']) }),
-)(NotePopup);
-
-export default React.memo(NotePopupComp);
+export default observer(NotePopup)
diff --git a/frontend/app/components/Signup/Signup.tsx b/frontend/app/components/Signup/Signup.tsx
index 0165fe4da..3530b9051 100644
--- a/frontend/app/components/Signup/Signup.tsx
+++ b/frontend/app/components/Signup/Signup.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
-import { connect, ConnectedProps } from 'react-redux';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 import { Icon } from 'UI';
 import SignupForm from './SignupForm';
 import HealthModal from 'Components/Header/HealthStatus/HealthModal/HealthModal';
 import { getHealthRequest } from 'Components/Header/HealthStatus/getHealth';
-import { fetchTenants } from 'Duck/user';
 import withPageTitle from 'HOCs/withPageTitle';
 import { login } from 'App/routes';
 import Copyright from 'Shared/Copyright';
@@ -22,22 +22,12 @@ const BulletItem: React.FC<{ text: string }> = ({ text }) => (
 
 const healthStatusCheck_key = '__or__healthStatusCheck_key';
 
-const mapStateToProps = (state: any) => ({
-  loading: state.getIn(['user', 'loginRequest', 'loading']),
-  authDetails: state.getIn(['user', 'authDetails'])
-});
+type SignupProps = RouteComponentProps;
 
-const mapDispatchToProps = {
-  fetchTenants
-};
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-type SignupProps = PropsFromRedux & RouteComponentProps;
-
-const Signup: React.FC<SignupProps> = ({ loading, authDetails, fetchTenants, history }) => {
+const Signup: React.FC<SignupProps> = ({ history }) => {
+  const { userStore } = useStore();
+  const authDetails = userStore.authDetails;
+  const fetchTenants = userStore.fetchTenants;
   const [healthModalPassed, setHealthModalPassed] = useState<boolean>(localStorage.getItem(healthStatusCheck_key) === 'true');
   const [healthStatusLoading, setHealthStatusLoading] = useState<boolean>(true);
   const [healthStatus, setHealthStatus] = useState<any>(null);
@@ -88,4 +78,4 @@ const Signup: React.FC<SignupProps> = ({ loading, authDetails, fetchTenants, his
   );
 };
 
-export default connector(withRouter(withPageTitle('Signup - OpenReplay')(Signup)));
+export default withRouter(withPageTitle('Signup - OpenReplay')(observer(Signup)));
diff --git a/frontend/app/components/Signup/SignupForm/SignupForm.tsx b/frontend/app/components/Signup/SignupForm/SignupForm.tsx
index 2a5981573..311e1a93b 100644
--- a/frontend/app/components/Signup/SignupForm/SignupForm.tsx
+++ b/frontend/app/components/Signup/SignupForm/SignupForm.tsx
@@ -1,35 +1,32 @@
-import React, { useState, useRef, ChangeEvent, FormEvent, useEffect } from 'react';
-import { Form, Input, Button, Link } from 'UI';
-import { login } from 'App/routes';
+import { Alert } from 'antd';
+import { observer } from 'mobx-react-lite';
+import React, {
+  ChangeEvent,
+  FormEvent,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import ReCAPTCHA from 'react-google-recaptcha';
-import { signup } from 'Duck/user';
-import { connect, ConnectedProps } from 'react-redux';
-import Select from 'Shared/Select';
-import { SITE_ID_STORAGE_KEY } from 'App/constants/storageKeys';
-import { validatePassword } from 'App/validate';
-import { PASSWORD_POLICY } from 'App/constants';
-import { Alert, Space } from 'antd';
 import { toast } from 'react-toastify';
 
+import { PASSWORD_POLICY } from 'App/constants';
+import { SITE_ID_STORAGE_KEY } from 'App/constants/storageKeys';
+import { useStore } from 'App/mstore';
+import { login } from 'App/routes';
+import { validatePassword } from 'App/validate';
+import { Button, Form, Input, Link } from 'UI';
+
+import Select from 'Shared/Select';
+
 const LOGIN_ROUTE = login();
 
-const mapState = (state: any) => ({
-  tenants: state.getIn(['user', 'tenants']),
-  errors: state.getIn(['user', 'signupRequest', 'errors']),
-  loading: state.getIn(['user', 'signupRequest', 'loading'])
-});
-
-const mapDispatch = {
-  signup
-};
-
-const connector = connect(mapState, mapDispatch);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-type SignupFormProps = PropsFromRedux;
-
-const SignupForm: React.FC<SignupFormProps> = ({ tenants, errors, loading, signup }) => {
+const SignupForm = () => {
+  const { userStore } = useStore();
+  const tenants = userStore.tenants;
+  const signup = userStore.signup;
+  const errors = userStore.signUpRequest.errors;
+  const loading = userStore.signUpRequest.loading;
   const [state, setState] = useState({
     tenantId: '',
     fullname: '',
@@ -38,13 +35,21 @@ const SignupForm: React.FC<SignupFormProps> = ({ tenants, errors, loading, signu
     projectName: '',
     organizationName: '',
     reload: false,
-    CAPTCHA_ENABLED: window.env.CAPTCHA_ENABLED === 'true'
+    CAPTCHA_ENABLED: window.env.CAPTCHA_ENABLED === 'true',
   });
   const recaptchaRef = useRef<ReCAPTCHA>(null);
   const [passwordError, setPasswordError] = useState<string | null>(null);
 
   const handleSubmit = (token: string) => {
-    const { tenantId, fullname, password, email, projectName, organizationName, auth } = state;
+    const {
+      tenantId,
+      fullname,
+      password,
+      email,
+      projectName,
+      organizationName,
+      auth,
+    } = state;
     if (!validatePassword(password)) return;
     localStorage.removeItem(SITE_ID_STORAGE_KEY);
     signup({
@@ -55,13 +60,22 @@ const SignupForm: React.FC<SignupFormProps> = ({ tenants, errors, loading, signu
       projectName,
       organizationName,
       auth,
-      'g-recaptcha-response': token
+      'g-recaptcha-response': token,
     }).then((resp: any) => {
-      if (resp && resp.errors && Array.isArray(resp.errors) && resp.errors.length > 0) {
+      if (
+        resp &&
+        resp.errors &&
+        Array.isArray(resp.errors) &&
+        resp.errors.length > 0
+      ) {
         if ((resp.errors[0] as string).includes('in use')) {
-          toast.error("This email is already linked to an account or team on OpenReplay and can't be used again.")
+          toast.error(
+            "This email is already linked to an account or team on OpenReplay and can't be used again."
+          );
         } else {
-          resp.errors[0] ? toast.error(resp.errors[0]) : toast.error('Something went wrong');
+          resp.errors[0]
+            ? toast.error(resp.errors[0])
+            : toast.error('Something went wrong');
         }
       }
     });
@@ -71,8 +85,13 @@ const SignupForm: React.FC<SignupFormProps> = ({ tenants, errors, loading, signu
   const write = ({ target: { value, name } }: ChangeEvent<HTMLInputElement>) =>
     setState({ ...state, [name]: value });
 
-  const writeOption = ({ name, value }: { name: string; value: { value: string } }) =>
-    setState({ ...state, [name]: value.value });
+  const writeOption = ({
+    name,
+    value,
+  }: {
+    name: string;
+    value: { value: string };
+  }) => setState({ ...state, [name]: value.value });
 
   const onSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -93,13 +112,17 @@ const SignupForm: React.FC<SignupFormProps> = ({ tenants, errors, loading, signu
   }, [state.password]);
 
   return (
-    <div className='flex flex-col items-center'>
-      <div className='m-10 '>
-        <img src='/assets/logo.svg' width={200} alt='Logo' />
+    <div className="flex flex-col items-center">
+      <div className="m-10 ">
+        <img src="/assets/logo.svg" width={200} alt="Logo" />
       </div>
-      <Form onSubmit={onSubmit} className='bg-white border rounded-lg shadow-sm' style={{ maxWidth: '420px' }}>
-        <div className='mb-8'>
-          <h2 className='text-center text-2xl font-medium mb-6 border-b p-5 w-full'>
+      <Form
+        onSubmit={onSubmit}
+        className="bg-white border rounded-lg shadow-sm"
+        style={{ maxWidth: '420px' }}
+      >
+        <div className="mb-8">
+          <h2 className="text-center text-2xl font-medium mb-6 border-b p-5 w-full">
             Create Account
           </h2>
         </div>
@@ -107,21 +130,21 @@ const SignupForm: React.FC<SignupFormProps> = ({ tenants, errors, loading, signu
           {state.CAPTCHA_ENABLED && (
             <ReCAPTCHA
               ref={recaptchaRef}
-              size='invisible'
+              size="invisible"
               sitekey={window.env.CAPTCHA_SITE_KEY}
               onChange={(token) => handleSubmit(token || '')}
             />
           )}
-          <div className='px-8'>
+          <div className="px-8">
             {tenants.length > 0 && (
               <Form.Field>
                 <label>Existing Accounts</label>
                 <Select
-                  className='w-full'
-                  placeholder='Select account'
+                  className="w-full"
+                  placeholder="Select account"
                   selection
                   options={tenants}
-                  name='tenantId'
+                  name="tenantId"
                   // value={ instance.currentPeriod }
                   onChange={writeOption}
                 />
@@ -131,83 +154,88 @@ const SignupForm: React.FC<SignupFormProps> = ({ tenants, errors, loading, signu
               <label>Email Address</label>
               <Input
                 autoFocus={true}
-                autoComplete='username'
-                type='email'
-                placeholder='E.g. email@yourcompany.com'
-                name='email'
+                autoComplete="username"
+                type="email"
+                placeholder="E.g. email@yourcompany.com"
+                name="email"
                 onChange={write}
                 required={true}
-                icon='envelope'
-                className='rounded-lg'
+                icon="envelope"
+                className="rounded-lg"
               />
             </Form.Field>
             <Form.Field>
-              <label className='mb-2'>Password</label>
+              <label className="mb-2">Password</label>
               <Input
-                type='password'
-                placeholder='Min 8 Characters'
+                type="password"
+                placeholder="Min 8 Characters"
                 minLength={8}
-                name='password'
+                name="password"
                 onChange={write}
                 required={true}
-                icon='key'
-                className='rounded-lg'
+                icon="key"
+                className="rounded-lg"
               />
             </Form.Field>
             <Form.Field>
               <label>Name</label>
               <Input
-                type='text'
-                placeholder='E.g John Doe'
-                name='fullname'
+                type="text"
+                placeholder="E.g John Doe"
+                name="fullname"
                 onChange={write}
                 required={true}
-                icon='user-alt'
-                className='rounded-lg'
+                icon="user-alt"
+                className="rounded-lg"
               />
             </Form.Field>
             <Form.Field>
               <label>Organization</label>
               <Input
-                type='text'
-                placeholder='E.g Uber'
-                name='organizationName'
+                type="text"
+                placeholder="E.g Uber"
+                name="organizationName"
                 onChange={write}
                 required={true}
-                icon='buildings'
-                className='rounded-lg'
+                icon="buildings"
+                className="rounded-lg"
               />
             </Form.Field>
 
             {passwordError && (
               // <Alert type='error' message={PASSWORD_POLICY} banner icon={null} />
               <Alert
-                className='my-3 rounded-lg'
+                className="my-3 rounded-lg"
                 // message="Error Text"
                 description={PASSWORD_POLICY}
-                type='error'
+                type="error"
               />
             )}
             {errors && errors.length && (
               <Alert
-                className='my-3 rounded-lg'
+                className="my-3 rounded-lg"
                 // message="Error Text"
                 description={errors[0]}
-                type='error'
+                type="error"
               />
             )}
 
-            <Button type='submit' variant='primary' loading={loading} className='w-full rounded-lg'>
+            <Button
+              type="submit"
+              variant="primary"
+              loading={loading}
+              className="w-full rounded-lg"
+            >
               Create Account
             </Button>
-            <div className='my-6'>
-              <div className='text-sm'>
+            <div className="my-6">
+              <div className="text-sm">
                 By signing up, you agree to our{' '}
-                <a href='https://openreplay.com/terms.html' className='link'>
+                <a href="https://openreplay.com/terms.html" className="link">
                   terms of service
                 </a>{' '}
                 and{' '}
-                <a href='https://openreplay.com/privacy.html' className='link'>
+                <a href="https://openreplay.com/privacy.html" className="link">
                   privacy policy
                 </a>
                 .
@@ -217,9 +245,9 @@ const SignupForm: React.FC<SignupFormProps> = ({ tenants, errors, loading, signu
         </>
       </Form>
 
-      <div className='text-center py-6'>
+      <div className="text-center py-6">
         Already having an account?{' '}
-        <span className='link'>
+        <span className="link">
           <Link to={LOGIN_ROUTE}>Login</Link>
         </span>
       </div>
@@ -227,4 +255,4 @@ const SignupForm: React.FC<SignupFormProps> = ({ tenants, errors, loading, signu
   );
 };
 
-export default connector(SignupForm);
+export default observer(SignupForm);
diff --git a/frontend/app/components/Spots/SpotPlayer/SpotPlayer.tsx b/frontend/app/components/Spots/SpotPlayer/SpotPlayer.tsx
index 8c94f3420..3c6857e05 100644
--- a/frontend/app/components/Spots/SpotPlayer/SpotPlayer.tsx
+++ b/frontend/app/components/Spots/SpotPlayer/SpotPlayer.tsx
@@ -1,7 +1,6 @@
 import cn from 'classnames';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
-import { connect } from 'react-redux';
 import { useHistory, useParams } from 'react-router-dom';
 
 import { useStore } from 'App/mstore';
@@ -26,11 +25,13 @@ import SpotVideoContainer from './components/SpotVideoContainer';
 import { Tab } from './consts';
 import spotPlayerStore, { PANELS } from './spotPlayerStore';
 
-function SpotPlayer({ loggedIn }: { loggedIn: boolean }) {
+function SpotPlayer() {
   const defaultHeight = getDefaultPanelHeight();
   const history = useHistory();
   const [panelHeight, setPanelHeight] = React.useState(defaultHeight);
-  const { spotStore } = useStore();
+  const { spotStore, userStore } = useStore();
+  const userEmail = userStore.account.name;
+  const loggedIn = !!userEmail;
   const { spotId } = useParams<{ spotId: string }>();
   const [activeTab, setActiveTab] = React.useState<Tab | null>(null);
 
@@ -301,15 +302,6 @@ const SpotOverviewConnector = observer(() => {
   );
 });
 
-function mapStateToProps(state: any) {
-  const userEmail = state.getIn(['user', 'account', 'name']);
-  const loggedIn = !!userEmail;
-  return {
-    userEmail,
-    loggedIn,
-  };
-}
-
 export default withPermissions(['SPOT'])(
-  connect(mapStateToProps)(observer(SpotPlayer))
+  observer(SpotPlayer)
 );
diff --git a/frontend/app/components/Spots/SpotPlayer/components/CommentsSection.tsx b/frontend/app/components/Spots/SpotPlayer/components/CommentsSection.tsx
index 1cc924407..04e9c6088 100644
--- a/frontend/app/components/Spots/SpotPlayer/components/CommentsSection.tsx
+++ b/frontend/app/components/Spots/SpotPlayer/components/CommentsSection.tsx
@@ -4,14 +4,15 @@ import { Button, Input, Tooltip } from 'antd';
 import cn from 'classnames';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
-import { connect } from 'react-redux';
 import { toast } from 'react-toastify';
 
 import { resentOrDate } from 'App/date';
 import { useStore } from 'App/mstore';
 
 function CommentsSection({ onClose }: { onClose?: () => void }) {
-  const { spotStore } = useStore();
+  const { spotStore, userStore } = useStore();
+  const userEmail = userStore.account.name;
+  const loggedIn = !!userEmail;
   const comments = spotStore.currentSpot?.comments ?? [];
   return (
     <div
@@ -52,9 +53,11 @@ function CommentsSection({ onClose }: { onClose?: () => void }) {
           </div>
         ))}
 
-        <BottomSectionContainer
+        <BottomSection
           unloggedLimit={comments.length > 5}
           loggedLimit={comments.length > 25}
+          loggedIn={loggedIn}
+          userEmail={userEmail}
         />
       </div>
     </div>
@@ -145,17 +148,6 @@ function BottomSection({
   );
 }
 
-function mapStateToProps(state: any) {
-  const userEmail = state.getIn(['user', 'account', 'name']);
-  const loggedIn = !!userEmail;
-  return {
-    userEmail,
-    loggedIn,
-  };
-}
-
-const BottomSectionContainer = connect(mapStateToProps)(BottomSection);
-
 // const promoTitles = ['Found this Spot helpful?', 'Enjoyed this recording?'];
 //
 //   <div>
diff --git a/frontend/app/components/Spots/SpotPlayer/components/SpotPlayerHeader.tsx b/frontend/app/components/Spots/SpotPlayer/components/SpotPlayerHeader.tsx
index 458a52d81..427e95d8d 100644
--- a/frontend/app/components/Spots/SpotPlayer/components/SpotPlayerHeader.tsx
+++ b/frontend/app/components/Spots/SpotPlayer/components/SpotPlayerHeader.tsx
@@ -20,7 +20,6 @@ import {
 import copy from 'copy-to-clipboard';
 import { observer } from 'mobx-react-lite';
 import React, { useState } from 'react';
-import { connect } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
 import Tabs from 'App/components/Session/Tabs';
@@ -40,24 +39,22 @@ function SpotPlayerHeader({
   title,
   user,
   date,
-  isLoggedIn,
   browserVersion,
   resolution,
   platform,
-  hasShareAccess,
 }: {
   activeTab: Tab | null;
   setActiveTab: (tab: Tab) => void;
   title: string;
   user: string;
   date: string;
-  isLoggedIn: boolean;
   browserVersion: string | null;
   resolution: string | null;
   platform: string | null;
-  hasShareAccess: boolean;
 }) {
-  const { spotStore } = useStore();
+  const { spotStore, userStore } = useStore();
+  const isLoggedIn = !!userStore.jwt;
+  const hasShareAccess = userStore.isEnterprise ? userStore.account.permissions.includes('SPOT_PUBLIC') : true;
   const comments = spotStore.currentSpot?.comments ?? [];
 
   const [dropdownOpen, setDropdownOpen] = useState(false);
@@ -256,12 +253,4 @@ async function downloadFile(url: string, fileName: string) {
   }
 }
 
-export default connect((state: any) => {
-  const jwt = state.getIn(['user', 'jwt']);
-  const isEE = state.getIn(['user', 'account', 'edition']) === 'ee';
-  const permissions: string[] =
-    state.getIn(['user', 'account', 'permissions']) || [];
-
-  const hasShareAccess = isEE ? permissions.includes('SPOT_PUBLIC') : true;
-  return { isLoggedIn: !!jwt, hasShareAccess };
-})(observer(SpotPlayerHeader));
+export default observer(SpotPlayerHeader);
diff --git a/frontend/app/components/UpdatePassword/UpdatePassword.js b/frontend/app/components/UpdatePassword/UpdatePassword.js
index cf30e2cc4..89a30fdaf 100644
--- a/frontend/app/components/UpdatePassword/UpdatePassword.js
+++ b/frontend/app/components/UpdatePassword/UpdatePassword.js
@@ -1,111 +1,120 @@
-import React from 'react';
-import { connect } from 'react-redux';
 import withPageTitle from 'HOCs/withPageTitle';
-import { Loader, Button, Message } from 'UI';
-import { updatePassword } from 'Duck/user';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import { useStore } from 'App/mstore';
+import { Button, Loader, Message } from 'UI';
+
 import styles from './updatePassword.module.css';
 
 const ERROR_DOESNT_MATCH = "Passwords doesn't match";
 const MIN_LENGTH = 8;
-const PASSWORD_POLICY = `Password should contain at least ${ MIN_LENGTH } symbols`;
+const PASSWORD_POLICY = `Password should contain at least ${MIN_LENGTH} symbols`;
 
 const checkDoesntMatch = (newPassword, newPasswordRepeat) =>
   newPasswordRepeat.length > 0 && newPasswordRepeat !== newPassword;
 
-@connect(
-  state => ({
-    errors: state.getIn([ 'user', 'updatePasswordRequest', 'errors' ]),
-    loading: state.getIn([ 'user', 'updatePasswordRequest', 'loading' ]),
-  }),
-  { updatePassword },
-)
-@withPageTitle("Password Change - OpenReplay")
-export default class UpdatePassword extends React.Component {
-  state = {
-    oldPassword: '',
-    newPassword: '',
-    newPasswordRepeat: '',
+function UpdatePassword() {
+  const { userStore } = useStore();
+  const updatePassword = userStore.updatePassword;
+  const errors = userStore.updatePasswordRequest.errors;
+  const loading = userStore.updatePasswordRequest.loading;
+  const [oldPassword, setOldPassword] = React.useState('');
+  const [newPassword, setNewPassword] = React.useState('');
+  const [newPasswordRepeat, setNewPasswordRepeat] = React.useState('');
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    if (isSubmitDisabled()) return;
+
+    void updatePassword({ oldPassword, newPassword });
   };
 
-  handleSubmit = (event) => {
-    event.preventDefault();
-    if (this.isSubmitDisabled()) return;
+  const writeOldPass = ({ target: { value } }) => setOldPassword(value);
+  const writeNewPass = ({ target: { value } }) => setNewPassword(value);
+  const writeNewPassRepeat = ({ target: { value } }) =>
+    setNewPasswordRepeat(value);
 
-    const { oldPassword, newPassword } = this.state;
-    this.props.updatePassword({ oldPassword, newPassword });
-  }
-
-  write = ({ target: { value, name } }) => this.setState({ [ name ]: value })
-
-  isSubmitDisabled() {
-    const { oldPassword, newPassword, newPasswordRepeat } = this.state;
-    if (newPassword !== newPasswordRepeat ||
+  const isSubmitDisabled = () => {
+    if (
+      newPassword !== newPasswordRepeat ||
       newPassword.length < MIN_LENGTH ||
-      oldPassword.length < MIN_LENGTH) return true;
+      oldPassword.length < MIN_LENGTH
+    )
+      return true;
     return false;
-  }
+  };
 
-  render() {
-    const { errors, loading } = this.props;
-    const { newPassword, newPasswordRepeat } = this.state;
-    const doesntMatch = checkDoesntMatch(newPassword, newPasswordRepeat);
+  const doesntMatch = checkDoesntMatch(newPassword, newPasswordRepeat);
 
-    return (
-      <div className={ styles.form }>
-        {/* <div className={ styles.betaTag }>{'BETA'}</div> */}
-        <div className={ styles.logo } />
-        <form onSubmit={ this.handleSubmit }>
-          <h2>{ 'Password Change' }</h2>
-          <Loader loading={ loading }>
-            <div>
-              <div className={ styles.inputWithIcon }>
-                <i className={ styles.inputIconPassword } />
-                <input
-                  type="password"
-                  placeholder="Old Password"
-                  name="oldPassword"
-                  onChange={ this.write }
-                  className={ styles.password }
-                />
-              </div>
-              <div className={ styles.inputWithIcon }>
-                <i className={ styles.inputIconPassword } />
-                <input
-                  type="password"
-                  placeholder="New Password"
-                  name="newPassword"
-                  onChange={ this.write }
-                  className={ styles.password }
-                />
-              </div>
-              <div className={ styles.passwordPolicy } data-hidden={ newPassword.length > 7 }>
-                { PASSWORD_POLICY }
-              </div>
-              <div className={ styles.inputWithIcon }>
-                <i className={ styles.inputIconPassword } />
-                <input
-                  type="password"
-                  placeholder="Repeat New Password"
-                  name="newPasswordRepeat"
-                  onChange={ this.write }
-                  className={ styles.password }
-                />
-              </div>
-              <Message error hidden={ !doesntMatch }>
-                { ERROR_DOESNT_MATCH }
-              </Message>
+  return (
+    <div className={styles.form}>
+      <div className={styles.logo} />
+      <form onSubmit={handleSubmit}>
+        <h2>{'Password Change'}</h2>
+        <Loader loading={loading}>
+          <div>
+            <div className={styles.inputWithIcon}>
+              <i className={styles.inputIconPassword} />
+              <input
+                type="password"
+                placeholder="Old Password"
+                name="oldPassword"
+                onChange={writeOldPass}
+                className={styles.password}
+              />
             </div>
-          </Loader>
-          { errors &&
-            <div className={ styles.errors }>
-              { errors.map(error => <span>{ error }<br /></span>) }
+            <div className={styles.inputWithIcon}>
+              <i className={styles.inputIconPassword} />
+              <input
+                type="password"
+                placeholder="New Password"
+                name="newPassword"
+                onChange={writeNewPass}
+                className={styles.password}
+              />
             </div>
-          }
-          <div className={ styles.formFooter }>
-            <Button type="submit" variant="primary" >{ 'Update' }</Button>
+            <div
+              className={styles.passwordPolicy}
+              data-hidden={newPassword.length > 7}
+            >
+              {PASSWORD_POLICY}
+            </div>
+            <div className={styles.inputWithIcon}>
+              <i className={styles.inputIconPassword} />
+              <input
+                type="password"
+                placeholder="Repeat New Password"
+                name="newPasswordRepeat"
+                onChange={writeNewPassRepeat}
+                className={styles.password}
+              />
+            </div>
+            <Message error hidden={!doesntMatch}>
+              {ERROR_DOESNT_MATCH}
+            </Message>
           </div>
-        </form>
-      </div>
-    );
-  }
+        </Loader>
+        {errors && (
+          <div className={styles.errors}>
+            {errors.map((error) => (
+              <span>
+                {error}
+                <br />
+              </span>
+            ))}
+          </div>
+        )}
+        <div className={styles.formFooter}>
+          <Button type="submit" variant="primary">
+            {'Update'}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
 }
+
+export default withPageTitle('Password Change - OpenReplay')(
+  observer(UpdatePassword)
+);
diff --git a/frontend/app/components/UsabilityTesting/TestOverview.tsx b/frontend/app/components/UsabilityTesting/TestOverview.tsx
index fa7002aba..2dd8cc565 100644
--- a/frontend/app/components/UsabilityTesting/TestOverview.tsx
+++ b/frontend/app/components/UsabilityTesting/TestOverview.tsx
@@ -107,7 +107,7 @@ function TestOverview() {
   }, [testId, siteId]);
 
   if (!uxtestingStore.instance) {
-    return <Loader loading={uxtestingStore.isLoading}>No Data</Loader>;
+    return <Loader loading={uxtestingStore.isLoading}>Loading Data...</Loader>;
   } else {
     document.title = `Usability Tests | ${uxtestingStore.instance.title}`;
   }
diff --git a/frontend/app/components/hocs/withPermissions.js b/frontend/app/components/hocs/withPermissions.js
index 2b3a5d60a..42a4986ac 100644
--- a/frontend/app/components/hocs/withPermissions.js
+++ b/frontend/app/components/hocs/withPermissions.js
@@ -1,34 +1,30 @@
+import { useStore } from "App/mstore";
 import React from 'react';
-import { connect } from 'react-redux';
 import { NoPermission, NoSessionPermission } from 'UI';
 
+
+
 export default (requiredPermissions, className, isReplay = false, andEd = true) => (BaseComponent) => {
-  @connect((state, props) => ({
-    permissions:
-      state.getIn(['user', 'account', 'permissions']) || [],
-    isEnterprise:
-      state.getIn(['user', 'account', 'edition']) === 'ee'
-  }))
-  class WrapperClass extends React.PureComponent {
-    render() {
-      const hasPermission = andEd ?
-        requiredPermissions.every((permission) => this.props.permissions.includes(permission)) :
-        requiredPermissions.some((permission) => this.props.permissions.includes(permission)
-        );
-
-      return !this.props.isEnterprise || hasPermission ? (
-        <BaseComponent {...this.props} />
-      ) : (
-        <div className={className}>
-          {isReplay ? (
-            <NoSessionPermission />
-          ) : (
-            <NoPermission />
-          )}
-        </div>
+  function WrapperClass(props) {
+    const { userStore } = useStore();
+    const permissions = userStore.account.permissions ?? [];
+    const isEnterprise = userStore.isEnterprise;
+    const hasPermission = andEd ?
+      requiredPermissions.every((permission) => permissions.includes(permission)) :
+      requiredPermissions.some((permission) => permissions.includes(permission)
       );
-    }
-  }
 
+    return !isEnterprise || hasPermission ? (
+      <BaseComponent {...props} />
+    ) : (
+      <div className={className}>
+        {isReplay ? (
+          <NoSessionPermission />
+        ) : (
+          <NoPermission />
+        )}
+      </div>
+    );
+  }
   return WrapperClass;
 }
diff --git a/frontend/app/components/hocs/withReport.tsx b/frontend/app/components/hocs/withReport.tsx
index ce33182a1..d7a2a7073 100644
--- a/frontend/app/components/hocs/withReport.tsx
+++ b/frontend/app/components/hocs/withReport.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect } from 'react';
 import { convertElementToImage } from 'App/utils';
 import { useStore } from 'App/mstore';
-import { useObserver } from 'mobx-react-lite';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react-lite';
 import { fileNameFormat } from 'App/utils';
 import { toast } from 'react-toastify';
 import { forceVisible } from 'react-lazyload';
@@ -15,11 +14,11 @@ interface Props {
 export default function withReport<P extends Props>(WrappedComponent: React.ComponentType<P>) {
   const ComponentWithReport = (props: P) => {
     const [rendering, setRendering] = React.useState(false);
-    const { site } = props;
-    const { dashboardStore } = useStore();
-    const dashboard: any = useObserver(() => dashboardStore.selectedDashboard);
-    const period = useObserver(() => dashboardStore.period);
-    const pendingRequests = useObserver(() => dashboardStore.pendingRequests);
+    const { dashboardStore, projectsStore } = useStore();
+    const site = projectsStore.instance;
+    const dashboard: any = dashboardStore.selectedDashboard;
+    const period = dashboardStore.period;
+    const pendingRequests = dashboardStore.pendingRequests;
 
     useEffect(() => {
       if (rendering && pendingRequests <= 0) {
@@ -181,7 +180,5 @@ export default function withReport<P extends Props>(WrappedComponent: React.Comp
     );
   };
 
-  return connect((state: any) => ({
-    site: state.getIn(['site', 'instance']),
-  }))(ComponentWithReport);
+  return observer(ComponentWithReport);
 }
diff --git a/frontend/app/components/hocs/withSiteIdRouter.js b/frontend/app/components/hocs/withSiteIdRouter.js
index ee41610ce..756a5d280 100644
--- a/frontend/app/components/hocs/withSiteIdRouter.js
+++ b/frontend/app/components/hocs/withSiteIdRouter.js
@@ -1,32 +1,21 @@
 import React from 'react';
 import { withRouter } from 'react-router-dom';
-import { connect } from 'react-redux';
 import { withSiteId } from 'App/routes';
-import { setSiteId } from 'Duck/site';
+import { observer } from 'mobx-react-lite'
+import { useStore } from "App/mstore";
 
-export default BaseComponent => {
-  @withRouter
-  @connect((state, props) => ({
-    urlSiteId: props.match.params.siteId,
-    siteId: state.getIn(['site', 'siteId']),
-  }), {
-    setSiteId,
-  })
-  class WrappedClass extends React.PureComponent {
-    push = (location) => {
-      const { history, siteId } = this.props;
-      if (typeof location === 'string') {
-        history.push(withSiteId(location, siteId));
-      } else if (typeof location === 'object') {
-        history.push({ ...location, pathname: withSiteId(location.pathname, siteId) });
-      }
-    }
+export default BaseComponent => withRouter(observer((props) => {
+  const { history, ...other } = props
+  const { projectsStore } = useStore();
+  const siteId = projectsStore.siteId
 
-    render() {
-      const { history, ...other } = this.props
-
-      return <BaseComponent {...other} history={{ ...history, push: this.push }} />
+  const push = (location) => {
+    if (typeof location === 'string') {
+      history.push(withSiteId(location, siteId));
+    } else if (typeof location === 'object') {
+      history.push({ ...location, pathname: withSiteId(location.pathname, siteId) });
     }
   }
-  return WrappedClass
-}
\ No newline at end of file
+
+  return <BaseComponent {...other} history={{ ...history, push: push }} />
+}))
\ No newline at end of file
diff --git a/frontend/app/components/hocs/withSiteIdUpdater.js b/frontend/app/components/hocs/withSiteIdUpdater.js
index 0849bbd84..8bc3f533e 100644
--- a/frontend/app/components/hocs/withSiteIdUpdater.js
+++ b/frontend/app/components/hocs/withSiteIdUpdater.js
@@ -1,40 +1,39 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { setSiteId } from 'Duck/site';
+import React, { useEffect, useRef } from 'react';
+import { useStore } from "App/mstore";
+import { observer } from 'mobx-react-lite'
 
-export default (BaseComponent) => {
-  @connect((state, props) => ({
-    urlSiteId: props.match.params.siteId,
-    siteId: state.getIn(['site', 'siteId']),
-  }), {
-    setSiteId,
-  })
-  class WrapperClass extends React.PureComponent {
-    state = { load: false }
-    constructor(props) {
-      super(props);
-      if (props.urlSiteId && props.urlSiteId !== props.siteId) {
-        props.setSiteId(props.urlSiteId);
+const withSiteIdUpdater = (BaseComponent) => {
+  const WrapperComponent = (props) => {
+    const { projectsStore } = useStore();
+    const siteId = projectsStore.siteId;
+    const setSiteId = projectsStore.setSiteId;
+    const urlSiteId = props.match.params.siteId
+    const prevSiteIdRef = useRef(siteId);
+
+    useEffect(() => {
+      if (urlSiteId && urlSiteId !== siteId) {
+        setSiteId(urlSiteId);
       }
-    }
-    componentDidUpdate(prevProps) {
-      const { urlSiteId, siteId, location: { pathname }, history } = this.props;
+    }, []);
+
+    useEffect(() => {
+      const { location: { pathname }, history } = props;
+
       const shouldUrlUpdate = urlSiteId && parseInt(urlSiteId, 10) !== parseInt(siteId, 10);
       if (shouldUrlUpdate) {
         const path = ['', siteId].concat(pathname.split('/').slice(2)).join('/');
         history.push(path);
       }
-      const shouldBaseComponentReload = shouldUrlUpdate || siteId !== prevProps.siteId;
-      if (shouldBaseComponentReload) {
-        this.setState({ load: true });
-        setTimeout(() => this.setState({ load: false }), 0);
-      }
-    }
+      prevSiteIdRef.current = siteId;
+    }, [urlSiteId, siteId, props.location.pathname, props.history]);
 
-    render() {
-      return this.state.load ? null : <BaseComponent {...this.props} />;
-    }
-  }
+    const key = siteId;
 
-  return WrapperClass
-}
+    const passedProps = { ...props, siteId, setSiteId, urlSiteId };
+    return <BaseComponent key={key} {...passedProps} />;
+  };
+
+  return observer(WrapperComponent);
+};
+
+export default withSiteIdUpdater;
diff --git a/frontend/app/components/shared/Bookmark/Bookmark.tsx b/frontend/app/components/shared/Bookmark/Bookmark.tsx
index 225476b68..6d42e6274 100644
--- a/frontend/app/components/shared/Bookmark/Bookmark.tsx
+++ b/frontend/app/components/shared/Bookmark/Bookmark.tsx
@@ -1,22 +1,21 @@
 import { Button, Tooltip } from 'antd';
 import { BookmarkCheck, Bookmark as BookmarkIcn, Vault } from 'lucide-react';
 import React, { useEffect, useState } from 'react';
-import { connect } from 'react-redux';
 import { toast } from 'react-toastify';
-
-import { toggleFavorite } from 'Duck/sessions';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 
 interface Props {
-  toggleFavorite: (sessionId: string) => Promise<void>;
-  favorite: boolean;
   sessionId: any;
-  isEnterprise: boolean;
-  noMargin?: boolean;
 }
 
-function Bookmark(props: Props) {
-  const { sessionId, favorite, isEnterprise, noMargin } = props;
+function Bookmark({ sessionId }: Props) {
+  const { sessionStore, userStore } = useStore();
+  const isEnterprise = userStore.isEnterprise;
+  const favorite = sessionStore.current.favorite;
+  const onToggleFavorite = sessionStore.toggleFavorite;
   const [isFavorite, setIsFavorite] = useState(favorite);
+
   const ADDED_MESSAGE = isEnterprise
     ? 'Session added to vault'
     : 'Session added to your bookmarks';
@@ -33,7 +32,7 @@ function Bookmark(props: Props) {
   }, [favorite]);
 
   const toggleFavorite = async () => {
-    props.toggleFavorite(sessionId).then(() => {
+    onToggleFavorite(sessionId).then(() => {
       toast.success(isFavorite ? REMOVED_MESSAGE : ADDED_MESSAGE);
       setIsFavorite(!isFavorite);
     });
@@ -63,10 +62,4 @@ function Bookmark(props: Props) {
   );
 }
 
-export default connect(
-  (state: any) => ({
-    isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
-    favorite: state.getIn(['sessions', 'current']).favorite,
-  }),
-  { toggleFavorite }
-)(Bookmark);
+export default observer(Bookmark);
diff --git a/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx b/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx
deleted file mode 100644
index aedd4a097..000000000
--- a/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { IconButton } from 'UI';
-import { connect } from 'react-redux';
-import { edit, init } from 'Duck/customMetrics';
-
-interface Props {
-  init: (instance?, setDefault?) => void;
-}
-function CustomMetrics(props: Props) {
-  return (
-    <div className="self-start">
-      <IconButton plain outline icon="plus" label="CREATE METRIC" onClick={() => props.init()} />
-    </div>
-  );
-}
-
-export default connect(null, { edit, init })(CustomMetrics);
\ No newline at end of file
diff --git a/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.module.css b/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.module.css
deleted file mode 100644
index 05f1ffb8a..000000000
--- a/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.module.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.wrapper {
-    padding: 20px;
-    background-color: #f6f6f6;
-    min-height: calc(100vh - 59px);
-  }
-
-  .dropdown {
-    display: flex !important;
-    padding: 4px 6px;
-    border-radius: 3px;
-    color: $gray-darkest;
-    font-weight: 500;
-    &:hover {
-      background-color: $gray-light;
-    }
-  }
-  
-  .dropdownTrigger {
-    padding: 4px 8px;
-    border-radius: 3px;
-    &:hover {
-      background-color: $gray-light;
-    }
-  }
-  
-  .dropdownIcon {
-    margin-top: 2px;
-    margin-left: 3px;
-  }
\ No newline at end of file
diff --git a/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.tsx b/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.tsx
deleted file mode 100644
index d13b760d9..000000000
--- a/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { SlideModal, NoContent, Dropdown, Icon, TimezoneDropdown, Loader } from 'UI';
-import SessionItem from 'Shared/SessionItem';
-import stl from './SessionListModal.module.css';
-import { connect } from 'react-redux';
-import { fetchSessionList, setActiveWidget } from 'Duck/customMetrics';
-import { DateTime } from 'luxon';
-import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
-interface Props {
-    loading: boolean;
-    list: any;
-    fetchSessionList: (params) => void;
-    activeWidget: any;
-    setActiveWidget: (widget) => void;
-}
-function SessionListModal(props: Props) {
-    const { activeWidget, loading, list } = props;
-    const [seriesOptions, setSeriesOptions] = useState([
-        { text: 'All', value: 'all' },
-    ]);
-    const [activeSeries, setActiveSeries] = useState('all');
-    useEffect(() => {
-        if (!activeWidget || !activeWidget.widget) return;
-        props.fetchSessionList({ 
-            metricId: activeWidget.widget.metricId,
-            startDate: activeWidget.startTimestamp,
-            endDate: activeWidget.endTimestamp,
-            filters: activeWidget.filters || [],
-        });
-    }, [activeWidget]);
-
-    useEffect(() => {
-        if (!list) return;
-        const seriesOptions = list.map(item => ({
-            text: item.seriesName,
-            value: item.seriesId,
-        }));
-        setSeriesOptions([
-            { text: 'All', value: 'all' },
-            ...seriesOptions,
-        ]);
-    }, [list]);
-
-    const getListSessionsBySeries = (seriesId) => {
-        const arr: any = []
-        list.forEach(element => {
-            if (seriesId === 'all') {
-                const sessionIds = arr.map(i => i.sessionId);
-                arr.push(...element.sessions.filter(i => !sessionIds.includes(i.sessionId)));
-            } else {
-                if (element.seriesId === seriesId) {
-                    arr.push(...element.sessions)
-                }
-            }
-        });
-        return arr;
-    }
-
-    const writeOption = (e, { name, value }) => setActiveSeries(value);
-    const filteredSessions = getListSessionsBySeries(activeSeries);
-    const startTime = DateTime.fromMillis(activeWidget.startTimestamp).toFormat('LLL dd, yyyy HH:mm a');
-    const endTime = DateTime.fromMillis(activeWidget.endTimestamp).toFormat('LLL dd, yyyy HH:mm a');
-
-    return (
-        <SlideModal
-            title={ activeWidget && (
-                <div className="flex items-center">
-                    <div className="mr-auto">{ activeWidget.widget.name } </div>
-                </div>
-            )}
-            isDisplayed={ !!activeWidget }
-            onClose={ () => props.setActiveWidget(null)}
-            content={ activeWidget && (
-                <div className={ stl.wrapper }>
-                    <div className="mb-6 flex items-center">
-                        <div className="mr-auto">Showing all sessions between <span className="font-medium">{startTime}</span> and <span className="font-medium">{endTime}</span> </div>
-                        <div className="flex items-center ml-6">
-                            <div className="flex items-center">
-                                <span className="mr-2 color-gray-medium">Timezone</span>
-                                <TimezoneDropdown />
-                            </div>
-                            { activeWidget.widget.metricType !== 'table' && (
-                                <div className="flex items-center ml-6">
-                                    <span className="mr-2 color-gray-medium">Series</span>
-                                    <Dropdown
-                                        className={stl.dropdown}
-                                        direction="left"
-                                        options={ seriesOptions }
-                                        name="change"
-                                        value={ activeSeries }
-                                        onChange={ writeOption }
-                                        id="change-dropdown"
-                                        // icon={null}
-                                        icon={ <Icon name="chevron-down" color="gray-dark" size="14" className={stl.dropdownIcon} /> }
-                                    />
-                                </div>
-                            )}
-                            {/* <span className="mr-2 color-gray-medium">Series</span> */}
-                        </div>
-                    </div>
-                    <Loader loading={loading}>
-                        <NoContent 
-                            show={ !loading && (filteredSessions.length === 0 )}
-                            title={
-                                <div className="flex flex-col items-center justify-center">
-                                    <AnimatedSVG name={ICONS.NO_RESULTS} size={60} />
-                                    <div className="mt-6 text-2xl">No recordings found!</div>
-                                </div>
-                            }
-                            // animatedIcon="no-results"
-                        >
-                            { filteredSessions.map(session => <SessionItem key={ session.sessionId } session={ session } />) }
-                        </NoContent> 
-                    </Loader>
-                </div>
-            )}
-        />
-    );
-}
-
-export default connect(state => ({
-    loading: state.getIn(['customMetrics', 'fetchSessionList', 'loading']),
-    list: state.getIn(['customMetrics', 'sessionList']),
-    // activeWidget: state.getIn(['customMetrics', 'activeWidget']),
-}), { fetchSessionList, setActiveWidget })(SessionListModal);
diff --git a/frontend/app/components/shared/CustomMetrics/SessionListModal/index.ts b/frontend/app/components/shared/CustomMetrics/SessionListModal/index.ts
deleted file mode 100644
index 75303a134..000000000
--- a/frontend/app/components/shared/CustomMetrics/SessionListModal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SessionListModal';
\ No newline at end of file
diff --git a/frontend/app/components/shared/CustomMetrics/index.ts b/frontend/app/components/shared/CustomMetrics/index.ts
deleted file mode 100644
index ebbb8203c..000000000
--- a/frontend/app/components/shared/CustomMetrics/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './CustomMetrics';
\ No newline at end of file
diff --git a/frontend/app/components/shared/DevTools/BottomBlock/Header.tsx b/frontend/app/components/shared/DevTools/BottomBlock/Header.tsx
index 5d9ae4b87..ccb233416 100644
--- a/frontend/app/components/shared/DevTools/BottomBlock/Header.tsx
+++ b/frontend/app/components/shared/DevTools/BottomBlock/Header.tsx
@@ -1,9 +1,8 @@
 import { Tooltip } from 'antd';
 import cn from 'classnames';
 import React from 'react';
-import { connect } from 'react-redux';
 
-import { closeBottomBlock } from 'Duck/components/player';
+import { useStore } from 'App/mstore';
 import { CloseButton } from 'UI';
 
 import stl from './header.module.css';
@@ -11,7 +10,6 @@ import stl from './header.module.css';
 const Header = ({
   children,
   className,
-  closeBottomBlock,
   onClose,
   onFilterChange,
   showClose = true,
@@ -19,32 +17,37 @@ const Header = ({
 }: {
   children?: React.ReactNode;
   className?: string;
-  closeBottomBlock?: () => void;
   onFilterChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   showClose?: boolean;
   onClose?: () => void;
-}) => (
-  <div className={cn('relative border-r border-l py-1', stl.header)}>
-    <div
-      className={cn(
-        'w-full h-full flex justify-between items-center',
-        className
-      )}
-    >
-      <div className="w-full flex items-center justify-between">{children}</div>
-      {showClose && (
-        <Tooltip title="Close Panel">
-          <CloseButton
-            onClick={onClose ? onClose : closeBottomBlock}
-            size="18"
-            className="ml-2 hover:bg-black/10 rounded-lg p-1"
-          />
-        </Tooltip>
-      )}
+}) => {
+  const { uiPlayerStore } = useStore();
+  const closeBottomBlock = uiPlayerStore.closeBottomBlock;
+  return (
+    <div className={cn('relative border-r border-l py-1', stl.header)}>
+      <div
+        className={cn(
+          'w-full h-full flex justify-between items-center',
+          className
+        )}
+      >
+        <div className="w-full flex items-center justify-between">
+          {children}
+        </div>
+        {showClose && (
+          <Tooltip title="Close Panel">
+            <CloseButton
+              onClick={onClose ? onClose : closeBottomBlock}
+              size="18"
+              className="ml-2 hover:bg-black/10 rounded-lg p-1"
+            />
+          </Tooltip>
+        )}
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 Header.displayName = 'Header';
 
-export default connect(null, { closeBottomBlock })(Header);
+export default Header;
diff --git a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
index 50a2216eb..b96b94e07 100644
--- a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
+++ b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
@@ -11,7 +11,6 @@ import ErrorDetailsModal from 'App/components/Dashboard/components/Errors/ErrorD
 import { useModal } from 'App/components/Modal';
 import useAutoscroll, { getLastItemTime } from '../useAutoscroll';
 import { useRegExListFilterMemo, useTabListFilterMemo } from '../useListFilter';
-import { connect } from 'react-redux';
 import { VList, VListHandle } from "virtua";
 
 const ALL = 'ALL';
@@ -87,18 +86,16 @@ const INDEX_KEY = 'console';
 
 function ConsolePanel({
   isLive,
-  zoomEnabled,
-  zoomStartTs,
-  zoomEndTs,
 }: {
   isLive?: boolean;
-  zoomEnabled: boolean;
-  zoomStartTs: number;
-  zoomEndTs: number;
 }) {
   const {
     sessionStore: { devTools },
+    uiPlayerStore,
   } = useStore();
+  const zoomEnabled = uiPlayerStore.timelineZoom.enabled;
+  const zoomStartTs = uiPlayerStore.timelineZoom.startTs;
+  const zoomEndTs = uiPlayerStore.timelineZoom.endTs;
 
   const _list = useRef<VListHandle>(null);
   const filter = devTools[INDEX_KEY].filter;
@@ -224,8 +221,4 @@ function ConsolePanel({
   );
 }
 
-export default connect((state: Record<string, any>) => ({
-  zoomEnabled: state.getIn(['components', 'player']).timelineZoom.enabled,
-  zoomStartTs: state.getIn(['components', 'player']).timelineZoom.startTs,
-  zoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs,
-}))(observer(ConsolePanel));
+export default observer(ConsolePanel);
diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
index ee6b26190..bb00633e6 100644
--- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
+++ b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
@@ -4,7 +4,6 @@ import WebPlayer from 'Player/web/WebPlayer';
 import { Duration } from 'luxon';
 import { observer } from 'mobx-react-lite';
 import React, { useMemo, useState } from 'react';
-import { connect } from 'react-redux';
 
 import { useModal } from 'App/components/Modal';
 import {
@@ -180,19 +179,13 @@ function renderStatus({
 }
 
 function NetworkPanelCont({
-  startedAt,
   panelHeight,
-  zoomEnabled,
-  zoomStartTs,
-  zoomEndTs,
 }: {
-  startedAt: number;
   panelHeight: number;
-  zoomEnabled: boolean;
-  zoomStartTs: number;
-  zoomEndTs: number;
 }) {
   const { player, store } = React.useContext(PlayerContext);
+  const { sessionStore } = useStore();
+  const startedAt = sessionStore.current.startedAt;
   const {
     domContentLoadedTime,
     loadTime,
@@ -228,20 +221,16 @@ function NetworkPanelCont({
 }
 
 function MobileNetworkPanelCont({
-  startedAt,
   panelHeight,
-  zoomEnabled,
-  zoomStartTs,
-  zoomEndTs,
 }: {
-  startedAt: number;
   panelHeight: number;
-  zoomEnabled: boolean;
-  zoomStartTs: number;
-  zoomEndTs: number;
 }) {
   const { player, store } = React.useContext(MobilePlayerContext);
-
+  const { uiPlayerStore, sessionStore } = useStore();
+  const startedAt = sessionStore.current.startedAt;
+  const zoomEnabled = uiPlayerStore.timelineZoom.enabled;
+  const zoomStartTs = uiPlayerStore.timelineZoom.startTs;
+  const zoomEndTs = uiPlayerStore.timelineZoom.endTs;
   const domContentLoadedTime = undefined;
   const loadTime = undefined;
   const domBuildingTime = undefined;
@@ -305,7 +294,7 @@ interface Props {
   player: WebPlayer | MobilePlayer;
   startedAt: number;
   isMobile?: boolean;
-  zoomEnabled: boolean;
+  zoomEnabled?: boolean;
   zoomStartTs?: number;
   zoomEndTs?: number;
   panelHeight: number;
@@ -678,18 +667,8 @@ export const NetworkPanelComp = observer(
   }
 );
 
-const WebNetworkPanel = connect((state: any) => ({
-  startedAt: state.getIn(['sessions', 'current']).startedAt,
-  zoomEnabled: state.getIn(['components', 'player']).timelineZoom.enabled,
-  zoomStartTs: state.getIn(['components', 'player']).timelineZoom.startTs,
-  zoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs,
-}))(observer(NetworkPanelCont));
+const WebNetworkPanel = observer(NetworkPanelCont);
 
-const MobileNetworkPanel = connect((state: any) => ({
-  startedAt: state.getIn(['sessions', 'current']).startedAt,
-  zoomEnabled: state.getIn(['components', 'player']).timelineZoom.enabled,
-  zoomStartTs: state.getIn(['components', 'player']).timelineZoom.startTs,
-  zoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs,
-}))(observer(MobileNetworkPanelCont));
+const MobileNetworkPanel = observer(MobileNetworkPanelCont);
 
 export { WebNetworkPanel, MobileNetworkPanel };
diff --git a/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx b/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
index 60b79bcc1..1ee227ae1 100644
--- a/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
+++ b/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
@@ -12,7 +12,6 @@ import StackEventRow from 'Shared/DevTools/StackEventRow';
 import StackEventModal from '../StackEventModal';
 import useAutoscroll, { getLastItemTime } from '../useAutoscroll';
 import { useRegExListFilterMemo, useTabListFilterMemo } from '../useListFilter';
-import { connect } from 'react-redux';
 import { VList, VListHandle } from 'virtua';
 
 const mapNames = (type: string) => {
@@ -28,15 +27,11 @@ const TABS = TAB_KEYS.map((tab) => ({ text: tab, key: tab }));
 type EventsList = Array<Timed & { name: string; source: string; key: string; payload?: string[] }>;
 
 const WebStackEventPanelComp = observer(
-  ({
-    zoomEnabled,
-    zoomStartTs,
-    zoomEndTs,
-  }: {
-    zoomEnabled: boolean;
-    zoomStartTs: number;
-    zoomEndTs: number;
-  }) => {
+  () => {
+    const { uiPlayerStore } = useStore();
+    const zoomEnabled = uiPlayerStore.timelineZoom.enabled;
+    const zoomStartTs = uiPlayerStore.timelineZoom.startTs;
+    const zoomEndTs = uiPlayerStore.timelineZoom.endTs;
     const { player, store } = React.useContext(PlayerContext);
     const jump = (t: number) => player.jump(t);
     const { currentTab, tabStates } = store.get();
@@ -56,22 +51,14 @@ const WebStackEventPanelComp = observer(
   }
 );
 
-export const WebStackEventPanel = connect((state: Record<string, any>) => ({
-  zoomEnabled: state.getIn(['components', 'player']).timelineZoom.enabled,
-  zoomStartTs: state.getIn(['components', 'player']).timelineZoom.startTs,
-  zoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs,
-}))(WebStackEventPanelComp);
+export const WebStackEventPanel = WebStackEventPanelComp;
 
 const MobileStackEventPanelComp = observer(
-  ({
-    zoomEnabled,
-    zoomStartTs,
-    zoomEndTs,
-  }: {
-    zoomEnabled: boolean;
-    zoomStartTs: number;
-    zoomEndTs: number;
-  }) => {
+  () => {
+    const { uiPlayerStore } = useStore();
+    const zoomEnabled = uiPlayerStore.timelineZoom.enabled;
+    const zoomStartTs = uiPlayerStore.timelineZoom.startTs;
+    const zoomEndTs = uiPlayerStore.timelineZoom.endTs;
     const { player, store } = React.useContext(MobilePlayerContext);
     const jump = (t: number) => player.jump(t);
     const { eventList: list = [], eventListNow: listNow = [] } = store.get();
@@ -89,11 +76,7 @@ const MobileStackEventPanelComp = observer(
   }
 );
 
-export const MobileStackEventPanel = connect((state: Record<string, any>) => ({
-  zoomEnabled: state.getIn(['components', 'player']).timelineZoom.enabled,
-  zoomStartTs: state.getIn(['components', 'player']).timelineZoom.startTs,
-  zoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs,
-}))(MobileStackEventPanelComp);
+export const MobileStackEventPanel = MobileStackEventPanelComp;
 
 const EventsPanel = observer(({
   list,
diff --git a/frontend/app/components/shared/EmailVerificationMessage/EmailVerificationMessage.js b/frontend/app/components/shared/EmailVerificationMessage/EmailVerificationMessage.js
index 2f29ce2c5..230939e9e 100644
--- a/frontend/app/components/shared/EmailVerificationMessage/EmailVerificationMessage.js
+++ b/frontend/app/components/shared/EmailVerificationMessage/EmailVerificationMessage.js
@@ -1,14 +1,15 @@
 import React, { useState } from 'react';
-import { connect } from 'react-redux';
-import { Tooltip } from 'UI';
-import { resendEmailVerification } from 'Duck/user';
 import { toast } from 'react-toastify';
 
+import { useStore } from 'App/mstore';
+import { Tooltip } from 'UI';
+
 function EmailVerificationMessage(props) {
+  const { userStore } = useStore();
   const [sent, setSent] = useState(false);
   const { email } = props;
   const send = () => {
-    props.resendEmailVerification(email).then(function () {
+    userStore.resendEmailVerification(email).then(() => {
       toast.success(`Verification email sent to ${email}`);
       setSent(true);
     });
@@ -32,9 +33,7 @@ function EmailVerificationMessage(props) {
         </a>
       </div>
     </Tooltip>
-  ) : (
-    <></>
-  );
+  ) : null;
 }
 
-export default connect(null, { resendEmailVerification })(EmailVerificationMessage);
+export default EmailVerificationMessage;
diff --git a/frontend/app/components/shared/ErrorsBadge/ErrorsBadge.js b/frontend/app/components/shared/ErrorsBadge/ErrorsBadge.js
index bd84e0f49..6706608c5 100644
--- a/frontend/app/components/shared/ErrorsBadge/ErrorsBadge.js
+++ b/frontend/app/components/shared/ErrorsBadge/ErrorsBadge.js
@@ -1,34 +1,36 @@
-import React, { useEffect } from 'react'
-import { fetchNewErrorsCount } from 'Duck/errors'
-import { connect } from 'react-redux'
-import stl from './errorsBadge.module.css'
-import {
-  getDateRangeFromValue,
-  DATE_RANGE_VALUES,
-} from 'App/dateRange';
+import { observer } from 'mobx-react-lite';
+import React, { useEffect } from 'react';
+
+import { DATE_RANGE_VALUES, getDateRangeFromValue } from 'App/dateRange';
+import { useStore } from 'App/mstore';
+
+import stl from './errorsBadge.module.css';
 
 const AUTOREFRESH_INTERVAL = 5 * 60 * 1000;
 const weekRange = getDateRangeFromValue(DATE_RANGE_VALUES.LAST_7_DAYS);
-let intervalId = null
+let intervalId = null;
 
-function ErrorsBadge({ errorsStats = {}, fetchNewErrorsCount, projects }) {
+function ErrorsBadge() {
+  const { errorsStore, projectsStore } = useStore();
+  const projects = projectsStore.list;
+  const errorsStats = errorsStore.stats;
   useEffect(() => {
     if (projects.size === 0 || !!intervalId) return;
-    
-    const params = { startTimestamp: weekRange.start.ts, endTimestamp: weekRange.end.ts };
-    fetchNewErrorsCount(params)
+
+    const params = {
+      startTimestamp: weekRange.start.ts,
+      endTimestamp: weekRange.end.ts,
+    };
+    void errorsStore.fetchNewErrorsCount(params);
 
     intervalId = setInterval(() => {
-      fetchNewErrorsCount(params);
+      void errorsStore.fetchNewErrorsCount(params);
     }, AUTOREFRESH_INTERVAL);
-  }, [projects])
-  
+  }, [projects]);
+
   return errorsStats.unresolvedAndUnviewed > 0 ? (
-    <div>{<div className={stl.badge} />  }</div>
-  ) : ''
+    <div>{<div className={stl.badge} />}</div>
+  ) : null;
 }
 
-export default connect(state => ({
-  errorsStats: state.getIn([ 'errors', 'stats' ]),
-  projects: state.getIn([ 'site', 'list' ]),
-}), { fetchNewErrorsCount })(ErrorsBadge)
+export default observer(ErrorsBadge);
diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
index 90e0f7d64..a3b3335cd 100644
--- a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
+++ b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
@@ -8,6 +8,7 @@ import Select from 'react-select';
 import cn from 'classnames';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
+import { searchService} from 'App/services';
 
 const dropdownStyles = {
   option: (provided: any, state: any) => ({
@@ -196,8 +197,9 @@ const FilterAutoComplete: React.FC<Props> = ({
     }
 
     try {
-      const response = await new APIClient()[method.toLowerCase()](endpoint, { ..._params, q: inputValue });
-      const data = await response.json();
+      // const response = await new APIClient()[method.toLowerCase()](endpoint, { ..._params, q: inputValue });
+      const data = await searchService.fetchAutoCompleteValues({ ..._params, q: inputValue })
+      // const data = await response.json();
       const _options = data.data.map((i: any) => ({ value: i.value, label: i.value })) || [];
       setOptions(_options);
       callback(_options);
diff --git a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
index c02d49d00..0a0ff0572 100644
--- a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
+++ b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
@@ -36,9 +36,9 @@ function FilterList(props: Props) {
         actions = []
     } = props;
 
-    const filters = List(filter.filters);
-    const hasEvents = filters.filter((i: any) => i.isEvent).size > 0;
-    const hasFilters = filters.filter((i: any) => !i.isEvent).size > 0;
+    const filters = filter.filters;
+    const hasEvents = filters.filter((i: any) => i.isEvent).length > 0;
+    const hasFilters = filters.filter((i: any) => !i.isEvent).length > 0;
 
     let rowIndex = 0;
     const cannotDeleteFilter = hasEvents && !supportsEmpty;
diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
index 9126c8e96..69a881685 100644
--- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
+++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
@@ -25,15 +25,16 @@ import {
   Timer,
   VenetianMask,
   Workflow,
-  Flag,
+  Flag
 } from 'lucide-react';
 import React from 'react';
-import { connect } from 'react-redux';
 import { Icon, Loader } from 'UI';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
 import { FilterKey } from 'Types/filter/filterType';
 import stl from './FilterModal.module.css';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 
 const IconMap = {
   [FilterKey.CLICK]: <Pointer size={18} />,
@@ -65,10 +66,10 @@ const IconMap = {
   [FilterKey.DURATION]: <Clock2 size={18} />,
   [FilterKey.TAGGED_ELEMENT]: <SquareMousePointer size={18} />,
   [FilterKey.METADATA]: <ContactRound size={18} />,
-  [FilterKey.UTM_SOURCE]: <CornerDownRight size={18}/>,
-  [FilterKey.UTM_MEDIUM]: <Layers size={18}/>,
-  [FilterKey.UTM_CAMPAIGN]: <Megaphone size={18}/>,
-  [FilterKey.FEATURE_FLAG]: <Flag size={18}/>,
+  [FilterKey.UTM_SOURCE]: <CornerDownRight size={18} />,
+  [FilterKey.UTM_MEDIUM]: <Layers size={18} />,
+  [FilterKey.UTM_CAMPAIGN]: <Megaphone size={18} />,
+  [FilterKey.FEATURE_FLAG]: <Flag size={18} />
 };
 
 function filterJson(
@@ -102,7 +103,7 @@ export const getMatchingEntries = (
   if (lowerCaseQuery.length === 0)
     return {
       matchingCategories: Object.keys(filters),
-      matchingFilters: filters,
+      matchingFilters: filters
     };
 
   Object.keys(filters).forEach((name) => {
@@ -123,13 +124,11 @@ export const getMatchingEntries = (
 };
 
 interface Props {
-  filters: any;
+  isLive: boolean;
   conditionalFilters: any;
   mobileConditionalFilters: any;
   onFilterClick?: (filter: any) => void;
-  filterSearchList: any;
   isMainSearch?: boolean;
-  fetchingFilterSearchList: boolean;
   searchQuery?: string;
   excludeFilterKeys?: Array<string>;
   allowedFilterKeys?: Array<string>;
@@ -139,20 +138,22 @@ interface Props {
 
 function FilterModal(props: Props) {
   const {
-    filters,
-    conditionalFilters,
-    mobileConditionalFilters,
+    isLive,
     onFilterClick = () => null,
-    filterSearchList,
     isMainSearch = false,
-    fetchingFilterSearchList,
     searchQuery = '',
     excludeFilterKeys = [],
     allowedFilterKeys = [],
     isConditional,
-    isMobile,
+    isMobile
   } = props;
+  const { searchStore, searchStoreLive } = useStore();
+  const filters = isLive ? searchStoreLive.filterList : searchStore.filterList;
+  const conditionalFilters = searchStore.filterListConditional;
+  const mobileConditionalFilters = searchStore.filterListMobileConditional;
   const showSearchList = isMainSearch && searchQuery.length > 0;
+  const filterSearchList = isLive ? searchStoreLive.filterSearchList : searchStore.filterSearchList;
+  const fetchingFilterSearchList = isLive ? searchStoreLive.loadingFilterSearch : searchStore.loadingFilterSearch;
 
   const onFilterSearchClick = (filter: any) => {
     const _filter = { ...filtersMap[filter.type] };
@@ -161,8 +162,8 @@ function FilterModal(props: Props) {
   };
 
   const filterJsonObj = isConditional
-                        ? isMobile ? mobileConditionalFilters : conditionalFilters
-                        : filters;
+    ? isMobile ? mobileConditionalFilters : conditionalFilters
+    : filters;
   const { matchingCategories, matchingFilters } = getMatchingEntries(
     searchQuery,
     filterJson(filterJsonObj, excludeFilterKeys, allowedFilterKeys)
@@ -175,19 +176,18 @@ function FilterModal(props: Props) {
 
   const getNewIcon = (filter: Record<string, any>) => {
     if (filter.icon?.includes('metadata')) {
-      return IconMap[FilterKey.METADATA]
+      return IconMap[FilterKey.METADATA];
     }
     // @ts-ignore
     if (IconMap[filter.key]) {
       // @ts-ignore
-      return IconMap[filter.key]
-    }
-    else return <Icon name={filter.icon} size={16} />
-  }
+      return IconMap[filter.key];
+    } else return <Icon name={filter.icon} size={16} />;
+  };
   return (
     <div
       className={stl.wrapper}
-      style={{ width: '480px', maxHeight: '380px', overflowY: 'auto', borderRadius:'.5rem', }}
+      style={{ width: '480px', maxHeight: '380px', overflowY: 'auto', borderRadius: '.5rem' }}
     >
       <div
         className={searchQuery && !isResultEmpty ? 'mb-6' : ''}
@@ -274,18 +274,4 @@ function FilterModal(props: Props) {
   );
 }
 
-export default connect((state: any, props: any) => {
-  return {
-    filters: props.isLive
-      ? state.getIn(['search', 'filterListLive'])
-      : state.getIn(['search', 'filterList']),
-    conditionalFilters: state.getIn(['search', 'filterListConditional']),
-    mobileConditionalFilters: state.getIn(['search', 'filterListMobileConditional']),
-    filterSearchList: props.isLive
-      ? state.getIn(['liveSearch', 'filterSearchList'])
-      : state.getIn(['search', 'filterSearchList']),
-    fetchingFilterSearchList: props.isLive
-      ? state.getIn(['liveSearch', 'fetchFilterSearch', 'loading'])
-      : state.getIn(['search', 'fetchFilterSearch', 'loading']),
-  };
-})(FilterModal);
+export default observer(FilterModal);
diff --git a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
index b8de307bd..d3eb42b2d 100644
--- a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
+++ b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
@@ -2,19 +2,16 @@ import React, { useState } from 'react';
 import FilterModal from '../FilterModal';
 import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
 import { Icon } from 'UI';
-import { connect } from 'react-redux';
 import { assist as assistRoute, isRoute } from 'App/routes';
 import cn from 'classnames';
+import { observer } from 'mobx-react-lite';
 
 const ASSIST_ROUTE = assistRoute();
 
 interface Props {
   filter?: any; // event/filter
-  filterList: any;
-  filterListLive: any;
   onFilterClick: (filter: any) => void;
   children?: any;
-  isLive?: boolean;
   excludeFilterKeys?: Array<string>;
   allowedFilterKeys?: Array<string>;
   disabled?: boolean;
@@ -23,13 +20,22 @@ interface Props {
 }
 
 function FilterSelection(props: Props) {
-  const { filter, onFilterClick, children, excludeFilterKeys = [], allowedFilterKeys = [], disabled = false, isConditional, isMobile } = props;
+  const {
+    filter,
+    onFilterClick,
+    children,
+    excludeFilterKeys = [],
+    allowedFilterKeys = [],
+    disabled = false,
+    isConditional,
+    isMobile
+  } = props;
   const [showModal, setShowModal] = useState(false);
 
   return (
-    <div className='relative flex-shrink-0'>
+    <div className="relative flex-shrink-0">
       <OutsideClickDetectingDiv
-        className='relative'
+        className="relative"
         onClickOutside={() =>
           setTimeout(function() {
             setShowModal(false);
@@ -52,17 +58,17 @@ function FilterSelection(props: Props) {
             onClick={() => setShowModal(true)}
           >
             <div
-              className='overflow-hidden whitespace-nowrap text-ellipsis mr-auto truncate'
+              className="overflow-hidden whitespace-nowrap text-ellipsis mr-auto truncate"
               style={{ textOverflow: 'ellipsis' }}
             >
               {filter.label}
             </div>
-            <Icon name='chevron-down' size='14' />
+            <Icon name="chevron-down" size="14" />
           </div>
         )}
       </OutsideClickDetectingDiv>
       {showModal && (
-        <div className='absolute left-0 rounded-lg shadow bg-white z-50'>
+        <div className="absolute left-0 rounded-lg shadow bg-white z-50">
           <FilterModal
             isLive={isRoute(ASSIST_ROUTE, window.location.pathname)}
             onFilterClick={onFilterClick}
@@ -77,11 +83,4 @@ function FilterSelection(props: Props) {
   );
 }
 
-export default connect(
-  (state: any) => ({
-    filterList: state.getIn(['search', 'filterList']),
-    filterListLive: state.getIn(['search', 'filterListLive']),
-    isLive: state.getIn(['sessions', 'activeTab']).type === 'live'
-  }),
-  {}
-)(FilterSelection);
+export default observer(FilterSelection);
diff --git a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
index 4bf549c9a..f88c03a5b 100644
--- a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
+++ b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
@@ -165,7 +165,7 @@ function FilterValue(props: Props) {
                         onAddValue={onAddValue}
                         onRemoveValue={() => onRemoveValue(valueIndex)}
                         method={'GET'}
-                        endpoint="/events/search"
+                        endpoint="/PROJECT_ID/events/search"
                         params={getParms(filter.key)}
                         headerText={''}
                         placeholder={filter.placeholder}
diff --git a/frontend/app/components/shared/Filters/LiveFilterModal/LiveFilterModal.tsx b/frontend/app/components/shared/Filters/LiveFilterModal/LiveFilterModal.tsx
index 3cfbaf955..a9f65a190 100644
--- a/frontend/app/components/shared/Filters/LiveFilterModal/LiveFilterModal.tsx
+++ b/frontend/app/components/shared/Filters/LiveFilterModal/LiveFilterModal.tsx
@@ -1,30 +1,32 @@
 import React from 'react';
 import { Icon, Loader } from 'UI';
-import { connect } from 'react-redux';
 import cn from 'classnames';
 import stl from './LiveFilterModal.module.css';
 import { filtersMap } from 'Types/filter/newFilter';
-import { getMatchingEntries } from 'Shared/Filters/FilterModal'
+import { getMatchingEntries } from 'Shared/Filters/FilterModal';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 
 interface Props {
   filters: any,
   onFilterClick?: (filter) => void,
   filterSearchList: any,
-  metaOptions: any,
   isMainSearch?: boolean,
   fetchingFilterSearchList: boolean,
   searchQuery?: string,
 }
+
 function LiveFilterModal(props: Props) {
   const {
-    filters,
-    metaOptions,
     onFilterClick = () => null,
-    filterSearchList,
     isMainSearch = false,
-    fetchingFilterSearchList,
-    searchQuery = '',
+    searchQuery = ''
   } = props;
+  const { searchStore } = useStore();
+  const filters = searchStore.filterListLive;
+  const filterSearchList = searchStore.filterSearchList;
+  const fetchingFilterSearchList = searchStore.loadingFilterSearch;
+
   const hasSearchQuery = searchQuery && searchQuery.length > 0;
   const showSearchList = isMainSearch && searchQuery.length > 0;
 
@@ -32,22 +34,22 @@ function LiveFilterModal(props: Props) {
     const _filter = filtersMap[filter.type];
     _filter.value = [filter.value];
     onFilterClick(_filter);
-  }
+  };
 
   const { matchingCategories, matchingFilters } = getMatchingEntries(searchQuery, filters);
 
   const isResultEmpty = (!filterSearchList || Object.keys(filterSearchList).filter(i => filtersMap[i].isLive).length === 0)
-   && matchingCategories.length === 0 && matchingFilters.length === 0
+    && matchingCategories.length === 0 && matchingFilters.length === 0;
 
   return (
-    <div className={stl.wrapper} style={{ width: '490px', maxHeight: '400px', overflowY: 'auto'}}>
+    <div className={stl.wrapper} style={{ width: '490px', maxHeight: '400px', overflowY: 'auto' }}>
       <div className="">
-          {matchingCategories.map((key) =>  {
-            return (
-              <div className="mb-6" key={key}>
-                <div className="uppercase font-medium mb-1 color-gray-medium tracking-widest text-sm">{key}</div>
-                <div>
-                  {filters[key].map((filter: any) => {
+        {matchingCategories.map((key) => {
+          return (
+            <div className="mb-6" key={key}>
+              <div className="uppercase font-medium mb-1 color-gray-medium tracking-widest text-sm">{key}</div>
+              <div>
+                {filters[key].map((filter: any) => {
                     if (hasSearchQuery) {
                       const matchingFilters = filters[key].filter(filter => filter.label.includes(searchQuery));
                       const hasMatchingSubstring = matchingFilters.length > 0 || key.includes(searchQuery);
@@ -55,21 +57,24 @@ function LiveFilterModal(props: Props) {
                       if (hasSearchQuery && !hasMatchingSubstring) return null;
                     }
                     return (
-                      <div key={filter.label} className={cn(stl.optionItem, "flex items-center py-2 cursor-pointer -mx-2 px-2")} onClick={() => onFilterClick(filter)}>
-                        <Icon name={filter.icon} size="16"/>
+                      <div key={filter.label}
+                           className={cn(stl.optionItem, 'flex items-center py-2 cursor-pointer -mx-2 px-2')}
+                           onClick={() => onFilterClick(filter)}>
+                        <Icon name={filter.icon} size="16" />
                         <span className="ml-2">{filter.label}</span>
                       </div>
-                    )}
-                  )}
-                </div>
+                    );
+                  }
+                )}
               </div>
-            )
-          })}
-        </div>
-      { showSearchList && (
+            </div>
+          );
+        })}
+      </div>
+      {showSearchList && (
         <Loader size="small" loading={fetchingFilterSearchList}>
           <div className="-mx-6 px-6">
-            { filterSearchList && Object.keys(filterSearchList).filter(i => filtersMap[i].isLive).map((key, index) => {
+            {filterSearchList && Object.keys(filterSearchList).filter(i => filtersMap[i].isLive).map((key, index) => {
               const filter = filterSearchList[key];
               const option = filtersMap[key];
               return (
@@ -82,7 +87,7 @@ function LiveFilterModal(props: Props) {
                     {filter.map((f, i) => (
                       <div
                         key={i}
-                        className={cn(stl.filterSearchItem, "cursor-pointer px-3 py-1 flex items-center")}
+                        className={cn(stl.filterSearchItem, 'cursor-pointer px-3 py-1 flex items-center')}
                         onClick={() => onFilterSearchClick({ type: key, value: f.value })}
                       >
                         <Icon className="mr-2" name={option.icon} size="16" />
@@ -96,7 +101,7 @@ function LiveFilterModal(props: Props) {
             {isResultEmpty && !fetchingFilterSearchList ? (
               <div className="flex items-center">
                 <Icon className="color-gray-medium" name="binoculars" size="24" />
-                <div className="color-gray-medium font-medium px-3"> No Suggestions Found </div>
+                <div className="color-gray-medium font-medium px-3"> No Suggestions Found</div>
               </div>
             ) : Object.keys(filterSearchList).filter(i => filtersMap[i].isLive).map((key, index) => {
               const filter = filterSearchList[key];
@@ -111,7 +116,7 @@ function LiveFilterModal(props: Props) {
                     {filter.map((f, i) => (
                       <div
                         key={i}
-                        className={cn(stl.filterSearchItem, "cursor-pointer px-3 py-1 flex items-center")}
+                        className={cn(stl.filterSearchItem, 'cursor-pointer px-3 py-1 flex items-center')}
                         onClick={() => onFilterSearchClick({ type: key, value: f.value })}
                       >
                         <Icon className="mr-2" name={option.icon} size="16" />
@@ -129,9 +134,4 @@ function LiveFilterModal(props: Props) {
   );
 }
 
-export default connect(state => ({
-  filters: state.getIn([ 'search', 'filterListLive' ]),
-  filterSearchList: state.getIn([ 'search', 'filterSearchList' ]),
-  metaOptions: state.getIn([ 'customFields', 'list' ]),
-  fetchingFilterSearchList: state.getIn([ 'search', 'fetchFilterSearch', 'loading' ]),
-}))(LiveFilterModal);
+export default observer(LiveFilterModal);
diff --git a/frontend/app/components/shared/FunnelSearch/FunnelSearch.tsx b/frontend/app/components/shared/FunnelSearch/FunnelSearch.tsx
deleted file mode 100644
index 19a3b7ceb..000000000
--- a/frontend/app/components/shared/FunnelSearch/FunnelSearch.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from 'react';
-import FilterList from 'Shared/Filters/FilterList';
-import FilterSelection from 'Shared/Filters/FilterSelection';
-import { connect } from 'react-redux';
-import { IconButton } from 'UI';
-import { editFilter, addFilter } from 'Duck/funnels';
-import UpdateFunnelButton from 'Shared/UpdateFunnelButton';
-
-interface Props {
-  appliedFilter: any;
-  editFilter: typeof editFilter;
-  addFilter: typeof addFilter;
-}
-function FunnelSearch(props: Props) {
-  const { appliedFilter } = props;
-  const hasEvents = appliedFilter.filters.filter(i => i.isEvent).size > 0;
-  const hasFilters = appliedFilter.filters.filter(i => !i.isEvent).size > 0;
-
-  const onAddFilter = (filter) => {
-    props.addFilter(filter);
-  }
-
-  const onUpdateFilter = (filterIndex, filter) => {
-    const newFilters = appliedFilter.filters.map((_filter, i) => {
-      if (i === filterIndex) {
-        return filter;
-      } else {
-        return _filter;
-      }
-    });
-
-    props.editFilter({
-        ...appliedFilter,
-        filters: newFilters,
-    });
-  }
-
-  const onRemoveFilter = (filterIndex) => {
-    const newFilters = appliedFilter.filters.filter((_filter, i) => {
-      return i !== filterIndex;
-    });
-
-    props.editFilter({
-      filters: newFilters,
-    });
-  }
-
-  const onChangeEventsOrder = (e, { name, value }) => {
-    props.editFilter({
-      eventsOrder: value,
-    });
-  }
-
-  return (
-    <div className="border bg-white rounded mt-4">
-      <div className="p-5">
-        <FilterList
-          filter={appliedFilter}
-          onUpdateFilter={onUpdateFilter}
-          onRemoveFilter={onRemoveFilter}
-          onChangeEventsOrder={onChangeEventsOrder}
-          hideEventsOrder={true}
-        />
-      </div>
-
-      <div className="border-t px-5 py-1 flex items-center -mx-2">
-        <div>
-          <FilterSelection
-            filter={undefined}
-            onFilterClick={onAddFilter}
-          >
-            <IconButton primaryText label="ADD STEP" icon="plus" />
-          </FilterSelection>
-        </div>
-        <div className="ml-auto flex items-center">
-          <UpdateFunnelButton />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default connect(state => ({
-  appliedFilter: state.getIn([ 'funnels', 'instance', 'filter' ]),
-}), { editFilter, addFilter })(FunnelSearch);
\ No newline at end of file
diff --git a/frontend/app/components/shared/FunnelSearch/index.ts b/frontend/app/components/shared/FunnelSearch/index.ts
deleted file mode 100644
index 2db683671..000000000
--- a/frontend/app/components/shared/FunnelSearch/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './FunnelSearch';
\ No newline at end of file
diff --git a/frontend/app/components/shared/GettingStarted/GettingStartedProgress.tsx b/frontend/app/components/shared/GettingStarted/GettingStartedProgress.tsx
index a1ea9f6c3..09dab3091 100644
--- a/frontend/app/components/shared/GettingStarted/GettingStartedProgress.tsx
+++ b/frontend/app/components/shared/GettingStarted/GettingStartedProgress.tsx
@@ -4,14 +4,15 @@ import { useModal } from 'App/components/Modal';
 import GettingStartedModal from './GettingStartedModal';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
-import { connect } from "react-redux";
 
-const GettingStartedProgress = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
+const GettingStartedProgress = () => {
   const { showModal } = useModal();
 
   const {
     settingsStore: { gettingStarted },
+    userStore
   } = useStore();
+  const isLoggedIn = userStore.isLoggedIn;
 
   useEffect(() => {
     if (isLoggedIn) {
@@ -40,5 +41,5 @@ const GettingStartedProgress = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
   );
 };
 
-export default connect((state: any) => ({ isLoggedIn: Boolean(state.getIn(['user', 'jwt'])), }))(observer(GettingStartedProgress));
+export default observer(GettingStartedProgress);
 
diff --git a/frontend/app/components/shared/GettingStarted/StepList.tsx b/frontend/app/components/shared/GettingStarted/StepList.tsx
index 485990434..178cb4aa1 100644
--- a/frontend/app/components/shared/GettingStarted/StepList.tsx
+++ b/frontend/app/components/shared/GettingStarted/StepList.tsx
@@ -5,7 +5,6 @@ import { Step } from 'App/mstore/types/gettingStarted';
 import { useStore } from 'App/mstore';
 import { onboarding as onboardingRoute, withSiteId } from 'App/routes';
 import { RouteComponentProps, withRouter } from 'react-router';
-import { connect } from 'react-redux';
 import { useModal } from 'App/components/Modal';
 
 interface StepListProps extends RouteComponentProps {
@@ -13,7 +12,6 @@ interface StepListProps extends RouteComponentProps {
   steps: Step[];
   status: 'pending' | 'completed';
   docsLink?: string;
-  siteId: string;
 }
 
 const StepItem = React.memo(
@@ -63,11 +61,12 @@ const StepItem = React.memo(
 );
 
 const StepList = React.memo((props: StepListProps) => {
-  const { title, steps, status } = props;
+  const { title, steps } = props;
   const { hideModal } = useModal();
 
   const {
     settingsStore: { gettingStarted },
+    projectsStore,
   } = useStore();
 
   const onIgnore = (e: React.MouseEvent<HTMLAnchorElement>, step: any) => {
@@ -80,7 +79,8 @@ const StepList = React.memo((props: StepListProps) => {
   }
 
   const onClick = (step: any) => {
-    const { siteId, history } = props;
+    const { history } = props;
+    const siteId = projectsStore.getSiteId().siteId!;
     hideModal();
     history.push(withSiteId(onboardingRoute(step.url), siteId));
   };
@@ -97,6 +97,4 @@ const StepList = React.memo((props: StepListProps) => {
   );
 });
 
-export default connect((state: any) => ({
-  siteId: state.getIn(['site', 'siteId']),
-}))(withRouter(StepList));
+export default withRouter(StepList);
diff --git a/frontend/app/components/shared/IntegrateSlackButton/IntegrateSlackButton.js b/frontend/app/components/shared/IntegrateSlackButton/IntegrateSlackButton.js
index d506d3ccc..fa806a0d2 100644
--- a/frontend/app/components/shared/IntegrateSlackButton/IntegrateSlackButton.js
+++ b/frontend/app/components/shared/IntegrateSlackButton/IntegrateSlackButton.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import { connect } from 'react-redux'
 import { Button, Icon } from 'UI'
 import { CLIENT_TABS, client as clientRoute } from 'App/routes';
 import { withRouter } from 'react-router-dom';
 
-function IntegrateSlackTeamsButton({ history, tenantId }) {
+function IntegrateSlackTeamsButton({ history }) {
+
   const gotoPreferencesIntegrations = () => {
     history.push(clientRoute(CLIENT_TABS.INTEGRATIONS));
   }
@@ -25,6 +25,4 @@ function IntegrateSlackTeamsButton({ history, tenantId }) {
   )
 }
 
-export default withRouter(connect(state => ({
-  tenantId: state.getIn([ 'user', 'account', 'tenantId' ]),
-}))(IntegrateSlackTeamsButton))
+export default withRouter(IntegrateSlackTeamsButton)
diff --git a/frontend/app/components/shared/LiveSearchBar/LiveSearchBar.tsx b/frontend/app/components/shared/LiveSearchBar/LiveSearchBar.tsx
index 269c932bf..4ee6a1a95 100644
--- a/frontend/app/components/shared/LiveSearchBar/LiveSearchBar.tsx
+++ b/frontend/app/components/shared/LiveSearchBar/LiveSearchBar.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
 import LiveSessionSearchField from 'Shared/LiveSessionSearchField';
 import { Button, Tooltip } from 'UI';
-import { clearSearch } from 'Duck/liveSearch';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 
 interface Props {
-  clearSearch: () => void;
   appliedFilter: any;
 }
+
 const LiveSearchBar = (props: Props) => {
-  const { appliedFilter } = props;
+  const { searchStoreLive } = useStore();
+  const appliedFilter = searchStoreLive.instance;
   const hasFilters = appliedFilter && appliedFilter.filters && appliedFilter.filters.size > 0;
   return (
     <div className="flex items-center">
@@ -22,7 +23,7 @@ const LiveSearchBar = (props: Props) => {
             variant="text-primary"
             disabled={!hasFilters}
             className="ml-auto font-medium"
-            onClick={() => props.clearSearch()}
+            onClick={() => searchStoreLive.clearSearch()}
           >
             Clear
           </Button>
@@ -31,9 +32,4 @@ const LiveSearchBar = (props: Props) => {
     </div>
   );
 };
-export default connect(
-  (state) => ({
-    appliedFilter: state.getIn(['liveSearch', 'instance']),
-  }),
-  { clearSearch }
-)(LiveSearchBar);
+export default observer(LiveSearchBar);
diff --git a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
index 42687659e..4c5d34262 100644
--- a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
+++ b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
@@ -1,13 +1,9 @@
 import React, { useEffect } from 'react';
-import { connect } from 'react-redux';
 import { NoContent, Loader, Pagination, Button } from 'UI';
-import { List } from 'immutable';
 import SessionItem from 'Shared/SessionItem';
 import withPermissions from 'HOCs/withPermissions';
 import { KEYS } from 'Types/filter/customFilter';
-import { applyFilter } from 'Duck/liveSearch';
 import { FilterKey } from 'App/types/filter/filterType';
-import { addFilterByKeyAndValue, updateCurrentPage } from 'Duck/liveSearch';
 import Select from 'Shared/Select';
 import SortOrderButton from 'Shared/SortOrderButton';
 import { capitalize } from 'App/utils';
@@ -15,29 +11,21 @@ import LiveSessionReloadButton from 'Shared/LiveSessionReloadButton';
 import cn from 'classnames';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 import { numberWithCommas } from 'App/utils';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 
 const AUTOREFRESH_INTERVAL = 2 * 60 * 1000;
 const PER_PAGE = 10;
 
-interface Props {
-  loading: boolean;
-  metaListLoading: boolean;
-  list: List<any>;
-  // fetchLiveList: () => Promise<void>,
-  applyFilter: (filter: any) => void;
-  filter: any;
-  // addAttribute: (obj: any) => void,
-  addFilterByKeyAndValue: (key: FilterKey, value: string) => void;
-  updateCurrentPage: (page: number) => void;
-  currentPage: number;
-  totla: number;
-  metaList: any;
-  sort: any;
-  total: number;
-}
+function LiveSessionList() {
+  const { searchStoreLive, sessionStore, customFieldStore } = useStore();
+  const filter = searchStoreLive.instance;
+  const list = sessionStore.liveSessions;
+  const loading = sessionStore.loadingLiveSessions;
+  const { currentPage, total } = searchStoreLive;
+  const metaList = customFieldStore.list;
+  const metaListLoading = customFieldStore.isLoading;
 
-function LiveSessionList(props: Props) {
-  const { loading, metaListLoading, filter, list, currentPage, total, metaList = [], sort } = props;
   var timeoutId: any;
   const { filters } = filter;
   const hasUserFilter = filters.map((i: any) => i.key).includes(KEYS.USERID);
@@ -45,9 +33,8 @@ function LiveSessionList(props: Props) {
     metaList
       .map((i: any) => ({
         label: capitalize(i),
-        value: i,
+        value: i
       }))
-      .toJS()
   );
 
   useEffect(() => {
@@ -56,7 +43,7 @@ function LiveSessionList(props: Props) {
     if (sortOptions[1] && !filter.sort) {
       _filter.sort = sortOptions[1].value;
     }
-    props.applyFilter(_filter);
+    searchStoreLive.edit(_filter);
     timeout();
     return () => {
       clearTimeout(timeoutId);
@@ -65,19 +52,19 @@ function LiveSessionList(props: Props) {
 
   const onUserClick = (userId: string, userAnonymousId: string) => {
     if (userId) {
-      props.addFilterByKeyAndValue(FilterKey.USERID, userId);
+      searchStoreLive.addFilterByKeyAndValue(FilterKey.USERID, userId);
     } else {
-      props.addFilterByKeyAndValue(FilterKey.USERANONYMOUSID, userAnonymousId);
+      searchStoreLive.addFilterByKeyAndValue(FilterKey.USERANONYMOUSID, userAnonymousId);
     }
   };
 
   const onSortChange = ({ value }: any) => {
-    props.applyFilter({ sort: value.value });
+    searchStoreLive.edit({ sort: value.value });
   };
 
   const timeout = () => {
     timeoutId = setTimeout(() => {
-      props.applyFilter({ ...filter });
+      searchStoreLive.edit({ ...filter });
       timeout();
     }, AUTOREFRESH_INTERVAL);
   };
@@ -92,7 +79,7 @@ function LiveSessionList(props: Props) {
               {/* <span className="ml-2 font-normal color-gray-medium">{numberWithCommas(total)}</span> */}
             </h3>
 
-            <LiveSessionReloadButton onClick={() => props.applyFilter({ ...filter })} />
+            <LiveSessionReloadButton onClick={() => searchStoreLive.edit({ ...filter })} />
           </div>
           <div className="flex items-center">
             <div className="flex items-center ml-6">
@@ -104,11 +91,11 @@ function LiveSessionList(props: Props) {
                   options={sortOptions}
                   onChange={onSortChange}
                   value={sortOptions.find((i: any) => i.value === filter.sort) || sortOptions[0]}
-              />
+                />
 
                 <div className="mx-2" />
                 <SortOrderButton
-                  onChange={(state: any) => props.applyFilter({ order: state })}
+                  onChange={(state: any) => searchStoreLive.edit({ order: state })}
                   sortOrder={filter.order}
                 />
               </div>
@@ -142,14 +129,14 @@ function LiveSessionList(props: Props) {
                   className="mt-4"
                   icon="arrow-repeat"
                   iconSize={20}
-                  onClick={() => props.applyFilter({ ...filter })}
+                  onClick={() => searchStoreLive.edit({ ...filter })}
                 >
                   Refresh
                 </Button>
               </div>
             }
             // image={<img src="/assets/img/live-sessions.png" style={{ width: '70%', marginBottom: '30px' }} />}
-            show={!loading && list.size === 0}
+            show={!loading && list.length === 0}
           >
             <div>
               {list.map((session) => (
@@ -168,13 +155,13 @@ function LiveSessionList(props: Props) {
             <div className={cn('flex items-center justify-between p-5', { disabled: loading })}>
               <div>
                 Showing <span className="font-medium">{(currentPage - 1) * PER_PAGE + 1}</span> to{' '}
-                <span className="font-medium">{(currentPage - 1) * PER_PAGE + list.size}</span> of{' '}
+                <span className="font-medium">{(currentPage - 1) * PER_PAGE + list.length}</span> of{' '}
                 <span className="font-medium">{numberWithCommas(total)}</span> sessions.
               </div>
               <Pagination
                 page={currentPage}
                 total={total}
-                onPageChange={(page: any) => props.updateCurrentPage(page)}
+                onPageChange={(page: any) => searchStoreLive.updateCurrentPage(page)}
                 limit={PER_PAGE}
                 debounceRequest={500}
               />
@@ -186,23 +173,8 @@ function LiveSessionList(props: Props) {
   );
 }
 
-export default withPermissions(['ASSIST_LIVE', 'SERVICE_ASSIST_LIVE'], '', false, false)(
-  connect(
-    (state: any) => ({
-      list: state.getIn(['liveSearch', 'list']),
-      loading: state.getIn(['liveSearch', 'fetchList', 'loading']),
-      metaListLoading: state.getIn(['customFields', 'fetchRequest', 'loading']),
-      filter: state.getIn(['liveSearch', 'instance']),
-      total: state.getIn(['liveSearch', 'total']),
-      currentPage: state.getIn(['liveSearch', 'currentPage']),
-      metaList: state.getIn(['customFields', 'list']).map((i: any) => i.key),
-      sort: state.getIn(['liveSearch', 'sort']),
-    }),
-    {
-      applyFilter,
-      addFilterByKeyAndValue,
-      updateCurrentPage,
-    }
-  )(LiveSessionList)
+export default withPermissions(
+  ['ASSIST_LIVE', 'SERVICE_ASSIST_LIVE'], '', false, false)(
+  observer(LiveSessionList)
 );
 
diff --git a/frontend/app/components/shared/LiveSessionReloadButton/LiveSessionReloadButton.tsx b/frontend/app/components/shared/LiveSessionReloadButton/LiveSessionReloadButton.tsx
index f55f5ca91..56be39a16 100644
--- a/frontend/app/components/shared/LiveSessionReloadButton/LiveSessionReloadButton.tsx
+++ b/frontend/app/components/shared/LiveSessionReloadButton/LiveSessionReloadButton.tsx
@@ -1,19 +1,19 @@
-import React from 'react'
-import ReloadButton from '../ReloadButton'
-import { connect } from 'react-redux'
-// import { fetchSessions } from 'Duck/liveSearch'
+import React from 'react';
+import ReloadButton from '../ReloadButton';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 
 interface Props {
-    loading: boolean
-    onClick: () => void
-}
-function LiveSessionReloadButton(props: Props) {
-    const { loading, onClick } = props
-  return (
-    <ReloadButton loading={loading} onClick={onClick} className="cursor-pointer" />
-  )
+  onClick: () => void;
 }
 
-export default connect((state: any) => ({
-    loading: state.getIn([ 'sessions', 'fetchLiveListRequest', 'loading' ]),
-}))(LiveSessionReloadButton)
+function LiveSessionReloadButton(props: Props) {
+  const { sessionStore } = useStore();
+  const { onClick } = props;
+  const loading = sessionStore.loadingLiveSessions;
+  return (
+    <ReloadButton loading={loading} onClick={onClick} className="cursor-pointer" />
+  );
+}
+
+export default observer(LiveSessionReloadButton);
diff --git a/frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx b/frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx
index 289a05ac0..fe7723284 100644
--- a/frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx
+++ b/frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx
@@ -1,55 +1,49 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import FilterList from 'Shared/Filters/FilterList';
 import FilterSelection from 'Shared/Filters/FilterSelection';
-import { connect } from 'react-redux';
 import { Button } from 'UI';
-import { edit, addFilter } from 'Duck/liveSearch';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 
-interface Props {
-  appliedFilter: any;
-  edit: typeof edit;
-  addFilter: typeof addFilter;
-  saveRequestPayloads: boolean;
-}
-function LiveSessionSearch(props: Props) {
-  const { appliedFilter, saveRequestPayloads = false } = props;
-  const hasEvents = appliedFilter.filters.filter(i => i.isEvent).size > 0;
-  const hasFilters = appliedFilter.filters.filter(i => !i.isEvent).size > 0;
+function LiveSessionSearch() {
+  const { projectsStore, searchStoreLive, sessionStore } = useStore();
+  const saveRequestPayloads = projectsStore.active?.saveRequestPayloads;
+  const appliedFilter = searchStoreLive.instance;
+  const hasEvents = appliedFilter.filters.filter(i => i.isEvent).length > 0;
+  const hasFilters = appliedFilter.filters.filter(i => !i.isEvent).length > 0;
+
+  useEffect(() => {
+    searchStoreLive.fetchSessions();
+  }, []);
 
   const onAddFilter = (filter) => {
-    props.addFilter(filter);
-  }
+    searchStoreLive.addFilter(filter);
+  };
 
   const onUpdateFilter = (filterIndex, filter) => {
-    const newFilters = appliedFilter.filters.map((_filter, i) => {
-      if (i === filterIndex) {
-        return filter;
-      } else {
-        return _filter;
-      }
-    });
-
-    props.edit({
-        ...appliedFilter,
-        filters: newFilters,
-    });
-  }
+    searchStoreLive.updateFilter(filterIndex, filter);
+    sessionStore.fetchLiveSessions();
+  };
 
   const onRemoveFilter = (filterIndex) => {
     const newFilters = appliedFilter.filters.filter((_filter, i) => {
       return i !== filterIndex;
     });
 
-    props.edit({
-      filters: newFilters,
+    searchStoreLive.edit({
+      filters: newFilters
     });
-  }
+
+    sessionStore.fetchLiveSessions();
+  };
 
   const onChangeEventsOrder = (e, { name, value }) => {
-    props.edit({
-      eventsOrder: value,
+    searchStoreLive.edit({
+      eventsOrder: value
     });
-  }
+
+    sessionStore.fetchLiveSessions();
+  };
 
   return (hasEvents || hasFilters) ? (
     <div className="border bg-white rounded mt-4">
@@ -75,7 +69,7 @@ function LiveSessionSearch(props: Props) {
               className="mr-2"
               // onClick={() => setshowModal(true)}
               icon="plus">
-                ADD STEP
+              ADD STEP
             </Button>
           </FilterSelection>
         </div>
@@ -88,7 +82,4 @@ function LiveSessionSearch(props: Props) {
   ) : <></>;
 }
 
-export default connect(state => ({
-  saveRequestPayloads: state.getIn(['site', 'active', 'saveRequestPayloads']),
-  appliedFilter: state.getIn([ 'liveSearch', 'instance' ]),
-}), { edit, addFilter })(LiveSessionSearch);
\ No newline at end of file
+export default observer(LiveSessionSearch);
diff --git a/frontend/app/components/shared/LiveSessionSearchField/LiveSessionSearchField.tsx b/frontend/app/components/shared/LiveSessionSearchField/LiveSessionSearchField.tsx
index cac367484..e1d079583 100644
--- a/frontend/app/components/shared/LiveSessionSearchField/LiveSessionSearchField.tsx
+++ b/frontend/app/components/shared/LiveSessionSearchField/LiveSessionSearchField.tsx
@@ -1,48 +1,47 @@
-import React, { useState } from 'react';
-import { connect } from 'react-redux';
+import React, { useState } from 'react';;
 import stl from './LiveSessionSearchField.module.css';
 import { Input } from 'UI';
 import LiveFilterModal from 'Shared/Filters/LiveFilterModal';
-import { fetchFilterSearch } from 'Duck/search';
 import { debounce } from 'App/utils';
-import { edit as editFilter, addFilterByKeyAndValue } from 'Duck/liveSearch';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 
 interface Props {
-  fetchFilterSearch: (query: any) => void;
-  editFilter: typeof editFilter;
-  addFilterByKeyAndValue: (key: string, value: string) => void;
+
 }
+
 function LiveSessionSearchField(props: Props) {
-  const debounceFetchFilterSearch = debounce(props.fetchFilterSearch, 1000)
-  const [showModal, setShowModal] = useState(false)
-  const [searchQuery, setSearchQuery] = useState('')
+  const { searchStoreLive } = useStore();
+  const debounceFetchFilterSearch = debounce(searchStoreLive.fetchFilterSearch, 1000);
+  const [showModal, setShowModal] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
 
   const onSearchChange = (e, { value }) => {
-    setSearchQuery(value)
+    setSearchQuery(value);
     debounceFetchFilterSearch({ q: value });
-  }
+  };
 
   const onAddFilter = (filter) => {
-    props.addFilterByKeyAndValue(filter.key, filter.value)
-  }
+    searchStoreLive.addFilterByKeyAndValue(filter.key, filter.value);
+  };
 
   return (
     <div className="relative">
       <Input
         // inputProps={ { "data-openreplay-label": "Search", "autocomplete": "off" } }
         className={stl.searchField}
-        onFocus={ () => setShowModal(true) }
-        onBlur={ () => setTimeout(setShowModal, 200, false) }
-        onChange={ onSearchChange }
+        onFocus={() => setShowModal(true)}
+        onBlur={() => setTimeout(setShowModal, 200, false)}
+        onChange={onSearchChange}
         icon="search"
-        placeholder={ 'Find live sessions by user or metadata.'}
+        placeholder={'Find live sessions by user or metadata.'}
         fluid
         id="search"
         type="search"
         autoComplete="off"
       />
 
-      { showModal && (
+      {showModal && (
         <div className="absolute left-0 shadow-sm rounded-lg bg-white z-50">
           <LiveFilterModal
             searchQuery={searchQuery}
@@ -55,4 +54,4 @@ function LiveSessionSearchField(props: Props) {
   );
 }
 
-export default connect(null, { fetchFilterSearch, editFilter, addFilterByKeyAndValue })(LiveSessionSearchField);
+export default observer(LiveSessionSearchField);
diff --git a/frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx b/frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx
index 821c94959..a12be579f 100644
--- a/frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx
+++ b/frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx
@@ -2,24 +2,23 @@ import React from 'react';
 import SessionSearchField from 'Shared/SessionSearchField';
 import AiSessionSearchField from 'Shared/SessionSearchField/AiSessionSearchField';
 import SavedSearch from 'Shared/SavedSearch';
-// import { Button } from 'UI';
 import { Button } from 'antd';
-import { connect } from 'react-redux';
-import { clearSearch } from 'Duck/search';
 import TagList from './components/TagList';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 
 interface Props {
-  clearSearch: () => void;
-  appliedFilter: any;
-  savedSearch: any;
-  site: any;
+
 }
 
 const MainSearchBar = (props: Props) => {
-  const { appliedFilter, site } = props;
-  const currSite = React.useRef(site)
-  const hasFilters = appliedFilter && appliedFilter.filters && appliedFilter.filters.size > 0;
-  const hasSavedSearch = props.savedSearch && props.savedSearch.exists();
+  const { searchStore, projectsStore } = useStore();
+  const appliedFilter = searchStore.instance;
+  const savedSearch = searchStore.savedSearch;
+  const projectId = projectsStore.siteId;
+  const currSite = React.useRef(projectId);
+  const hasFilters = appliedFilter && appliedFilter.filters && appliedFilter.filters.length > 0;
+  const hasSavedSearch = savedSearch && savedSearch.exists();
   const hasSearch = hasFilters || hasSavedSearch;
 
   // @ts-ignore
@@ -27,12 +26,12 @@ const MainSearchBar = (props: Props) => {
   const isSaas = /app\.openreplay\.com/.test(originStr);
 
   React.useEffect(() => {
-    if (site !== currSite.current && currSite.current !== undefined) {
-      console.debug('clearing filters due to project change')
-      props.clearSearch();
-      currSite.current = site
+    if (projectId !== currSite.current && currSite.current !== undefined) {
+      console.debug('clearing filters due to project change');
+      searchStore.clearSearch();
+      currSite.current = projectId;
     }
-  }, [site])
+  }, [projectId]);
   return (
     <div className="flex items-center flex-wrap">
       <div style={{ flex: 3, marginRight: '10px' }}>
@@ -44,10 +43,10 @@ const MainSearchBar = (props: Props) => {
         <Button
           // variant={hasSearch ? 'text-primary' : 'text'}
           // className="ml-auto font-medium"
-          type='link'
+          type="link"
           disabled={!hasSearch}
-          onClick={() => props.clearSearch()}
-          className='ml-auto font-medium'
+          onClick={() => searchStore.clearSearch()}
+          className="ml-auto font-medium"
         >
           Clear Search
         </Button>
@@ -56,13 +55,4 @@ const MainSearchBar = (props: Props) => {
   );
 };
 
-export default connect(
-  (state: any) => ({
-    appliedFilter: state.getIn(['search', 'instance']),
-    savedSearch: state.getIn(['search', 'savedSearch']),
-    site: state.getIn(['site', 'siteId']),
-  }),
-  {
-    clearSearch,
-  }
-)(MainSearchBar);
+export default observer(MainSearchBar);
diff --git a/frontend/app/components/shared/MainSearchBar/components/TagList.tsx b/frontend/app/components/shared/MainSearchBar/components/TagList.tsx
index 983622a32..d48652eed 100644
--- a/frontend/app/components/shared/MainSearchBar/components/TagList.tsx
+++ b/frontend/app/components/shared/MainSearchBar/components/TagList.tsx
@@ -1,7 +1,5 @@
 import { Tag } from 'App/services/TagWatchService';
 import { useModal } from 'Components/Modal';
-import { refreshFilterOptions, addFilterByKeyAndValue } from 'Duck/search';
-import { connect } from 'react-redux';
 import React from 'react';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
@@ -11,11 +9,8 @@ import { Icon, confirm } from 'UI';
 import { Button, Typography } from 'antd';
 import { toast } from 'react-toastify';
 
-function TagList(props: {
-  refreshFilterOptions: typeof refreshFilterOptions;
-  addFilterByKeyAndValue: typeof addFilterByKeyAndValue;
-}) {
-  const { refreshFilterOptions, addFilterByKeyAndValue } = props;
+function TagList() {
+  const { searchStore } = useStore();
   const { tagWatchStore } = useStore();
   const { showModal, hideModal } = useModal();
 
@@ -27,29 +22,29 @@ function TagList(props: {
             FilterKey.TAGGED_ELEMENT,
             tags.map((tag) => ({ label: tag.name, value: tag.tagId.toString() }))
           );
-          refreshFilterOptions();
+          searchStore.refreshFilterOptions();
         }
       });
     }
   }, []);
 
   const addTag = (tagId: number) => {
-    addFilterByKeyAndValue(FilterKey.TAGGED_ELEMENT, tagId.toString());
+    searchStore.addFilterByKeyAndValue(FilterKey.TAGGED_ELEMENT, tagId.toString());
     hideModal();
   };
   const openModal = () => {
     showModal(<TagListModal onTagClick={addTag} />, {
       right: true,
-      width: 400,
+      width: 400
     });
   };
   return (
-    <Button 
-      // variant={'outline'} 
-      type='primary'
+    <Button
+      // variant={'outline'}
+      type="primary"
       ghost
-      className='gap-1'
-      disabled={!tagWatchStore.tags.length} 
+      className="gap-1"
+      disabled={!tagWatchStore.tags.length}
       onClick={openModal}>
       <span>Tags</span>
       <span className={'font-medium ml-1'}>{tagWatchStore.tags.length}</span>
@@ -71,7 +66,7 @@ const TagListModal = observer(({ onTagClick }: { onTagClick: (tagId: number) =>
       await confirm({
         header: 'Remove Tag',
         confirmButton: 'Remove',
-        confirmation: 'Are you sure you want to remove this tag?',
+        confirmation: 'Are you sure you want to remove this tag?'
       })
     ) {
       void tagWatchStore.deleteTag(id);
@@ -129,7 +124,7 @@ const TagRow = (props: {
             setName(tag.name);
           },
           triggerType: [],
-          maxLength: 90,
+          maxLength: 90
         }}
       >
         {tag.name}
@@ -157,6 +152,4 @@ const TagRow = (props: {
   );
 };
 
-export default connect(() => ({}), { refreshFilterOptions, addFilterByKeyAndValue })(
-  observer(TagList)
-);
+export default observer(TagList);
diff --git a/frontend/app/components/shared/NoSessionsMessage/NoSessionsMessage.js b/frontend/app/components/shared/NoSessionsMessage/NoSessionsMessage.js
index 1a8e271be..cd8b36203 100644
--- a/frontend/app/components/shared/NoSessionsMessage/NoSessionsMessage.js
+++ b/frontend/app/components/shared/NoSessionsMessage/NoSessionsMessage.js
@@ -1,23 +1,19 @@
 import React from 'react';
 import { Alert, Space, Button } from 'antd';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react-lite'
+import { useStore } from "App/mstore";
 import { onboarding as onboardingRoute } from 'App/routes';
 import { withRouter } from 'react-router-dom';
 import * as routes from '../../../routes';
-import { indigo } from 'tailwindcss/colors';
 import { SquareArrowOutUpRight } from 'lucide-react';
 import { useHistory } from 'react-router';
 
-
 const withSiteId = routes.withSiteId;
-const indigoWithOpacity = `rgba(${parseInt(indigo[500].slice(1, 3), 16)}, ${parseInt(indigo[500].slice(3, 5), 16)}, ${parseInt(indigo[500].slice(5, 7), 16)}, 0.1)`; // 0.5 is the opacity level
 
-
-const NoSessionsMessage = (props) => {
-  const {
-    sites,
-    siteId
-  } = props;
+const NoSessionsMessage = () => {
+  const { projectsStore } = useStore();
+  const sites = projectsStore.list;
+  const siteId = projectsStore.siteId;
   const history = useHistory();
   const activeSite = sites.find((s) => s.id === siteId);
   const showNoSessions = !!activeSite && !activeSite.recorded;
@@ -60,7 +56,4 @@ const NoSessionsMessage = (props) => {
   );
 };
 
-export default connect((state) => ({
-  site: state.getIn(['site', 'siteId']),
-  sites: state.getIn(['site', 'list'])
-}))(withRouter(NoSessionsMessage));
+export default withRouter(observer(NoSessionsMessage));
diff --git a/frontend/app/components/shared/OverviewMenu/OverviewMenu.tsx b/frontend/app/components/shared/OverviewMenu/OverviewMenu.tsx
index e6b6b8335..580bf8937 100644
--- a/frontend/app/components/shared/OverviewMenu/OverviewMenu.tsx
+++ b/frontend/app/components/shared/OverviewMenu/OverviewMenu.tsx
@@ -1,14 +1,11 @@
 import React from 'react';
 import { SideMenuitem } from 'UI';
-import { connect } from 'react-redux';
-import { setActiveTab } from 'Duck/search';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { sessions, fflags, withSiteId, notes, bookmarks } from 'App/routes';
+import { useStore } from 'App/mstore';
 
 interface Props {
-  setActiveTab: (tab: any) => void;
   activeTab: string;
-  isEnterprise: boolean;
 }
 
 const TabToUrlMap = {
@@ -20,34 +17,37 @@ const TabToUrlMap = {
 
 function OverviewMenu(props: Props & RouteComponentProps) {
   // @ts-ignore
-  const { activeTab, isEnterprise, history, match: { params: { siteId } }, location } = props;
+  const { history, match: { params: { siteId } }, location } = props;
+  const { searchStore, userStore } = useStore();
+  const isEnterprise = userStore.isEnterprise;
+  const activeTab = searchStore.activeTab.type;
 
   React.useEffect(() => {
     const currentLocation = location.pathname;
     const tab = Object.keys(TabToUrlMap).find((tab: keyof typeof TabToUrlMap) => currentLocation.includes(TabToUrlMap[tab]));
     if (tab && tab !== activeTab) {
-      props.setActiveTab({ type: tab });
+      searchStore.setActiveTab({ type: tab });
     }
   }, [location.pathname]);
 
   return (
     <div className={'flex flex-col gap-2 w-full'}>
-      <div className='w-full'>
+      <div className="w-full">
         <SideMenuitem
           active={activeTab === 'all'}
-          id='menu-sessions'
-          title='Sessions'
-          iconName='play-circle-bold'
+          id="menu-sessions"
+          title="Sessions"
+          iconName="play-circle-bold"
           onClick={() => {
-            props.setActiveTab({ type: 'all' });
+            searchStore.setActiveTab({ type: 'all' });
             !location.pathname.includes(sessions()) && history.push(withSiteId(sessions(), siteId));
           }}
         />
       </div>
-      <div className='w-full'>
+      <div className="w-full">
         <SideMenuitem
           active={activeTab === 'bookmark'}
-          id='menu-bookmarks'
+          id="menu-bookmarks"
           title={`${isEnterprise ? 'Vault' : 'Bookmarks'}`}
           iconName={isEnterprise ? 'safe' : 'star'}
           onClick={() => {
@@ -56,26 +56,26 @@ function OverviewMenu(props: Props & RouteComponentProps) {
           }}
         />
       </div>
-      <div className='w-full'>
+      <div className="w-full">
         <SideMenuitem
           active={activeTab === 'notes'}
-          id='menu-notes'
-          title='Notes'
-          iconName='stickies'
+          id="menu-notes"
+          title="Notes"
+          iconName="stickies"
           onClick={() => {
-            props.setActiveTab({ type: 'notes' });
+            searchStore.setActiveTab({ type: 'notes' });
             !location.pathname.includes(notes()) && history.push(withSiteId(notes(), siteId));
           }}
         />
       </div>
-      <div className='w-full'>
+      <div className="w-full">
         <SideMenuitem
           active={activeTab === 'flags'}
-          id='menu-flags'
-          title='Feature Flags'
-          iconName='toggles'
+          id="menu-flags"
+          title="Feature Flags"
+          iconName="toggles"
           onClick={() => {
-            props.setActiveTab({ type: 'flags' });
+            searchStore.setActiveTab({ type: 'flags' });
             !location.pathname.includes(fflags()) && history.push(withSiteId(fflags(), siteId));
           }}
         />
@@ -84,7 +84,4 @@ function OverviewMenu(props: Props & RouteComponentProps) {
   );
 }
 
-export default connect((state: any) => ({
-  activeTab: state.getIn(['search', 'activeTab', 'type']),
-  isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee'
-}), { setActiveTab })(withRouter(OverviewMenu));
+export default withRouter(OverviewMenu);
diff --git a/frontend/app/components/shared/ProjectDropdown/ProjectDropdown.tsx b/frontend/app/components/shared/ProjectDropdown/ProjectDropdown.tsx
index 78780def0..ee0e73868 100644
--- a/frontend/app/components/shared/ProjectDropdown/ProjectDropdown.tsx
+++ b/frontend/app/components/shared/ProjectDropdown/ProjectDropdown.tsx
@@ -1,68 +1,52 @@
 import {
   CaretDownOutlined,
-  FolderAddOutlined,
+  FolderAddOutlined
 } from '@ant-design/icons';
 import { Button, Divider, Dropdown, Space, Typography } from 'antd';
 import cn from 'classnames';
 import React from 'react';
-import { connect } from 'react-redux';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
-
-import { withStore } from 'App/mstore';
+import { withRouter } from 'react-router-dom';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 import { hasSiteId, siteChangeAvailable } from 'App/routes';
 import NewSiteForm from 'Components/Client/Sites/NewSiteForm';
 import { useModal } from 'Components/Modal';
-import { fetchListActive as fetchMetadata } from 'Duck/customField';
-import { clearSearch as clearSearchLive } from 'Duck/liveSearch';
-import { clearSearch } from 'Duck/search';
-import { setSiteId } from 'Duck/site';
-import { init as initProject } from 'Duck/site';
 import { Icon } from 'UI';
 
 const { Text } = Typography;
 
-interface Site {
-  id: string;
-  host: string;
-  platform: 'web' | 'mobile';
-}
-
-interface Props extends RouteComponentProps {
-  sites: Site[];
-  siteId: string;
-  setSiteId: (siteId: string) => void;
-  fetchMetadata: () => void;
-  clearSearch: (isSession: boolean) => void;
-  clearSearchLive: () => void;
-  initProject: (data: any) => void;
-  mstore: any;
-  account: any;
-}
-
-function ProjectDropdown(props: Props) {
-  const { sites, siteId, location, account } = props;
+function ProjectDropdown(props: { location: any }) {
+  const mstore = useStore();
+  const { projectsStore, searchStore, searchStoreLive, userStore } = mstore;
+  const account = userStore.account;
+  const sites = projectsStore.list;
+  const siteId = projectsStore.siteId;
+  const setSiteId = projectsStore.setSiteId;
+  const initProject = projectsStore.initProject;
+  const { location } = props;
   const isAdmin = account.admin || account.superAdmin;
   const activeSite = sites.find((s) => s.id === siteId);
   const showCurrent =
     hasSiteId(location.pathname) || siteChangeAvailable(location.pathname);
   const { showModal, hideModal } = useModal();
 
-  const handleSiteChange = (newSiteId: string) => {
-    props.setSiteId(newSiteId); // Fixed: should set the new siteId, not the existing one
-    props.fetchMetadata();
-    props.clearSearch(location.pathname.includes('/sessions'));
-    props.clearSearchLive();
+  const handleSiteChange = async (newSiteId: string) => {
+    mstore.initClient();
+    setSiteId(newSiteId);
+    searchStore.clearSearch();
+    searchStore.clearList();
+    searchStoreLive.clearSearch();
 
-    props.mstore.initClient();
+    // await customFieldStore.fetchList(newSiteId);
+    // await searchStore.fetchSavedSearchList()
   };
 
   const addProjectClickHandler = () => {
-    props.initProject({});
+    initProject({});
     showModal(<NewSiteForm onClose={hideModal} />, { right: true });
   };
 
-  // @ts-ignore immutable
-  const menuItems = sites.toJS().map((site) => ({
+  const menuItems = sites.map((site) => ({
     key: site.id,
     label: (
       <div
@@ -83,7 +67,7 @@ function ProjectDropdown(props: Props) {
           {site.host}
         </Text>
       </div>
-    ),
+    )
   }));
   if (isAdmin) {
     menuItems.unshift({
@@ -100,7 +84,7 @@ function ProjectDropdown(props: Props) {
           </div>
           <Divider style={{ marginTop: 4, marginBottom: 0 }} />
         </>
-      ),
+      )
     });
   }
 
@@ -112,8 +96,8 @@ function ProjectDropdown(props: Props) {
         defaultSelectedKeys: [siteId],
         style: {
           maxHeight: 500,
-          overflowY: 'auto',
-        },
+          overflowY: 'auto'
+        }
       }}
       placement="bottomLeft"
     >
@@ -142,18 +126,6 @@ function ProjectDropdown(props: Props) {
   );
 }
 
-const mapStateToProps = (state: any) => ({
-  sites: state.getIn(['site', 'list']),
-  siteId: state.getIn(['site', 'siteId']),
-  account: state.getIn(['user', 'account']),
-});
-
 export default withRouter(
-  connect(mapStateToProps, {
-    setSiteId,
-    fetchMetadata,
-    clearSearch,
-    clearSearchLive,
-    initProject,
-  })(withStore(ProjectDropdown))
+  observer(ProjectDropdown)
 );
diff --git a/frontend/app/components/shared/SaveFilterButton/SaveFilterButton.tsx b/frontend/app/components/shared/SaveFilterButton/SaveFilterButton.tsx
index 03ae2fede..61fe72edf 100644
--- a/frontend/app/components/shared/SaveFilterButton/SaveFilterButton.tsx
+++ b/frontend/app/components/shared/SaveFilterButton/SaveFilterButton.tsx
@@ -1,32 +1,26 @@
 import React, { useState } from 'react';
-import { connect } from 'react-redux';
-import { save } from 'Duck/filters';
 import { Button } from 'UI';
-import SaveSearchModal from 'Shared/SaveSearchModal'
+import SaveSearchModal from 'Shared/SaveSearchModal';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 
-interface Props {
-  filter: any;
-  savedSearch: any;
-}
 
-function SaveFilterButton(props: Props) {
-  const { savedSearch } = props;
-  const [showModal, setshowModal] = useState(false)
+function SaveFilterButton() {
+  const { searchStore } = useStore();
+  const savedSearch = searchStore.savedSearch;
+  const [showModal, setshowModal] = useState(false);
   return (
     <div>
-        <Button
-          variant="text-primary"
-          className="mr-2"
-          onClick={() => setshowModal(true)}
-          icon="zoom-in">
-            {savedSearch.exists() ? 'UPDATE SEARCH' : 'SAVE SEARCH'}
-        </Button>
-      { showModal && ( <SaveSearchModal show={showModal} closeHandler={() => setshowModal(false)} /> )}
+      <Button
+        variant="text-primary"
+        className="mr-2"
+        onClick={() => setshowModal(true)}
+        icon="zoom-in">
+        {savedSearch.exists() ? 'UPDATE SEARCH' : 'SAVE SEARCH'}
+      </Button>
+      {showModal && (<SaveSearchModal show={showModal} closeHandler={() => setshowModal(false)} />)}
     </div>
   );
 }
 
-export default connect(state => ({
-  filter: state.getIn([ 'search', 'instance' ]),
-  savedSearch: state.getIn([ 'search', 'savedSearch' ]),
-}), { save })(SaveFilterButton);
\ No newline at end of file
+export default observer(SaveFilterButton);
diff --git a/frontend/app/components/shared/SaveFunnelButton/SaveFunnelButton.tsx b/frontend/app/components/shared/SaveFunnelButton/SaveFunnelButton.tsx
deleted file mode 100644
index bb5b9425c..000000000
--- a/frontend/app/components/shared/SaveFunnelButton/SaveFunnelButton.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { useState } from 'react';
-import { Button } from 'UI';
-import FunnelSaveModal from 'App/components/Funnels/FunnelSaveModal';
-import { connect } from 'react-redux';
-import { init } from 'Duck/funnels';
-interface Props {
-  filter: any
-  init: (instance: any) => void
-}
-function SaveFunnelButton(props: Props) {
-  const [showModal, setshowModal] = useState(false)
-
-  const handleClick = () => {
-    props.init({ filter: props.filter })
-    setshowModal(true)
-  }
-  return (
-    <div>
-        <Button
-            variant="text-primary"
-            icon="funnel"
-            onClick={handleClick}
-        >SAVE FUNNEL</Button>
-
-        <FunnelSaveModal
-            show={showModal}
-            closeHandler={() => setshowModal(false)}
-        />
-    </div>
-  )
-}
-
-export default connect(state => ({
-  filter: state.getIn(['search', 'instance']),
-}), { init })(SaveFunnelButton);
\ No newline at end of file
diff --git a/frontend/app/components/shared/SaveFunnelButton/index.ts b/frontend/app/components/shared/SaveFunnelButton/index.ts
deleted file mode 100644
index 246df92ff..000000000
--- a/frontend/app/components/shared/SaveFunnelButton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SaveFunnelButton';
\ No newline at end of file
diff --git a/frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx b/frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx
index 2d3013688..f90535d15 100644
--- a/frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx
+++ b/frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx
@@ -1,126 +1,114 @@
 import React from 'react';
-import { connect } from 'react-redux';
-import { editSavedSearch as edit, save, remove } from 'Duck/search';
 import { Button, Modal, Form, Icon, Checkbox, Input } from 'UI';
 import { confirm } from 'UI';
 import stl from './SaveSearchModal.module.css';
 import cn from 'classnames';
 import { toast } from 'react-toastify';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 
 interface Props {
-    filter: any;
-    loading: boolean;
-    edit: (filter: any) => void;
-    save: (searchId: any, rename: boolean) => Promise<void>;
-    show: boolean;
-    closeHandler: () => void;
-    savedSearch: any;
-    remove: (filterId: number) => Promise<void>;
-    userId: number;
-    rename: boolean;
-}
-function SaveSearchModal(props: Props) {
-    const { savedSearch, loading, show, closeHandler, rename = false } = props;
-
-    const onNameChange = ({ target: { value } }: any) => {
-        props.edit({ name: value });
-    };
-
-    const onSave = () => {
-        const { closeHandler } = props;
-
-        props
-            .save(savedSearch.exists() ? savedSearch.searchId : null, rename)
-            .then(() => {
-                toast.success(`${savedSearch.exists() ? 'Updated' : 'Saved'} Successfully`);
-                closeHandler();
-            })
-            .catch((e) => {
-                toast.error('Something went wrong, please try again');
-            });
-    };
-
-    const onDelete = async () => {
-        if (
-            await confirm({
-                header: 'Confirm',
-                confirmButton: 'Yes, delete',
-                confirmation: `Are you sure you want to permanently delete this Saved search?`,
-            })
-        ) {
-            props.remove(savedSearch.searchId).then(() => {
-                closeHandler();
-            });
-        }
-    };
-
-    const onChangeOption = ({ target: { checked, name } }: any) => props.edit({ [name]: checked });
-
-    return (
-        <Modal size="small" open={show} onClose={closeHandler}>
-            <Modal.Header className={stl.modalHeader}>
-                <div>{'Save Search'}</div>
-                <Icon role="button" tabIndex="-1" color="gray-dark" size="18" name="close" onClick={closeHandler} />
-            </Modal.Header>
-
-            <Modal.Content>
-                <Form onSubmit={onSave}>
-                    <Form.Field>
-                        <label>{'Title:'}</label>
-                        <Input
-                            autoFocus={true}
-                            // className={ stl.name }
-                            name="name"
-                            value={savedSearch.name}
-                            onChange={onNameChange}
-                            placeholder="Title"
-                        />
-                    </Form.Field>
-
-                    <Form.Field>
-                        <div className={cn('flex items-center', { disabled: savedSearch.exists() && savedSearch.userId !== props.userId })}>
-                            <Checkbox
-                                name="isPublic"
-                                className="font-medium mr-3"
-                                type="checkbox"
-                                checked={savedSearch.isPublic}
-                                onClick={onChangeOption}
-                            />
-                            <div
-                                className="flex items-center cursor-pointer select-none"
-                                onClick={() => props.edit({ isPublic: !savedSearch.isPublic })}
-                            >
-                                <Icon name="user-friends" size="16" />
-                                <span className="ml-2"> Team Visible</span>
-                            </div>
-                        </div>
-                    </Form.Field>
-                </Form>
-                {/* {savedSearch.exists() && <div className="mt-4">Changes in filters will be updated.</div>} */}
-            </Modal.Content>
-            <Modal.Footer className="flex items-center px-6">
-                <div className="mr-auto flex items-center">
-                    <Button variant="primary" onClick={onSave} loading={loading} disabled={!savedSearch.validate()} className="mr-2">
-                        {savedSearch.exists() ? 'Update' : 'Create'}
-                    </Button>
-                    <Button onClick={closeHandler}>{'Cancel'}</Button>
-                </div>
-                {savedSearch.exists() && (
-                    <Button variant="text" onClick={onDelete}>
-                        <Icon name="trash" size="18" />
-                    </Button>
-                )}
-            </Modal.Footer>
-        </Modal>
-    );
+  show: boolean;
+  closeHandler: () => void;
+  rename?: boolean;
 }
 
-export default connect(
-    (state: any) => ({
-        userId: state.getIn(['user', 'account', 'id']),
-        savedSearch: state.getIn(['search', 'savedSearch']),
-        filter: state.getIn(['search', 'instance']),
-        loading: state.getIn(['search', 'saveRequest', 'loading']) || state.getIn(['search', 'updateRequest', 'loading']),
-    }),
-    { edit, save, remove }
-)(SaveSearchModal);
+function SaveSearchModal({ show, closeHandler, rename = false }: Props) {
+  const { searchStore, userStore } = useStore();
+  const userId = userStore.account.id;
+  const savedSearch = searchStore.savedSearch;
+  const loading = searchStore.isSaving;
+
+  const onNameChange = ({ target: { value } }: any) => {
+    searchStore.editSavedSearch({ name: value });
+  };
+
+  const onSave = () => {
+    searchStore.save(savedSearch.exists() ? savedSearch.searchId : null, rename)
+      .then(() => {
+        toast.success(`${savedSearch.exists() ? 'Updated' : 'Saved'} Successfully`);
+        closeHandler();
+      })
+      .catch((e) => {
+        toast.error('Something went wrong, please try again');
+      });
+  };
+
+  const onDelete = async () => {
+    if (
+      await confirm({
+        header: 'Confirm',
+        confirmButton: 'Yes, delete',
+        confirmation: `Are you sure you want to permanently delete this Saved search?`
+      })
+    ) {
+      searchStore.removeSavedSearch(savedSearch.searchId!).then(() => {
+        closeHandler();
+      });
+    }
+  };
+
+  const onChangeOption = ({ target: { checked, name } }: any) => searchStore.editSavedSearch({ [name]: checked });
+
+  return (
+    <Modal size="small" open={show} onClose={closeHandler}>
+      <Modal.Header className={stl.modalHeader}>
+        <div>{'Save Search'}</div>
+        <Icon role="button" tabIndex="-1" color="gray-dark" size="18" name="close" onClick={closeHandler} />
+      </Modal.Header>
+
+      <Modal.Content>
+        <Form onSubmit={onSave}>
+          <Form.Field>
+            <label>{'Title:'}</label>
+            <Input
+              autoFocus={true}
+              // className={ stl.name }
+              name="name"
+              value={savedSearch.name}
+              onChange={onNameChange}
+              placeholder="Title"
+            />
+          </Form.Field>
+
+          <Form.Field>
+            <div
+              className={cn('flex items-center', { disabled: savedSearch.exists() && savedSearch.userId !== userId })}>
+              <Checkbox
+                name="isPublic"
+                className="font-medium mr-3"
+                type="checkbox"
+                checked={savedSearch.isPublic}
+                onClick={onChangeOption}
+              />
+              <div
+                className="flex items-center cursor-pointer select-none"
+                onClick={() => searchStore.editSavedSearch({ isPublic: !savedSearch.isPublic })}
+              >
+                <Icon name="user-friends" size="16" />
+                <span className="ml-2"> Team Visible</span>
+              </div>
+            </div>
+          </Form.Field>
+        </Form>
+        {/* {savedSearch.exists() && <div className="mt-4">Changes in filters will be updated.</div>} */}
+      </Modal.Content>
+      <Modal.Footer className="flex items-center px-6">
+        <div className="mr-auto flex items-center">
+          <Button variant="primary" onClick={onSave} loading={loading} disabled={!savedSearch.validate()}
+                  className="mr-2">
+            {savedSearch.exists() ? 'Update' : 'Create'}
+          </Button>
+          <Button onClick={closeHandler}>{'Cancel'}</Button>
+        </div>
+        {savedSearch.exists() && (
+          <Button variant="text" onClick={onDelete}>
+            <Icon name="trash" size="18" />
+          </Button>
+        )}
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+export default observer(SaveSearchModal);
diff --git a/frontend/app/components/shared/SavedSearch/SavedSearch.tsx b/frontend/app/components/shared/SavedSearch/SavedSearch.tsx
index 5770d5e76..904af1b75 100644
--- a/frontend/app/components/shared/SavedSearch/SavedSearch.tsx
+++ b/frontend/app/components/shared/SavedSearch/SavedSearch.tsx
@@ -1,44 +1,40 @@
 import React, { useEffect } from 'react';
 import { Icon } from 'UI';
 import { Button } from 'antd';
-import { connect } from 'react-redux';
-import { fetchList as fetchListSavedSearch } from 'Duck/search';
 import cn from 'classnames';
 import stl from './SavedSearch.module.css';
 import { useModal } from 'App/components/Modal';
-import SavedSearchModal from './components/SavedSearchModal'
+import SavedSearchModal from './components/SavedSearchModal';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 
-interface Props {
-  fetchListSavedSearch: () => void;
-  list: any;
-  savedSearch: any;
-  fetchedMeta: boolean
-}
-function SavedSearch(props: Props) {
-  const { list } = props;
-  const { savedSearch }  = props;
+function SavedSearch() {
   const { showModal } = useModal();
+  const { searchStore, customFieldStore } = useStore();
+  const savedSearch = searchStore.savedSearch;
+  const list = searchStore.list;
+  const fetchedMeta = customFieldStore.fetchedMetadata;
 
-  useEffect(() => {
-    if (list.size === 0 && props.fetchedMeta) {
-      props.fetchListSavedSearch()
-    }
-  }, [props.fetchedMeta])
+  // useEffect(() => {
+  //   if (list.size === 0 && !fetchedMeta) {
+  //     void searchStore.fetchSavedSearchList();
+  //   }
+  // }, [fetchedMeta]);
 
   return (
-    <div className={cn("flex items-center", { [stl.disabled] : list.size === 0})}>
+    <div className={cn('flex items-center', { [stl.disabled]: list.size === 0 })}>
       <Button
         // variant="outline"
-        type='primary'
+        type="primary"
         ghost
         onClick={() => showModal(<SavedSearchModal />, { right: true, width: 450 })}
-        className='flex gap-1'
+        className="flex gap-1"
       >
         <span className="mr-1">Saved Search</span>
         <span className="font-meidum">{list.size}</span>
         <Icon name="ellipsis-v" color="teal" size="14" />
       </Button>
-      { savedSearch.exists() && (
+      {savedSearch.exists() && (
         <div className="flex items-center ml-2">
           <Icon name="search" size="14" />
           <span className="color-gray-medium px-1">Viewing:</span>
@@ -51,8 +47,4 @@ function SavedSearch(props: Props) {
   );
 }
 
-export default connect((state: any) => ({
-  list: state.getIn([ 'search', 'list' ]),
-  savedSearch: state.getIn([ 'search', 'savedSearch' ]),
-  fetchedMeta: state.getIn(['customFields', 'fetchedMetadata'])
-}), { fetchListSavedSearch })(SavedSearch);
+export default observer(SavedSearch);
diff --git a/frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx b/frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx
index 68c278b59..d805a12e6 100644
--- a/frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx
+++ b/frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx
@@ -1,113 +1,115 @@
 import React, { MouseEvent, useState } from 'react';
 import cn from 'classnames';
 import { Icon, Input } from 'UI';
-import { List } from 'immutable';
 import { confirm, Tooltip } from 'UI';
-import { applySavedSearch, remove, editSavedSearch } from 'Duck/search';
-import { connect } from 'react-redux';
 import { useModal } from 'App/components/Modal';
 import { SavedSearch } from 'Types/ts/search';
 import SaveSearchModal from 'Shared/SaveSearchModal';
 import stl from './savedSearchModal.module.css';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
+import { ISavedSearch } from 'App/mstore/types/savedSearch';
 
 interface ITooltipIcon {
-    title: string;
-    name: string;
-    onClick: (e: MouseEvent<HTMLDivElement>) => void;
+  title: string;
+  name: string;
+  onClick: (e: MouseEvent<HTMLDivElement>) => void;
 }
+
 function TooltipIcon(props: ITooltipIcon) {
-    return (
-        <div onClick={(e) => props.onClick(e)}>
-            <Tooltip title={props.title}>
-                {/* @ts-ignore */}
-                <Icon size="16" name={props.name} color="main" />
-            </Tooltip>
-        </div>
-    );
+  return (
+    <div onClick={(e) => props.onClick(e)}>
+      <Tooltip title={props.title}>
+        {/* @ts-ignore */}
+        <Icon size="16" name={props.name} color="main" />
+      </Tooltip>
+    </div>
+  );
 }
 
 interface Props {
-    list: List<SavedSearch>;
-    applySavedSearch: (item: SavedSearch) => void;
-    remove: (itemId: number) => void;
-    editSavedSearch: (item: SavedSearch) => void;
+  applySavedSearch: (item: SavedSearch) => void;
+  remove: (itemId: number) => void;
+  editSavedSearch: (item: SavedSearch) => void;
 }
+
 function SavedSearchModal(props: Props) {
-    const { hideModal } = useModal();
-    const [showModal, setshowModal] = useState(false);
-    const [filterQuery, setFilterQuery] = useState('');
+  const { hideModal } = useModal();
+  const [showModal, setshowModal] = useState(false);
+  const [filterQuery, setFilterQuery] = useState('');
+  const { searchStore } = useStore();
 
-    const onClick = (item: SavedSearch, e) => {
-        e.stopPropagation();
-        props.applySavedSearch(item);
-        hideModal();
-    };
-    const onDelete = async (item: SavedSearch, e: MouseEvent<HTMLDivElement>) => {
-        e.stopPropagation();
-        const confirmation = await confirm({
-            header: 'Confirm',
-            confirmButton: 'Yes, delete',
-            confirmation: 'Are you sure you want to permanently delete this search?',
-        });
-        if (confirmation) {
-            props.remove(item.searchId);
-        }
-    };
-    const onEdit = (item: SavedSearch, e: MouseEvent<HTMLDivElement>) => {
-        e.stopPropagation();
-        props.editSavedSearch(item);
-        setTimeout(() => setshowModal(true), 0);
-    };
+  const onClick = (item: ISavedSearch, e: any) => {
+    e.stopPropagation();
+    searchStore.applySavedSearch(item);
+    hideModal();
+  };
+  const onDelete = async (item: SavedSearch, e: MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    const confirmation = await confirm({
+      header: 'Confirm',
+      confirmButton: 'Yes, delete',
+      confirmation: 'Are you sure you want to permanently delete this search?'
+    });
+    if (confirmation) {
+      searchStore.removeSavedSearch(item.searchId + '');
+    }
+  };
+  const onEdit = (item: SavedSearch, e: MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    searchStore.editSavedSearch(item);
+    setTimeout(() => setshowModal(true), 0);
+  };
 
-    const shownItems = props.list.filter((item) => item.name.toLocaleLowerCase().includes(filterQuery.toLocaleLowerCase()));
+  const shownItems = searchStore.list.filter((item) => item.name.toLocaleLowerCase().includes(filterQuery.toLocaleLowerCase()));
 
-    return (
-        <div className="bg-white box-shadow h-screen">
-            <div className="p-6">
-                <h1 className="text-2xl">
-                    Saved Search <span className="color-gray-medium">{props.list.size}</span>
-                </h1>
-            </div>
-            {props.list.size > 1 && (
-                <div className="mb-6 w-full px-4">
-                    <Input
-                        icon="search"
-                        onChange={({ target: { value } }: any) => setFilterQuery(value)}
-                        placeholder="Filter by name"
-                    />
-                </div>
-            )}
-            <div style={{ maxHeight: 'calc(100vh - 106px)', overflowY: 'auto' }}>
-                {shownItems.map((item) => (
-                    <div
-                        key={item.key}
-                        className={cn('p-4 cursor-pointer border-b flex items-center group hover:bg-active-blue', item.isPublic && 'pb-10')}
-                        onClick={(e) => onClick(item, e)}
-                    >
-                        <Icon name="search" color="gray-medium" size="16" />
-                        <div className="ml-4">
-                            <div className="text-lg">{item.name} </div>
-                            {item.isPublic && (
-                                <div className={cn(stl.iconContainer, 'absolute color-gray-medium flex items-center px-2 mt-2')}>
-                                    <Icon name="user-friends" size="11" />
-                                    <div className="ml-1 text-sm"> Team </div>
-                                </div>
-                            )}
-                        </div>
-                        <div className="flex items-center ml-auto self-center">
-                            <div className={cn(stl.iconCircle, 'mr-2 invisible group-hover:visible')}>
-                                <TooltipIcon name="pencil" onClick={(e) => onEdit(item, e)} title="Rename" />
-                            </div>
-                            <div className={cn(stl.iconCircle, 'invisible group-hover:visible')}>
-                                <TooltipIcon name="trash" onClick={(e) => onDelete(item, e)} title="Delete" />
-                            </div>
-                        </div>
-                    </div>
-                ))}
-            </div>
-            {showModal && <SaveSearchModal show closeHandler={() => setshowModal(false)} rename={true} />}
+  return (
+    <div className="bg-white box-shadow h-screen">
+      <div className="p-6">
+        <h1 className="text-2xl">
+          Saved Search <span className="color-gray-medium">{searchStore.list.size}</span>
+        </h1>
+      </div>
+      {searchStore.list.size > 1 && (
+        <div className="mb-6 w-full px-4">
+          <Input
+            icon="search"
+            onChange={({ target: { value } }: any) => setFilterQuery(value)}
+            placeholder="Filter by name"
+          />
         </div>
-    );
+      )}
+      <div style={{ maxHeight: 'calc(100vh - 106px)', overflowY: 'auto' }}>
+        {shownItems.map((item) => (
+          <div
+            key={item.key}
+            className={cn('p-4 cursor-pointer border-b flex items-center group hover:bg-active-blue', item.isPublic && 'pb-10')}
+            onClick={(e) => onClick(item, e)}
+          >
+            <Icon name="search" color="gray-medium" size="16" />
+            <div className="ml-4">
+              <div className="text-lg">{item.name} </div>
+              {item.isPublic && (
+                <div className={cn(stl.iconContainer, 'absolute color-gray-medium flex items-center px-2 mt-2')}>
+                  <Icon name="user-friends" size="11" />
+                  <div className="ml-1 text-sm"> Team</div>
+                </div>
+              )}
+            </div>
+            <div className="flex items-center ml-auto self-center">
+              <div className={cn(stl.iconCircle, 'mr-2 invisible group-hover:visible')}>
+                <TooltipIcon name="pencil" onClick={(e) => onEdit(item, e)} title="Rename" />
+              </div>
+              <div className={cn(stl.iconCircle, 'invisible group-hover:visible')}>
+                <TooltipIcon name="trash" onClick={(e) => onDelete(item, e)} title="Delete" />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      {showModal && <SaveSearchModal show closeHandler={() => setshowModal(false)} rename={true} />}
+    </div>
+  );
 }
 
-export default connect((state: any) => ({ list: state.getIn(['search', 'list']) }), { applySavedSearch, remove, editSavedSearch })(SavedSearchModal);
+export default observer(SavedSearchModal);
diff --git a/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx b/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx
index 8c0543c5f..deab8d8a4 100644
--- a/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx
+++ b/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { connect } from 'react-redux';
 import { useHistory } from 'react-router';
 
 import {
@@ -8,6 +7,7 @@ import {
   withSiteId,
 } from 'App/routes';
 import { Icon, Link } from 'UI';
+import { useStore } from 'App/mstore';
 
 const PLAY_ICON_NAMES = {
   notPlayed: 'play-fill',
@@ -30,6 +30,7 @@ interface Props {
   siteId?: string;
 }
 function PlayLink(props: Props) {
+  const { projectsStore } = useStore();
   const { isAssist, viewed, sessionId, onClick = null, queryParams } = props;
   const history = useHistory();
   const defaultIconName = getDefaultIconName(viewed);
@@ -47,9 +48,10 @@ function PlayLink(props: Props) {
     : sessionRoute(sessionId);
 
   const handleBeforeOpen = (e: any) => {
+    const projectId = props.siteId ?? projectsStore.getSiteId().siteId!;
     const replayLink = withSiteId(
       link + (props.query ? props.query : ''),
-      props.siteId
+      projectId
     );
     if (props.beforeOpen) {
       // check for ctrl or shift
@@ -86,6 +88,4 @@ function PlayLink(props: Props) {
   );
 }
 
-export default connect((state: any, props: Props) => ({
-  siteId: props.siteId || state.getIn(['site', 'siteId']),
-}))(PlayLink);
+export default PlayLink
diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx
index 9449bc5b1..acceae4ed 100644
--- a/frontend/app/components/shared/SessionItem/SessionItem.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx
@@ -2,11 +2,9 @@ import cn from 'classnames';
 import { Duration } from 'luxon';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
-import { connect } from 'react-redux';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 
 import { durationFormatted, formatTimeOrDate } from 'App/date';
-import { presetSession } from 'App/duck/sessions';
 import { useStore } from 'App/mstore';
 import {
   assist as assistRoute,
@@ -79,7 +77,6 @@ interface Props {
   bookmarked?: boolean;
   toggleFavorite?: (sessionId: string) => void;
   query?: string;
-  presetSession?: typeof presetSession;
 }
 
 const PREFETCH_STATE = {
@@ -105,7 +102,6 @@ function SessionItem(props: RouteComponentProps & Props) {
     ignoreAssist = false,
     bookmarked = false,
     query,
-    presetSession,
   } = props;
 
   const {
@@ -176,8 +172,11 @@ function SessionItem(props: RouteComponentProps & Props) {
       || isAssist
       || prefetchState === PREFETCH_STATE.none
       || isMobile
-    ) return
-    presetSession?.(session);
+    ) {
+      return;
+    }
+
+    sessionStore.prefetchSession(session);
   };
   return (
     <Tooltip
@@ -417,4 +416,4 @@ function SessionItem(props: RouteComponentProps & Props) {
   );
 }
 
-export default withRouter(connect(null, { presetSession })(observer(SessionItem)));
+export default withRouter(observer(SessionItem));
diff --git a/frontend/app/components/shared/SessionSearch/SessionSearch.tsx b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx
index f4038f396..c9c0a3d5b 100644
--- a/frontend/app/components/shared/SessionSearch/SessionSearch.tsx
+++ b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx
@@ -1,41 +1,34 @@
 import React, { useEffect } from 'react';
-import AnimatedSVG, { ICONS } from "Shared/AnimatedSVG/AnimatedSVG";
+import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 import FilterList from 'Shared/Filters/FilterList';
 import FilterSelection from 'Shared/Filters/FilterSelection';
 import SaveFilterButton from 'Shared/SaveFilterButton';
-import { connect } from 'react-redux';
 import { FilterKey } from 'Types/filter/filterType';
 import { addOptionsToFilter } from 'Types/filter/newFilter';
 import { Button, Loader } from 'UI';
-import { edit, addFilter, fetchSessions, updateFilter } from 'Duck/search';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
 import { debounce } from 'App/utils';
 import useSessionSearchQueryHandler from 'App/hooks/useSessionSearchQueryHandler';
-import { refreshFilterOptions } from 'Duck/search';
 
-let debounceFetch: any = () => {};
+let debounceFetch: any = () => {
+};
 
 interface Props {
-  appliedFilter: any;
-  edit: typeof edit;
-  addFilter: typeof addFilter;
-  saveRequestPayloads: boolean;
-  metaLoading?: boolean;
-  fetchSessions: typeof fetchSessions;
-  updateFilter: typeof updateFilter;
-  refreshFilterOptions: typeof refreshFilterOptions;
+
 }
 
 function SessionSearch(props: Props) {
-  const { tagWatchStore, aiFiltersStore } = useStore();
-  const { appliedFilter, saveRequestPayloads = false, metaLoading = false } = props;
-  const hasEvents = appliedFilter.filters.filter((i: any) => i.isEvent).size > 0;
-  const hasFilters = appliedFilter.filters.filter((i: any) => !i.isEvent).size > 0;
+  const { tagWatchStore, aiFiltersStore, searchStore, customFieldStore, projectsStore } = useStore();
+  const appliedFilter = searchStore.instance;
+  const metaLoading = customFieldStore.isLoading;
+  const hasEvents = appliedFilter.filters.filter((i: any) => i.isEvent).length > 0;
+  const hasFilters = appliedFilter.filters.filter((i: any) => !i.isEvent).length > 0;
+  const saveRequestPayloads = projectsStore.instance?.saveRequestPayloads ?? false;
 
   useSessionSearchQueryHandler({
     appliedFilter,
-    applyFilter: props.updateFilter,
+    applyFilter: searchStore.updateFilter,
     loading: metaLoading,
     onBeforeLoad: async () => {
       const tags = await tagWatchStore.getTags();
@@ -44,63 +37,51 @@ function SessionSearch(props: Props) {
           FilterKey.TAGGED_ELEMENT,
           tags.map((tag) => ({
             label: tag.name,
-            value: tag.tagId.toString(),
+            value: tag.tagId.toString()
           }))
         );
-        props.refreshFilterOptions();
+        searchStore.refreshFilterOptions();
       }
-    },
+    }
   });
 
   useEffect(() => {
-    debounceFetch = debounce(() => props.fetchSessions(), 500);
+    debounceFetch = debounce(() => searchStore.fetchSessions(), 500);
+    void searchStore.fetchSessions(true)
   }, []);
 
   const onAddFilter = (filter: any) => {
-    props.addFilter(filter);
+    searchStore.addFilter(filter);
   };
 
   const onUpdateFilter = (filterIndex: any, filter: any) => {
-    const newFilters = appliedFilter.filters.map((_filter: any, i: any) => {
-      if (i === filterIndex) {
-        return filter;
-      } else {
-        return _filter;
-      }
-    });
-
-    props.updateFilter({
-      ...appliedFilter,
-      filters: newFilters,
-    });
+    searchStore.updateFilter(filterIndex, filter);
 
     debounceFetch();
   };
 
   const onFilterMove = (newFilters: any) => {
-    props.updateFilter({
+    searchStore.updateFilter(0, {
       ...appliedFilter,
-      filters: newFilters,
+      filters: newFilters
     });
 
     debounceFetch();
-  }
+  };
 
   const onRemoveFilter = (filterIndex: any) => {
     const newFilters = appliedFilter.filters.filter((_filter: any, i: any) => {
       return i !== filterIndex;
     });
 
-    props.updateFilter({
-      filters: newFilters,
-    });
+    searchStore.removeFilter(filterIndex);
 
     debounceFetch();
   };
 
   const onChangeEventsOrder = (e: any, { value }: any) => {
-    props.updateFilter({
-      eventsOrder: value,
+    searchStore.edit({
+      eventsOrder: value
     });
 
     debounceFetch();
@@ -152,11 +133,4 @@ function SessionSearch(props: Props) {
   ) : null;
 }
 
-export default connect(
-  (state: any) => ({
-    saveRequestPayloads: state.getIn(['site', 'instance', 'saveRequestPayloads']),
-    appliedFilter: state.getIn(['search', 'instance']),
-    metaLoading: state.getIn(['customFields', 'fetchRequestActive', 'loading']),
-  }),
-  { edit, addFilter, fetchSessions, updateFilter, refreshFilterOptions }
-)(observer(SessionSearch));
+export default observer(SessionSearch);
diff --git a/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx b/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx
index 7d5111f40..451657b3c 100644
--- a/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx
+++ b/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx
@@ -2,21 +2,9 @@ import { CloseOutlined, EnterOutlined } from '@ant-design/icons';
 import { Tour } from 'antd';
 import { observer } from 'mobx-react-lite';
 import React, { useState } from 'react';
-import { connect } from 'react-redux';
-
 import { useStore } from 'App/mstore';
 import { assist as assistRoute, isRoute } from 'App/routes';
 import { debounce } from 'App/utils';
-import {
-  addFilterByKeyAndValue as liveAddFilterByKeyAndValue,
-  fetchFilterSearch as liveFetchFilterSearch,
-} from 'Duck/liveSearch';
-import {
-  addFilterByKeyAndValue,
-  clearSearch,
-  edit,
-  fetchFilterSearch,
-} from 'Duck/search';
 import { Icon, Input } from 'UI';
 
 import FilterModal from 'Shared/Filters/FilterModal';
@@ -26,23 +14,17 @@ import OutsideClickDetectingDiv from '../OutsideClickDetectingDiv';
 const ASSIST_ROUTE = assistRoute();
 
 interface Props {
-  fetchFilterSearch: (query: any) => void;
-  addFilterByKeyAndValue: (key: string, value: string) => void;
-  liveAddFilterByKeyAndValue: (key: string, value: string) => void;
-  liveFetchFilterSearch: any;
-  appliedFilter: any;
-  edit: typeof edit;
-  clearSearch: typeof clearSearch;
   setFocused?: (focused: boolean) => void;
 }
 
 function SessionSearchField(props: Props) {
+  const { searchStore, searchStoreLive } = useStore();
   const isLive =
     isRoute(ASSIST_ROUTE, window.location.pathname) ||
     window.location.pathname.includes('multiview');
   const debounceFetchFilterSearch = React.useCallback(
     debounce(
-      isLive ? props.liveFetchFilterSearch : props.fetchFilterSearch,
+      isLive ? searchStoreLive.fetchFilterSearch : searchStore.fetchFilterSearch,
       1000
     ),
     []
@@ -58,8 +40,8 @@ function SessionSearchField(props: Props) {
 
   const onAddFilter = (filter: any) => {
     isLive
-      ? props.liveAddFilterByKeyAndValue(filter.key, filter.value)
-      : props.addFilterByKeyAndValue(filter.key, filter.value);
+      ? searchStoreLive.addFilterByKeyAndValue(filter.key, filter.value)
+      : searchStore.addFilterByKeyAndValue(filter.key, filter.value);
   };
 
   const onFocus = () => {
@@ -102,13 +84,15 @@ function SessionSearchField(props: Props) {
   );
 }
 
-const AiSearchField = observer(
-  ({ edit, appliedFilter, clearSearch }: Props) => {
+const AiSearchField = observer(() => {
+    const { searchStore } = useStore();
+    const appliedFilter = searchStore.instance;
     const hasFilters =
-      appliedFilter && appliedFilter.filters && appliedFilter.filters.size > 0;
+      appliedFilter && appliedFilter.filters && appliedFilter.filters.length > 0;
     const { aiFiltersStore } = useStore();
     const [searchQuery, setSearchQuery] = useState('');
 
+
     const onSearchChange = ({ target: { value } }: any) => {
       setSearchQuery(value);
     };
@@ -126,13 +110,13 @@ const AiSearchField = observer(
     };
 
     const clearAll = () => {
-      clearSearch();
+      searchStore.clearSearch();
       setSearchQuery('');
     };
 
     React.useEffect(() => {
       if (aiFiltersStore.filtersSetKey !== 0) {
-        edit(aiFiltersStore.filters);
+        searchStore.edit(aiFiltersStore.filters);
       }
     }, [aiFiltersStore.filters, aiFiltersStore.filtersSetKey]);
 
@@ -186,8 +170,8 @@ function AiSessionSearchField(props: Props) {
   };
 
   const boxStyle = tab === 'ask'
-                   ? gradientBox
-                   : isFocused ? regularBoxFocused : regularBoxUnfocused;
+    ? gradientBox
+    : isFocused ? regularBoxFocused : regularBoxUnfocused;
   return (
     <div className={'bg-white rounded-full shadow-sm'}>
       <div
@@ -242,9 +226,9 @@ function AiSessionSearchField(props: Props) {
                 onClick: () => {
                   changeValue('ask');
                   closeTour();
-                },
-              },
-            },
+                }
+              }
+            }
           ]}
         />
       </div>
@@ -253,10 +237,10 @@ function AiSessionSearchField(props: Props) {
 }
 
 export const AskAiSwitchToggle = ({
-  enabled,
-  setEnabled,
-  loading,
-}: {
+                                    enabled,
+                                    setEnabled,
+                                    loading
+                                  }: {
   enabled: boolean;
   loading: boolean;
   setEnabled: () => void;
@@ -279,7 +263,7 @@ export const AskAiSwitchToggle = ({
         cursor: 'pointer',
         transition: 'all 0.2s ease-in-out',
         border: 0,
-        verticalAlign: 'middle',
+        verticalAlign: 'middle'
       }}
     >
       <div
@@ -293,7 +277,7 @@ export const AskAiSwitchToggle = ({
           transition: 'all 0.2s ease-in-out',
           background: '#fff',
           borderRadius: 100,
-          verticalAlign: 'middle',
+          verticalAlign: 'middle'
         }}
       />
       <div
@@ -304,7 +288,7 @@ export const AskAiSwitchToggle = ({
           height: '100%',
           transition: 'all 0.2s ease-in-out',
           paddingInline: !enabled ? '30px 0px' : '10px 24px',
-          width: 88,
+          width: 88
         }}
       >
         <div style={{ color: 'white', fontSize: 16 }}>Ask AI</div>
@@ -324,7 +308,7 @@ export const gradientBox = {
   display: 'flex',
   gap: '0.25rem',
   alignItems: 'center',
-  width: '100%',
+  width: '100%'
 };
 
 const regularBoxUnfocused = {
@@ -334,7 +318,7 @@ const regularBoxUnfocused = {
   display: 'flex',
   gap: '0.25rem',
   alignItems: 'center',
-  width: '100%',
+  width: '100%'
 };
 
 const regularBoxFocused = {
@@ -344,19 +328,7 @@ const regularBoxFocused = {
   display: 'flex',
   gap: '0.25rem',
   alignItems: 'center',
-  width: '100%',
-}
+  width: '100%'
+};
 
-export default connect(
-  (state: any) => ({
-    appliedFilter: state.getIn(['search', 'instance']),
-  }),
-  {
-    addFilterByKeyAndValue,
-    fetchFilterSearch,
-    liveFetchFilterSearch,
-    liveAddFilterByKeyAndValue,
-    edit,
-    clearSearch,
-  }
-)(observer(AiSessionSearchField));
+export default observer(AiSessionSearchField);
diff --git a/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx b/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx
index 0f0520295..22f7f77bc 100644
--- a/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx
+++ b/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx
@@ -1,31 +1,24 @@
 import React, { useState } from 'react';
-import { connect } from 'react-redux';
 import { Input } from 'UI';
 import FilterModal from 'Shared/Filters/FilterModal';
 import { debounce } from 'App/utils';
 import { assist as assistRoute, isRoute } from 'App/routes';
-import { addFilterByKeyAndValue, fetchFilterSearch } from 'Duck/search';
-import {
-  addFilterByKeyAndValue as liveAddFilterByKeyAndValue,
-  fetchFilterSearch as liveFetchFilterSearch,
-} from 'Duck/liveSearch';
 
 const ASSIST_ROUTE = assistRoute();
 import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 
 interface Props {
-  fetchFilterSearch: (query: any) => void;
-  addFilterByKeyAndValue: (key: string, value: string) => void;
-  liveAddFilterByKeyAndValue: (key: string, value: string) => void;
-  liveFetchFilterSearch: any;
+
 }
 
 function SessionSearchField(props: Props) {
+  const { searchStore, searchStoreLive } = useStore();
   const isLive =
     isRoute(ASSIST_ROUTE, window.location.pathname) ||
     window.location.pathname.includes('multiview');
   const debounceFetchFilterSearch = React.useCallback(
-    debounce(isLive ? props.liveFetchFilterSearch : props.fetchFilterSearch, 1000),
+    debounce(isLive ? searchStoreLive.fetchFilterSearch : searchStore.fetchFilterSearch, 1000),
     []
   );
   const [showModal, setShowModal] = useState(false);
@@ -38,8 +31,8 @@ function SessionSearchField(props: Props) {
 
   const onAddFilter = (filter: any) => {
     isLive
-      ? props.liveAddFilterByKeyAndValue(filter.key, filter.value)
-      : props.addFilterByKeyAndValue(filter.key, filter.value);
+      ? searchStoreLive.addFilterByKeyAndValue(filter.key, filter.value)
+      : searchStore.addFilterByKeyAndValue(filter.key, filter.value);
   };
 
   return (
@@ -71,9 +64,4 @@ function SessionSearchField(props: Props) {
   );
 }
 
-export default connect(null, {
-  addFilterByKeyAndValue,
-  fetchFilterSearch,
-  liveFetchFilterSearch,
-  liveAddFilterByKeyAndValue,
-})(observer(SessionSearchField));
+export default observer(SessionSearchField);
diff --git a/frontend/app/components/shared/SessionSettings/SessionSettings.tsx b/frontend/app/components/shared/SessionSettings/SessionSettings.tsx
index 787ced443..c0298e9ce 100644
--- a/frontend/app/components/shared/SessionSettings/SessionSettings.tsx
+++ b/frontend/app/components/shared/SessionSettings/SessionSettings.tsx
@@ -3,9 +3,12 @@ import ListingVisibility from './components/ListingVisibility';
 import DefaultPlaying from './components/DefaultPlaying';
 import DefaultTimezone from './components/DefaultTimezone';
 import CaptureRate from './components/CaptureRate';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 
-function SessionSettings({ projectId }: { projectId: number }) {
+function SessionSettings() {
+  const { projectsStore } = useStore();
+  const projectId = projectsStore.siteId;
   return (
     <div className='bg-white box-shadow h-screen overflow-y-auto'>
       <div className='px-6 pt-6'>
@@ -32,6 +35,4 @@ function SessionSettings({ projectId }: { projectId: number }) {
   );
 }
 
-export default connect((state: any) => ({
-  projectId: state.getIn(['site', 'siteId'])
-}))(SessionSettings);
+export default observer(SessionSettings)
diff --git a/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx b/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx
index 215a2d26b..d192be229 100644
--- a/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx
+++ b/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx
@@ -3,15 +3,12 @@ import { Conditions } from 'App/mstore/types/FeatureFlag';
 import { Icon, Input, Loader } from 'UI';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
-import { connect } from 'react-redux';
 import cn from 'classnames';
 import { Switch, Drawer, Button, Tooltip } from 'antd';
 import ConditionalRecordingSettings from 'Shared/SessionSettings/components/ConditionalRecordingSettings';
 
 type Props = {
-  isAdmin: boolean;
-  isEnterprise?: boolean;
-  projectId?: number;
+  projectId?: string;
   setShowCaptureRate: (show: boolean) => void;
   open: boolean;
   showCaptureRate: boolean;
@@ -20,8 +17,10 @@ type Props = {
 
 function CaptureRate(props: Props) {
   const [conditions, setConditions] = React.useState<Conditions[]>([]);
-  const { isAdmin, projectId, isEnterprise, isMobile } = props;
-  const { settingsStore } = useStore();
+  const { projectId, isMobile } = props;
+  const { settingsStore, userStore } = useStore();
+  const isAdmin = userStore.account.admin || userStore.account.superAdmin;
+  const isEnterprise = userStore.isEnterprise;
   const [changed, setChanged] = useState(false);
   const {
     sessionSettings: {
@@ -147,12 +146,4 @@ function CaptureRate(props: Props) {
   );
 }
 
-export default connect((state: any) => ({
-  isAdmin:
-    state.getIn(['user', 'account', 'admin']) || state.getIn(['user', 'account', 'superAdmin']),
-  isEnterprise: !document.location.href.includes('app.openreplay.com') && (
-    state.getIn(['user', 'account', 'edition']) === 'ee' ||
-    state.getIn(['user', 'account', 'edition']) === 'msaas' ||
-    state.getIn(['user', 'authDetails', 'edition']) === 'ee'
-  )
-}))(observer(CaptureRate));
+export default observer(CaptureRate);
diff --git a/frontend/app/components/shared/SessionsTabOverview/SessionsTabOverview.tsx b/frontend/app/components/shared/SessionsTabOverview/SessionsTabOverview.tsx
index bf7974b2c..983305fc4 100644
--- a/frontend/app/components/shared/SessionsTabOverview/SessionsTabOverview.tsx
+++ b/frontend/app/components/shared/SessionsTabOverview/SessionsTabOverview.tsx
@@ -1,27 +1,18 @@
 import { Input } from 'antd';
 import React from 'react';
-import { connect } from 'react-redux';
-
 import { useStore } from 'App/mstore';
 
 import LatestSessionsMessage from './components/LatestSessionsMessage';
 import NotesList from './components/Notes/NoteList';
 import SessionHeader from './components/SessionHeader';
 import SessionList from './components/SessionList';
+import { observer } from 'mobx-react-lite';
 
-function SessionsTabOverview({
-  activeTab,
-  appliedFilter,
-  members,
-}: {
-  activeTab: string;
-  members: object[];
-  sites: object[];
-  siteId: string;
-  appliedFilter: any;
-}) {
+function SessionsTabOverview() {
   const [query, setQuery] = React.useState('');
-  const { aiFiltersStore } = useStore();
+  const { aiFiltersStore, searchStore } = useStore();
+  const appliedFilter = searchStore.instance;
+  const activeTab = searchStore.activeTab.type;
 
   const handleKeyDown = (event: any) => {
     if (event.key === 'Enter') {
@@ -50,16 +41,10 @@ function SessionsTabOverview({
       {activeTab !== 'notes' ? (
         <SessionList />
       ) : (
-        <NotesList members={members} />
+        <NotesList />
       )}
     </div>
   );
 }
 
-export default connect((state: any) => ({
-  // @ts-ignore
-  activeTab: state.getIn(['search', 'activeTab', 'type']),
-  // @ts-ignore
-  members: state.getIn(['members', 'list']),
-  appliedFilter: state.getIn(['search', 'instance']),
-}))(SessionsTabOverview);
+export default observer(SessionsTabOverview);
diff --git a/frontend/app/components/shared/SessionsTabOverview/components/LatestSessionsMessage/LatestSessionsMessage.tsx b/frontend/app/components/shared/SessionsTabOverview/components/LatestSessionsMessage/LatestSessionsMessage.tsx
index 39ed264bf..4215b9344 100644
--- a/frontend/app/components/shared/SessionsTabOverview/components/LatestSessionsMessage/LatestSessionsMessage.tsx
+++ b/frontend/app/components/shared/SessionsTabOverview/components/LatestSessionsMessage/LatestSessionsMessage.tsx
@@ -1,20 +1,17 @@
 import React from 'react';
-import { connect } from 'react-redux';
-import { updateCurrentPage } from 'Duck/search';
-import { numberWithCommas } from 'App/utils'
+import { numberWithCommas } from 'App/utils';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 
-interface Props {
-  latestSessions: any;
-  updateCurrentPage: (page: number) => void;
-}
-function LatestSessionsMessage(props: Props) {
-  const { latestSessions = [] } = props;
-  const count = latestSessions.length;
+
+function LatestSessionsMessage() {
+  const { searchStore } = useStore();
+  const count = searchStore.latestList.size;
   return count > 0 ? (
     <div
       className="bg-amber-50 p-1 flex w-full border-b text-center justify-center link"
       style={{ backgroundColor: 'rgb(255 251 235)' }}
-      onClick={() => props.updateCurrentPage(1)}
+      onClick={() => searchStore.updateCurrentPage(1)}
     >
       Show {numberWithCommas(count)} New {count > 1 ? 'Sessions' : 'Session'}
     </div>
@@ -23,9 +20,4 @@ function LatestSessionsMessage(props: Props) {
   );
 }
 
-export default connect(
-  (state: any) => ({
-    latestSessions: state.getIn(['search', 'latestList']),
-  }),
-  { updateCurrentPage }
-)(LatestSessionsMessage);
+export default observer(LatestSessionsMessage);
diff --git a/frontend/app/components/shared/SessionsTabOverview/components/NoContentMessage.tsx b/frontend/app/components/shared/SessionsTabOverview/components/NoContentMessage.tsx
index c80ec6555..26b921767 100644
--- a/frontend/app/components/shared/SessionsTabOverview/components/NoContentMessage.tsx
+++ b/frontend/app/components/shared/SessionsTabOverview/components/NoContentMessage.tsx
@@ -1,20 +1,21 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 
-function NoContentMessage({ activeTab }: any) {
-    return <div>{getNoContentMessage(activeTab)}</div>;
+function NoContentMessage() {
+  const { searchStore } = useStore();
+  const activeTab = searchStore.activeTab;
+  return <div>{getNoContentMessage(activeTab)}</div>;
 }
 
-export default connect((state: any) => ({
-    activeTab: state.getIn(['search', 'activeTab']),
-}))(NoContentMessage);
+export default observer(NoContentMessage);
 
 function getNoContentMessage(activeTab: any) {
-    let str = 'No recordings found';
-    if (activeTab.type !== 'all') {
-        str += ' with ' + activeTab.name;
-        return str;
-    }
+  let str = 'No recordings found';
+  if (activeTab.type !== 'all') {
+    str += ' with ' + activeTab.name;
+    return str;
+  }
 
-    return str + '!';
+  return str + '!';
 }
diff --git a/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteList.tsx b/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteList.tsx
index 053bb3758..0cae90242 100644
--- a/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteList.tsx
+++ b/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteList.tsx
@@ -6,7 +6,7 @@ import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
-function NotesList({ members }: { members: Array<Record<string, any>> }) {
+function NotesList() {
   const { notesStore } = useStore();
 
   React.useEffect(() => {
diff --git a/frontend/app/components/shared/SessionsTabOverview/components/SessionHeader/SessionHeader.tsx b/frontend/app/components/shared/SessionsTabOverview/components/SessionHeader/SessionHeader.tsx
index 00771d47f..9bd665bc0 100644
--- a/frontend/app/components/shared/SessionsTabOverview/components/SessionHeader/SessionHeader.tsx
+++ b/frontend/app/components/shared/SessionsTabOverview/components/SessionHeader/SessionHeader.tsx
@@ -1,38 +1,26 @@
 import React, { useMemo } from 'react';
-import { applyFilter } from 'Duck/search';
 import Period from 'Types/app/period';
 import SelectDateRange from 'Shared/SelectDateRange';
 import SessionTags from '../SessionTags';
 import NoteTags from '../Notes/NoteTags';
-import { connect } from 'react-redux';
 import SessionSort from '../SessionSort';
-import { setActiveTab } from 'Duck/search';
 import { Space } from 'antd';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 
-interface Props {
-  listCount: number;
-  filter: any;
-  activeTab: string;
-  isEnterprise: boolean;
-  applyFilter: (filter: any) => void;
-  setActiveTab: (tab: any) => void;
-}
-
-function SessionHeader(props: Props) {
-  const {
-    filter: { startDate, endDate, rangeValue },
-    activeTab,
-    isEnterprise,
-    listCount
-  } = props;
+function SessionHeader() {
+  const { searchStore, userStore } = useStore();
+  const isEnterprise = userStore.isEnterprise;
+  const activeTab = searchStore.activeTab;
+  const { startDate, endDate, rangeValue } = searchStore.instance;
 
   const period = Period({ start: startDate, end: endDate, rangeName: rangeValue });
 
   const title = useMemo(() => {
-    if (activeTab === 'notes') {
+    if (activeTab.type === 'notes') {
       return 'Notes';
     }
-    if (activeTab === 'bookmark') {
+    if (activeTab.type === 'bookmark') {
       return isEnterprise ? 'Vault' : 'Bookmarks';
     }
     return 'Sessions';
@@ -40,18 +28,19 @@ function SessionHeader(props: Props) {
 
   const onDateChange = (e: any) => {
     const dateValues = e.toJSON();
-    props.applyFilter(dateValues);
+    searchStore.edit(dateValues);
+    searchStore.fetchSessions();
   };
 
   return (
-    <div className='flex items-center px-4 py-1 justify-between w-full'>
-      <h2 className='text-2xl capitalize mr-4'>{title}</h2>
-      {activeTab !== 'notes' ? (
-        <div className='flex items-center w-full justify-end'>
-          {activeTab !== 'bookmark' && (
+    <div className="flex items-center px-4 py-1 justify-between w-full">
+      <h2 className="text-2xl capitalize mr-4">{title}</h2>
+      {activeTab.type !== 'notes' ? (
+        <div className="flex items-center w-full justify-end">
+          {activeTab.type !== 'bookmark' && (
             <>
               <SessionTags />
-              <div className='mr-auto' />
+              <div className="mr-auto" />
               <Space>
                 <SelectDateRange isAnt period={period} onChange={onDateChange} right={true} />
                 <SessionSort />
@@ -61,8 +50,8 @@ function SessionHeader(props: Props) {
         </div>
       ) : null}
 
-      {activeTab === 'notes' && (
-        <div className='flex items-center justify-end w-full'>
+      {activeTab.type === 'notes' && (
+        <div className="flex items-center justify-end w-full">
           <NoteTags />
         </div>
       )}
@@ -70,12 +59,4 @@ function SessionHeader(props: Props) {
   );
 }
 
-export default connect(
-  (state: any) => ({
-    filter: state.getIn(['search', 'instance']),
-    listCount: state.getIn(['sessions', 'total']),
-    activeTab: state.getIn(['search', 'activeTab', 'type']),
-    isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee'
-  }),
-  { applyFilter, setActiveTab }
-)(SessionHeader);
+export default observer(SessionHeader);
diff --git a/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionDateRange.tsx b/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionDateRange.tsx
index cc266613a..2bdba260a 100644
--- a/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionDateRange.tsx
+++ b/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionDateRange.tsx
@@ -1,34 +1,25 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import Period from 'Types/app/period';
-import { applyFilter } from 'Duck/search';
 import SelectDateRange from 'Shared/SelectDateRange';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 
-interface Props {
-  filter: any;
-  applyFilter: (filter: any) => void;
-}
-function SessionDateRange(props: Props) {
-  const {
-    filter: { startDate, endDate, rangeValue },
-  } = props;
-  const period = Period({ start: startDate, end: endDate, rangeName: rangeValue });
-  const isCustom = period.rangeName === 'CUSTOM_RANGE'
+function SessionDateRange() {
+  const { searchStore } = useStore();
+  const { startDate, endDate, rangeValue } = searchStore.instance
+  ;
+  const period: any = Period({ start: startDate, end: endDate, rangeName: rangeValue });
+  const isCustom = period.rangeName === 'CUSTOM_RANGE';
   const onDateChange = (e: any) => {
     const dateValues = e.toJSON();
-    props.applyFilter(dateValues);
+    searchStore.applyFilter(dateValues);
   };
   return (
     <div className="flex items-center">
       <span className="mr-1">No sessions {isCustom ? 'between' : 'in the'}</span>
-      <SelectDateRange period={period} onChange={onDateChange} right={true}  useButtonStyle={true}/>
+      <SelectDateRange period={period} onChange={onDateChange} right={true} useButtonStyle={true} />
     </div>
   );
 }
 
-export default connect(
-  (state: any) => ({
-    filter: state.getIn(['search', 'instance']),
-  }),
-  { applyFilter }
-)(SessionDateRange);
+export default observer(SessionDateRange);
diff --git a/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx b/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx
index 12369b9c1..c8c3ae5bf 100644
--- a/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx
+++ b/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx
@@ -1,30 +1,15 @@
 import React, { useEffect } from 'react';
-import { connect } from 'react-redux';
 import { FilterKey } from 'Types/filter/filterType';
 import SessionItem from 'Shared/SessionItem';
-import { NoContent, Loader, Pagination, Button, Icon } from 'UI';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
+import { NoContent, Loader, Pagination, Button } from 'UI';
+import { withRouter } from 'react-router-dom';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
-import {
-  fetchSessions,
-  addFilterByKeyAndValue,
-  updateCurrentPage,
-  setScrollPosition,
-  checkForLatestSessions
-} from 'Duck/search';
 import { numberWithCommas } from 'App/utils';
-import { fetchListActive as fetchMetadata } from 'Duck/customField';
-import { toggleFavorite } from 'Duck/sessions';
 import SessionDateRange from './SessionDateRange';
 import RecordingStatus from 'Shared/SessionsTabOverview/components/RecordingStatus';
 import { sessionService } from 'App/services';
-import { updateProjectRecordingStatus } from 'Duck/site';
-
-enum NoContentType {
-  Bookmarked,
-  Vaulted,
-  ToDate,
-}
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 
 type SessionStatus = {
   status: number;
@@ -37,71 +22,41 @@ let sessionStatusTimeOut: any = null;
 
 const STATUS_FREQUENCY = 5000;
 
-interface Props extends RouteComponentProps {
-  loading: boolean;
-  list: any;
-  currentPage: number;
-  pageSize: number;
-  total: number;
-  filters: any;
-  lastPlayedSessionId: string;
-  metaList: any;
-  scrollY: number;
-  addFilterByKeyAndValue: (key: string, value: any, operator?: string) => void;
-  updateCurrentPage: (page: number) => void;
-  setScrollPosition: (scrollPosition: number) => void;
-  fetchSessions: (filters: any, force: boolean) => void;
-  fetchMetadata: () => void;
-  updateProjectRecordingStatus: (siteId: string, status: boolean) => void;
-  activeTab: any;
-  isEnterprise?: boolean;
-  checkForLatestSessions: () => void;
-  toggleFavorite: (sessionId: string) => Promise<void>;
-  sites: object[];
-  isLoggedIn: boolean;
-  siteId: string;
-}
-
-function SessionList(props: Props) {
-  const [noContentType, setNoContentType] = React.useState<NoContentType>(NoContentType.ToDate);
-  const {
-    loading,
-    list,
-    currentPage,
-    pageSize,
-    total,
-    filters,
-    lastPlayedSessionId,
-    metaList,
-    activeTab,
-    isEnterprise = false,
-    sites,
-    isLoggedIn,
-    siteId
-  } = props;
+function SessionList() {
+  const { projectsStore, sessionStore, customFieldStore, userStore } = useStore();
+  const isEnterprise = userStore.isEnterprise;
+  const isLoggedIn = userStore.isLoggedIn;
+  const list = sessionStore.list;
+  const lastPlayedSessionId = sessionStore.lastPlayedSessionId;
+  const loading = sessionStore.loadingSessions;
+  const total = sessionStore.total;
+  const onToggleFavorite = sessionStore.toggleFavorite;
+  const siteId = projectsStore.siteId;
+  const updateProjectRecordingStatus = projectsStore.updateProjectRecordingStatus;
+  const { searchStore } = useStore();
+  const { currentPage, activeTab, pageSize } = searchStore;
+  const { filters } = searchStore.instance;
   const _filterKeys = filters.map((i: any) => i.key);
   const hasUserFilter =
     _filterKeys.includes(FilterKey.USERID) || _filterKeys.includes(FilterKey.USERANONYMOUSID);
   const isBookmark = activeTab.type === 'bookmark';
   const isVault = isBookmark && isEnterprise;
-  const activeSite: any = sites.find((s: any) => s.id === siteId);
+  const activeSite = projectsStore.active;
   const hasNoRecordings = !activeSite || !activeSite.recorded;
+  const metaList = customFieldStore.list;
 
   const NO_CONTENT = React.useMemo(() => {
     if (isBookmark && !isEnterprise) {
-      setNoContentType(NoContentType.Bookmarked);
       return {
         icon: ICONS.NO_BOOKMARKS,
         message: 'No sessions bookmarked'
       };
     } else if (isVault) {
-      setNoContentType(NoContentType.Vaulted);
       return {
         icon: ICONS.NO_SESSIONS_IN_VAULT,
         message: 'No sessions found in vault'
       };
     }
-    setNoContentType(NoContentType.ToDate);
     return {
       icon: ICONS.NO_SESSIONS,
       message: <SessionDateRange />
@@ -124,10 +79,10 @@ function SessionList(props: Props) {
       return;
     }
 
-    fetchStatus();
+    void fetchStatus();
 
     sessionStatusTimeOut = setInterval(() => {
-      fetchStatus();
+      void fetchStatus();
     }, STATUS_FREQUENCY);
 
     return () => clearInterval(sessionStatusTimeOut);
@@ -139,17 +94,23 @@ function SessionList(props: Props) {
       return;
     }
 
-    if (statusData.status === 2 && activeSite) { // recording && processed
-      props.updateProjectRecordingStatus(activeSite.id, true);
-      props.fetchSessions(null, true);
+    // recording && processed
+    if (statusData.status === 2 && siteId) {
+      updateProjectRecordingStatus(siteId, true);
       clearInterval(sessionStatusTimeOut);
     }
-  }, [statusData, activeSite]);
+  }, [statusData, siteId]);
+
+  useEffect(() => {
+    if (siteId) {
+      void searchStore.fetchSessions();
+    }
+  }, [siteId])
 
   useEffect(() => {
     const id = setInterval(() => {
       if (!document.hidden) {
-        props.checkForLatestSessions();
+        searchStore.checkForLatestSessions();
       }
     }, AUTOREFRESH_INTERVAL);
     return () => clearInterval(id);
@@ -157,18 +118,17 @@ function SessionList(props: Props) {
 
   useEffect(() => {
     // handle scroll position
-    const { scrollY } = props;
+    const { scrollY } = searchStore;
     window.scrollTo(0, scrollY);
 
     if (total === 0 && !loading && !hasNoRecordings) {
       setTimeout(() => {
-        props.fetchSessions(null, true);
-      }, 300);
+        void searchStore.fetchSessions();
+      }, 100);
     }
-    // props.fetchMetadata();
 
     return () => {
-      props.setScrollPosition(window.scrollY);
+      searchStore.setScrollPosition(window.scrollY);
     };
   }, []);
 
@@ -180,7 +140,7 @@ function SessionList(props: Props) {
 
     sessionTimeOut = setTimeout(function() {
       if (!document.hidden) {
-        props.checkForLatestSessions();
+        searchStore.checkForLatestSessions();
       }
     }, 5000);
   };
@@ -194,15 +154,15 @@ function SessionList(props: Props) {
 
   const onUserClick = (userId: any) => {
     if (userId) {
-      props.addFilterByKeyAndValue(FilterKey.USERID, userId);
+      searchStore.addFilterByKeyAndValue(FilterKey.USERID, userId);
     } else {
-      props.addFilterByKeyAndValue(FilterKey.USERID, '', 'isUndefined');
+      searchStore.addFilterByKeyAndValue(FilterKey.USERID, '', 'isUndefined');
     }
   };
 
   const toggleFavorite = (sessionId: string) => {
-    props.toggleFavorite(sessionId).then(() => {
-      props.fetchSessions(null, true);
+    onToggleFavorite(sessionId).then(() => {
+      void searchStore.fetchSessions();
     });
   };
 
@@ -212,18 +172,18 @@ function SessionList(props: Props) {
         <>
           <NoContent
             title={
-              <div className='flex items-center justify-center flex-col'>
-                <span className='py-5'>
+              <div className="flex items-center justify-center flex-col">
+                <span className="py-5">
                 <AnimatedSVG name={NO_CONTENT.icon} size={60} />
                 </span>
-                <div className='mt-4' />
-                <div className='text-center relative text-lg font-medium'>
-                  {NO_CONTENT.message }
+                <div className="mt-4" />
+                <div className="text-center relative text-lg font-medium">
+                  {NO_CONTENT.message}
                 </div>
               </div>
             }
             subtext={
-              <div className='flex flex-col items-center'>
+              <div className="flex flex-col items-center">
                 {(isVault || isBookmark) && (
                   <div>
                     {isVault
@@ -232,11 +192,11 @@ function SessionList(props: Props) {
                   </div>
                 )}
                 <Button
-                  variant='text-primary'
-                  className='mt-4'
-                  icon='arrow-repeat'
+                  variant="text-primary"
+                  className="mt-4"
+                  icon="arrow-repeat"
                   iconSize={20}
-                  onClick={() => props.fetchSessions(null, true)}
+                  onClick={() => searchStore.fetchSessions(true)}
                 >
                   Refresh
                 </Button>
@@ -245,7 +205,7 @@ function SessionList(props: Props) {
             show={!loading && list.length === 0}
           >
             {list.map((session: any) => (
-              <div key={session.sessionId} className='border-b'>
+              <div key={session.sessionId} className="border-b">
                 <SessionItem
                   session={session}
                   hasUserFilter={hasUserFilter}
@@ -260,16 +220,16 @@ function SessionList(props: Props) {
           </NoContent>
 
           {total > 0 && (
-            <div className='flex items-center justify-between p-5'>
+            <div className="flex items-center justify-between p-5">
               <div>
-                Showing <span className='font-medium'>{(currentPage - 1) * pageSize + 1}</span> to{' '}
-                <span className='font-medium'>{(currentPage - 1) * pageSize + list.length}</span> of{' '}
-                <span className='font-medium'>{numberWithCommas(total)}</span> sessions.
+                Showing <span className="font-medium">{(currentPage - 1) * pageSize + 1}</span> to{' '}
+                <span className="font-medium">{(currentPage - 1) * pageSize + list.length}</span> of{' '}
+                <span className="font-medium">{numberWithCommas(total)}</span> sessions.
               </div>
               <Pagination
                 page={currentPage}
                 total={total}
-                onPageChange={(page) => props.updateCurrentPage(page)}
+                onPageChange={(page) => searchStore.updateCurrentPage(page)}
                 limit={pageSize}
                 debounceRequest={1000}
               />
@@ -282,31 +242,4 @@ function SessionList(props: Props) {
   );
 }
 
-export default connect(
-  (state: any) => ({
-    list: state.getIn(['sessions', 'list']),
-    filters: state.getIn(['search', 'instance', 'filters']),
-    lastPlayedSessionId: state.getIn(['sessions', 'lastPlayedSessionId']),
-    metaList: state.getIn(['customFields', 'list']).map((i: any) => i.key),
-    loading: state.getIn(['sessions', 'loading']),
-    currentPage: state.getIn(['search', 'currentPage']) || 1,
-    total: state.getIn(['sessions', 'total']) || 0,
-    scrollY: state.getIn(['search', 'scrollY']),
-    activeTab: state.getIn(['search', 'activeTab']),
-    pageSize: state.getIn(['search', 'pageSize']),
-    isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
-    siteId: state.getIn(['site', 'siteId']),
-    sites: state.getIn(['site', 'list']),
-    isLoggedIn: Boolean(state.getIn(['user', 'jwt'])),
-  }),
-  {
-    updateCurrentPage,
-    addFilterByKeyAndValue,
-    setScrollPosition,
-    fetchSessions,
-    fetchMetadata,
-    checkForLatestSessions,
-    toggleFavorite,
-    updateProjectRecordingStatus
-  }
-)(withRouter(SessionList));
+export default withRouter(observer(SessionList));
diff --git a/frontend/app/components/shared/SessionsTabOverview/components/SessionSort/SessionSort.tsx b/frontend/app/components/shared/SessionsTabOverview/components/SessionSort/SessionSort.tsx
index 57a258660..4984035a1 100644
--- a/frontend/app/components/shared/SessionsTabOverview/components/SessionSort/SessionSort.tsx
+++ b/frontend/app/components/shared/SessionsTabOverview/components/SessionSort/SessionSort.tsx
@@ -1,28 +1,25 @@
 import { DownOutlined } from '@ant-design/icons';
 import { Dropdown } from 'antd';
 import React from 'react';
-import { connect } from 'react-redux';
-
-import { applyFilter } from 'Duck/search';
-import { sort } from 'Duck/sessions';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 
 const sortOptionsMap = {
   'startTs-desc': 'Newest',
   'startTs-asc': 'Oldest',
   'eventsCount-asc': 'Events Ascending',
-  'eventsCount-desc': 'Events Descending',
+  'eventsCount-desc': 'Events Descending'
 };
 
 const sortOptions = Object.entries(sortOptionsMap).map(([value, label]) => ({
   // value,
   label,
-  key: value,
+  key: value
 }));
 
 interface Props {
   filter: any;
   options?: any;
-  applyFilter: (filter: any) => void;
   sort: (sort: string, sign: number) => void;
 }
 
@@ -32,14 +29,13 @@ export function SortDropdown<T>({ defaultOption, onSort, sortOptions, current }:
   sortOptions: any,
   current: string
 }) {
-
   return (
     <Dropdown
       menu={{
         items: sortOptions,
         defaultSelectedKeys: defaultOption ? [defaultOption] : undefined,
         // @ts-ignore
-        onClick: onSort,
+        onClick: onSort
       }}
     >
       <div
@@ -51,16 +47,18 @@ export function SortDropdown<T>({ defaultOption, onSort, sortOptions, current }:
         <DownOutlined />
       </div>
     </Dropdown>
-  )
+  );
 }
 
 function SessionSort(props: Props) {
-  const { sort, order } = props.filter;
+  const { searchStore, sessionStore } = useStore();
+  const onSessionSort = sessionStore.sortSessions;
+  const { sort, order } = searchStore.instance;
   const onSort = ({ key }: { key: string }) => {
     const [sort, order] = key.split('-');
     const sign = order === 'desc' ? -1 : 1;
-    props.applyFilter({ order, sort });
-    props.sort(sort, sign);
+    searchStore.applyFilter({ order, sort });
+    onSessionSort(sort, sign);
   };
 
   const defaultOption = `${sort}-${order}`;
@@ -75,9 +73,4 @@ function SessionSort(props: Props) {
   );
 }
 
-export default connect(
-  (state: any) => ({
-    filter: state.getIn(['search', 'instance']),
-  }),
-  { sort, applyFilter }
-)(SessionSort);
+export default observer(SessionSort);
diff --git a/frontend/app/components/shared/SessionsTabOverview/components/SessionTags/SessionTags.tsx b/frontend/app/components/shared/SessionsTabOverview/components/SessionTags/SessionTags.tsx
index 641f09657..4284e3135 100644
--- a/frontend/app/components/shared/SessionsTabOverview/components/SessionTags/SessionTags.tsx
+++ b/frontend/app/components/shared/SessionsTabOverview/components/SessionTags/SessionTags.tsx
@@ -2,11 +2,10 @@ import { issues_types, types } from 'Types/session/issue';
 import { Segmented } from 'antd';
 import cn from 'classnames';
 import { Angry, CircleAlert, Skull, WifiOff } from 'lucide-react';
+import { observer } from 'mobx-react-lite';
 import React, { memo } from 'react';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
 
-import { setActiveTab } from 'Duck/search';
+import { useStore } from 'App/mstore';
 import { Icon } from 'UI';
 
 interface Tag {
@@ -16,16 +15,10 @@ interface Tag {
 }
 
 interface StateProps {
-  activeTab: { type: string };
-  tags: Tag[];
-  total: number;
+
 }
 
-interface DispatchProps {
-  setActiveTab: typeof setActiveTab;
-}
-
-type Props = StateProps & DispatchProps;
+type Props = StateProps;
 
 const tagIcons = {
   [types.ALL]: undefined,
@@ -33,54 +26,63 @@ const tagIcons = {
   [types.BAD_REQUEST]: <WifiOff size={14} />,
   [types.CLICK_RAGE]: <Angry size={14} />,
   [types.CRASH]: <Skull size={14} />,
-} as Record<string, any>
+} as Record<string, any>;
 
-const SessionTags: React.FC<Props> = memo(
-  ({ activeTab, tags, total, setActiveTab }) => {
-    const disable = activeTab.type === 'all' && total === 0;
+const SessionTags: React.FC<Props> = () => {
+  const { projectsStore, sessionStore, searchStore } = useStore();
+  const total = sessionStore.total;
+  const platform = projectsStore.active?.platform || '';
+  const disable = searchStore.activeTab.type === 'all' && total === 0;
+  const activeTab = searchStore.activeTab;
+  const tags = issues_types.filter(
+    (tag) =>
+      tag.type !== 'mouse_thrashing' &&
+      (platform === 'web'
+        ? tag.type !== types.TAP_RAGE
+        : tag.type !== types.CLICK_RAGE)
+  );
 
-    const options = tags.map((tag, i) => ({
-      label: (
-        <div className={'flex items-center gap-2'}>
-          {tag.icon ? (
-            tagIcons[tag.type] ? (
-              tagIcons[tag.type]
-            ) : (
-              <Icon
-                name={tag.icon}
-                color={activeTab.type === tag.type ? 'main' : undefined}
-                size="14"
-                className={cn('group-hover:fill-teal')}
-              />
-            )
-          ) : null}
-          <div className={activeTab.type === tag.type ? 'text-main' : ''}>
-            {tag.name}
-          </div>
+  const options = tags.map((tag, i) => ({
+    label: (
+      <div className={'flex items-center gap-2'}>
+        {tag.icon ? (
+          tagIcons[tag.type] ? (
+            tagIcons[tag.type]
+          ) : (
+            <Icon
+              name={tag.icon}
+              color={activeTab.type === tag.type ? 'main' : undefined}
+              size="14"
+              className={cn('group-hover:fill-teal')}
+            />
+          )
+        ) : null}
+        <div className={activeTab.type === tag.type ? 'text-main' : ''}>
+          {tag.name}
         </div>
-      ),
-      value: tag.type,
-      disabled: disable && tag.type !== 'all',
-    }));
-
-    const onPick = (tabValue: string) => {
-      const tab = tags.find((t) => t.type === tabValue);
-      if (tab) {
-        setActiveTab(tab);
-      }
-    };
-    return (
-      <div className="flex items-center">
-        <Segmented
-          options={options}
-          value={activeTab.type}
-          onChange={onPick}
-          size={'small'}
-        />
       </div>
-    );
-  }
-);
+    ),
+    value: tag.type,
+    disabled: disable && tag.type !== 'all',
+  }));
+
+  const onPick = (tabValue: string) => {
+    const tab = tags.find((t) => t.type === tabValue);
+    if (tab) {
+      searchStore.setActiveTab(tab);
+    }
+  };
+  return (
+    <div className="flex items-center">
+      <Segmented
+        options={options}
+        value={activeTab.type}
+        onChange={onPick}
+        size={'small'}
+      />
+    </div>
+  );
+};
 
 // Separate the TagItem into its own memoized component.
 export const TagItem: React.FC<{
@@ -96,7 +98,7 @@ export const TagItem: React.FC<{
       'transition group rounded ml-2 px-2 py-1 flex items-center uppercase text-sm hover:bg-active-blue hover:text-teal',
       {
         'bg-active-blue text-teal': isActive,
-        disabled: disabled,
+        disabled: disabled
       }
     )}
     style={{ height: '36px' }}
@@ -113,27 +115,4 @@ export const TagItem: React.FC<{
   </button>
 ));
 
-const mapStateToProps = (state: any): StateProps => {
-  const platform = state.getIn(['site', 'active'])?.platform || '';
-  const activeTab = state.getIn(['search', 'activeTab']);
-  const filteredTags = issues_types.filter(
-    (tag) =>
-      tag.type !== 'mouse_thrashing' &&
-      (platform === 'web'
-        ? tag.type !== types.TAP_RAGE
-        : tag.type !== types.CLICK_RAGE)
-  );
-  const total = state.getIn(['sessions', 'total']) || 0;
-
-  return { activeTab, tags: filteredTags, total };
-};
-
-const mapDispatchToProps = (dispatch: any): DispatchProps =>
-  bindActionCreators(
-    {
-      setActiveTab,
-    },
-    dispatch
-  );
-
-export default connect(mapStateToProps, mapDispatchToProps)(SessionTags);
+export default observer(SessionTags);
diff --git a/frontend/app/components/shared/SharePopup/SharePopup.tsx b/frontend/app/components/shared/SharePopup/SharePopup.tsx
index ce7955924..3e95f92b7 100644
--- a/frontend/app/components/shared/SharePopup/SharePopup.tsx
+++ b/frontend/app/components/shared/SharePopup/SharePopup.tsx
@@ -1,17 +1,15 @@
 import { useModal } from 'Components/Modal';
 import React, { useState, useEffect } from 'react';
-import { connect } from 'react-redux';
 import { toast } from 'react-toastify';
 import { Icon, Loader } from 'UI';
 import styles from './sharePopup.module.css';
 import IntegrateSlackButton from '../IntegrateSlackButton/IntegrateSlackButton';
 import SessionCopyLink from './SessionCopyLink';
 import Select from 'Shared/Select';
-import { fetchList as fetchSlack, sendSlackMsg } from 'Duck/integrations/slack';
-import { fetchList as fetchTeams, sendMsTeamsMsg } from 'Duck/integrations/teams';
 import { Button, Segmented } from 'antd';
 import { PlayerContext } from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 
 interface Msg {
   integrationId: string;
@@ -29,7 +27,6 @@ const SharePopup = ({
 }) => {
   const { store } = React.useContext(PlayerContext);
   const { showModal, hideModal } = useModal();
-
   const openModal = () => {
     showModal(
       <ShareModal
@@ -50,35 +47,27 @@ const SharePopup = ({
 
 
 interface Props {
-  sessionId: string;
-  channels: { webhookId: string; name: string }[];
-  slackLoaded: boolean;
-  msTeamsChannels: { webhookId: string; name: string }[];
-  msTeamsLoaded: boolean;
-  tenantId: string;
-  fetchSlack: () => void;
-  fetchTeams: () => void;
-  sendSlackMsg: (msg: Msg) => any;
-  sendMsTeamsMsg: (msg: Msg) => any;
   showCopyLink?: boolean;
   hideModal: () => void;
   time: number;
 }
 
 function ShareModalComp({
-  sessionId,
-  sendSlackMsg,
-  sendMsTeamsMsg,
   showCopyLink,
-  channels,
-  slackLoaded,
-  msTeamsChannels,
-  msTeamsLoaded,
-  fetchSlack,
-  fetchTeams,
   hideModal,
   time,
 }: Props) {
+  const { integrationsStore, sessionStore, userStore } = useStore();
+  const sessionId = sessionStore.current.sessionId
+  const channels = integrationsStore.slack.list;
+  const slackLoaded = integrationsStore.slack.loaded;
+  const msTeamsChannels = integrationsStore.msteams.list;
+  const msTeamsLoaded = integrationsStore.msteams.loaded;
+  const fetchSlack = integrationsStore.slack.fetchIntegrations;
+  const fetchTeams = integrationsStore.msteams.fetchIntegrations;
+  const sendSlackMsg = integrationsStore.slack.sendMessage;
+  const sendMsTeamsMsg = integrationsStore.msteams.sendMessage;
+
   const [shareTo, setShareTo] = useState('slack');
   const [comment, setComment] = useState('');
   // @ts-ignore
@@ -104,7 +93,7 @@ function ShareModalComp({
   const editMessage = (e: React.ChangeEvent<HTMLTextAreaElement>) => setComment(e.target.value);
   const shareToSlack = () => {
     setLoadingSlack(true);
-    sendSlackMsg({
+    void sendSlackMsg({
       integrationId: channelId,
       entity: 'sessions',
       entityId: sessionId,
@@ -140,16 +129,12 @@ function ShareModalComp({
       value: webhookId,
       label: name,
     }))
-    // @ts-ignore
-    .toJS();
 
   const msTeamsOptions = msTeamsChannels
     .map(({ webhookId, name }) => ({
       value: webhookId,
       label: name,
     }))
-    // @ts-ignore
-    .toJS();
 
   const sendMsg = () => {
     if (shareTo === 'slack') {
@@ -277,20 +262,6 @@ function ShareModalComp({
   );
 }
 
-const mapStateToProps = (state: Record<string, any>) => ({
-  sessionId: state.getIn(['sessions', 'current']).sessionId,
-  channels: state.getIn(['slack', 'list']),
-  slackLoaded: state.getIn(['slack', 'loaded']),
-  msTeamsChannels: state.getIn(['teams', 'list']),
-  msTeamsLoaded: state.getIn(['teams', 'loaded']),
-  tenantId: state.getIn(['user', 'account', 'tenantId']),
-});
-
-const ShareModal = connect(mapStateToProps, {
-  fetchSlack,
-  fetchTeams,
-  sendSlackMsg,
-  sendMsTeamsMsg,
-})(ShareModalComp);
+const ShareModal = observer(ShareModalComp);
 
 export default observer(SharePopup);
diff --git a/frontend/app/components/shared/SiteDropdown/SiteDropdown.js b/frontend/app/components/shared/SiteDropdown/SiteDropdown.js
index 44ebebd57..0b3916c32 100644
--- a/frontend/app/components/shared/SiteDropdown/SiteDropdown.js
+++ b/frontend/app/components/shared/SiteDropdown/SiteDropdown.js
@@ -1,9 +1,12 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react-lite'
+import { useStore } from 'App/mstore'
 import Select from 'Shared/Select';
 
-const SiteDropdown = ({ contextName = '', sites, onChange, value }) => {
-  const options = sites.map(site => ({ value: site.id, label: site.host })).toJS();
+const SiteDropdown = ({ contextName = '', onChange, value }) => {
+  const { projectsStore } = useStore();
+  const sites = projectsStore.list;
+  const options = sites.map(site => ({ value: site.id, label: site.host }));
   return (
     <Select
       name={`${contextName}_site`}
@@ -17,6 +20,4 @@ const SiteDropdown = ({ contextName = '', sites, onChange, value }) => {
 
 SiteDropdown.displayName = 'SiteDropdown';
 
-export default connect(state => ({
-  sites: state.getIn(['site', 'list'])
-}))(SiteDropdown);
\ No newline at end of file
+export default observer(SiteDropdown);
\ No newline at end of file
diff --git a/frontend/app/components/shared/TrackerUpdateMessage/TrackerUpdateMessage.js b/frontend/app/components/shared/TrackerUpdateMessage/TrackerUpdateMessage.js
deleted file mode 100644
index b95f4ecda..000000000
--- a/frontend/app/components/shared/TrackerUpdateMessage/TrackerUpdateMessage.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { useEffect } from 'react'
-import { Icon } from 'UI'
-import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom';
-import { onboarding as onboardingRoute } from 'App/routes'
-import { withSiteId } from 'App/routes';
-import { isGreaterOrEqualVersion } from 'App/utils'
-
-const TrackerUpdateMessage= (props) => {
-  const [needUpdate, setNeedUpdate] = React.useState(false)
-  const { sites, match: { params: { siteId } } } = props;
-  const activeSite = sites.find(s => s.id == siteId);
-  
-  useEffect(() => {
-    if (!activeSite || !activeSite.trackerVersion) return;
-
-    const isLatest = isGreaterOrEqualVersion(activeSite.trackerVersion, window.env.TRACKER_VERSION);
-    if (!isLatest && activeSite.recorded) {
-      setNeedUpdate(true)
-    }
-  }, [activeSite])
-
-  return needUpdate ? (
-    <>
-      {(
-        <div>
-          <div
-            className="rounded text-sm flex items-center justify-between mb-4"
-            style={{ height: '42px', backgroundColor: 'rgba(255, 239, 239, 1)', border: 'solid thin rgba(221, 181, 181, 1)'}}
-          >
-            <div className="flex items-center w-full">
-              <div className="flex-shrink-0 w-8 flex justify-center">
-                <Icon name="info-circle" size="14" color="gray-darkest" />
-              </div>
-              <div className="ml-2color-gray-darkest mr-auto">
-                There might be a mismatch between the tracker and the backend versions. Please make sure to <a href="#" className="link" onClick={() => props.history.push(withSiteId(onboardingRoute('installing'), siteId))}>update</a> the tracker to latest version (<a href="https://www.npmjs.com/package/@openreplay/tracker" target="_blank">{window.env.TRACKER_VERSION}</a>).
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  ) : ''
-}
-
-export default connect(state => ({
-  site: state.getIn([ 'site', 'instance' ]),
-  sites: state.getIn([ 'site', 'list' ])
-}))(withRouter(TrackerUpdateMessage))
\ No newline at end of file
diff --git a/frontend/app/components/shared/TrackerUpdateMessage/index.js b/frontend/app/components/shared/TrackerUpdateMessage/index.js
deleted file mode 100644
index b9f95895d..000000000
--- a/frontend/app/components/shared/TrackerUpdateMessage/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './TrackerUpdateMessage'
\ No newline at end of file
diff --git a/frontend/app/components/shared/TrackingCodeModal/ProjectCodeSnippet/ProjectCodeSnippet.js b/frontend/app/components/shared/TrackingCodeModal/ProjectCodeSnippet/ProjectCodeSnippet.js
index 4b51fc963..925526bcf 100644
--- a/frontend/app/components/shared/TrackingCodeModal/ProjectCodeSnippet/ProjectCodeSnippet.js
+++ b/frontend/app/components/shared/TrackingCodeModal/ProjectCodeSnippet/ProjectCodeSnippet.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
-import { connect } from 'react-redux';
-import { editGDPR, saveGDPR } from 'Duck/site';
+import { observer } from 'mobx-react-lite'
+import { useStore } from 'App/mstore'
 import { Checkbox } from 'UI';
 import cn from 'classnames'
 import styles from './projectCodeSnippet.module.css'
@@ -18,21 +18,25 @@ inputModeOptions.forEach((o, i) => inputModeOptionsMap[o.value] = i)
 
 
 const ProjectCodeSnippet = props  => {
-  const { gdpr, site } = props;
+  const { projectsStore } = useStore();
+  const site = props.site;
+  const gdpr = projectsStore.instance.gdpr;
+  const saveGdpr = projectsStore.saveGDPR;
+  const editGdpr = projectsStore.editGDPR;
   const [changed, setChanged] = useState(false)
 
   const saveGDPR = () => {
     setChanged(true)
-    props.saveGDPR(site.id);
+    saveGdpr(site.id);
   }
 
   const onChangeSelect = ({ name, value }) => {
-    props.editGDPR({ [ name ]: value });
+    editGdpr({ [ name ]: value });
     saveGDPR();
   };
 
   const onChangeOption = ({ target: { name, checked }}) => {
-    props.editGDPR({ [ name ]: checked });
+    editGdpr({ [ name ]: checked });
     saveGDPR()
   }
   
@@ -94,7 +98,4 @@ const ProjectCodeSnippet = props  => {
   )
 }
 
-export default connect(state => ({
-  gdpr: state.getIn([ 'site', 'instance', 'gdpr' ]),
-  saving: state.getIn([ 'site', 'saveGDPR', 'loading' ])
-}), { editGDPR, saveGDPR })(ProjectCodeSnippet)
+export default observer(ProjectCodeSnippet)
diff --git a/frontend/app/components/shared/UpdateFunnelButton/UpdateFunnelButton.tsx b/frontend/app/components/shared/UpdateFunnelButton/UpdateFunnelButton.tsx
deleted file mode 100644
index 9f7a2eb06..000000000
--- a/frontend/app/components/shared/UpdateFunnelButton/UpdateFunnelButton.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { IconButton } from 'UI';
-import { connect } from 'react-redux';
-import { save } from 'Duck/funnels';
-
-interface Props {
-  save: typeof save;
-  loading: boolean;
-}
-function UpdateFunnelButton(props: Props) {
-  const { loading } = props;
-  return (
-    <div>
-        <IconButton
-            className="mr-2"
-            disabled={loading}
-            onClick={() => props.save()} primaryText label="UPDATE FUNNEL" icon="funnel"
-        />
-    </div>
-  )
-}
-
-export default connect(state => ({
-  loading: state.getIn(['funnels', 'saveRequest', 'loading']) ||
-    state.getIn(['funnels', 'updateRequest', 'loading']),
-}), { save })(UpdateFunnelButton);
\ No newline at end of file
diff --git a/frontend/app/components/shared/UpdateFunnelButton/index.ts b/frontend/app/components/shared/UpdateFunnelButton/index.ts
deleted file mode 100644
index 7638c11c0..000000000
--- a/frontend/app/components/shared/UpdateFunnelButton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './UpdateFunnelButton';
\ No newline at end of file
diff --git a/frontend/app/components/ui/ErrorDetails/ErrorDetails.tsx b/frontend/app/components/ui/ErrorDetails/ErrorDetails.tsx
index 2aca274ea..9cd076295 100644
--- a/frontend/app/components/ui/ErrorDetails/ErrorDetails.tsx
+++ b/frontend/app/components/ui/ErrorDetails/ErrorDetails.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import ErrorFrame from '../ErrorFrame/ErrorFrame';
-import { fetchErrorStackList } from 'Duck/sessions';
 import { Button, Icon } from 'UI';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
 
 const docLink = 'https://docs.openreplay.com/installation/upload-sourcemaps';
 
@@ -11,25 +11,20 @@ interface Props {
     sourcemapUploaded?: boolean;
     errorStack?: any;
     message?: string;
-    sessionId: string;
     error: any;
 }
 function ErrorDetails(props: Props) {
-    const { error, sessionId, message = '', errorStack = [], sourcemapUploaded = false } = props;
+    const { errorStore, sessionStore } = useStore();
+    const sessionId = sessionStore.current.sessionId;
+    const errorStack = errorStore.instanceTrace;
+    const { error, message = '', sourcemapUploaded = false } = props;
     const [showRaw, setShowRaw] = useState(false);
-    const firstFunc = errorStack.first() && errorStack.first().function;
-    
+    const firstFunc = errorStack[0] && errorStack[0].function;
 
     const openDocs = () => {
         window.open(docLink, '_blank');
     };
 
-    useEffect(() => {
-        if (sessionId) {
-            props.fetchErrorStackList(sessionId, error.errorId);
-        }
-    }, []);
-
     return (
         <div className="bg-white p-5 h-screen">
             {!sourcemapUploaded && (
@@ -76,11 +71,4 @@ function ErrorDetails(props: Props) {
 }
 
 ErrorDetails.displayName = 'ErrorDetails';
-export default connect(
-    (state: any) => ({
-        // errorStack: state.getIn(['sessions', 'errorStack']),
-        errorStack: state.getIn(['errors', 'instanceTrace']),
-        sessionId: state.getIn(['sessions', 'current']).sessionId,
-    }),
-    { fetchErrorStackList }
-)(ErrorDetails);
+export default observer(ErrorDetails);
diff --git a/frontend/app/components/ui/Link/Link.js b/frontend/app/components/ui/Link/Link.js
index 108db2562..0728ef576 100644
--- a/frontend/app/components/ui/Link/Link.js
+++ b/frontend/app/components/ui/Link/Link.js
@@ -1,20 +1,23 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react-lite'
+import { useStore } from "App/mstore";
 import cn from 'classnames';
 import { withSiteId } from 'App/routes';
 import styles from './link.module.css';
 
-const OpenReplayLink = ({ siteId, to, className="", dispatch, ...other })  => (
-  <Link 
-    { ...other } 
-    className={ cn(className, styles.link , 'px-2', 'hover:text-inherit') }
-    to={ withSiteId(to, siteId) }
-  />
-);
+const OpenReplayLink = ({ siteId, to, className="", dispatch, ...other })  => {
+  const { projectsStore } = useStore();
+  const projectId = projectsStore.siteId;
+  return (
+    <Link
+      { ...other }
+      className={ cn(className, styles.link , 'px-2', 'hover:text-inherit') }
+      to={ withSiteId(to, siteId ?? projectId) }
+    />
+  )
+};
 
 OpenReplayLink.displayName = 'OpenReplayLink';
 
-export default connect((state, props) => ({ 
-	siteId: props.siteId || state.getIn([ 'site', 'siteId' ])
-}))(OpenReplayLink);
\ No newline at end of file
+export default OpenReplayLink;
\ No newline at end of file
diff --git a/frontend/app/components/ui/NoSessionPermission/NoSessionPermission.tsx b/frontend/app/components/ui/NoSessionPermission/NoSessionPermission.tsx
index ca62e8fb6..ec0416fea 100644
--- a/frontend/app/components/ui/NoSessionPermission/NoSessionPermission.tsx
+++ b/frontend/app/components/ui/NoSessionPermission/NoSessionPermission.tsx
@@ -1,77 +1,74 @@
-import React from "react";
-import stl from "./NoSessionPermission.module.css";
-import { Icon, Button } from "UI";
-import { connect } from "react-redux";
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
+
+import { useStore } from 'App/mstore';
 import {
-    sessions as sessionsRoute,
-    assist as assistRoute,
-    withSiteId,
-} from "App/routes";
-import { withRouter, RouteComponentProps } from "react-router-dom";
+  assist as assistRoute,
+  sessions as sessionsRoute,
+  withSiteId,
+} from 'App/routes';
+import { Button, Icon } from 'UI';
+
+import stl from './NoSessionPermission.module.css';
+
 const SESSIONS_ROUTE = sessionsRoute();
 const ASSIST_ROUTE = assistRoute();
 
 interface Props extends RouteComponentProps {
-    session: any;
-    siteId: string;
-    history: any;
-    sessionPath: any;
-    isAssist: boolean;
+  history: any;
+  isLive?: boolean;
 }
 function NoSessionPermission(props: Props) {
-    const { session, history, siteId, sessionPath, isAssist } = props;
+  const { projectsStore, sessionStore } = useStore();
+  const session = sessionStore.current;
+  const sessionPath = sessionStore.sessionPath;
+  const isAssist = window.location.pathname.includes('/assist/');
+  const siteId = projectsStore.siteId!;
+  const { history } = props;
 
-    const backHandler = () => {
-        if (
-            sessionPath.pathname === history.location.pathname ||
-            sessionPath.pathname.includes("/session/") ||
-            isAssist
-        ) {
-            history.push(
-                withSiteId(isAssist ? ASSIST_ROUTE : SESSIONS_ROUTE, siteId)
-            );
-        } else {
-            history.push(
-                sessionPath
-                    ? sessionPath.pathname + sessionPath.search
-                    : withSiteId(SESSIONS_ROUTE, siteId)
-            );
-        }
-    };
+  const backHandler = () => {
+    if (
+      sessionPath.pathname === history.location.pathname ||
+      sessionPath.pathname.includes('/session/') ||
+      isAssist
+    ) {
+      history.push(
+        withSiteId(isAssist ? ASSIST_ROUTE : SESSIONS_ROUTE, siteId)
+      );
+    } else {
+      history.push(
+        sessionPath
+          ? sessionPath.pathname + sessionPath.search
+          : withSiteId(SESSIONS_ROUTE, siteId)
+      );
+    }
+  };
 
-    return (
-        <div className={stl.wrapper}>
-            <Icon name="shield-lock" size="50" className="py-16" />
-            <div className={stl.title}>Not allowed</div>
-            {session.isLive ? (
-                <span>
-                    This session is still live, and you don’t have the necessary
-                    permissions to access this feature. Please check with your
-                    admin.
-                </span>
-            ) : (
-                <span>
-                    You don’t have the necessary permissions to access this
-                    feature. Please check with your admin.
-                </span>
-            )}
-            {/* <Link to="/"> */}
-            <Button variant="primary" onClick={backHandler} className="mt-6">
-                GO BACK
-            </Button>
-            {/* </Link> */}
-        </div>
-    );
+  return (
+    <div className={stl.wrapper}>
+      <Icon name="shield-lock" size="50" className="py-16" />
+      <div className={stl.title}>Not allowed</div>
+      {session.isLive ? (
+        <span>
+          This session is still live, and you don’t have the necessary
+          permissions to access this feature. Please check with your admin.
+        </span>
+      ) : (
+        <span>
+          You don’t have the necessary permissions to access this feature.
+          Please check with your admin.
+        </span>
+      )}
+      {/* <Link to="/"> */}
+      <Button variant="primary" onClick={backHandler} className="mt-6">
+        GO BACK
+      </Button>
+      {/* </Link> */}
+    </div>
+  );
 }
 
 export default withRouter(
-    connect((state: any) => {
-        const isAssist = window.location.pathname.includes("/assist/");
-        return {
-            isAssist,
-            session: state.getIn(["sessions", "current"]),
-            siteId: state.getIn(["site", "siteId"]),
-            sessionPath: state.getIn(["sessions", "sessionPath"]),
-        };
-    })(NoSessionPermission)
+  observer(NoSessionPermission)
 );
diff --git a/frontend/app/components/ui/TimezoneDropdown/TimezoneDropdown.js b/frontend/app/components/ui/TimezoneDropdown/TimezoneDropdown.js
index ab8113692..c67b60f53 100644
--- a/frontend/app/components/ui/TimezoneDropdown/TimezoneDropdown.js
+++ b/frontend/app/components/ui/TimezoneDropdown/TimezoneDropdown.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import Select from 'Shared/Select';
-import { connect } from 'react-redux';
-import { setTimezone } from 'Duck/sessions';
+import { observer } from 'mobx-react-lite';
+import { useStore } from "App/mstore";
 
 const localMachineFormat = new Date().toString().match(/([A-Z]+[\+-][0-9]+)/)[1]
 const middlePoint = localMachineFormat.length - 2
@@ -13,7 +13,10 @@ const timezoneOptions = {
   'UTC': 'UTC'
 };
 
-function TimezoneDropdown({ local, setTimezone }) {
+function TimezoneDropdown() {
+  const { sessionStore } = useStore();
+  const local = sessionStore.timezone;
+  const setTimezone = sessionStore.setTimezone;
   const sortOptions = Object.entries(timezoneOptions)
     .map(([ value, label ]) => ({ value, label }));
 
@@ -33,6 +36,4 @@ function TimezoneDropdown({ local, setTimezone }) {
   )
 }
 
-export default connect(state => ({
-  local: state.getIn(['sessions', 'timezone']),
-}), { setTimezone })(TimezoneDropdown)
+export default observer(TimezoneDropdown)
diff --git a/frontend/app/date.ts b/frontend/app/date.ts
index 03e80f011..352b7b8f0 100644
--- a/frontend/app/date.ts
+++ b/frontend/app/date.ts
@@ -1,7 +1,7 @@
 // @flow
 
 import { DateTime, Duration } from 'luxon'; // TODO
-import { Timezone } from 'MOBX/types/sessionSettings';
+import { Timezone } from 'App/mstore/types/sessionSettings';
 
 /**
  * Formats a given duration.
diff --git a/frontend/app/duck/.eslintrc b/frontend/app/duck/.eslintrc
deleted file mode 100644
index c3aa9d050..000000000
--- a/frontend/app/duck/.eslintrc
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "rules": {
-    "complexity": 0
-  },
-  "env": {
-    "browser": true,
-    "node": true
-  }
-}
diff --git a/frontend/app/duck/alerts.js b/frontend/app/duck/alerts.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/frontend/app/duck/assignments.js b/frontend/app/duck/assignments.js
deleted file mode 100644
index 427937e05..000000000
--- a/frontend/app/duck/assignments.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import { List, Map, Set } from 'immutable';
-import Assignment from 'Types/session/assignment';
-import Activity from 'Types/session/activity';
-import withRequestState, { RequestTypes } from './requestStateCreator';
-import { createListUpdater } from './funcTools/tools';
-import { editType, initType } from './funcTools/crud/types';
-import { createInit, createEdit } from './funcTools/crud';
-
-const idKey = 'id';
-const name = 'assignment';
-const listUpdater = createListUpdater(idKey);
-
-const FETCH_PROJECTS = new RequestTypes('asignment/FETCH_PROJECTS');
-const FETCH_META = new RequestTypes('asignment/FETCH_META');
-const FETCH_ASSIGNMENTS = new RequestTypes('asignment/FETCH_ASSIGNMENTS');
-const FETCH_ASSIGNMENT = new RequestTypes('asignment/FETCH_ASSIGNMENT');
-const ADD_ACTIVITY = new RequestTypes('asignment/ADD_ACTIVITY');
-const ADD_MESSAGE = new RequestTypes('asignment/ADD_MESSAGE');
-const EDIT = editType(name);
-const INIT = initType(name);
-
-const initialState = Map({
-  list: List(),
-  instance: new Assignment(),
-  activeIssue: new Assignment(),
-  issueTypes: List(),
-  issueTypeIcons: Set(),
-  users: List(),
-  projects: List(),
-  projectsFetched: false
-});
-
-const reducer = (state = initialState, action = {}) => {
-  const users = state.get('users');
-  let issueTypes = []
-  switch (action.type) {
-    case INIT:
-      action.instance.issueType = issueTypes.length > 0 ? issueTypes[0].id : '';
-      return state.set('instance', new Assignment(action.instance));
-    case EDIT:
-        const inst = state.get('instance')
-      return state.set('instance', new Assignment({ ...inst, ...action.instance }));
-    case FETCH_PROJECTS.SUCCESS:
-      return state.set('projects', List(action.data)).set('projectsFetched', true);
-    case FETCH_ASSIGNMENTS.SUCCESS:
-      return state.set('list', List(action.data).map(as => new Assignment(as)));
-    case FETCH_ASSIGNMENT.SUCCESS:
-      return state.set('activeIssue', new Assignment({ ...action.data, users}));
-    case FETCH_META.SUCCESS:
-      issueTypes = action.data.issueTypes
-      const issueTypeIcons = {}
-      issueTypes.forEach(iss => {
-        issueTypeIcons[iss.id] = iss.iconUrl
-      })
-      return state.set('issueTypes', issueTypes)
-        .set('users', List(action.data.users))
-        .set('issueTypeIcons', issueTypeIcons)
-    case ADD_ACTIVITY.SUCCESS:
-      const instance = new Assignment(action.data);
-      return listUpdater(state, instance);
-    case ADD_MESSAGE.SUCCESS:
-      const user = users.filter(user => user.id === action.data.author).first();
-      const activity = new Activity({ type: 'message', user, ...action.data,});
-      return state.update([ 'activeIssue' ], issue => issue.activities.push(activity));
-    default:
-      return state;
-  }
-};
-
-export default withRequestState({
-  fetchProjects: FETCH_PROJECTS,
-  fetchMeta: FETCH_META,
-  fetchAssignments: FETCH_ASSIGNMENTS,
-  addActivity: ADD_ACTIVITY,
-  fetchAssignment: FETCH_ASSIGNMENT,
-  addMessage: ADD_MESSAGE
-}, reducer);
-
-export const init = createInit(name);
-export const edit = createEdit(name);
-
-export function fetchProjects() {
-  return {
-    types: FETCH_PROJECTS.toArray(),
-    call: client => client.get(`/integrations/issues/list_projects`)
-  };
-}
-
-export function fetchMeta(projectId) {
-  return {
-    types: FETCH_META.toArray(),
-    call: client => client.get(`/integrations/issues/${projectId}`)
-  }
-}
-
-export function fetchAssignments(sessionId) {
-  return {
-    types: FETCH_ASSIGNMENTS.toArray(),
-    call: client => client.get(`/sessions/${ sessionId }/assign`)
-  }
-}
-
-export function addActivity(sessionId, params) {
-  const data = { ...params, assignee: params.assignee, issueType: params.issueType }
-  return {
-    types: ADD_ACTIVITY.toArray(),
-    call: client => client.post(`/sessions/${ sessionId }/assign/projects/${params.projectId}`, data),
-  }
-}
-
-export function addMessage(sessionId, assignmentId, params) {
-  return {
-    types: ADD_MESSAGE.toArray(),
-    call: client => client.post(`/sessions/${ sessionId }/assign/${ assignmentId }/comment`, params),
-  }
-}
diff --git a/frontend/app/duck/components/index.js b/frontend/app/duck/components/index.js
deleted file mode 100644
index faef82566..000000000
--- a/frontend/app/duck/components/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { combineReducers } from 'redux-immutable';
-
-import targetDefiner from './targetDefiner';
-import player from './player';
-
-export default combineReducers({
-  targetDefiner,
-  player,
-});
diff --git a/frontend/app/duck/components/player.ts b/frontend/app/duck/components/player.ts
deleted file mode 100644
index 6be257b85..000000000
--- a/frontend/app/duck/components/player.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-import { PayloadAction, createSlice } from '@reduxjs/toolkit';
-
-interface PlayerState {
-  fullscreen: boolean;
-  bottomBlock: number;
-  hiddenHints: {
-    storage?: string;
-    stack?: string;
-  };
-  skipInterval: number;
-  timelineZoom: {
-    enabled: boolean;
-    startTs: number;
-    endTs: number;
-  };
-  zoomTab: 'overview' | 'journey' | 'issues' | 'errors';
-}
-
-const initialState: PlayerState = {
-  fullscreen: false,
-  bottomBlock: 0,
-  hiddenHints: {
-    storage: localStorage.getItem('storageHideHint') || undefined,
-    stack: localStorage.getItem('stackHideHint') || undefined,
-  },
-  skipInterval: parseInt(localStorage.getItem('CHANGE_SKIP_INTERVAL') || '10', 10),
-  timelineZoom: {
-    enabled: false,
-    startTs: 0,
-    endTs: 0,
-  },
-  zoomTab: 'overview',
-};
-
-export const playerSlice = createSlice({
-  name: 'player',
-  initialState,
-  reducers: {
-    toggleFullscreen: (state, action: PayloadAction<boolean | undefined>) => {
-      state.fullscreen = action.payload !== undefined ? action.payload : !state.fullscreen;
-    },
-    fullscreenOff: (state) => {
-      state.fullscreen = false;
-    },
-    fullscreenOn: (state) => {
-      state.fullscreen = true;
-    },
-    toggleBottomBlock: (state, action: PayloadAction<number>) => {
-      state.bottomBlock =
-        state.bottomBlock !== action.payload && action.payload !== 0 ? action.payload : 0;
-    },
-    closeBottomBlock: (state) => {
-      state.bottomBlock = 0;
-    },
-    changeSkipInterval: (state, action: PayloadAction<number>) => {
-      const skipInterval = action.payload;
-      localStorage.setItem('CHANGE_SKIP_INTERVAL', skipInterval.toString());
-      state.skipInterval = skipInterval;
-    },
-    hideHint: (state, action: PayloadAction<'storage' | 'stack'>) => {
-      const name = action.payload;
-      localStorage.setItem(`${name}HideHint`, 'true');
-      state.hiddenHints[name] = 'true';
-      state.bottomBlock = 0;
-    },
-    toggleZoom: (state, action: PayloadAction<ToggleZoomPayload>) => {
-      const { enabled, range } = action.payload;
-      state.timelineZoom = {
-        enabled,
-        startTs: Math.round(range?.[0] ?? 0),
-        endTs: Math.round(range?.[1] ?? 0),
-      };
-    },
-    setZoomTab: (state, action: PayloadAction<'overview' | 'journey' | 'issues' | 'errors'>) => {
-      state.zoomTab = action.payload;
-    },
-  },
-});
-
-interface ToggleZoomPayload {
-  enabled: boolean;
-  range?: [number, number];
-}
-
-export const {
-  toggleFullscreen,
-  toggleBottomBlock,
-  changeSkipInterval,
-  hideHint,
-  toggleZoom,
-  setZoomTab,
-  closeBottomBlock,
-  fullscreenOff,
-  fullscreenOn,
-} = playerSlice.actions;
-
-export default playerSlice.reducer;
-
-export const NONE = 0;
-export const CONSOLE = 1;
-export const NETWORK = 2;
-export const STACKEVENTS = 3;
-export const STORAGE = 4;
-export const PROFILER = 5;
-export const PERFORMANCE = 6;
-export const GRAPHQL = 7;
-export const FETCH = 8;
-export const EXCEPTIONS = 9;
-export const INSPECTOR = 11;
-export const OVERVIEW = 12;
-
-export const blocks = {
-  none: NONE,
-  console: CONSOLE,
-  network: NETWORK,
-  stackEvents: STACKEVENTS,
-  storage: STORAGE,
-  profiler: PROFILER,
-  performance: PERFORMANCE,
-  graphql: GRAPHQL,
-  fetch: FETCH,
-  exceptions: EXCEPTIONS,
-  inspector: INSPECTOR,
-  overview: OVERVIEW,
-} as const;
-
-export const blockValues = [
-  NONE,
-  CONSOLE,
-  NETWORK,
-  STACKEVENTS,
-  STORAGE,
-  PROFILER,
-  PERFORMANCE,
-  GRAPHQL,
-  FETCH,
-  EXCEPTIONS,
-  INSPECTOR,
-  OVERVIEW,
-] as const;
diff --git a/frontend/app/duck/components/targetDefiner.js b/frontend/app/duck/components/targetDefiner.js
deleted file mode 100644
index c58726aa9..000000000
--- a/frontend/app/duck/components/targetDefiner.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Map } from 'immutable';
-import Target from 'Types/target';
-import TargetCustom from 'Types/targetCustom';
-
-const EDIT = 'targetDefiner/EDIT';
-const SHOW = 'targetDefiner/SHOW';
-const HIDE = 'targetDefiner/HIDE';
-const TOGGLE_INSPECTOR_MODE = 'targetDefiner/TOGGLE_INSPECTOR_MODE';
-
-const initialState = Map({
-  isDisplayed: false,
-  target: Target(),
-  inspectorMode: false,
-});
-
-const reducer = (state = initialState, action = {}) => {
-  switch (action.type) {
-    case EDIT:
-      return state.setIn([ 'target', 'label' ], action.label);
-    case SHOW:
-      const target = action.target && !action.target.isCustom 
-        ? Target(action.target)
-        : TargetCustom(action.target);
-      return state
-        .set('isDisplayed', true)
-        .set('target', target)
-        .set('inspectorMode', false);
-    case HIDE:
-      return state
-        .set('isDisplayed', false)
-        .set('target', Target())
-    case TOGGLE_INSPECTOR_MODE:
-      const inspectorMode = action.flag !== undefined
-        ? action.flag
-        : !state.get('inspectorMode');
-      let returnState = state.set('inspectorMode', inspectorMode);
-      if (inspectorMode) {
-        returnState = returnState.set('isDisplayed', false).set('target', Target());
-      }
-      return returnState;
-  }
-  return state;
-};
-
-export default reducer;
-
-export function show(target) {
-  return {
-    type: SHOW,
-    target,
-  };
-}
-
-export function hide() {
-  return {
-    type: HIDE,
-  };
-}
-
-export function edit(label) {
-  return {
-    type: EDIT,
-    label,
-  };
-}
-
-export function toggleInspectorMode(flag) {
-  return {
-    type: TOGGLE_INSPECTOR_MODE,
-    flag,
-  };
-}
diff --git a/frontend/app/duck/customField.js b/frontend/app/duck/customField.js
deleted file mode 100644
index 5e3ca4d2f..000000000
--- a/frontend/app/duck/customField.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import { List, Map } from 'immutable';
-import CustomField from 'Types/customField';
-import { fetchListType, saveType, editType, initType, removeType } from './funcTools/crud/types';
-import { createItemInListUpdater, mergeReducers, success, array } from './funcTools/tools';
-import { createEdit, createInit } from './funcTools/crud';
-import { createRequestReducer } from './funcTools/request';
-import {
-  addElementToConditionalFiltersMap,
-  addElementToMobileConditionalFiltersMap,
-  addElementToFiltersMap,
-  addElementToFlagConditionsMap,
-  addElementToLiveFiltersMap,
-  clearMetaFilters
-} from "Types/filter/newFilter";
-import { FilterCategory } from '../types/filter/filterType';
-import { refreshFilterOptions } from './search';
-
-const name = 'integration/variable';
-const idKey = 'index';
-const itemInListUpdater = createItemInListUpdater(idKey);
-
-const FETCH_LIST = fetchListType(name);
-const FETCH_LIST_ACTIVE = fetchListType(name + '_ACTIVE');
-const SAVE = saveType(name);
-const UPDATE = saveType(name);
-const EDIT = editType(name);
-const REMOVE = removeType(name);
-const INIT = initType(name);
-const FETCH_SOURCES = fetchListType('integration/sources');
-
-const FETCH_SUCCESS = success(FETCH_LIST);
-const FETCH_LIST_ACTIVE_SUCCESS = success(FETCH_LIST_ACTIVE);
-const SAVE_SUCCESS = success(SAVE);
-const UPDATE_SUCCESS = success(UPDATE);
-const REMOVE_SUCCESS = success(REMOVE);
-const FETCH_SOURCES_SUCCESS = success(FETCH_SOURCES);
-
-// const defaultMeta = [{key: 'user_id', index: 0}, {key: 'user_anonymous_id', index: 0}];
-const initialState = Map({
-  list: List(),
-  instance: CustomField(),
-  fetchedMetadata: false,
-  sources: List(),
-  optionsReady: false,
-});
-
-const reducer = (state = initialState, action = {}) => {
-  switch (action.type) {
-    case FETCH_SUCCESS:
-      return state.set('list', List(action.data).map(CustomField))
-    case FETCH_LIST_ACTIVE_SUCCESS:
-      clearMetaFilters();
-      action.data.forEach((item) => {
-        addElementToFiltersMap(FilterCategory.METADATA, '_' + item.key);
-        addElementToLiveFiltersMap(FilterCategory.METADATA, '_' + item.key);
-        addElementToFlagConditionsMap(FilterCategory.METADATA, '_' + item.key)
-        addElementToConditionalFiltersMap(FilterCategory.METADATA, '_' + item.key)
-        addElementToMobileConditionalFiltersMap(FilterCategory.METADATA, '_' + item.key)
-      });
-      return state.set('list', List(action.data).map(CustomField)).set('fetchedMetadata', true)
-
-    case FETCH_SOURCES_SUCCESS:
-      return state.set(
-        'sources',
-        List(action.data.map(({ value, ...item }) => ({ label: value, key: value, ...item }))).map(
-          CustomField
-        )
-      );
-    case SAVE_SUCCESS:
-    case UPDATE_SUCCESS:
-      return state.update('list', itemInListUpdater(CustomField(action.data)));
-    case REMOVE_SUCCESS:
-      return state.update('list', (list) => list.filter((item) => item.index !== action.index));
-    case INIT:
-      return state.set('instance', CustomField(action.instance));
-    case EDIT:
-      return state.mergeIn(['instance'], action.instance);
-    default:
-      return state;
-  }
-};
-
-export const edit = createEdit(name);
-export const init = createInit(name);
-
-export const fetchList = (siteId) => (dispatch, getState) => {
-  return dispatch({
-    types: array(FETCH_LIST),
-    call: (client) => client.get(siteId ? `/${siteId}/metadata` : '/metadata'),
-  })
-};
-
-export const fetchListActive = (siteId) => (dispatch, getState) => {
-  return dispatch({
-    types: array(FETCH_LIST_ACTIVE),
-    call: (client) => client.get(siteId ? `/${siteId}/metadata` : '/metadata'),
-  }).then(() => {
-    dispatch(refreshFilterOptions());
-  });
-};
-
-export const fetchSources = () => {
-  return {
-    types: array(FETCH_SOURCES),
-    call: (client) => client.get('/integration/sources'),
-  };
-};
-
-export const save = (siteId, instance) => {
-  const url = instance.exists() ? `/${siteId}/metadata/${instance.index}` : `/${siteId}/metadata`;
-  return {
-    types: array(instance.exists() ? SAVE : UPDATE),
-    call: (client) => client.post(url, instance.toData()),
-  };
-};
-
-export const remove = (siteId, index) => {
-  return {
-    types: array(REMOVE),
-    call: (client) => client.delete(`/${siteId}/metadata/${index}`),
-    index,
-  };
-};
-
-export default mergeReducers(
-  reducer,
-  createRequestReducer({
-    fetchRequest: FETCH_LIST,
-    fetchRequestActive: FETCH_LIST_ACTIVE,
-    saveRequest: SAVE,
-  })
-);
diff --git a/frontend/app/duck/customMetrics.js b/frontend/app/duck/customMetrics.js
deleted file mode 100644
index c740f7a57..000000000
--- a/frontend/app/duck/customMetrics.js
+++ /dev/null
@@ -1,203 +0,0 @@
-import { List, Map } from 'immutable'; 
-import CustomMetric, { FilterSeries } from 'Types/customMetric'
-import { fetchListType, fetchType, saveType, removeType, editType, createRemove, createEdit } from './funcTools/crud';
-import { createRequestReducer, ROOT_KEY } from './funcTools/request';
-import { array, success, createListUpdater, mergeReducers } from './funcTools/tools';
-import Filter from 'Types/filter';
-import Session from 'Types/session';
-
-const name = "custom_metric";
-const idKey = "metricId";
-
-const FETCH_LIST = fetchListType(name);
-const FETCH_SESSION_LIST = fetchListType(`${name}/FETCH_SESSION_LIST`);
-const FETCH = fetchType(name);
-const SAVE = saveType(name);
-
-const ADD_SERIES = `${name}/ADD_SERIES`;
-const REMOVE_SERIES = `${name}/REMOVE_SERIES`;
-
-const ADD_SERIES_FILTER_FILTER = `${name}/ADD_SERIES_FILTER_FILTER`;
-const REMOVE_SERIES_FILTER_FILTER = `${name}/REMOVE_SERIES_FILTER_FILTER`;
-
-const EDIT_SERIES_FILTER = `${name}/EDIT_SERIES_FILTER`;
-const EDIT_SERIES_FILTER_FILTER = `${name}/EDIT_SERIES_FILTER_FILTER`;
-const UPDATE_ACTIVE_STATE = saveType(`${name}/UPDATE_ACTIVE_STATE`);
-const EDIT = editType(name);
-const INIT = `${name}/INIT`;
-const SET_ACTIVE_WIDGET = `${name}/SET_ACTIVE_WIDGET`;
-const REMOVE = removeType(name);
-const UPDATE_SERIES = `${name}/UPDATE_SERIES`;
-
-const updateItemInList = createListUpdater(idKey);
-const updateInstance = (state, instance) => state.getIn([ "instance", idKey ]) === instance[ idKey ]
-	? state.mergeIn([ "instance" ], instance)
-	: state;
-
-const defaultInstance = CustomMetric({
-  name: 'New',
-  series: List([
-    {
-      name: 'Series 1',
-      filter: new Filter({ filters: List(), eventsOrder: 'then' }),
-    },
-  ])
-})
-
-const initialState = Map({
-	list: List(),
-  sessionList: List(),
-  alertMetricId: null,
-	instance: null,
-  activeWidget: null,
-});
-
-// Metric - Series - [] - filters
-function reducer(state = initialState, action = {}) {
-	switch (action.type) {
-    // Custom Metric
-    case INIT:
-      return state.set('instance', action.instance);
-    case EDIT:
-      return state.mergeIn([ 'instance' ], action.instance);
-    case ADD_SERIES:
-      const series = new FilterSeries(action.series);
-      return state.updateIn([ 'instance', 'series' ], list => list.push(series));
-    case REMOVE_SERIES:
-      return state.updateIn([ 'instance', 'series' ], list => list.delete(action.index));
-    case UPDATE_SERIES:
-      return state.mergeIn(['instance', 'series', action.index], action.series);
-
-    // Custom Metric - Series - Filters
-    case EDIT_SERIES_FILTER:
-      return state.mergeIn(['instance', 'series', action.seriesIndex, 'filter'], action.filter);
-
-    // Custom Metric - Series - Filter - Filters
-    case EDIT_SERIES_FILTER_FILTER:
-      return state.updateIn([ 'instance', 'series', action.seriesIndex, 'filter', 'filters' ], filters => filters.set(action.filterIndex, action.filter));
-    case ADD_SERIES_FILTER_FILTER:
-      return state.updateIn([ 'instance', 'series', action.seriesIndex, 'filter', 'filters' ], filters => filters.push(action.filter));
-    case REMOVE_SERIES_FILTER_FILTER:
-      return state.updateIn([ 'instance', 'series', action.seriesIndex, 'filter', 'filters' ], filters => filters.delete(action.index));
-
-    
-    
-    case success(SAVE):
-      return updateItemInList(updateInstance(state, action.data), action.data);      
-    case success(REMOVE):
-      return state.update('list', list => list.filter(item => item.metricId !== action.id));
-		case success(FETCH):
-			return state.set("instance", CustomMetric(action.data));
-		case success(FETCH_LIST):
-			const { data } = action;
-			return state.set("list", List(data.map(CustomMetric)));
-    case success(FETCH_SESSION_LIST):
-      return state.set("sessionList", List(action.data.map(item => ({ ...item, sessions: item.sessions.map(s => new Session(s)) }))));
-    case SET_ACTIVE_WIDGET:
-      return state.set("activeWidget", action.widget).set('sessionList', List());
-	}
-	return state;
-}
-
-export default mergeReducers(
-	reducer,
-	createRequestReducer({
-		[ ROOT_KEY ]: FETCH_LIST,
-		fetch: FETCH,
-    save: SAVE,
-    fetchSessionList: FETCH_SESSION_LIST,
-	}),
-);
-
-export const edit = createEdit(name);
-export const remove = createRemove(name);
-
-export function fetch(id) {
-	return {
-		id,
-		types: array(FETCH),
-		call: c => c.get(`/errors/${id}`),
-	}
-}
-
-export const save = (instance) => (dispatch, getState) => {
-  return dispatch({
-    types: SAVE.array,
-    call: client => client.post( `/${ instance.exists() ? name + 's/' + instance[idKey] : name + 's'}`, instance.toSaveData()),
-  }).then(() => {
-    dispatch(fetchList());
-  });
-};
-
-export function fetchList() {
-  return {
-    types: array(FETCH_LIST),
-    call: client => client.get(`/${name}s`),
-  };
-}
-
-export const init = (instance = null, forceNull = false) => (dispatch, getState) => {
-  dispatch({
-    type: INIT,
-    instance: forceNull ? null : (instance || defaultInstance),
-  });
-}
-
-
-
-export const fetchSessionList = (params) => (dispatch, getState) => {
-  dispatch({
-    types: array(FETCH_SESSION_LIST),
-    call: client => client.post(`/custom_metrics/${params.metricId}/sessions`, { ...params }),
-  });
-}
-
-export const setActiveWidget = (widget) => (dispatch, getState) => {
-  return dispatch({
-    type: SET_ACTIVE_WIDGET,
-    widget,
-  });
-}
-
-export const updateActiveState = (metricId, state) => (dispatch, getState) => {
-  return dispatch({
-    types: UPDATE_ACTIVE_STATE.array,
-    call: client => client.post(`/custom_metrics/${metricId}/status`, { active: state }),
-    metricId
-  }).then(() => {
-    dispatch(fetchList());
-  });
-}
-
-export const editSeriesFilter = (seriesIndex, filter) => (dispatch, getState) => {
-  return dispatch({
-    type: EDIT_SERIES_FILTER,
-    seriesIndex,
-    filter,
-  });
-}
-
-export const addSeriesFilterFilter = (seriesIndex, filter) => (dispatch, getState) => {
-  return dispatch({
-    type: ADD_SERIES_FILTER_FILTER,
-    seriesIndex,
-    filter,
-  });
-}
-
-export const removeSeriesFilterFilter = (seriesIndex, filterIndex) => (dispatch, getState) => {
-  return dispatch({
-    type: REMOVE_SERIES_FILTER_FILTER,
-    seriesIndex,
-    index: filterIndex,
-  });
-}
-
-export const editSeriesFilterFilter = (seriesIndex, filterIndex, filter) => (dispatch, getState) => {
-  return dispatch({
-    type: EDIT_SERIES_FILTER_FILTER,
-    seriesIndex,
-    filterIndex,
-    filter,
-  });
-}
\ No newline at end of file
diff --git a/frontend/app/duck/dashboard.js b/frontend/app/duck/dashboard.js
deleted file mode 100644
index 740766309..000000000
--- a/frontend/app/duck/dashboard.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import { List, Map } from 'immutable';
-import { createRequestReducer } from './funcTools/request';
-import { mergeReducers, } from './funcTools/tools';
-import { RequestTypes } from 'Duck/requestStateCreator';
-
-const SET_SHOW_ALERTS = 'dashboard/SET_SHOW_ALERTS';
-const FETCH_PERFORMANCE_SEARCH = 'dashboard/FETCH_PERFORMANCE_SEARCH';
-const ON_BOARD = new RequestTypes('plan/ON_BOARD');
-
-const initialState = Map({
-  showAlerts: false,
-  boarding: undefined,
-  boardingCompletion: undefined,
-});
-
-const reducer = (state = initialState, action = {}) => {
-  switch (action.type) {
-    case SET_SHOW_ALERTS:
-      return state.set('showAlerts', action.state);
-    case ON_BOARD.SUCCESS:
-      const tasks = List(action.data);
-      const completion = tasks.filter(task => task.done).size * 100 / tasks.size;
-      return state.set('boarding', tasks).set('boardingCompletion', Math.trunc(completion));
-  }
-  return state;
-};
-
-export default mergeReducers(
-  reducer,
-  createRequestReducer({
-    performanceSearchRequest: FETCH_PERFORMANCE_SEARCH,
-  }),
-);
-
-
-export function setShowAlerts(state) {
-  return {
-    type: SET_SHOW_ALERTS,
-    state,
-  }
-}
diff --git a/frontend/app/duck/errors.js b/frontend/app/duck/errors.js
deleted file mode 100644
index 80d731bee..000000000
--- a/frontend/app/duck/errors.js
+++ /dev/null
@@ -1,239 +0,0 @@
-import { List, Map } from 'immutable'; 
-import { clean as cleanParams } from 'App/api_client';
-import ErrorInfo, { RESOLVED, UNRESOLVED, IGNORED, BOOKMARK } from 'Types/errorInfo';
-import { fetchListType, fetchType } from './funcTools/crud';
-import { createRequestReducer, ROOT_KEY } from './funcTools/request';
-import { array, success, failure, createListUpdater, mergeReducers } from './funcTools/tools';
-import { reduceThenFetchResource } from './search'
-
-const name = "error";
-const idKey = "errorId";
-const PER_PAGE = 10;
-const DEFAULT_SORT = 'occurrence';
-const DEFAULT_ORDER = 'desc';
-
-const EDIT_OPTIONS = `${name}/EDIT_OPTIONS`;
-const FETCH_LIST = fetchListType(name);
-const FETCH = fetchType(name);
-const FETCH_NEW_ERRORS_COUNT = fetchType('errors/FETCH_NEW_ERRORS_COUNT');
-const RESOLVE = "errors/RESOLVE";
-const UNRESOLVE = "errors/UNRESOLVE";
-const IGNORE = "errors/IGNORE";
-const MERGE = "errors/MERGE";
-const TOGGLE_FAVORITE = "errors/TOGGLE_FAVORITE";
-const FETCH_TRACE = "errors/FETCH_TRACE";
-const UPDATE_CURRENT_PAGE = "errors/UPDATE_CURRENT_PAGE";
-const UPDATE_KEY = `${name}/UPDATE_KEY`;
-
-function chartWrapper(chart = []) {
-  return chart.map(point => ({ ...point, count: Math.max(point.count, 0) }));
-}
-
-const updateItemInList = createListUpdater(idKey);
-const updateInstance = (state, instance) => state.getIn([ "instance", idKey ]) === instance[ idKey ]
-	? state.mergeIn([ "instance" ], instance)
-	: state;
-
-const initialState = Map({
-	totalCount: 0,
-	list: List(),
-	instance: ErrorInfo(),
-	instanceTrace: List(),
-	stats: Map(),
-	sourcemapUploaded: true,
-  	currentPage: 1,
-	limit: PER_PAGE,
-	options: Map({
-		sort: DEFAULT_SORT,
-		order: DEFAULT_ORDER,
-		status: UNRESOLVED,
-		query: '',
-	}),
-	// sort: DEFAULT_SORT,
-	// order: DEFAULT_ORDER,
-});
-
-
-function reducer(state = initialState, action = {}) {
-	let updError;
-	switch (action.type) {
-		case EDIT_OPTIONS:
-			return state.mergeIn(["options"], action.instance).set('currentPage', 1);
-		case success(FETCH):
-			if (state.get("list").find(e => e.get("errorId") === action.id)) {
-				return updateItemInList(state, { errorId: action.data.errorId, viewed: true })
-					.set("instance", ErrorInfo(action.data));
-			} else {
-				return state.set("instance", ErrorInfo(action.data));
-			}
-		case failure(FETCH):
-			return state.set("instance", ErrorInfo());
-		case success(FETCH_TRACE):
-			return state.set("instanceTrace", List(action.data.trace)).set('sourcemapUploaded', action.data.sourcemapUploaded);
-		case success(FETCH_LIST):
-			const { data } = action;
-			return state
-				.set("totalCount", data ? data.total : 0)
-				.set("list", List(data && data.errors).map(ErrorInfo)
-					.filter(e => e.parentErrorId == null)
-					.map(e => e.update("chart", chartWrapper)))
-		case success(RESOLVE):
-			updError = { errorId: action.id, status: RESOLVED, disabled: true };
-			return updateItemInList(updateInstance(state, updError), updError);
-		case success(UNRESOLVE):
-			updError = { errorId: action.id, status: UNRESOLVED, disabled: true };
-			return updateItemInList(updateInstance(state, updError), updError);
-		case success(IGNORE):
-			updError = { errorId: action.id, status: IGNORED, disabled: true };
-			return updateItemInList(updateInstance(state, updError), updError);
-		case success(TOGGLE_FAVORITE):
-			return state.mergeIn([ "instance" ], { favorite: !state.getIn([ "instance", "favorite" ]) })
-		case success(MERGE):
-			const ids = action.ids.slice(1);
-			return state.update("list", list => list.filter(e => !ids.includes(e.errorId)));
-		case success(FETCH_NEW_ERRORS_COUNT):
-			return state.set('stats', action.data);
-		case UPDATE_KEY:
-			return state.set(action.key, action.value);
-		case UPDATE_CURRENT_PAGE:
-			return state.set('currentPage', action.page);
-	}
-	return state;
-}
-
-export default mergeReducers(
-	reducer,
-	createRequestReducer({
-		[ ROOT_KEY ]: FETCH_LIST,
-		fetch: FETCH,
-		fetchTrace: FETCH_TRACE,
-		resolve: RESOLVE,
-		unresolve: UNRESOLVE,
-		ignore: IGNORE,
-		merge: MERGE,
-		toggleFavorite: TOGGLE_FAVORITE,
-	}),
-);
-
-
-export function fetch(id) {
-	return {
-		id,
-		types: array(FETCH),
-		call: c => c.get(`/errors/${id}`),
-	}
-}
-
-export function fetchTrace(id) {
-	return {
-		id,
-		types: array(FETCH_TRACE),
-		call: c => c.get(`/errors/${id}/sourcemaps`),
-	}
-}
-
-export const fetchList = (params = {}, clear = false) => (dispatch, getState) => {
-	params.page = getState().getIn(['errors', 'currentPage']);
-	params.limit = PER_PAGE;
-
-	const options = getState().getIn(['errors', 'options']).toJS();
-	if (options.status === BOOKMARK) {
-		options.bookmarked = true;
-		options.status = 'all';
-	}
-
-	return dispatch({
-		types: array(FETCH_LIST),
-		call: client => client.post('/errors/search', { ...params, ...options }),
-		clear,
-		params: cleanParams(params),
-	});
-};
-
-// export function fetchList(params = {}, clear = false) {
-//   return {
-//     types: array(FETCH_LIST),
-//     call: client => client.post('/errors/search', params),
-//     clear,
-//     params: cleanParams(params),
-//   };
-// }
-
-export function fetchBookmarks() {
-	return {
-		types: array(FETCH_LIST),
-		call: client => client.post('/errors/search?favorite', {})
-	}
-}
-
-export const resolve = (id) => (dispatch, getState) => {
-	const list = getState().getIn(['errors', 'list']);
-	const index = list.findIndex(e => e.get('errorId') === id);
-	const error = list.get(index);
-	if (error.get('status') === RESOLVED) return;
-
-	return dispatch({
-		types: array(RESOLVE),
-		id,
-		call: client => client.get(`/errors/${ id }/solve`),
-	})
-}
-
-export const unresolve = (id) => (dispatch, getState) => {
-	const list = getState().getIn(['errors', 'list']);
-	const index = list.findIndex(e => e.get('errorId') === id);
-	const error = list.get(index);
-	if (error.get('status') === UNRESOLVED) return;
-
-	return dispatch({
-		types: array(UNRESOLVE),
-		id,
-		call: client => client.get(`/errors/${ id }/unsolve`),
-	})
-}
-
-export const ignore = (id) => (dispatch, getState) => {
-	const list = getState().getIn(['errors', 'list']);
-	const index = list.findIndex(e => e.get('errorId') === id);
-	const error = list.get(index);
-	if (error.get('status') === IGNORED) return;
-
-	return dispatch({
-		types: array(IGNORE),
-		id,
-		call: client => client.get(`/errors/${ id }/ignore`),
-	})
-}
-
-export function merge(ids) {
-	return {
-		types: array(MERGE),
-		ids,
-		call: client => client.post(`/errors/merge`, { errors: ids }),
-	}
-}
-
-export function toggleFavorite(id) {
-	return {
-		types: array(TOGGLE_FAVORITE),
-		id,
-		call: client => client.get(`/errors/${ id }/favorite`),
-	}
-}
-
-export function fetchNewErrorsCount(params = {}) {
-	return {
-		types: array(FETCH_NEW_ERRORS_COUNT),
-		call: client => client.get(`/errors/stats`, params),
-	}
-}
-
-export const updateCurrentPage = reduceThenFetchResource((page) => ({
-    type: UPDATE_CURRENT_PAGE,
-    page,
-}));
-
-export const editOptions = reduceThenFetchResource((instance) => ({ 
-	type: EDIT_OPTIONS,
-	instance
-}));
\ No newline at end of file
diff --git a/frontend/app/duck/filters.js b/frontend/app/duck/filters.js
deleted file mode 100644
index 544fcb93c..000000000
--- a/frontend/app/duck/filters.js
+++ /dev/null
@@ -1,394 +0,0 @@
-import { List, Map, Set } from 'immutable';
-import { errors as errorsRoute, isRoute } from "App/routes";
-import Filter from 'Types/filter';
-import SavedFilter from 'Types/filter/savedFilter';
-import Event from 'Types/filter/event';
-import CustomFilter, { KEYS } from 'Types/filter/customFilter';
-import withRequestState, { RequestTypes } from './requestStateCreator';
-import { fetchList as fetchSessionList } from './sessions';
-import { fetchList as fetchErrorsList } from './errors';
-import { editType } from './funcTools/crud/types';
-
-const ERRORS_ROUTE = errorsRoute();
-
-const FETCH_LIST = new RequestTypes('filters/FETCH_LIST');
-const FETCH_FILTER_OPTIONS = new RequestTypes('filters/FETCH_FILTER_OPTIONS');
-const SET_FILTER_OPTIONS = 'filters/SET_FILTER_OPTIONS';
-const SAVE = new RequestTypes('filters/SAVE');
-const REMOVE = new RequestTypes('filters/REMOVE');
-const EDIT = editType('funnel/EDIT');
-
-const SET_SEARCH_QUERY = 'filters/SET_SEARCH_QUERY';
-const SET_ACTIVE = 'filters/SET_ACTIVE';
-const SET_ACTIVE_KEY = 'filters/SET_ACTIVE_KEY';
-const APPLY = 'filters/APPLY';
-const ADD_CUSTOM_FILTER = 'filters/ADD_CUSTOM_FILTER';
-const REMOVE_CUSTOM_FILTER = 'filters/REMOVE_CUSTOM_FILTER';
-const RESET_KEY = 'filters/RESET_KEY';
-const ADD_EVENT = 'filters/ADD_EVENT';
-const EDIT_EVENT = 'filters/EDIT_EVENT';
-const REMOVE_EVENT = 'filters/REMOVE_EVENT';
-const MOVE_EVENT = 'filters/MOVE_EVENT';
-const CLEAR_EVENTS = 'filters/CLEAR_EVENTS';
-const TOGGLE_FILTER_MODAL = 'filters/TOGGLE_FILTER_MODAL';
-const ADD_ATTRIBUTE = 'filters/ADD_ATTRIBUTE';
-const EDIT_ATTRIBUTE = 'filters/EDIT_ATTRIBUTE';
-const REMOVE_ATTRIBUTE = 'filters/REMOVE_ATTRIBUTE';
-const SET_ACTIVE_FLOW = 'filters/SET_ACTIVE_FLOW';
-const UPDATE_VALUE = 'filters/UPDATE_VALUE';
-
-const initialState = Map({
-  instance: Filter(),
-  activeFilter: null,
-  list: List(),
-  appliedFilter: Filter(),
-  activeFilterKey: null,
-  saveModalOpen: false,
-  customFilters: Map(),
-  searchQuery: '',
-  activeFlow: null,
-  filterOptions: Map({
-    USEROS: Set(),
-    USERBROWSER: Set(),
-    USERDEVICE: Set(),
-    REFERRER: Set(),
-    USERCOUNTRY: Set(),
-    PLATFORM: Set([
-      {label: 'Platform', type: KEYS.PLATFORM, key: KEYS.PLATFORM, value: 'desktop', isFilter: true},
-      {label: 'Platform', type: KEYS.PLATFORM, key: KEYS.PLATFORM, value: 'mobile', isFilter: true},
-      {label: 'Platform', type: KEYS.PLATFORM, key: KEYS.PLATFORM, value: 'tablet', isFilter: true},
-    ]),
-  }),
-});
-
-let hasFilterOptions = false;
-
-const updateList = (state, instance) => state.update('list', (list) => {
-  const index = list.findIndex(item => item.filterId === instance.filterId);
-  return (index >= 0
-    ? list.mergeIn([ index ], instance)
-    : list.push(instance)
-  );
-});
-
-const reducer = (state = initialState, action = {}) => {
-  let optionsMap = null;
-  switch (action.type) {
-    case EDIT:
-      return state.mergeIn([ 'appliedFilter' ], action.instance);
-    case FETCH_FILTER_OPTIONS.SUCCESS:
-      optionsMap = state.getIn(['filterOptions', action.key]).map(i => i.value).toJS();
-      return state.mergeIn(['filterOptions', action.key], Set(action.data.filter(i => !optionsMap.includes(i.value))));
-    case SET_FILTER_OPTIONS:
-      optionsMap = state.getIn(['filterOptions', action.key]);
-      optionsMap = optionsMap ? optionsMap.filter(i => i !== undefined).map(i => i.value).toJS() : []
-      return state.mergeIn(['filterOptions', action.key], Set(action.filterOption.filter(i => !optionsMap.includes(i.value))));
-    case FETCH_LIST.SUCCESS:
-      const flows = List(action.data).map(SavedFilter)
-      let _state = state.set('list', flows)
-      
-      if (!hasFilterOptions) {
-        const tmp = {}
-        flows.forEach(i => {
-          i.filter.filters.forEach(f => {
-            if (f.type && f.value && f.value.length > 0) {
-              tmp[f.type] = tmp[f.type] ? tmp[f.type].concat(f.value) : f.value
-            }
-          })
-        });
-
-        Object.keys(tmp).forEach(f => {
-          const options =  List(tmp[f]).map(i => ({type: i, value: i})) // TODO should get the unique items
-          _state = _state.mergeIn(['filterOptions', f], options);
-        })
-      }
-      hasFilterOptions = true
-      return _state;
-    case SAVE.SUCCESS:
-      return updateList(state, SavedFilter(action.data))
-        .set('saveModalOpen', false);
-    case REMOVE.SUCCESS:
-      return state.update(
-        'list',
-        list => list
-          .filter(filter => filter.filterId !== action.id),
-      ).set('activeFilter', null);
-    case SET_ACTIVE:
-      return state.set('activeFilter', action.filter);
-    case SET_ACTIVE_FLOW:
-      return state.set('activeFlow', action.flow);
-    case SET_ACTIVE_KEY:
-      return state.set('activeFilterKey', action.filterKey);
-    case APPLY:
-      return action.fromUrl 
-        ? state.set('appliedFilter', 
-            Filter(action.filter)
-            .set('events', state.getIn([ 'appliedFilter', 'events' ]))
-          )
-        : state.mergeIn([ 'appliedFilter' ], action.filter);
-    case ADD_CUSTOM_FILTER:
-      return state.update('customFilters', vars => vars.set(action.filter, action.value));
-    case REMOVE_CUSTOM_FILTER:
-      return state.update('customFilters', vars => vars.remove(action.filterKey));
-    case RESET_KEY:
-      if (action.key === 'rangeValue') {
-        return state
-          .removeIn([ 'appliedFilter', 'rangeValue' ])
-          .removeIn([ 'appliedFilter', 'startDate' ])
-          .removeIn([ 'appliedFilter', 'endDate' ]);
-      } else if (action.key === 'duration') {
-        return state
-          .removeIn([ 'appliedFilter', 'minDuration' ])
-          .removeIn([ 'appliedFilter', 'maxDuration' ]);
-      }
-      return state.removeIn([ 'appliedFilter', action.key ]);
-    case ADD_EVENT:
-      // const eventValue = action.event.type === TYPES.INPUT ? (action.event.target ? action.event.target.label : '') : action.event.value;
-      const eventValue = action.event.value;
-      const event = Event(action.event).set('value', eventValue);
-      if (action.index >= 0) // replacing an event
-        return state.setIn([ 'appliedFilter', 'events', action.index ], event)
-      else
-        return state.updateIn([ 'appliedFilter', 'events' ], list => action.single 
-          ? List([ event ])
-          : list.push(event));
-    case REMOVE_EVENT:
-      return state.removeIn([ 'appliedFilter', 'events', action.index ]);
-    case EDIT_EVENT:
-      return state.mergeIn([ 'appliedFilter', 'events', action.index], action.filter);
-    case TOGGLE_FILTER_MODAL:
-      return state.set('saveModalOpen', action.show);
-    case MOVE_EVENT:
-      const { fromI, toI } = action;
-      return state
-        .updateIn([ 'appliedFilter', 'events' ], list =>
-          list.remove(fromI).insert(toI, list.get(fromI)));
-    case CLEAR_EVENTS:
-      return state.setIn([ 'appliedFilter', 'events' ], List())
-        .setIn([ 'appliedFilter', 'filters' ], List())
-        .set('searchQuery', '');
-    
-    case ADD_ATTRIBUTE:
-      const filter = CustomFilter(action.filter);
-
-      if (action.index >= 0) // replacing the filter
-        return state.setIn([ 'appliedFilter', 'filters', action.index], filter);
-      else
-        return state.updateIn([ 'appliedFilter', 'filters'], filters => filters.push(filter));
-        
-    case EDIT_ATTRIBUTE:
-      return state.setIn([ 'appliedFilter', 'filters', action.index, action.key ], action.value );
-    case REMOVE_ATTRIBUTE:
-      return state.removeIn([ 'appliedFilter', 'filters', action.index ]);
-    case SET_SEARCH_QUERY:
-      return state.set('searchQuery', action.query);
-    case UPDATE_VALUE:
-      return state.setIn([ 'appliedFilter', action.filterType, action.index, 'value' ], action.value);
-    default:
-      return state;
-  }
-};
-
-export default withRequestState({
-  _: [ REMOVE ],
-  fetchListRequest: FETCH_LIST,
-  saveRequest: SAVE,
-  fetchFilterOptions: FETCH_FILTER_OPTIONS,
-}, reducer);
-
-const eventMap = ({value, searchType, key, operator, source, custom}) => ({value, type: searchType, key, operator, source, custom});
-const filterMap = ({value, type, key, operator, source, custom }) => ({value: Array.isArray(value) ? value: [value], custom, type, key, operator, source});
-const reduceThenFetchResource = actionCreator => (...args) => (dispatch, getState) => {
-  dispatch(actionCreator(...args));
-  const appliedFilters = getState().getIn([ 'filters', 'appliedFilter' ]);
-  const filter = appliedFilters
-    .update('events', list => list.map(event => event.set('value', event.value || '*')).map(eventMap))
-    .set('strict', true) // Temp backend issue
-    .toJS();
-  filter.filters = getState().getIn([ 'filters', 'appliedFilter', 'filters' ])
-    .map(filterMap).toJS();
-
-    // Hello AGILE!
-  return isRoute(ERRORS_ROUTE, window.location.pathname)
-    ? dispatch(fetchErrorsList(filter))
-    : dispatch(fetchSessionList(filter));
-}
-
-export function editAttribute(index, key, value) {
-  return {
-    type: EDIT_ATTRIBUTE,
-    index,
-    key,
-    value,
-  };
-}
-
-export function addAttribute(filter, index) {
-  return {
-    type: ADD_ATTRIBUTE,
-    filter,
-    index
-  };
-}
-
-export function removeAttribute(index) {
-  return {
-    type: REMOVE_ATTRIBUTE,
-    index,
-  };
-}
-
-export function fetchList(range) {
-  return {
-    types: FETCH_LIST.toArray(),
-    call: client => client.get(`/saved_search`),
-  };
-}
-
-export function fetchFilterOptions(filter, q) {
-  return {
-    types: FETCH_FILTER_OPTIONS.toArray(),
-    call: client => client.get('/sessions/filters/search', { q, type: filter.type }),
-    key: filter.key
-  };
-}
-
-export function setFilterOption(key, filterOption) {
-  return {
-    type: SET_FILTER_OPTIONS,
-    key,
-    filterOption
-  }
-}
-
-export function save(instance) {
-  return {
-    types: SAVE.toArray(),
-    call: client => client.post('/saved_search', instance.toData()),
-    instance,
-  };
-}
-
-export function remove(id) {
-  return {
-    types: REMOVE.toArray(),
-    call: client => client.delete(`/filters/${ id }`),
-    id,
-  };
-}
-
-export function setActive(filter) {
-  return {
-    type: SET_ACTIVE,
-    filter,
-  };
-}
-
-export function setActiveFlow(flow) {
-  return {
-    type: SET_ACTIVE_FLOW,
-    flow,
-  };
-}
-
-export function setActiveKey(filterKey) {
-  return {
-    type: SET_ACTIVE_KEY,
-    filterKey,
-  };
-}
-
-export const addCustomFilter = reduceThenFetchResource((filter, value) => ({
-  type: ADD_CUSTOM_FILTER,
-  filter,
-  value,
-}));
-
-export const removeCustomFilter = reduceThenFetchResource(filterKey => ({
-  type: REMOVE_CUSTOM_FILTER,
-  filterKey,
-}));
-
-export const applyFilter = reduceThenFetchResource((filter, fromUrl=false) => ({
-  type: APPLY,
-  filter,
-  fromUrl,
-}));
-
-export const applySavedFilter = reduceThenFetchResource((filter, fromUrl=false) => ({
-  type: APPLY,
-  filter,
-  fromUrl,
-}));
-
-export const resetFilterKey = reduceThenFetchResource(key => ({
-  type: RESET_KEY,
-  key,
-}));
-
-export const clearEvents = reduceThenFetchResource(() => ({
-  type: CLEAR_EVENTS,
-}));
-
-export function addEvent(event, single = false, index) {
-  return {
-    type: ADD_EVENT,
-    event,
-    single,
-    index
-  };
-}
-
-export function removeEvent(index) {
-  return {
-    type: REMOVE_EVENT,
-    index,
-  };
-}
-
-export function moveEvent(fromI, toI) {
-  return {
-    type: MOVE_EVENT,
-    fromI,
-    toI,
-  };
-}
-
-export function editEvent(index, filter) {
-  return {
-    type: EDIT_EVENT,
-    index,
-    filter
-  };
-}
-
-export function toggleFilterModal(show) {
-  return {
-    type: TOGGLE_FILTER_MODAL,
-    show,
-  };
-}
-
-export function setSearchQuery(query) {
-  return {
-    type: SET_SEARCH_QUERY,
-    query
-  }
-}
-
-export const edit = instance => {
-  return {
-    type: EDIT,
-    instance,
-  }
-};
-
-// filterType: 'events' or 'filters'
-export const updateValue  = (filterType, index, value) => {
-  return {
-    type: UPDATE_VALUE,
-    filterType, 
-    index,
-    value
-  }
-}
diff --git a/frontend/app/duck/funcTools/crud/actions.js b/frontend/app/duck/funcTools/crud/actions.js
deleted file mode 100644
index a6e64f4e2..000000000
--- a/frontend/app/duck/funcTools/crud/actions.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import {
-  initType,
-  editType,
-  fetchType,
-  fetchToListType,
-  fetchListType,
-  saveType,
-  removeType,
-} from './types';
-import {
-  array
-} from '../tools';
-
-const pluralise = name => `${ name }s`;
-
-export const createInit = name => instance => ({
-  type: initType(name),
-  instance,
-});
-
-export const createFetch = (name, endpoint = id => `/${ pluralise(name) }/${ id }` ) => {
-  const fetchTypeArray = array(fetchType(name));
-  const fetchToListTypeArray = array(fetchToListType(name));
-  return (id, options = { thenInit: true }) => (dispatch, getState) =>  {
-    const itemInList = getState().getIn([ name, 'list' ]).find(item => item[ idKey ] === id);
-    if (!itemInList || !itemInList.isComplete()) { // name of func?
-      return dispatch({
-        types: options.thenInit ? fetchTypeArray : fetchToListTypeArray,
-        call: client => client.get(endpoint(id)),
-      });
-    }
-    if (options.thenInit) dispatch(createInit(name)(itemInList));
-    return Promise.resolve();
-  };
-};
-
-export const createFetchList = (name, endpoint = `/${ pluralise(name) }`) => {
-  const types = array(fetchListType(name));
-  return params => ({
-    types,
-    call: client => client.get(endpoint, params),
-  });
-};
-
-export const createEdit = (name) => {
-  const type = editType(name);
-  return instance => ({
-    type,
-    instance,
-  });
-};
-
-export const createSave = (name, endpoint = `/${ pluralise(name) }`) => {
-  const types = array(saveType(name));
-  return instance => ({
-    types,
-    call: client => client.put(endpoint, instance.toData()),
-  });
-};
-
-export const createUpdate = (name, endpoint = id => `/${ pluralise(name) }/${id}`) => {
-  const types = array(saveType(name));
-  return instance => ({
-    types,
-    call: client => client.put(endpoint(instance.id), instance.toData()),
-    id: instance.id,
-  });
-};
-
-export const createRemove = (name, endpoint = id => `/${ pluralise(name) }/${ id }`) => {
-  const types = array(removeType(name));
-  return id => ({
-    types,
-    call: client => client.delete(endpoint(id)),
-    id,
-  });
-};
\ No newline at end of file
diff --git a/frontend/app/duck/funcTools/crud/index.js b/frontend/app/duck/funcTools/crud/index.js
deleted file mode 100644
index 3e9920a71..000000000
--- a/frontend/app/duck/funcTools/crud/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './actions';
-export * from './reducer';
-export * from './types';
\ No newline at end of file
diff --git a/frontend/app/duck/funcTools/crud/reducer.js b/frontend/app/duck/funcTools/crud/reducer.js
deleted file mode 100644
index 44dc3781c..000000000
--- a/frontend/app/duck/funcTools/crud/reducer.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Map, List } from 'immutable';
-import { 
-  initType,  
-  fetchType, 
-  fetchListType, 
-  fetchToListType, 
-  saveType, 
-  editType, 
-  removeType,
-} from './types';
-import {
-  success,
-  createItemInListUpdater,
-} from '../tools';
-
-
-export const getCRUDRequestTypes = name => ({
-  _: fetchListType(name),
-  fetchList: fetchListType(name),
-  fetchToList: fetchToListType(name),
-  save: saveType(name),
-  remove: removeType(name),
-  fetch: fetchType(name),
-});
-
-export const getCRUDInitialState = fromJS =>  Map({
-  list: List(),
-  instance: fromJS(),
-});
-export const createCRUDReducer = (name, fromJS = r => r, idKey = `${ name }Id`) => {
-  const itemInListUpdater = createItemInListUpdater(idKey);
-  const initialState = getCRUDInitialState(fromJS);
-  const FETCH_SUCCESS = success(fetchType(name));
-  const FETCH_LIST_SUCCESS = success(fetchListType(name));
-  const FETCH_TO_LIST_SUCCESS = success(fetchToListType(name));
-  const INIT = initType(name);
-  const SAVE_SUCCESS = success(saveType(name));
-  const EDIT = editType(name);
-  const REMOVE_SUCCESS = success(removeType(name));
-  return (state = initialState, action = {}) => {
-    switch (action.type) {
-      case FETCH_LIST_SUCCESS:
-        // TODO: use OreredMap by id & merge;
-        return state.set('list', List(action.data).map(fromJS));
-      case FETCH_TO_LIST_SUCCESS:
-        return updateList(state, fromJS(action.data));
-      case INIT:
-        return state.set('instance', fromJS(action.instance));
-      case SAVE_SUCCESS:
-      case FETCH_SUCCESS: {
-        const instance = fromJS(action.data);
-        return state
-          .update('list', itemInListUpdater(instance))
-          .set('instance', instance);
-      }
-      case EDIT:
-        return state.mergeIn([ 'instance' ], action.instance);
-      case REMOVE_SUCCESS:
-        return state
-          .update('list', list => list.filter(item => item[ idKey ] !== action.id))
-          .updateIn([ 'instance', idKey ], id => (id === action.id ? '' : id));
-      default:
-        return state;
-    }
-  };
-}
diff --git a/frontend/app/duck/funcTools/crud/types.js b/frontend/app/duck/funcTools/crud/types.js
deleted file mode 100644
index 98fa57596..000000000
--- a/frontend/app/duck/funcTools/crud/types.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { RequestType } from '../request';
-
-export const initType = name => `${ name }/INIT`;
-export const editType = name => `${ name }/EDIT`;
-export const fetchType = name => new RequestType(`${ name }/FETCH`);
-export const fetchToListType = name => new RequestType(`${ name }/FETCH_TO_LIST`);
-export const fetchListType = name => new RequestType(`${ name }/FETCH_LIST`);
-export const saveType = name => new RequestType(`${ name }/SAVE`);
-export const removeType = name => new RequestType(`${ name }/REMOVE`);
\ No newline at end of file
diff --git a/frontend/app/duck/funcTools/index.js b/frontend/app/duck/funcTools/index.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/frontend/app/duck/funcTools/list/actions.js b/frontend/app/duck/funcTools/list/actions.js
deleted file mode 100644
index eb6c88a8b..000000000
--- a/frontend/app/duck/funcTools/list/actions.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import {
-  editInListType,
-} from './types';
-
-export const createEditInList = (name) => {
-  const type = editInListType(name);
-  return item => ({
-    type,
-    item,
-  });
-};
-
-export { createFetchList } from '../crud';
\ No newline at end of file
diff --git a/frontend/app/duck/funcTools/list/index.js b/frontend/app/duck/funcTools/list/index.js
deleted file mode 100644
index 3e9920a71..000000000
--- a/frontend/app/duck/funcTools/list/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './actions';
-export * from './reducer';
-export * from './types';
\ No newline at end of file
diff --git a/frontend/app/duck/funcTools/list/reducer.js b/frontend/app/duck/funcTools/list/reducer.js
deleted file mode 100644
index c63f75721..000000000
--- a/frontend/app/duck/funcTools/list/reducer.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Map, List } from 'immutable';
-import {
-  fetchListType,
-  editInListType,
-} from './types';
-import { success } from '../tools';
-
-
-const listInitialState = Map({
-	list: List(),
-});
-
-export const getListInitialState = () => listInitialState;
-
-export const createListReducer = (name, fromJS = r => r, idKey = `${ name }Id`) => {
-  const FETCH_LIST_SUCCESS = success(fetchListType(name));
-  const EDIT_IN_LIST = editInListType(name);
-  return (state = listInitialState, action = {}) => {
-    switch (action.type) {
-      case FETCH_LIST_SUCCESS:
-        return state.set('list', List(action.data).map(fromJS));
-      case EDIT_IN_LIST:
-      	const itemIndex = state.get('list').findIndex(item => item[ idKey ] === action.item[ idKey ])
-      	return state.mergeIn([ 'list', itemIndex ], action.item);
-      default:
-        return state;
-    }
-  };
-}
diff --git a/frontend/app/duck/funcTools/list/types.js b/frontend/app/duck/funcTools/list/types.js
deleted file mode 100644
index 02e72f7e8..000000000
--- a/frontend/app/duck/funcTools/list/types.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export const editInListType = name => `${ name }/EDIT_IN_LIST`;
-export const removeFromListType = name => `${ name }/REMOVE_FROM_LIST`;
-
-export { fetchListType } from '../crud';
\ No newline at end of file
diff --git a/frontend/app/duck/funcTools/request/RequestType.js b/frontend/app/duck/funcTools/request/RequestType.js
deleted file mode 100644
index 68048b5ef..000000000
--- a/frontend/app/duck/funcTools/request/RequestType.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export default class RequestType extends String {
-	get request() {
-		return `${ this }_REQUEST`;
-	}
-	get success() {
-		return `${ this }_SUCCESS`;
-	}
-	get failure() {
-		return `${ this }_FAILURE`;
-	}
-	get array() {
-		return [ this.request, this.success, this.failure ];
-	}
-}
\ No newline at end of file
diff --git a/frontend/app/duck/funcTools/request/index.js b/frontend/app/duck/funcTools/request/index.js
deleted file mode 100644
index 858c33f8e..000000000
--- a/frontend/app/duck/funcTools/request/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './reducer';
-export * from './types';
\ No newline at end of file
diff --git a/frontend/app/duck/funcTools/request/reducer.js b/frontend/app/duck/funcTools/request/reducer.js
deleted file mode 100644
index 4840d4b3f..000000000
--- a/frontend/app/duck/funcTools/request/reducer.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import { List, Map } from 'immutable';
-import { RequestType } from './types';
-import { request, success, failure } from '../tools'; //
-
-export const ROOT_KEY = '_';
-const defaultReducer = (state = Map()) => state;
-
-
-const simpleRequestInitialState = Map({
-  loading: false,
-  errors: null,
-});
-
-const getKeys = types => Object.keys(types).filter(key => key !== ROOT_KEY);
-
-export function getRequestInitialState(types) {
-  if (typeof types === 'string' || Array.isArray(types)) {
-    return simpleRequestInitialState;
-  }
-  let initialState = Map();
-  if (types[ ROOT_KEY ]) {
-    initialState = getRequestInitialState(types[ ROOT_KEY ]);
-  }
-  return getKeys(types).reduce(
-    (accumState, key) => accumState.set(key, getRequestInitialState(types[ key ])), 
-    initialState,
-  );
-}
-
-function createSimpleRequestReducer(types, reducer) {
-  const typesArray = Array.isArray(types) ? types : [ types ];
-  const requestEvents = typesArray.map(t => t.request || request(t));  // back compat.
-  const successEvents = typesArray.map(t => t.success || success(t));
-  const failureEvents = typesArray.map(t => t.failure || failure(t));
-
-  let loadingCounter = 0;
-
-  return (state, action = {}) => {
-    if (state === undefined) { 
-      if (typeof reducer === "function") { // flow?
-        state = reducer(state, action).merge(simpleRequestInitialState);
-      } else {
-        state = simpleRequestInitialState;
-      }
-    }
-    if (requestEvents.includes(action.type)) {
-      loadingCounter += 1;
-      return state.set('loading', loadingCounter > 0).set('errors', null);
-    }
-    if (successEvents.includes(action.type)) {
-      loadingCounter -= 1;
-      return state.set('loading', loadingCounter > 0).set('errors', null);
-    }
-    if (failureEvents.includes(action.type)) {
-      loadingCounter -= 1;
-      return state.set('loading', loadingCounter > 0).set('errors', List(action.errors));
-    }
-    return state;
-  };
-};
-
-/**
- * @types: RequestTypes - array or single
- *           or object like {'state1': RequestTypes, 'state2': [RequestTypes] ... }
- * */
-export function createRequestReducer(types, reducer = defaultReducer) {
-  if (typeof types === 'string' || types instanceof RequestType || Array.isArray(types)) {
-    return createSimpleRequestReducer(types);
-  }
-
-  const keys = getKeys(types);
-  const reducers = {};
-  keys.map((key) => { reducers[ key ] = createRequestReducer(types[ key ]); });
-
-  let rootReducer = typeof reducer === 'function' ? reducer : defaultReducer;
-  // TODO: remove  ROOT_KEY logic
-  if (types[ ROOT_KEY ]) {
-    rootReducer = createRequestReducer(types[ ROOT_KEY ], rootReducer);
-  }
-  return (state, action = {}) => {
-    state = rootReducer(state, action);
-    keys.map((key) => {
-      state = state.update(key, subState => reducers[ key ](subState, action));
-    });
-    return state;
-  };
-};
-
-
diff --git a/frontend/app/duck/funcTools/request/types.js b/frontend/app/duck/funcTools/request/types.js
deleted file mode 100644
index 3976af497..000000000
--- a/frontend/app/duck/funcTools/request/types.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as RequestType } from './RequestType';
\ No newline at end of file
diff --git a/frontend/app/duck/funcTools/tools.js b/frontend/app/duck/funcTools/tools.js
deleted file mode 100644
index 139c824ac..000000000
--- a/frontend/app/duck/funcTools/tools.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Map } from 'immutable';
-
-export function mergeReducers(...reducers) {
-  const initialState = reducers
-    .reduce((accumState, reducer) => accumState.merge(reducer()), Map());
-	return (state = initialState, action) =>
-    reducers.reduce((accumState, reducer) => reducer(accumState, action), state);
-}
-
-export function createListUpdater(idKey, listName = 'list') {
-  return (state, instance) => state.update(listName, (list) => {
-    const index = list.findIndex(item => item[ idKey ] === instance[ idKey ]);
-    return (index >= 0
-      ? list.mergeIn([ index ], instance)
-      : list.push(instance)
-    );
-  });
-}
-
-export function createItemInListUpdater(idKey = 'id', shouldAdd = true) { 
-	return instance => 
-		list => {
-	    const index = list.findIndex(item => item[ idKey ] === instance[ idKey ]);
-	    return index >= 0
-	      ? list.mergeIn([ index ], instance)
-	      : (shouldAdd ? list.push(instance) : list);
-	  }
-}
-
-export const request = type => `${ type }_REQUEST`;
-export const success = type => `${ type }_SUCCESS`;
-export const failure = type => `${ type }_FAILURE`;
-export const array = type => [ request(type), success(type), failure(type) ];
diff --git a/frontend/app/duck/funcTools/types.js b/frontend/app/duck/funcTools/types.js
deleted file mode 100644
index 4897e4dfc..000000000
--- a/frontend/app/duck/funcTools/types.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './crud/types';
-export * from './list/types';
-export * from './request/types';
diff --git a/frontend/app/duck/funnelFilters.js b/frontend/app/duck/funnelFilters.js
deleted file mode 100644
index c9f40846a..000000000
--- a/frontend/app/duck/funnelFilters.js
+++ /dev/null
@@ -1,375 +0,0 @@
-import { List, Map, Set } from 'immutable';
-import { errors as errorsRoute } from "App/routes";
-import Filter from 'Types/filter';
-import SavedFilter from 'Types/filter/savedFilter';
-import Event from 'Types/filter/event';
-import CustomFilter from 'Types/filter/customFilter';
-import withRequestState, { RequestTypes } from './requestStateCreator';
-import { fetch as fetchFunnel, fetchInsights, fetchIssuesFiltered, fetchSessionsFiltered }  from './funnels';
-
-const ERRORS_ROUTE = errorsRoute();
-
-const FETCH_LIST = new RequestTypes('funnelFilters/FETCH_LIST');
-const FETCH_FILTER_OPTIONS = new RequestTypes('funnelFilters/FETCH_FILTER_OPTIONS');
-const SET_FILTER_OPTIONS = 'funnelFilters/SET_FILTER_OPTIONS';
-const SAVE = new RequestTypes('funnelFilters/SAVE');
-const REMOVE = new RequestTypes('funnelFilters/REMOVE');
-
-const RESET = 'funnelFilters/RESET';
-const SET_SEARCH_QUERY = 'funnelFilters/SET_SEARCH_QUERY';
-const SET_ACTIVE = 'funnelFilters/SET_ACTIVE';
-const SET_ACTIVE_KEY = 'funnelFilters/SET_ACTIVE_KEY';
-const APPLY = 'funnelFilters/APPLY';
-const ADD_CUSTOM_FILTER = 'funnelFilters/ADD_CUSTOM_FILTER';
-const REMOVE_CUSTOM_FILTER = 'funnelFilters/REMOVE_CUSTOM_FILTER';
-const RESET_KEY = 'funnelFilters/RESET_KEY';
-const ADD_EVENT = 'funnelFilters/ADD_EVENT';
-const EDIT_EVENT = 'funnelFilters/EDIT_EVENT';
-const REMOVE_EVENT = 'funnelFilters/REMOVE_EVENT';
-const MOVE_EVENT = 'funnelFilters/MOVE_EVENT';
-const CLEAR_EVENTS = 'funnelFilters/CLEAR_EVENTS';
-const TOGGLE_FILTER_MODAL = 'funnelFilters/TOGGLE_FILTER_MODAL';
-const ADD_ATTRIBUTE = 'funnelFilters/ADD_ATTRIBUTE';
-const EDIT_ATTRIBUTE = 'funnelFilters/EDIT_ATTRIBUTE';
-const REMOVE_ATTRIBUTE = 'funnelFilters/REMOVE_ATTRIBUTE';
-const SET_ACTIVE_FLOW = 'funnelFilters/SET_ACTIVE_FLOW';
-
-const SET_INITIAL_FILTER = 'funnelFilters/SET_INITIAL_FILTER';
-
-const initialState = Map({
-  activeFilter: null,
-  list: List(),
-  appliedFilter: Filter(),
-  activeFilterKey: null,
-  saveModalOpen: false,
-  customFilters: Map(),
-  searchQuery: '',
-  activeFlow: null,
-  filterOptions: Map({
-    USEROS: Set(),
-    USERBROWSER: Set(),
-    USERDEVICE: Set(),
-    REFERRER: Set(),
-    USERCOUNTRY: Set(),
-  }),
-});
-
-let hasFilterOptions = false;
-
-const updateList = (state, instance) => state.update('list', (list) => {
-  const index = list.findIndex(item => item.filterId === instance.filterId);
-  return (index >= 0
-    ? list.mergeIn([ index ], instance)
-    : list.push(instance)
-  );
-});
-
-const reducer = (state = initialState, action = {}) => {
-  let optionsMap = null;
-  switch (action.type) {
-    case FETCH_FILTER_OPTIONS.SUCCESS:
-      // return state.mergeIn(['filterOptions', action.key], fromJS(action.data).map(item => ({text: item, value: item})));
-      optionsMap = state.getIn(['filterOptions', action.key]).map(i => i.value).toJS();
-      return state.mergeIn(['filterOptions', action.key], Set(action.data.filter(i => !optionsMap.includes(i.value))));
-    case SET_FILTER_OPTIONS:
-      // optionsMap = state.getIn(['filterOptions', action.key]);
-      // optionsMap = optionsMap ? optionsMap.map(i => i.value).toJS() : []
-      // return state.mergeIn(['filterOptions', action.key], Set(action.filterOption.filter(i => !optionsMap.includes(i.value))));    
-      const tmp = {}
-      let _state = state;
-      action.filters.forEach(f => {
-        if (f.type && f.value && f.value.length > 0) {
-          tmp[f.type] = tmp[f.type] ? tmp[f.type].concat(f.value) : f.value
-        }
-      })
-      Object.keys(tmp).forEach(f => {
-        const options =  List(tmp[f]).map(i => ({type: i, value: i})) // TODO should get the unique items
-        _state = _state.mergeIn(['filterOptions', f], options);
-      })
-
-      return _state;
-    case FETCH_LIST.SUCCESS:
-      return state;
-    case SAVE.SUCCESS:
-      return updateList(state, SavedFilter(action.data))
-        .set('saveModalOpen', false);
-    case REMOVE.SUCCESS:
-      return state.update(
-        'list',
-        list => list
-          .filter(filter => filter.filterId !== action.id),
-      ).set('activeFilter', null);
-    case SET_ACTIVE:
-      return state.set('activeFilter', action.filter);
-    case SET_ACTIVE_FLOW:
-      return state.set('activeFlow', action.flow);
-    case SET_ACTIVE_KEY:
-      return state.set('activeFilterKey', action.filterKey);
-    case APPLY:      
-      return action.fromUrl 
-        ? state.set('appliedFilter', 
-            Filter(action.filter)
-            // .set('events', state.getIn([ 'appliedFilter', 'events' ]))
-          )
-          : state.mergeIn(['instance', 'filter'], action.filter);
-    case ADD_CUSTOM_FILTER:
-      return state.update('customFilters', vars => vars.set(action.filter, action.value));
-    case REMOVE_CUSTOM_FILTER:
-      return state.update('customFilters', vars => vars.remove(action.filterKey));
-    case RESET_KEY:
-      if (action.key === 'rangeValue') {
-        return state
-          .removeIn([ 'appliedFilter', 'rangeValue' ])
-          .removeIn([ 'appliedFilter', 'startDate' ])
-          .removeIn([ 'appliedFilter', 'endDate' ]);
-      } else if (action.key === 'duration') {
-        return state
-          .removeIn([ 'appliedFilter', 'minDuration' ])
-          .removeIn([ 'appliedFilter', 'maxDuration' ]);
-      }
-      return state.removeIn([ 'appliedFilter', action.key ]);
-    case ADD_EVENT:      
-      const eventValue = action.event.value;
-      const event = Event(action.event).set('value', eventValue);
-      if (action.index >= 0) // replacing an event
-        return state.setIn([ 'appliedFilter', 'events', action.index ], event)
-      else
-        return state.updateIn([ 'appliedFilter', 'events' ], list => action.single 
-          ? List([ event ])
-          : list.push(event));
-    case REMOVE_EVENT:
-      return state.removeIn([ 'appliedFilter', 'events', action.index ]);
-    case EDIT_EVENT:
-      return state.mergeIn([ 'appliedFilter', 'events', action.index], action.filter);
-    case TOGGLE_FILTER_MODAL:
-      return state.set('saveModalOpen', action.show);
-    case MOVE_EVENT:
-      const { fromI, toI } = action;
-      return state
-        .updateIn([ 'appliedFilter', 'events' ], list =>
-          list.remove(fromI).insert(toI, list.get(fromI)));
-    case CLEAR_EVENTS:
-      return state.setIn([ 'appliedFilter', 'events' ], List())
-        .setIn([ 'appliedFilter', 'filters' ], List())
-        .set('searchQuery', '');
-    
-    case ADD_ATTRIBUTE:
-      const filter = CustomFilter(action.filter);
-
-      if (action.index >= 0) // replacing the filter
-        return state.setIn([ 'appliedFilter', 'filters', action.index], filter);
-      else
-        return state.updateIn([ 'appliedFilter', 'filters'], filters => filters.push(filter));        
-    case EDIT_ATTRIBUTE:
-      return state.setIn([ 'appliedFilter', 'filters', action.index, action.key ], action.value );
-    case REMOVE_ATTRIBUTE:
-      return state.removeIn([ 'appliedFilter', 'filters', action.index ]);
-    case SET_SEARCH_QUERY:
-      return state.set('searchQuery', action.query);
-    case RESET:            
-      return state.set('appliedFilter', Filter({}))    
-    default:
-      return state;
-  }
-};
-
-export default withRequestState({
-  _: [ REMOVE ],
-  fetchListRequest: FETCH_LIST,
-  saveRequest: SAVE,
-  fetchFilterOptions: FETCH_FILTER_OPTIONS,
-}, reducer);
-
-const eventMap = ({value, type, key, operator, source, custom}) => ({value, type, key, operator, source, custom});
-const filterMap = ({value, type, key, operator, source, custom }) => ({value: Array.isArray(value) ? value: [value], custom, type, key, operator, source});
-const reduceThenFetchResource = actionCreator => (...args) => (dispatch, getState) => {
-  const action = actionCreator(...args);
-  dispatch(action);
-  const appliedFilters = getState().getIn([ 'funnelFilters', 'appliedFilter' ]);
-  const filter = appliedFilters
-    .update('events', list => list.map(event => event.set('value', event.value || '*')).map(eventMap))
-    .toJS();
-  
-  filter.filters = getState().getIn([ 'funnelFilters', 'appliedFilter', 'filters' ])
-    .map(filterMap).toJS();
-
-  if (action.funnelId) {    
-    dispatch(fetchFunnel(action.funnelId))
-    dispatch(fetchInsights(action.funnelId, filter))
-    dispatch(fetchIssuesFiltered(action.funnelId, filter))
-    dispatch(fetchSessionsFiltered(action.funnelId, filter))
-  }
-}
-
-export function editAttribute(index, key, value) {
-  return {
-    type: EDIT_ATTRIBUTE,
-    index,
-    key,
-    value,
-  };
-}
-
-export function addAttribute(filter, index) {
-  return {
-    type: ADD_ATTRIBUTE,
-    filter,
-    index
-  };
-}
-
-export function removeAttribute(index) {
-  return {
-    type: REMOVE_ATTRIBUTE,
-    index,
-  };
-}
-
-export function fetchList(range) {
-  return {
-    types: FETCH_LIST.toArray(),
-    call: client => client.get(`/funnels`),
-  };
-}
-
-export function fetchFilterOptions(filter, q) {
-  return {
-    types: FETCH_FILTER_OPTIONS.toArray(),
-    call: client => client.get('/sessions/filters/search', { q, type: filter.type }),
-    key: filter.key
-  };
-}
-
-export function setFilterOptions(filters) {
-  return {
-    type: SET_FILTER_OPTIONS,    
-    filters
-  }
-}
-
-export function save(instance) {
-  return {
-    types: SAVE.toArray(),
-    call: client => client.post('/filters', instance.toData()),
-    instance,
-  };
-}
-
-export function remove(id) {
-  return {
-    types: REMOVE.toArray(),
-    call: client => client.delete(`/filters/${ id }`),
-    id,
-  };
-}
-
-export function setActive(filter) {
-  return {
-    type: SET_ACTIVE,
-    filter,
-  };
-}
-
-export function setActiveFlow(flow) {
-  return {
-    type: SET_ACTIVE_FLOW,
-    flow,
-  };
-}
-
-export function setActiveKey(filterKey) {
-  return {
-    type: SET_ACTIVE_KEY,
-    filterKey,
-  };
-}
-
-export const addCustomFilter = reduceThenFetchResource((filter, value) => ({
-  type: ADD_CUSTOM_FILTER,
-  filter,
-  value,
-}));
-
-export const removeCustomFilter = reduceThenFetchResource(filterKey => ({
-  type: REMOVE_CUSTOM_FILTER,
-  filterKey,
-}));
-
-export const applyFilter = reduceThenFetchResource((filter, funnelId, fromUrl=false) => ({
-  type: APPLY,
-  filter,
-  funnelId,
-  fromUrl,
-}));
-
-export const setInitialFilters = () => (dispatch, getState) => {  
-  return dispatch({
-    type: APPLY,    
-    filter: getState().getIn(['funnels', 'instance', 'filter'])
-  })
-}
-
-export const applySavedFilter = reduceThenFetchResource((filter, fromUrl=false) => ({
-  type: APPLY,
-  filter,
-  fromUrl,
-}));
-
-export const resetFilterKey = reduceThenFetchResource(key => ({
-  type: RESET_KEY,
-  key,
-}));
-
-export const clearEvents = reduceThenFetchResource(() => ({
-  type: CLEAR_EVENTS,
-}));
-
-export function addEvent(event, single = false, index) {  
-  return {
-    type: ADD_EVENT,
-    event,
-    single,
-    index
-  };
-}
-
-export const removeEvent = reduceThenFetchResource((index, funnelId) => ({
-  type: REMOVE_EVENT,
-  index,
-  funnelId
-}));
-
-export function moveEvent(fromI, toI) {
-  return {
-    type: MOVE_EVENT,
-    fromI,
-    toI,
-  };
-}
-
-export const editEvent = reduceThenFetchResource((index, filter, funnelId) => ({
-    type: EDIT_EVENT,
-    index,
-    filter,
-    funnelId  
-}))
-
-export function toggleFilterModal(show) {
-  return {
-    type: TOGGLE_FILTER_MODAL,
-    show,
-  };
-}
-
-export function setSearchQuery(query) {
-  return {
-    type: SET_SEARCH_QUERY,
-    query
-  }
-}
-
-export function resetFunnelFilters() {
-  return {
-    type: RESET    
-  }
-}
\ No newline at end of file
diff --git a/frontend/app/duck/funnels.js b/frontend/app/duck/funnels.js
deleted file mode 100644
index dfa567618..000000000
--- a/frontend/app/duck/funnels.js
+++ /dev/null
@@ -1,451 +0,0 @@
-import { List, Map } from 'immutable';
-import Funnel from 'Types/funnel';
-import FunnelIssue from 'Types/funnelIssue';
-import Session from 'Types/session';
-import { fetchListType, fetchType, saveType, editType, initType, removeType } from './funcTools/crud/types';
-import { createItemInListUpdater, mergeReducers, success, array } from './funcTools/tools';
-import { createRequestReducer } from './funcTools/request';
-import { getDateRangeFromValue } from 'App/dateRange';
-import { LAST_7_DAYS } from 'Types/app/period';
-import { filterMap, checkFilterValue, hasFilterApplied } from './search';
-
-const name = 'funnel';
-const idKey = 'funnelId';
-const itemInListUpdater = createItemInListUpdater(idKey);
-
-const FETCH_LIST = fetchListType('funnel/FETCH_LIST');
-const FETCH_ISSUES = fetchType('funnel/FETCH_ISSUES');
-const FETCH_ISSUE = fetchType('funnel/FETCH_ISSUE');
-const FETCH_ISSUE_TYPES = fetchType('funnel/FETCH_ISSUE_TYPES');
-const FETCH_SESSIONS = fetchType('funnel/FETCH_SESSIONS');
-const FETCH = fetchType('funnel/FETCH');
-const FETCH_INSIGHTS = fetchType('funnel/FETCH_INSIGHTS');
-const SAVE = saveType('funnel/SAVE');
-const UPDATE = saveType('funnel/UPDATE');
-const EDIT = editType('funnel/EDIT');
-const EDIT_FILTER = `${name}/EDIT_FILTER`;
-const EDIT_FUNNEL_FILTER = `${name}/EDIT_FUNNEL_FILTER`;
-const REMOVE = removeType('funnel/REMOVE');
-const INIT = initType('funnel/INIT');
-const SET_NAV_REF = 'funnels/SET_NAV_REF'
-
-const RESET_FUNNEL = 'funnels/RESET_FUNNEL'
-const APPLY_FILTER = 'funnels/APPLY_FILTER'
-const APPLY_ISSUE_FILTER = 'funnels/APPLY_ISSUE_FILTER'
-const REMOVE_ISSUE_FILTER = 'funnels/REMOVE_ISSUE_FILTER'
-const SET_ACTIVE_STAGES = 'funnels/SET_ACTIVE_STAGES'
-const SET_SESSIONS_SORT = 'funnels/SET_SESSIONS_SORT'
-const BLINK = 'funnels/BLINK'
-
-const RESET_ISSUE = 'funnles/RESET_ISSUE'
-
-const FETCH_LIST_SUCCESS = success(FETCH_LIST);
-const FETCH_ISSUES_SUCCESS = success(FETCH_ISSUES);
-const FETCH_ISSUE_SUCCESS = success(FETCH_ISSUE);
-const FETCH_ISSUE_TYPES_SUCCESS = success(FETCH_ISSUE_TYPES);
-const FETCH_SESSIONS_SUCCESS = success(FETCH_SESSIONS);
-const FETCH_SUCCESS = success(FETCH);
-const FETCH_INSIGHTS_SUCCESS = success(FETCH_INSIGHTS);
-const SAVE_SUCCESS = success(SAVE);
-const UPDATE_SUCCESS = success(UPDATE);
-const REMOVE_SUCCESS = success(REMOVE);
-
-const range = getDateRangeFromValue(LAST_7_DAYS);
-const defaultDateFilters = {
-  rangeValue: LAST_7_DAYS,
-  startDate: range.start.ts,
-  endDate: range.end.ts
-}
-
-const initialState = Map({
-  list: List(),  
-  instance: Funnel(),
-  insights: Funnel(),
-  issues: List(),
-  issue: FunnelIssue(),
-  issuesTotal: 0,
-  sessionsTotal: 0,
-  sessions: List(),
-  activeStages: List(),
-  funnelFilters: Map(defaultDateFilters),
-  sessionsSort: Map({ order: "desc", sort: "newest" }),
-  issueFilters: Map({
-    filters: List(),
-    sort: { order: "desc", sort: "lostConversions" }
-  }),
-  sessionFilters: defaultDateFilters,
-  navRef: null,
-  issueTypes: List(),
-  blink: true
-});
-
-const reducer = (state = initialState, action = {}) => {
-	switch(action.type) {
-    case BLINK:
-      return state.set('blink', action.state);
-    case EDIT:
-      return state.mergeIn([ 'instance' ], action.instance);
-    case EDIT_FILTER:
-      return state.mergeIn([ 'instance', 'filter' ], action.instance);
-    case EDIT_FUNNEL_FILTER:
-      return state.mergeIn([ 'funnelFilters' ], action.instance);
-    case INIT:
-      return state.set('instance', Funnel(action.instance))
-		case FETCH_LIST_SUCCESS:
-      return state.set('list', List(action.data).map(Funnel)) 
-		case FETCH_ISSUES_SUCCESS:
-      return state
-        .set('issues', List(action.data.issues.significant).map(FunnelIssue))
-        .set('criticalIssuesCount', action.data.issues.criticalIssuesCount)
-		case FETCH_SESSIONS_SUCCESS:      
-      return state
-        .set('sessions', List(action.data.sessions).map(s => new Session(s)))
-        .set('total', action.data.total)
-    case FETCH_ISSUE_SUCCESS:      
-      return state
-        .set('issue', FunnelIssue(action.data.issue))
-        .set('sessions', List(action.data.sessions.sessions).map(s => new Session(s)))
-        .set('sessionsTotal', action.data.sessions.total)
-    case RESET_ISSUE:
-      return state.set('isses', FunnelIssue())
-        .set('sections', List())
-        .set('sessionsTotal', 0);
-    case FETCH_SUCCESS:
-      const funnel = Funnel(action.data);
-      return state.set('instance', funnel)
-    case FETCH_ISSUE_TYPES_SUCCESS:
-      const tmpMap = {};
-      action.data.forEach(element => {
-        tmpMap[element.type] = element.title        
-      });
-      return state
-        .set('issueTypes', List(action.data.map(({ type, title }) => ({ text: title, value: type }))))
-        .set('issueTypesMap', tmpMap);
-    case FETCH_INSIGHTS_SUCCESS:
-      let stages = [];
-      if (action.isRefresh) {
-        const activeStages = state.get('activeStages');
-        const oldInsights = state.get('insights');
-        const lastStage = action.data.stages[action.data.stages.length - 1]
-        const lastStageIndex = activeStages.toJS()[1];
-        stages = oldInsights.stages.map((stage, i) => {
-          stage.dropDueToIssues = lastStageIndex === i ? lastStage.dropDueToIssues : 0;
-          return stage;
-        });
-        return state.set('insights', Funnel({ totalDropDueToIssues: action.data.totalDropDueToIssues, stages, activeStages: activeStages.toJS() }));
-      } else {
-        stages = action.data.stages.map((stage, i) => {
-          stage.dropDueToIssues = 0;
-          return stage;
-        });
-        return state.set('insights', Funnel({ ...action.data, stages }))
-      }
-    case SAVE_SUCCESS:
-    case UPDATE_SUCCESS:
-      return state.update('list', itemInListUpdater(CustomField(action.data)))
-    case REMOVE_SUCCESS:
-      return state.update('list', list => list.filter(item => item.index !== action.index));
-    case APPLY_FILTER:      
-      return state.mergeIn([ action.filterType ], Array.isArray(action.filter) ? action.filter : Map(action.filter));
-    case APPLY_ISSUE_FILTER:      
-      return state.mergeIn(['issueFilters'], action.filter)
-    case REMOVE_ISSUE_FILTER:      
-      return state.updateIn(['issueFilters', 'filters'], list => list.filter(item => item !== action.errorType))
-    case SET_ACTIVE_STAGES:
-      return state.set('activeStages', List(action.stages))
-    case SET_NAV_REF:
-      return state.set('navRef', action.navRef);
-    case SET_SESSIONS_SORT:
-      const comparator = (s1, s2) => {
-        let diff = s1[ action.sortKey ] - s2[ action.sortKey ];
-        diff = diff === 0 ? s1.startedAt - s2.startedAt : diff;
-        return action.sign * diff;
-      };      
-      return state
-        .update('sessions', list => list.sort(comparator))
-        .set('sessionsSort', { sort: action.sort, sign: action.sign });
-    case RESET_FUNNEL:
-      return state        
-        .set('instance', Funnel())
-        .set('activeStages', List())
-        .set('issuesSort', Map({}))
-        // .set('funnelFilters', Map(defaultDateFilters))
-        .set('insights', Funnel())
-        .set('issues', List())
-        .set('sessions', List());
-		default:
-			return state;
-	}
-}
-
-export const fetchList = (range) => {
-  return {
-    types: array(FETCH_LIST),
-    call: client => client.get(`/funnels`),
-  }
-}
-
-export const fetch = (funnelId, params) => (dispatch, getState) => {
-  return dispatch({
-    types: array(FETCH),
-    call: client => client.get(`/funnels/${funnelId}`, params)
-  });
-}
-
-// const eventMap = ({value, type, key, operator, source, custom}) => ({value, type, key, operator, source, custom});
-// const filterMap = ({value, type, key, operator, source, custom }) => ({value: Array.isArray(value) ? value: [value], custom, type, key, operator, source});
-
-function getParams(params, state) {
-  const filter = state.getIn([ 'funnels', 'instance', 'filter']).toData();
-  filter.filters = filter.filters.map(filterMap);
-  const funnelFilters = state.getIn([ 'funnels', 'funnelFilters']).toJS();
-
-  // const appliedFilter = state.getIn([ 'funnels', 'instance', 'filter' ]);
-  // const filter = appliedFilter
-  //   .update('events', list => list.map(event => event.set('value', event.value || '*')).map(eventMap))
-  //   .toJS();
-  
-  // filter.filters = state.getIn([ 'funnelFilters', 'appliedFilter', 'filters' ])
-  //   .map(filterMap).toJS();
-
-  return { ...filter, ...funnelFilters };
-}
-
-export const fetchInsights = (funnelId, params = {}, isRefresh = false) => (dispatch, getState) => {  
-  return dispatch({
-    types: array(FETCH_INSIGHTS),
-    call: client => client.post(`/funnels/${funnelId}/insights`, getParams(params, getState())),
-    isRefresh
-  })
-}
-
-
-export const fetchFiltered = (funnelId, params) => (dispatch, getState) => {
-  return dispatch({
-    types: array(FETCH),
-    call: client => client.post(`/funnels/${funnelId}`, params),
-  })
-}
-
-export const fetchIssuesFiltered = (funnelId, params) => (dispatch, getState) => {  
-  return dispatch({
-    types: array(FETCH_ISSUES),
-    call: client => client.post(`/funnels/${funnelId}/issues`, getParams(params, getState())),
-  })
-}
-
-export const fetchSessionsFiltered = (funnelId, params) => (dispatch, getState) => {
-  return dispatch({
-    types: array(FETCH_SESSIONS),
-    call: client => client.post(`/funnels/${funnelId}/sessions`, getParams(params, getState())),
-  })
-}
-
-export const fetchIssue = (funnelId, issueId, params) => (dispatch, getState) => {
-  const filters = getState().getIn([ 'funnelFilters', 'appliedFilter' ]);  
-  const _params = { ...filters.toData(), ...params };
-  return dispatch({
-    types: array(FETCH_ISSUE),
-    call: client => client.post(`/funnels/${funnelId}/issues/${issueId}/sessions`, _params),
-  })
-}
-
-export const fetchIssues = (funnelId, params) => {
-  return {
-    types: array(FETCH_ISSUES),
-    call: client => client.get(`/funnels/${funnelId}/issues`, params),
-  }
-}
-
-export const fetchSessions = (funnelId, params) => {
-  return {
-    types: array(FETCH_SESSIONS),
-    call: client => client.get(`/funnels/${funnelId}/sessions`, params),
-  }
-}
-
-export const fetchIssueTypes = () => {
-  return {
-    types: array(FETCH_ISSUE_TYPES),
-    call: client => client.get(`/funnels/issue_types`),
-  }
-}
-
-export const save = () => (dispatch, getState) => {
-  const instance = getState().getIn([ 'funnels', 'instance'])
-  const filter = instance.get('filter').toData();
-  filter.filters = filter.filters.map(filterMap);
-  const isExist = instance.exists();
-
-  const _instance = instance instanceof Funnel ? instance : Funnel(instance);
-  const url = isExist ? `/funnels/${ _instance[idKey] }` : `/funnels`;
-
-  return dispatch({
-    types: array(isExist ? SAVE : UPDATE),
-    call: client => client.post(url, { ..._instance.toData(), filter }),
-  });
-}
-
-export const updateFunnelFilters = (funnelId, filter) => {  
-  return {
-    types: array(UPDATE),
-    call: client => client.post(`/funnels/${funnelId}`, { filter }),
-  }
-}
-
-export const remove = (index) => {
-  return {
-    types: array(REMOVE),
-    call: client => client.delete(`/funnels/${index}`),
-    index,
-  }
-}
-
-export const applyFilter = (filterType='funnelFilters', filter) => {  
-  return {
-    type: APPLY_FILTER,
-    filter,
-    filterType,    
-  }
-};
-
-export const applyIssueFilter = (filter) => {
-  return {
-    type: APPLY_ISSUE_FILTER,
-    filter
-  }
-};
-
-export const removeIssueFilter = errorType => {
-  return {
-    type: REMOVE_ISSUE_FILTER,
-    errorType,
-  }
-};
-
-export const setActiveStages = (stages, filters, funnelId, forceRrefresh = false) => (dispatch, getState) => { 
-  dispatch({
-    type: SET_ACTIVE_STAGES,
-    stages,
-  })
-
-  if (stages.length === 2) {
-    const filter = {...filters.toData(), firstStage: stages[0] + 1, lastStage: stages[1] + 1 };
-    dispatch(fetchIssuesFiltered(funnelId, filter))
-    dispatch(fetchInsights(funnelId, filter, true));
-    dispatch(fetchSessionsFiltered(funnelId, filter));
-  } else if (forceRrefresh) {    
-    const filter = {...filters.toData()};
-    dispatch(fetchIssuesFiltered(funnelId, filter))
-    dispatch(fetchInsights(funnelId, filter));
-    dispatch(fetchSessionsFiltered(funnelId, filter));
-  }
-};
-
-export const edit = instance => {
-  return {
-    type: EDIT,
-    instance,
-  }
-};
-
-export const init = instance => {
-  return {
-    type: INIT,
-    instance,
-  }
-};
-
-export const setNavRef = ref => {
-  return {
-    type: SET_NAV_REF,
-    navRef: ref
-  }
-};
-
-export const resetIssue = () => {  
-  return {
-    type: RESET_ISSUE,    
-  }
-}
-
-export const resetFunnel = () => {  
-  return {
-    type: RESET_FUNNEL,
-  }
-}
-
-export const setSessionsSort = (sortKey, sign = 1) => {  
-  return {
-    type: SET_SESSIONS_SORT,    
-    sortKey,
-    sign
-  }
-}
-
-export const blink = (state = true) => {
-  return {
-    type: BLINK,
-    state
-  }
-}
-
-export const refresh = (funnelId) => (dispatch, getState) => {
-  // dispatch(fetch(funnelId))
-  dispatch(fetchInsights(funnelId))
-  dispatch(fetchIssuesFiltered(funnelId, {}))
-  dispatch(fetchSessionsFiltered(funnelId, {}))
-}
-
-export default mergeReducers(
-	reducer,
-	createRequestReducer({
-    fetchRequest: FETCH,
-    fetchListRequest: FETCH_LIST,
-    fetchInsights: FETCH_INSIGHTS,
-    fetchIssueRequest: FETCH_ISSUE,
-    saveRequest: SAVE,
-    updateRequest: UPDATE,
-    fetchIssuesRequest: FETCH_ISSUES,
-    fetchSessionsRequest: FETCH_SESSIONS,
-  }),	
-)
-
-const reduceThenFetchList = actionCreator => (...args) => (dispatch, getState) => {
-  dispatch(actionCreator(...args));
-  dispatch(refresh(getState().getIn([ 'funnels', 'instance', idKey ])));
-
-  // const filter = getState().getIn([ 'funnels', 'instance', 'filter']).toData();
-  // filter.filters = filter.filters.map(filterMap);
-
-  // return dispatch(fetchSessionList(filter));
-};
-
-
-export const editFilter = reduceThenFetchList((instance) => ({
-  type: EDIT_FILTER,
-  instance,
-}));
-
-export const editFunnelFilter = reduceThenFetchList((instance) => ({
-  type: EDIT_FUNNEL_FILTER,
-  instance,
-}));
-
-export const addFilter = (filter) => (dispatch, getState) => {
-  filter.value = checkFilterValue(filter.value);
-  const instance = getState().getIn([ 'funnels', 'instance', 'filter']);
-
-  if (hasFilterApplied(instance.filters, filter)) {
-    
-  } else {
-    const filters = instance.filters.push(filter);
-    return dispatch(editFilter(instance.set('filters', filters)));
-  }
-}
-
-export const addFilterByKeyAndValue = (key, value) => (dispatch, getState) => {
-  let defaultFilter = filtersMap[key];
-  defaultFilter.value = value;
-  dispatch(addFilter(defaultFilter));
-}
\ No newline at end of file
diff --git a/frontend/app/duck/index.ts b/frontend/app/duck/index.ts
deleted file mode 100644
index d9412eedc..000000000
--- a/frontend/app/duck/index.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-// @ts-ignore
-import { combineReducers } from 'redux-immutable';
-
-import user from './user';
-import sessions from './sessions';
-import assignments from './assignments';
-import filters from './filters';
-import funnelFilters from './funnelFilters';
-import templates from './templates';
-import dashboard from './dashboard';
-import components from './components';
-import sources from './sources';
-import members from './member';
-import site from './site';
-import customFields from './customField';
-import integrations from './integrations';
-import rehydrate from './rehydrate';
-import errors from './errors';
-import funnels from './funnels';
-import roles from './roles';
-import customMetrics from './customMetrics';
-import search from './search';
-import liveSearch from './liveSearch';
-
-const rootReducer = combineReducers({
-  user,
-  sessions,
-  assignments,
-  filters,
-  funnelFilters,
-
-  templates,
-  dashboard,
-  components,
-  members,  
-  site,
-  customFields,
-  rehydrate,
-  errors,
-  funnels,
-  roles,
-  customMetrics,
-  search,
-  liveSearch,
-  ...integrations,
-  ...sources,
-});
-
-export type RootStore = ReturnType<typeof rootReducer>
-
-export default rootReducer
\ No newline at end of file
diff --git a/frontend/app/duck/integrations/actions.js b/frontend/app/duck/integrations/actions.js
deleted file mode 100644
index 1f926014f..000000000
--- a/frontend/app/duck/integrations/actions.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { fetchListType, fetchType, saveType, editType, initType, removeType } from '../funcTools/types';
-
-export function fetchList(name) {
-    return {
-        types: fetchListType(name).array,
-        call: (client) => client.get(`/integrations/${name}`),
-        name,
-    };
-}
-
-export function fetch(name, siteId) {
-    return {
-        types: fetchType(name).array,
-        call: (client) => client.get(siteId && name !== 'github' && name !== 'jira' ? `/${siteId}/integrations/${name}` : `/integrations/${name}`),
-        name,
-    };
-}
-
-export function save(name, siteId, instance) {
-    return {
-        types: saveType(name).array,
-        call: (client) => client.post((siteId ? `/${siteId}` : '') + `/integrations/${name}`, instance.toData()),
-    };
-}
-
-export function edit(name, instance) {
-    return {
-        type: editType(name),
-        instance,
-    };
-}
-
-export function init(name, instance) {
-    return {
-        type: initType(name),
-        instance,
-    };
-}
-
-export function remove(name, siteId) {
-    return {
-        types: removeType(name).array,
-        call: (client) => client.delete((siteId ? `/${siteId}` : '') + `/integrations/${name}`),
-        siteId,
-    };
-}
diff --git a/frontend/app/duck/integrations/index.js b/frontend/app/duck/integrations/index.js
deleted file mode 100644
index dec847235..000000000
--- a/frontend/app/duck/integrations/index.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import SentryConfig from 'Types/integrations/sentryConfig';
-import DatadogConfig from 'Types/integrations/datadogConfig';
-import StackdriverConfig from 'Types/integrations/stackdriverConfig';
-import RollbarConfig from 'Types/integrations/rollbarConfig';
-import NewrelicConfig from 'Types/integrations/newrelicConfig';
-import BugsnagConfig from 'Types/integrations/bugsnagConfig';
-import CloudWatch from 'Types/integrations/cloudwatchConfig';
-import ElasticsearchConfig from 'Types/integrations/elasticsearchConfig';
-import SumoLogicConfig from 'Types/integrations/sumoLogicConfig';
-import JiraConfig from 'Types/integrations/jiraConfig';
-import GithubConfig from 'Types/integrations/githubConfig';
-import IssueTracker from 'Types/integrations/issueTracker';
-import slack from './slack';
-import integrations from './integrations';
-import teams from './teams'
-
-import { createIntegrationReducer } from './reducer';
-
-export default {
-    sentry: createIntegrationReducer('sentry', SentryConfig),
-    datadog: createIntegrationReducer('datadog', DatadogConfig),
-    stackdriver: createIntegrationReducer('stackdriver', StackdriverConfig),
-    rollbar: createIntegrationReducer('rollbar', RollbarConfig),
-    newrelic: createIntegrationReducer('newrelic', NewrelicConfig),
-    bugsnag: createIntegrationReducer('bugsnag', BugsnagConfig),
-    cloudwatch: createIntegrationReducer('cloudwatch', CloudWatch),
-    elasticsearch: createIntegrationReducer('elasticsearch', ElasticsearchConfig),
-    sumologic: createIntegrationReducer('sumologic', SumoLogicConfig),
-    jira: createIntegrationReducer('jira', JiraConfig),
-    github: createIntegrationReducer('github', GithubConfig),
-    issues: createIntegrationReducer('issues', IssueTracker),
-    slack,
-    teams,
-    integrations,
-};
-
-export * from './actions';
diff --git a/frontend/app/duck/integrations/integrations.js b/frontend/app/duck/integrations/integrations.js
deleted file mode 100644
index c21952b9b..000000000
--- a/frontend/app/duck/integrations/integrations.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Map } from 'immutable';
-import { fetchListType } from '../funcTools/types';
-import { createRequestReducer } from '../funcTools/request';
-
-const FETCH_LIST = fetchListType('integrations/FETCH_LIST');
-const SET_SITE_ID = 'integrations/SET_SITE_ID';
-const initialState = Map({
-    list: [],
-    siteId: null,
-});
-const reducer = (state = initialState, action = {}) => {
-    switch (action.type) {
-        case FETCH_LIST.success:
-            return state.set('list', action.data);
-        case SET_SITE_ID:
-            return state.set('siteId', action.siteId);
-    }
-    return state;
-};
-
-export default createRequestReducer(
-    {
-        fetchRequest: FETCH_LIST,
-    },
-    reducer
-);
-
-export function fetchIntegrationList(siteID) {
-    return {
-        types: FETCH_LIST.array,
-        call: (client) => client.get(`/${siteID}/integrations`),
-    };
-}
-
-export function setSiteId(siteId) {
-    return {
-        type: SET_SITE_ID,
-        siteId,
-    };
-}
diff --git a/frontend/app/duck/integrations/reducer.js b/frontend/app/duck/integrations/reducer.js
deleted file mode 100644
index 425b1cc50..000000000
--- a/frontend/app/duck/integrations/reducer.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { List, Map } from 'immutable';
-import { createRequestReducer } from '../funcTools/request';
-import { fetchListType, saveType, removeType, editType, initType, fetchType } from '../funcTools/types';
-import { createItemInListUpdater } from '../funcTools/tools';
-
-const idKey = 'siteId';
-const itemInListUpdater = createItemInListUpdater(idKey);
-
-export const createIntegrationReducer = (name, Config) => {
-    const FETCH_LIST = fetchListType(name);
-    const SAVE = saveType(name);
-    const REMOVE = removeType(name);
-    const EDIT = editType(name);
-    const INIT = initType(name);
-    const FETCH = fetchType(name);
-
-    const initialState = Map({
-        instance: Config(),
-        list: List(),
-        fetched: false,
-        issuesFetched: false,
-    });
-    const reducer = (state = initialState, action = {}) => {
-        switch (action.type) {
-            case FETCH_LIST.success:
-                return state
-                    .set('list', Array.isArray(action.data) ? List(action.data).map(Config) : List([new Config(action.data)]))
-                    .set(action.name + 'Fetched', true);
-            case FETCH.success:
-                return state.set('instance', Config(action.data || {}));
-            case SAVE.success:
-                const config = Config(action.data);
-                return state.update('list', itemInListUpdater(config)).set('instance', config);
-            case REMOVE.success:
-                return state.update('list', (list) => list.filter((site) => site.siteId !== action.siteId)).set('instance', Config());
-            case EDIT:
-                return state.mergeIn(['instance'], action.instance);
-            case INIT:
-                return state.set('instance', Config(action.instance));
-        }
-        return state;
-    };
-    return createRequestReducer(
-        {
-            // fetchRequest: FETCH_LIST,
-            fetchRequest: FETCH,
-            saveRequest: SAVE,
-            removeRequest: REMOVE,
-        },
-        reducer
-    );
-};
diff --git a/frontend/app/duck/integrations/slack.js b/frontend/app/duck/integrations/slack.js
deleted file mode 100644
index e17180df3..000000000
--- a/frontend/app/duck/integrations/slack.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import { Map, List } from 'immutable';
-import withRequestState, { RequestTypes } from 'Duck/requestStateCreator';
-import Config from 'Types/integrations/slackConfig';
-import { createItemInListUpdater } from '../funcTools/tools';
-
-const SAVE = new RequestTypes('slack/SAVE');
-const UPDATE = new RequestTypes('slack/UPDATE');
-const REMOVE = new RequestTypes('slack/REMOVE');
-const FETCH_LIST = new RequestTypes('slack/FETCH_LIST');
-const SEND_MSG = new RequestTypes('slack/SEND_MSG');
-const EDIT = 'slack/EDIT';
-const INIT = 'slack/INIT';
-const idKey = 'webhookId';
-const itemInListUpdater = createItemInListUpdater(idKey);
-
-const initialState = Map({
-    instance: Config(),
-    loaded: false,
-    list: List(),
-});
-
-const reducer = (state = initialState, action = {}) => {
-    switch (action.type) {
-        case FETCH_LIST.REQUEST:
-            return state.set('loaded', true);
-        case FETCH_LIST.SUCCESS:
-            return state.set('list', List(action.data).map(Config)).set('loaded', true)
-        case UPDATE.SUCCESS:
-        case SAVE.SUCCESS:
-            const config = Config(action.data);
-            return state.update('list', itemInListUpdater(config)).set('instance', config);
-        case REMOVE.SUCCESS:
-            return state.update('list', (list) => list.filter((item) => item.webhookId !== action.id)).set('instance', Config());
-        case EDIT:
-            return state.mergeIn(['instance'], action.instance);
-        case INIT:
-            return state.set('instance', Config(action.instance));
-    }
-    return state;
-};
-
-export default withRequestState(
-    {
-        fetchRequest: FETCH_LIST,
-        saveRequest: SAVE,
-        updateRequest: UPDATE,
-        removeRequest: REMOVE,
-    },
-    reducer
-);
-
-export function fetchList() {
-    return {
-        types: FETCH_LIST.toArray(),
-        call: (client) => client.get('/integrations/slack/channels'),
-    };
-}
-
-export function save(instance) {
-    return {
-        types: SAVE.toArray(),
-        call: (client) => client.post(`/integrations/slack`, instance.toData()),
-    };
-}
-
-export function update(instance) {
-    return {
-        types: UPDATE.toArray(),
-        call: (client) => client.post(`/integrations/slack/${instance.webhookId}`, instance.toData()),
-    };
-}
-
-export function edit(instance) {
-    return {
-        type: EDIT,
-        instance,
-    };
-}
-
-export function init(instance) {
-    return {
-        type: INIT,
-        instance,
-    };
-}
-
-export function remove(id) {
-    return {
-        types: REMOVE.toArray(),
-        call: (client) => client.delete(`/integrations/slack/${id}`),
-        id,
-    };
-}
-
-// https://api.openreplay.com/5587/integrations/slack/notify/315/sessions/7856803626558104
-//
-export function sendSlackMsg({ integrationId, entity, entityId, data }) {
-    return {
-        types: SEND_MSG.toArray(),
-        call: (client) => client.post(`/integrations/slack/notify/${integrationId}/${entity}/${entityId}`, data)
-    }
-}
diff --git a/frontend/app/duck/integrations/teams.js b/frontend/app/duck/integrations/teams.js
deleted file mode 100644
index e77835a37..000000000
--- a/frontend/app/duck/integrations/teams.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import { Map, List } from 'immutable';
-import withRequestState, { RequestTypes } from 'Duck/requestStateCreator';
-import Config from 'Types/integrations/slackConfig';
-import { createItemInListUpdater } from '../funcTools/tools';
-
-const SAVE = new RequestTypes('msteams/SAVE');
-const UPDATE = new RequestTypes('msteams/UPDATE');
-const REMOVE = new RequestTypes('msteams/REMOVE');
-const FETCH_LIST = new RequestTypes('msteams/FETCH_LIST');
-const SEND_MSG = new RequestTypes('msteams/SEND_MSG');
-
-const EDIT = 'msteams/EDIT';
-const INIT = 'msteams/INIT';
-const idKey = 'webhookId';
-const itemInListUpdater = createItemInListUpdater(idKey);
-
-const initialState = Map({
-    instance: Config(),
-    list: List(),
-    loaded: false,
-});
-
-const reducer = (state = initialState, action = {}) => {
-    switch (action.type) {
-        case FETCH_LIST.REQUEST:
-            return state.set('loaded', true);
-        case FETCH_LIST.SUCCESS:
-            return state.set('list', List(action.data).map(Config)).set('loaded', true);
-        case UPDATE.SUCCESS:
-        case SAVE.SUCCESS:
-            const config = Config(action.data);
-            return state.update('list', itemInListUpdater(config)).set('instance', config);
-        case REMOVE.SUCCESS:
-            return state.update('list', (list) => list.filter((item) => item.webhookId !== action.id)).set('instance', Config());
-        case EDIT:
-            return state.mergeIn(['instance'], action.instance);
-        case INIT:
-            return state.set('instance', Config(action.instance));
-    }
-    return state;
-};
-
-export default withRequestState(
-    {
-        fetchRequest: FETCH_LIST,
-        saveRequest: SAVE,
-        updateRequest: UPDATE,
-        removeRequest: REMOVE,
-    },
-    reducer
-);
-
-export function fetchList() {
-    return {
-        types: FETCH_LIST.toArray(),
-        call: (client) => client.get('/integrations/msteams/channels'),
-    };
-}
-
-export function save(instance) {
-    return {
-        types: SAVE.toArray(),
-        call: (client) => client.post(`/integrations/msteams`, instance.toData()),
-    };
-}
-
-export function update(instance) {
-    return {
-        types: UPDATE.toArray(),
-        call: (client) => client.post(`/integrations/msteams/${instance.webhookId}`, instance.toData()),
-    };
-}
-
-export function edit(instance) {
-    return {
-        type: EDIT,
-        instance,
-    };
-}
-
-export function init(instance) {
-    return {
-        type: INIT,
-        instance,
-    };
-}
-
-export function remove(id) {
-    return {
-        types: REMOVE.toArray(),
-        call: (client) => client.delete(`/integrations/msteams/${id}`),
-        id,
-    };
-}
-
-// https://api.openreplay.com/5587/integrations/msteams/notify/315/sessions/7856803626558104
-//
-export function sendMsTeamsMsg({ integrationId, entity, entityId, data }) {
-    return {
-        types: SEND_MSG.toArray(),
-        call: (client) => client.post(`/integrations/msteams/notify/${integrationId}/${entity}/${entityId}`, data)
-    }
-}
diff --git a/frontend/app/duck/issues.js b/frontend/app/duck/issues.js
deleted file mode 100644
index ce68d31e4..000000000
--- a/frontend/app/duck/issues.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import Assignment from 'Types/session/assignment';
-import Activity from 'Types/session/activity';
-import { List, Map, Set } from 'immutable';
-import withRequestState, { RequestTypes } from 'Duck/requestStateCreator';
-import { createListUpdater } from './funcTools/tools';
-import { editType, initType } from './funcTools/crud/types';
-import { createInit, createEdit } from './funcTools/crud';
-
-const idKey = 'id';
-const name = 'assignment';
-const listUpdater = createListUpdater(idKey);
-
-const FETCH_ASSIGNMENTS = new RequestTypes('asignment/FETCH_ASSIGNMENTS');
-const FETCH_ISSUE = new RequestTypes('asignment/FETCH_ISSUE');
-const FETCH_PROJECTS = new RequestTypes('asignment/FETCH_PROJECTS');
-const FETCH_META = new RequestTypes('asignment/FETCH_META');
-const ADD_ACTIVITY = new RequestTypes('asignment/ADD_ACTIVITY');
-const ADD_MESSAGE = new RequestTypes('asignment/ADD_MESSAGE');
-const EDIT = editType(name);
-const INIT = initType(name);
-const RESET_ACTIVE_ISSUE = 'assignment/RESET_ACTIVE_ISSUE';
-
-const initialState = Map({
-  list: List(),
-  instance: new Assignment(),
-  activeIssue: new Assignment(),
-  issueTypes: List(),
-  issueTypeIcons: Set(),
-  users: List(),
-  projects: List()
-});
-
-let issueTypes = [];
-
-const reducer = (state = initialState, action = {}) => {
-  const users = state.get('users');
-  switch (action.type) {
-    case FETCH_PROJECTS.SUCCESS:
-      return state.set('projects', List(action.data));
-    case FETCH_ASSIGNMENTS.SUCCESS:
-      return state.set('list', action.data.map(as => new Assignment(as)));
-    case ADD_ACTIVITY.SUCCESS:
-      const instance = new Assignment(action.data);
-      return listUpdater(state, instance);
-    case FETCH_META.SUCCESS:
-      issueTypes = action.data.issueTypes;
-      var issueTypeIcons = {}
-      for (var i =0; i < issueTypes.length; i++) {
-        issueTypeIcons[issueTypes[i].id] = issueTypes[i].iconUrl
-      }
-      return state.set('issueTypes', List(issueTypes))
-        .set('users', List(action.data.users))
-        .set('issueTypeIcons', issueTypeIcons)
-    case FETCH_ISSUE.SUCCESS:
-      return state.set('activeIssue', new Assignment({ ...action.data, users}));
-    case RESET_ACTIVE_ISSUE:
-      return state.set('activeIssue', new Assignment());
-    case ADD_MESSAGE.SUCCESS:
-      const user = users.filter(user => user.id === action.data.author).first();
-      const activity = new Activity({ type: 'message', user, ...action.data,});
-      return state.updateIn([ 'activeIssue', 'activities' ], list => list.push(activity));
-    case INIT:
-      action.instance.issueType = issueTypes.length > 0 ? issueTypes[0].id : '';
-      return state.set('instance', new Assignment(action.instance));
-    case EDIT:
-      return state.mergeIn([ 'instance' ], action.instance);
-    default:
-      return state;
-  }
-};
-
-export default withRequestState({
-  fetchListRequest: FETCH_ASSIGNMENTS,
-  addActivityRequest: ADD_ACTIVITY,
-  fetchIssueRequest: FETCH_ISSUE,
-  addMessageRequest: ADD_MESSAGE,
-  fetchProjectsRequest: FETCH_PROJECTS
-}, reducer);
-
-export const init = createInit(name);
-export const edit = createEdit(name);
-
-export function fetchAssignments(sessionId) {
-  return {
-    types: FETCH_ASSIGNMENTS.toArray(),
-    call: client => client.get(`/sessions/${ sessionId }/assign`)
-  }
-}
-
-export function resetActiveIsue() {
-  return {
-    type: RESET_ACTIVE_ISSUE
-  }
-}
-
-export function fetchProjects() {
-  return {
-    types: FETCH_PROJECTS.toArray(),
-    call: client => client.get(`/integrations/issues/list_projects`)
-  }
-}
-
-export function fetchMeta(projectId) {
-  return {
-    types: FETCH_META.toArray(),
-    call: client => client.get(`/integrations/issues/${projectId}`)
-  }
-}
-
-export function addActivity(sessionId, params) {
-  return {
-    types: ADD_ACTIVITY.toArray(),
-    call: client => client.post(`/sessions/${ sessionId }/assign`, params.toCreate()),
-  }
-}
-
-export function addMessage(sessionId, assignmentId, params) {
-  return {
-    types: ADD_MESSAGE.toArray(),
-    call: client => client.post(`/sessions/${ sessionId }/assign/${ assignmentId }/comment`, params),
-  }
-}
diff --git a/frontend/app/duck/liveSearch.js b/frontend/app/duck/liveSearch.js
deleted file mode 100644
index c9f2d305f..000000000
--- a/frontend/app/duck/liveSearch.js
+++ /dev/null
@@ -1,157 +0,0 @@
-import { List, Map } from 'immutable';
-import { fetchListType, fetchType, editType } from './funcTools/crud';
-import { createRequestReducer } from './funcTools/request';
-import { mergeReducers, success } from './funcTools/tools';
-import Filter from 'Types/filter';
-import { liveFiltersMap } from 'Types/filter/newFilter';
-import { filterMap, checkFilterValue, hasFilterApplied, getAppliedFilterIndex } from './search';
-import Session from 'Types/session';
-
-const name = "liveSearch";
-const idKey = "searchId";
-
-const FETCH_FILTER_SEARCH = fetchListType(`${name}/FILTER_SEARCH`);
-const FETCH = fetchType(name);
-const EDIT = editType(name);
-const CLEAR_SEARCH = `${name}/CLEAR_SEARCH`;
-const APPLY = `${name}/APPLY`;
-const UPDATE_CURRENT_PAGE = `${name}/UPDATE_CURRENT_PAGE`;
-const FETCH_SESSION_LIST = fetchListType(`${name}/FETCH_SESSION_LIST`);
-
-const initialState = Map({
-	list: List(),
-	instance: new Filter({ filters: [], sort: '' }),
-  filterSearchList: {},
-  currentPage: 1,
-  total: 0,
-});
-
-function reducer(state = initialState, action = {}) {
-	switch (action.type) {
-    case APPLY:
-      return state.mergeIn(['instance'], action.filter);
-    case EDIT:
-      return state.mergeIn(['instance'], action.instance).set('currentPage', 1);
-    case UPDATE_CURRENT_PAGE:
-      return state.set('currentPage', action.page);
-    case success(FETCH_SESSION_LIST):
-      const { sessions, total } = action.data;
-      const list = List(sessions).map(s => new Session(s));
-      return state
-        .set('list', list)
-        .set('total', total);
-    case success(FETCH_FILTER_SEARCH):
-      const groupedList = action.data.reduce((acc, item) => {
-        const { projectId, type, value } = item;
-        const key = type;
-        if (!acc[key]) {
-          acc[key] = [];
-        }
-        acc[key].push({ projectId, value });
-        return acc;
-      }, {});
-      return state.set('filterSearchList', groupedList);
-	}
-	return state;
-}
-
-export default mergeReducers(
-	reducer,
-	createRequestReducer({
-		fetch: FETCH,
-    fetchList: FETCH_SESSION_LIST,
-    fetchFilterSearch: FETCH_FILTER_SEARCH
-	}),
-);
-
-export const customSetSessions = (data) => ({
-  type: success(FETCH_SESSION_LIST),
-  data
-})
-
-const reduceThenFetchResource = actionCreator => (...args) => (dispatch, getState) => {
-  dispatch(actionCreator(...args));
-  const filter = getState().getIn([ 'liveSearch', 'instance']).toData();
-  filter.filters = filter.filters.map(filterMap);
-  filter.limit = 10;
-  filter.page = getState().getIn([ 'liveSearch', 'currentPage']);
-
-  return dispatch(fetchSessionList(filter));
-};
-
-export const fetchSessionList = (filter) => {
-  return {
-    types: FETCH_SESSION_LIST.array,
-    call: client => client.post('/assist/sessions', filter),
-  }
-}
-
-export const edit = reduceThenFetchResource((instance) => ({
-  type: EDIT,
-  instance,
-}));
-
-export const applyFilter = reduceThenFetchResource((filter) => ({
-  type: APPLY,
-  filter,
-}));
-
-export const fetchSessions = (filter) => (dispatch, getState) => {
-  const _filter = filter ? filter : getState().getIn([ 'liveSearch', 'instance']);
-  return dispatch(applyFilter(_filter));
-};
-
-export const clearSearch = () => (dispatch, getState) => {
-  dispatch(edit(new Filter({ filters: [], sort: 'timestamp' })));
-  return dispatch({
-    type: CLEAR_SEARCH,
-  });
-}
-
-export const addFilter = (filter) => (dispatch, getState) => {
-  filter.value = checkFilterValue(filter.value);
-  const instance = getState().getIn([ 'liveSearch', 'instance']);
-  const filters = instance.get('filters');
-
-  const index = getAppliedFilterIndex(filters, filter);
-  if (index !== -1) {
-    const oldFilter = filters.get(index);
-    const updatedFilter = {
-      ...oldFilter,
-      value: oldFilter.value.concat(filter.value),
-    };
-
-    const updatedFilters = filters.set(index, updatedFilter);
-    return dispatch(edit(instance.set('filters', updatedFilters)));
-    // const index = instance.filters.findIndex(f => f.key === filter.key);
-    // const oldFilter = instance.filters.get(index);
-    // oldFilter.value = oldFilter.value.concat(filter.value);
-    // return dispatch(edit(instance.setIn(['filters', index], oldFilter)));
-  } else {
-    const filters = instance.filters.push(filter);
-    return dispatch(edit(instance.set('filters', filters)));
-  }
-}
-
-export const addFilterByKeyAndValue = (key, value, operator = undefined) => (dispatch, getState) => {
-  let defaultFilter = { ...liveFiltersMap[key] };
-  defaultFilter.value = value;
-  if (operator) {
-    defaultFilter.operator = operator;
-  }
-  dispatch(addFilter(defaultFilter));
-}
-
-export const updateCurrentPage = reduceThenFetchResource((page, fromUrl=false) => ({
-  type: UPDATE_CURRENT_PAGE,
-  page,
-}));
-
-export function fetchFilterSearch(params) {
-  params.live = true
-  return {
-    types: FETCH_FILTER_SEARCH.array,
-    call: client => client.get('/events/search', params),
-    params,
-  };
-}
diff --git a/frontend/app/duck/member.js b/frontend/app/duck/member.js
deleted file mode 100644
index ce12c1659..000000000
--- a/frontend/app/duck/member.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Map } from 'immutable';
-import Member from 'Types/member';
-import crudDuckGenerator from './tools/crudDuck';
-import { RequestTypes } from 'Duck/requestStateCreator';
-import { reduceDucks } from 'Duck/tools';
-
-const GENERATE_LINK = new RequestTypes('member/GENERATE_LINK');
-
-const crudDuck = crudDuckGenerator('client/member', Member, { idKey: 'id' });
-export const { fetchList, init, edit, remove, } = crudDuck.actions;
-
-const initialState = Map({
-  definedPercent: 0,
-});
-
-const reducer = (state = initialState, action = {}) => {
-  switch (action.type) {
-    case GENERATE_LINK.SUCCESS:      
-      return state.update(
-        'list',
-        list => list
-          .map(member => {
-            if(member.id === action.id) {
-              return Member({...member.toJS(), invitationLink: action.data.invitationLink })
-            }
-            return member
-          })
-      );
-  }
-  return state;
-};
-
-export function save(instance) {
-  return {
-    types: crudDuck.actionTypes.SAVE.toArray(),
-    call: client => client.put( instance.id ? `/client/members/${ instance.id }` : '/client/members', instance.toData()),    
-  };
-}
-
-export default reduceDucks(crudDuck, { initialState, reducer }).reducer;
diff --git a/frontend/app/duck/rehydrate.js b/frontend/app/duck/rehydrate.js
deleted file mode 100644
index df0b4ff50..000000000
--- a/frontend/app/duck/rehydrate.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import { List, Map } from 'immutable';
-import RehydrateJob from 'Types/rehydrateJob';
-
-import { mergeReducers } from './funcTools/tools';
-import { createRequestReducer } from './funcTools/request';
-import { 
-	createCRUDReducer, 
-	getCRUDRequestTypes,
-	createFetchList,
-	createInit,
-	createEdit,
-	createRemove,
-	createSave,
-} from './funcTools/crud';
-
-const name = 'rehydration';
-const idKey = 'rehydrationId';
-
-
-const SET_ACTIVE_TAB = 'steps/SET_ACTIVE_TAB';
-
-const initialState = Map({
-  activeJob: Map(),
-  list: List()
-});
-
-const reducer = (state = initialState, action = {}) => {
-  switch (action.type) {
-    case SET_ACTIVE_TAB:
-      return state.set('activeJob', RehydrateJob(action.instance));
-  }
-  return state;
-};
-
-export function setActiveTab(instance) {
-  return {
-    type: SET_ACTIVE_TAB,
-    instance,
-  };
-}
-
-export const fetchList = createFetchList(name);
-export const init = createInit(name);
-export const edit = createEdit(name);
-export const save = createSave(name);
-export const remove = createRemove(name);
-
-export default mergeReducers(
-	reducer,
-	createCRUDReducer(name, RehydrateJob, idKey),
-	createRequestReducer({
-		...getCRUDRequestTypes(name),
-	}),
-);
\ No newline at end of file
diff --git a/frontend/app/duck/requestStateCreator.js b/frontend/app/duck/requestStateCreator.js
deleted file mode 100644
index fdac31e43..000000000
--- a/frontend/app/duck/requestStateCreator.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import { List, Map } from 'immutable';
-
-export class RequestTypes {
-  constructor(type) {
-    this.REQUEST = `${ type }_REQUEST`;
-    this.SUCCESS = `${ type }_SUCCESS`;
-    this.FAILURE = `${ type }_FAILURE`;
-  }
-  toArray() {
-    return [ this.REQUEST, this.SUCCESS, this.FAILURE ];
-  }
-}
-
-const defaultReducer = (state = Map()) => state;
-const initialState = Map({
-  loading: false,
-  errors: null,
-});
-
-const addRequestState = (
-  types,
-  reducer = defaultReducer,
-) => {
-  const typesArray = Array.isArray(types) ? types : [ types ];
-  const requestEvents = typesArray.map(a => a.REQUEST);
-  const successEvents = typesArray.map(a => a.SUCCESS);
-  const failureEvents = typesArray.map(a => a.FAILURE);
-
-  let loadingCounter = 0;
-
-  return (inputState, action = {}) => {
-    let state = reducer(inputState, action);
-    // initialization
-    state = inputState ? state : state.merge(initialState);
-
-    if (requestEvents.includes(action.type)) {
-      loadingCounter += 1;
-      return state.set('loading', loadingCounter > 0).set('errors', null);
-    }
-    if (successEvents.includes(action.type)) {
-      loadingCounter -= 1;
-      return state.set('loading', loadingCounter > 0).set('errors', null);
-    }
-    if (failureEvents.includes(action.type)) {
-      loadingCounter -= 1;
-      return state.set('loading', loadingCounter > 0).set('errors', List(action.errors));
-    }
-    return state;
-  };
-};
-
-// TODO: Errors
-
-/**
- * @types: RequestTypes - array or single
- *           or object like {'state1': RequestTypes, 'state2': [RequestTypes] ... }
- * @reducer: wrapped reducer
- * */
-export default (
-  types,
-  reducer = defaultReducer,
-) => {
-  if (types instanceof RequestTypes || types instanceof Array) {
-    return addRequestState(types, reducer);
-  }
-
-  const keys = Object.keys(types).filter(key => key !== '_');
-  const reducers = {};
-  keys.map((key) => { reducers[ key ] = addRequestState(types[ key ]); });
-
-  const actualReducer = types._ ? addRequestState(types._, reducer) : reducer;
-
-  return (inputState, action = {}) => {
-    let state = actualReducer(inputState, action);
-    keys.map((key) => {
-      state = state.update(key, subState => reducers[ key ](subState, action));
-    });
-    return state;
-  };
-};
diff --git a/frontend/app/duck/roles.js b/frontend/app/duck/roles.js
deleted file mode 100644
index d51d18f1f..000000000
--- a/frontend/app/duck/roles.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import { List, Map } from 'immutable';
-import Role from 'Types/role';
-import crudDuckGenerator from './tools/crudDuck';
-import { reduceDucks } from 'Duck/tools';
-import { createListUpdater } from './funcTools/tools';
-
-const crudDuck = crudDuckGenerator('client/role', Role, { idKey: 'roleId' });
-export const { fetchList, init, edit, remove } = crudDuck.actions;
-
-const RESET_ERRORS = 'roles/RESET_ERRORS';
-
-const initialState = Map({
-  list: List(),
-  permissions: List([
-    { text: 'Session Replay', value: 'SESSION_REPLAY' },
-    { text: 'Developer Tools', value: 'DEV_TOOLS' },
-    // { text: 'Errors', value: 'ERRORS' },
-    { text: 'Dashboard', value: 'METRICS' },
-    { text: 'Assist (Live)', value: 'ASSIST_LIVE' },
-    { text: 'Assist (Call)', value: 'ASSIST_CALL' },
-    { text: 'Feature Flags', value: 'FEATURE_FLAGS' },
-    { text: 'Spots', value: "SPOT" },
-    { text: 'Change Spot Visibility', value: 'SPOT_PUBLIC' }
-  ]),
-});
-
-// const name = "role";
-const idKey = 'roleId';
-
-const updateItemInList = createListUpdater(idKey);
-const updateInstance = (state, instance) =>
-  state.getIn(['instance', idKey]) === instance[idKey]
-    ? state.mergeIn(['instance'], instance)
-    : state;
-
-const reducer = (state = initialState, action = {}) => {
-  switch (action.type) {
-    case RESET_ERRORS:
-      return state.setIn(['removeRequest', 'errors'], null);
-    case crudDuck.actionTypes.SAVE.SUCCESS:
-      return updateItemInList(updateInstance(state, action.data), Role(action.data));
-  }
-  return state;
-};
-
-export function save(instance) {
-  return {
-    types: crudDuck.actionTypes.SAVE.toArray(),
-    call: (client) =>
-      instance.roleId
-        ? client.post(`/client/roles/${instance.roleId}`, instance.toData())
-        : client.put(`/client/roles`, instance.toData()),
-  };
-}
-
-export function resetErrors() {
-  return {
-    type: RESET_ERRORS,
-  };
-}
-
-export default reduceDucks(crudDuck, { initialState, reducer }).reducer;
diff --git a/frontend/app/duck/search.js b/frontend/app/duck/search.js
deleted file mode 100644
index 274b1030c..000000000
--- a/frontend/app/duck/search.js
+++ /dev/null
@@ -1,516 +0,0 @@
-import Period, { CUSTOM_RANGE } from 'Types/app/period';
-import Filter from 'Types/filter';
-import { FilterCategory, FilterKey } from 'Types/filter/filterType';
-import {
-  conditionalFiltersMap,
-  filtersMap,
-  generateFilterOptions,
-  liveFiltersMap,
-  mobileConditionalFiltersMap,
-} from 'Types/filter/newFilter';
-import SavedFilter from 'Types/filter/savedFilter';
-import { List, Map } from 'immutable';
-
-import { DURATION_FILTER } from 'App/constants/storageKeys';
-import { errors as errorsRoute, isRoute } from 'App/routes';
-
-import { fetchList as fetchErrorsList } from './errors';
-import {
-  editType,
-  fetchListType,
-  fetchType,
-  removeType,
-  saveType,
-} from './funcTools/crud';
-import { ROOT_KEY, createRequestReducer } from './funcTools/request';
-import { array, mergeReducers, success } from './funcTools/tools';
-import { fetchAutoplayList, fetchList as fetchSessionList } from './sessions';
-
-const ERRORS_ROUTE = errorsRoute();
-
-const name = 'search';
-const PER_PAGE = 10;
-
-const FETCH_LIST = fetchListType(name);
-const FETCH_FILTER_SEARCH = fetchListType(`${name}/FILTER_SEARCH`);
-const FETCH = fetchType(name);
-const SAVE = saveType(name);
-const EDIT = editType(name);
-const EDIT_SAVED_SEARCH = editType(`${name}/SAVED_SEARCH`);
-const REMOVE = removeType(name);
-const APPLY_SAVED_SEARCH = `${name}/APPLY_SAVED_SEARCH`;
-const CLEAR_SEARCH = `${name}/CLEAR_SEARCH`;
-const UPDATE = `${name}/UPDATE`;
-const APPLY = `${name}/APPLY`;
-const SET_ALERT_METRIC_ID = `${name}/SET_ALERT_METRIC_ID`;
-const UPDATE_CURRENT_PAGE = `${name}/UPDATE_CURRENT_PAGE`;
-const SET_ACTIVE_TAB = `${name}/SET_ACTIVE_TAB`;
-const SET_SCROLL_POSITION = `${name}/SET_SCROLL_POSITION`;
-
-const REFRESH_FILTER_OPTIONS = 'filters/REFRESH_FILTER_OPTIONS';
-const CHECK_LATEST = fetchListType(`${name}/CHECK_LATEST`);
-const UPDATE_LATEST_REQUEST_TIME = 'filters/UPDATE_LATEST_REQUEST_TIME';
-
-const initialState = Map({
-  filterList: generateFilterOptions(filtersMap),
-  filterListLive: generateFilterOptions(liveFiltersMap),
-  filterListConditional: generateFilterOptions(conditionalFiltersMap),
-  filterListMobileConditional: generateFilterOptions(
-    mobileConditionalFiltersMap
-  ),
-  list: List(),
-  latestRequestTime: null,
-  latestList: List(),
-  alertMetricId: null,
-  instance: new Filter({ filters: [] }),
-  savedSearch: new SavedFilter({}),
-  filterSearchList: {},
-  currentPage: 1,
-  pageSize: PER_PAGE,
-  activeTab: { name: 'All', type: 'all' },
-  scrollY: 0,
-});
-
-// Metric - Series - [] - filters
-function reducer(state = initialState, action = {}) {
-  switch (action.type) {
-    case REFRESH_FILTER_OPTIONS:
-      return state
-        .set('filterList', generateFilterOptions(filtersMap, action.isMobile))
-        .set('filterListLive', generateFilterOptions(liveFiltersMap))
-        .set(
-          'filterListConditional',
-          generateFilterOptions(conditionalFiltersMap)
-        )
-        .set(
-          'filterListMobileConditional',
-          generateFilterOptions(mobileConditionalFiltersMap)
-        );
-    case EDIT:
-      return state.mergeIn(['instance'], action.instance).set('currentPage', 1);
-    case APPLY:
-      if (action.fromUrl) {
-        return state
-          .set('instance', Filter(action.filter))
-          .set('currentPage', 1);
-      } else {
-        return action.filter
-          ? state.mergeIn(['instance'], action.filter).set('currentPage', 1)
-          : state.mergeIn(['instance'], action.filter);
-      }
-    case success(FETCH):
-      return state.set('instance', action.data);
-    case success(FETCH_LIST):
-      const { data } = action;
-      return state.set(
-        'list',
-        List(data.map(SavedFilter)).sortBy((i) => i.searchId)
-      );
-    case UPDATE_LATEST_REQUEST_TIME:
-      return state.set('latestRequestTime', Date.now()).set('latestList', []);
-    case success(CHECK_LATEST):
-      return state.set('latestList', action.data);
-    case success(FETCH_FILTER_SEARCH):
-      const groupedList = action.data.reduce((acc, item) => {
-        const { projectId, type, value } = item;
-        const key = type;
-        if (!acc[key]) {
-          acc[key] = [];
-        }
-        acc[key].push({ projectId, value });
-        return acc;
-      }, {});
-      return state.set('filterSearchList', groupedList);
-    case APPLY_SAVED_SEARCH:
-      return state.set('savedSearch', action.filter);
-    case CLEAR_SEARCH:
-      return state.set('savedSearch', new SavedFilter({}));
-    case EDIT_SAVED_SEARCH:
-      return state.mergeIn(['savedSearch'], action.instance);
-    case UPDATE_CURRENT_PAGE:
-      return state.set('currentPage', action.page);
-    case SET_ACTIVE_TAB:
-      return state.set('activeTab', action.tab).set('currentPage', 1);
-    case SET_SCROLL_POSITION:
-      return state.set('scrollY', action.scrollPosition);
-  }
-  return state;
-}
-
-export default mergeReducers(
-  reducer,
-  createRequestReducer({
-    [ROOT_KEY]: FETCH_LIST,
-    fetch: FETCH,
-    fetchFilterSearch: FETCH_FILTER_SEARCH,
-  })
-);
-
-const checkValues = (key, value) => {
-  if (key === FilterKey.DURATION) {
-    return value[0] === '' || value[0] === null ? [0, value[1]] : value;
-  }
-  return value.filter((i) => i !== '' && i !== null);
-};
-
-export const checkFilterValue = (value) => {
-  return Array.isArray(value) ? (value.length === 0 ? [''] : value) : [value];
-};
-
-export const filterMap = ({
-  category,
-  value,
-  key,
-  operator,
-  sourceOperator,
-  source,
-  custom,
-  isEvent,
-  filters,
-  sort,
-  order,
-}) => ({
-  value: checkValues(key, value),
-  custom,
-  type: category === FilterCategory.METADATA ? FilterKey.METADATA : key,
-  operator,
-  source: category === FilterCategory.METADATA ? key.replace(/^_/, '') : source,
-  sourceOperator,
-  isEvent,
-  filters: filters ? filters.map(filterMap) : [],
-});
-
-const getFilters = (state) => {
-  const filter = state.getIn(['search', 'instance']).toData();
-  const activeTab = state.getIn(['search', 'activeTab']);
-  if (
-    activeTab.type !== 'all' &&
-    activeTab.type !== 'bookmark' &&
-    activeTab.type !== 'vault'
-  ) {
-    const tmpFilter = filtersMap[FilterKey.ISSUE];
-    tmpFilter.value = [activeTab.type];
-    filter.filters = filter.filters.concat(tmpFilter);
-  }
-
-  if (activeTab.type === 'bookmark' || activeTab.type === 'vault') {
-    filter.bookmarked = true;
-  }
-
-  filter.filters = filter.filters.map(filterMap);
-
-  // duration filter from local storage
-  if (!filter.filters.find((f) => f.type === FilterKey.DURATION)) {
-    const durationFilter = JSON.parse(
-      localStorage.getItem(DURATION_FILTER) || '{"count": 0}'
-    );
-    let durationValue = parseInt(durationFilter.count);
-    if (durationValue > 0) {
-      const value = [0];
-      durationValue =
-        durationFilter.countType === 'min'
-          ? durationValue * 60 * 1000
-          : durationValue * 1000;
-      if (durationFilter.operator === '<') {
-        value[0] = durationValue;
-      } else if (durationFilter.operator === '>') {
-        value[1] = durationValue;
-      }
-
-      filter.filters = filter.filters.concat({
-        type: FilterKey.DURATION,
-        operator: 'is',
-        value,
-      });
-    }
-  }
-
-  return filter;
-};
-
-export const reduceThenFetchResource =
-  (actionCreator) =>
-  (...args) =>
-  (dispatch, getState) => {
-    dispatch(actionCreator(...args));
-    const activeTab = getState().getIn(['search', 'activeTab']);
-    if (['notes', 'flags'].includes(activeTab.type)) return;
-
-    const filter = getFilters(getState());
-    filter.limit = PER_PAGE;
-    filter.page = getState().getIn(['search', 'currentPage']);
-
-    const forceFetch = filter.filters.length === 0 || args[1] === true;
-
-    // reset the timestamps to latest
-    if (filter.rangeValue !== CUSTOM_RANGE) {
-      const period = new Period({ rangeName: filter.rangeValue });
-      const newTimestamps = period.toJSON();
-      filter.startDate = newTimestamps.startDate;
-      filter.endDate = newTimestamps.endDate;
-    }
-
-    dispatch(updateLatestRequestTime());
-    return isRoute(ERRORS_ROUTE, window.location.pathname)
-      ? dispatch(fetchErrorsList(filter))
-      : dispatch(fetchSessionList(filter, forceFetch));
-  };
-
-export const edit = reduceThenFetchResource((instance) => ({
-  type: EDIT,
-  instance,
-}));
-
-export const editDefault = (instance) => ({
-  type: EDIT,
-  instance,
-});
-
-export const setActiveTab = reduceThenFetchResource((tab) => ({
-  type: SET_ACTIVE_TAB,
-  tab,
-}));
-
-export const remove = (id) => (dispatch, getState) => {
-  return dispatch({
-    types: REMOVE.array,
-    call: (client) => client.delete(`/saved_search/${id}`),
-    id,
-  }).then(() => {
-    dispatch(applySavedSearch(new SavedFilter({})));
-    dispatch(fetchList());
-  });
-};
-
-// export const remove = createRemove(name, (id) => `/saved_search/${id}`);
-
-export const applyFilter = reduceThenFetchResource((filter, force = false) => ({
-  type: APPLY,
-  filter,
-  force,
-}));
-
-export const updateFilter = (filter, force = false, resetPage = true) => ({
-  type: APPLY,
-  filter,
-  force,
-  resetPage,
-});
-
-export const updateCurrentPage = reduceThenFetchResource((page) => ({
-  type: UPDATE_CURRENT_PAGE,
-  page,
-}));
-
-export const applySavedSearch = (filter) => (dispatch, getState) => {
-  dispatch(edit({ filters: filter ? filter.filter.filters : [] }));
-  return dispatch({
-    type: APPLY_SAVED_SEARCH,
-    filter,
-  });
-};
-
-export const fetchSessions =
-  (filter, force = false) =>
-  (dispatch, getState) => {
-    const _filter = filter ? filter : getState().getIn(['search', 'instance']);
-    return dispatch(applyFilter(_filter, force));
-  };
-
-export const updateSeries = (index, series) => ({
-  type: UPDATE,
-  index,
-  series,
-});
-
-export function fetch(id) {
-  return {
-    id,
-    types: array(FETCH),
-    call: (c) => c.get(`/errors/${id}`),
-  };
-}
-
-export const save =
-  (id, rename = false) =>
-  (dispatch, getState) => {
-    const filter = getState().getIn(['search', 'instance']).toData();
-    // filter.filters = filter.filters.map(filterMap);
-    const isNew = !id;
-
-    const instance = getState().getIn(['search', 'savedSearch']).toData();
-    const newInstance = rename ? instance : { ...instance, filter };
-    newInstance.filter.filters = newInstance.filter.filters.map(filterMap);
-    return dispatch({
-      types: SAVE.array,
-      call: (client) =>
-        client.post(
-          isNew ? '/saved_search' : `/saved_search/${id}`,
-          newInstance
-        ),
-    }).then(() => {
-      dispatch(fetchList()).then(() => {
-        if (isNew) {
-          const lastSavedSearch = getState().getIn(['search', 'list']).last();
-          dispatch(applySavedSearch(lastSavedSearch));
-        }
-      });
-    });
-  };
-
-export function fetchList() {
-  return {
-    types: array(FETCH_LIST),
-    call: (client) => client.get(`/saved_search`),
-  };
-}
-
-export function setAlertMetricId(id) {
-  return {
-    type: SET_ALERT_METRIC_ID,
-    id,
-  };
-}
-
-export function fetchFilterSearch(params) {
-  return {
-    types: FETCH_FILTER_SEARCH.array,
-    call: (client) => client.get('/events/search', params),
-    params,
-  };
-}
-
-export const clearSearch = () => (dispatch, getState) => {
-  const instance = getState().getIn(['search', 'instance']);
-  dispatch(
-    edit(
-      new Filter({
-        rangeValue: instance.rangeValue,
-        startDate: instance.startDate,
-        endDate: instance.endDate,
-        filters: [],
-      })
-    )
-  );
-  return dispatch({
-    type: CLEAR_SEARCH,
-  });
-};
-
-export const hasFilterApplied = (filters, filter) => {
-  return !filter.isEvent && filters.some((f) => f.key === filter.key);
-};
-
-export const getAppliedFilterIndex = (filters, filterToFind) => {
-  if (!filterToFind.isEvent) {
-    return filters.findIndex((filter) => filter.key === filterToFind.key);
-  }
-  return -1;
-};
-
-export const addFilter = (filter) => (dispatch, getState) => {
-  const instance = getState().getIn(['search', 'instance']);
-  const filters = instance.get('filters');
-  const index = getAppliedFilterIndex(filters, filter);
-
-  filter.value = checkFilterValue(filter.value);
-
-  filter.filters = filter.filters
-    ? filter.filters.map((subFilter) => ({
-        ...subFilter,
-        value: checkFilterValue(subFilter.value),
-      }))
-    : null;
-
-  if (index !== -1) {
-    const oldFilter = filters.get(index);
-    const updatedFilter = {
-      ...oldFilter,
-      value: oldFilter.value.concat(filter.value),
-    };
-
-    const updatedFilters = filters.set(index, updatedFilter);
-    return dispatch(edit(instance.set('filters', updatedFilters)));
-  } else {
-    const updatedFilters = filters.push(filter);
-    return dispatch(edit(instance.set('filters', updatedFilters)));
-  }
-};
-
-export const addFilterByKeyAndValue =
-  (
-    key,
-    value,
-    operator = undefined,
-    sourceOperator = undefined,
-    source = undefined
-  ) =>
-  (dispatch, getState) => {
-    let defaultFilter = { ...filtersMap[key] };
-    defaultFilter.value = value;
-    if (operator) {
-      defaultFilter.operator = operator;
-    }
-    if (defaultFilter.hasSource && source && sourceOperator) {
-      defaultFilter.sourceOperator = sourceOperator;
-      defaultFilter.source = source;
-    }
-
-    dispatch(addFilter(defaultFilter));
-  };
-
-export const editSavedSearch = (instance) => {
-  return {
-    type: EDIT_SAVED_SEARCH,
-    instance,
-  };
-};
-
-export const refreshFilterOptions = () => (dispatch, getState) => {
-  const currentProject = getState().getIn(['site', 'instance']);
-  return dispatch({
-    type: REFRESH_FILTER_OPTIONS,
-    isMobile: currentProject?.platform === 'ios'
-  });
-};
-
-export const setScrollPosition = (scrollPosition) => {
-  return {
-    type: SET_SCROLL_POSITION,
-    scrollPosition,
-  };
-};
-
-export const updateLatestRequestTime = () => {
-  return {
-    type: UPDATE_LATEST_REQUEST_TIME,
-  };
-};
-
-export const checkForLatestSessions = () => (dispatch, getState) => {
-  const state = getState();
-  const filter = getFilters(state);
-  const latestRequestTime = state.getIn(['search', 'latestRequestTime']);
-  if (!!latestRequestTime) {
-    const period = new Period({
-      rangeName: CUSTOM_RANGE,
-      start: latestRequestTime,
-      end: Date.now(),
-    });
-    const newTimestamps = period.toJSON();
-    filter.startDate = newTimestamps.startDate;
-    filter.endDate = newTimestamps.endDate;
-  }
-
-  return dispatch({
-    types: array(CHECK_LATEST),
-    call: (client) => client.post(`/sessions/search/ids`, filter),
-  });
-};
-
-export const fetchAutoplaySessions = (page) => (dispatch, getState) => {
-  const filter = getFilters(getState());
-  filter.page = page;
-  filter.limit = PER_PAGE;
-  return dispatch(fetchAutoplayList(filter));
-};
diff --git a/frontend/app/duck/sessions.ts b/frontend/app/duck/sessions.ts
deleted file mode 100644
index 4f9335569..000000000
--- a/frontend/app/duck/sessions.ts
+++ /dev/null
@@ -1,704 +0,0 @@
-import { LAST_7_DAYS } from 'Types/app/period';
-import Session from 'Types/session';
-import ErrorStack from 'Types/session/errorStack';
-import { EventData, Location } from 'Types/session/event';
-import Watchdog from 'Types/watchdog';
-import { List, Map } from 'immutable';
-
-import { clean as cleanParams } from 'App/api_client';
-import APIClient from 'App/api_client';
-import { parseError } from 'App/api_middleware';
-import { getDateRangeFromValue } from 'App/dateRange';
-import logger from 'App/logger';
-import {
-  cleanSessionFilters,
-  compareJsonObjects,
-  getRE,
-  getSessionFilter,
-  setSessionFilter,
-} from 'App/utils';
-import { FETCH_ACCOUNT, UPDATE_JWT } from 'Duck/user';
-
-import withRequestState, { RequestTypes } from './requestStateCreator';
-
-const name = 'sessions';
-const FETCH_LIST = new RequestTypes('sessions/FETCH_LIST');
-const FETCH_AUTOPLAY_LIST = new RequestTypes('sessions/FETCH_AUTOPLAY_LIST');
-const FETCH = new RequestTypes('sessions/FETCH');
-const FETCHV2 = new RequestTypes('sessions/FETCHV2');
-const FETCH_EVENTS = new RequestTypes('sessions/FETCH_EVENTS');
-const FETCH_NOTES = new RequestTypes('sessions/FETCH_NOTES');
-
-const FETCH_FAVORITE_LIST = new RequestTypes('sessions/FETCH_FAVORITE_LIST');
-const FETCH_LIVE_LIST = new RequestTypes('sessions/FETCH_LIVE_LIST');
-const TOGGLE_FAVORITE = new RequestTypes('sessions/TOGGLE_FAVORITE');
-const FETCH_ERROR_STACK = new RequestTypes('sessions/FETCH_ERROR_STACK');
-const FETCH_INSIGHTS = new RequestTypes('sessions/FETCH_INSIGHTS');
-const FETCH_SESSION_CLICKMAP = new RequestTypes('sessions/FETCH_SESSION_CLICKMAP');
-const SORT = 'sessions/SORT';
-const REDEFINE_TARGET = 'sessions/REDEFINE_TARGET';
-const SET_TIMEZONE = 'sessions/SET_TIMEZONE';
-const SET_EVENT_QUERY = 'sessions/SET_EVENT_QUERY';
-const SET_AUTOPLAY_VALUES = 'sessions/SET_AUTOPLAY_VALUES';
-const TOGGLE_CHAT_WINDOW = 'sessions/TOGGLE_CHAT_WINDOW';
-const SET_FUNNEL_PAGE_FLAG = 'sessions/SET_FUNNEL_PAGE_FLAG';
-const SET_TIMELINE_POINTER = 'sessions/SET_TIMELINE_POINTER';
-const SET_TIMELINE_HOVER_POINTER = 'sessions/SET_TIMELINE_HOVER_POINTER';
-
-const SET_CREATE_NOTE_TOOLTIP = 'sessions/SET_CREATE_NOTE_TOOLTIP';
-const SET_EDIT_NOTE_TOOLTIP = 'sessions/SET_EDIT_NOTE_TOOLTIP';
-const FILTER_OUT_NOTE = 'sessions/FILTER_OUT_NOTE';
-const ADD_NOTE = 'sessions/ADD_NOTE';
-const UPDATE_NOTE = 'sessions/UPDATE_NOTE';
-
-const SET_SESSION_PATH = 'sessions/SET_SESSION_PATH';
-const LAST_PLAYED_SESSION_ID = `${name}/LAST_PLAYED_SESSION_ID`;
-const SET_ACTIVE_TAB = 'sessions/SET_ACTIVE_TAB';
-
-const CLEAR_CURRENT_SESSION = 'sessions/CLEAR_CURRENT_SESSION';
-
-const PREFETCH_SESSION = 'sessions/PREFETCH_SESSION';
-
-const range = getDateRangeFromValue(LAST_7_DAYS);
-
-const defaultDateFilters = {
-  url: '',
-  rangeValue: LAST_7_DAYS,
-  startDate: range.start.ts,
-  endDate: range.end.ts,
-};
-
-const initObj = {
-  list: [],
-  sessionIds: [],
-  current: new Session(),
-  prefetched: false,
-  eventsAsked: false,
-  total: 0,
-  keyMap: Map(),
-  wdTypeCount: Map(),
-  favoriteList: List(),
-  activeTab: Watchdog({ name: 'All', type: 'all' }),
-  timezone: 'local',
-  errorStack: List(),
-  eventsIndex: [],
-  sourcemapUploaded: true,
-  filteredEvents: null,
-  eventsQuery: '',
-  showChatWindow: false,
-  liveSessions: [],
-  visitedEvents: List(),
-  insights: List(),
-  insightFilters: defaultDateFilters,
-  host: '',
-  funnelPage: Map(),
-  timelinePointer: null,
-  sessionPath: {},
-  lastPlayedSessionId: null,
-  timeLineTooltip: {
-    time: 0,
-    offset: 0,
-    isVisible: false,
-    localTime: '',
-    userTime: '',
-  },
-  createNoteTooltip: { time: 0, isVisible: false, isEdit: false, note: null },
-  fetchFailed: false,
-};
-
-const initialState = Map(initObj);
-
-interface IAction extends Record<string, any> {
-  type: string;
-  data: any;
-}
-
-const reducer = (state = initialState, action: IAction) => {
-  switch (action.type) {
-    case FETCH_ERROR_STACK.SUCCESS:
-      return state
-        .set(
-          'errorStack',
-          List(action.data.trace).map((es) => new ErrorStack(es))
-        )
-        .set('sourcemapUploaded', action.data.sourcemapUploaded);
-    case FETCH_LIVE_LIST.SUCCESS:
-      const liveList = action.data.sessions.map(
-        (s) => new Session({ ...s, live: true })
-      );
-      return state.set('liveSessions', liveList);
-    case FETCH_LIST.SUCCESS:
-      const { sessions, total } = action.data;
-      const list = sessions.map((s) => new Session(s));
-
-      return state
-        .set('list', list)
-        .set(
-          'sessionIds',
-          list.map(({ sessionId }) => sessionId)
-        )
-        .set(
-          'favoriteList',
-          list.filter(({ favorite }) => favorite)
-        )
-        .set('total', total);
-    case FETCH_AUTOPLAY_LIST.SUCCESS:
-      let sessionIds = state.get('sessionIds') as [];
-      sessionIds = sessionIds.concat(action.data.map((i) => i.sessionId + ''));
-      return state.set(
-        'sessionIds',
-        sessionIds.filter((i, index) => sessionIds.indexOf(i) === index)
-      );
-    case SET_AUTOPLAY_VALUES: {
-      const sessionIds = state.get('sessionIds');
-      const currentSessionId = state.get('current').sessionId;
-      const currentIndex = sessionIds.indexOf(currentSessionId);
-      return state
-        .set('previousId', sessionIds[currentIndex - 1])
-        .set('nextId', sessionIds[currentIndex + 1]);
-    }
-    case SET_EVENT_QUERY: {
-      const events = state.get('current').events;
-      const query = action.filter.query;
-      const searchRe = getRE(query, 'i');
-
-      const filteredEvents = query
-        ? events.filter(
-            (e) =>
-              searchRe.test(e.url) ||
-              searchRe.test(e.value) ||
-              searchRe.test(e.label) ||
-              searchRe.test(e.type) ||
-              (e.type === 'LOCATION' && searchRe.test('visited'))
-          )
-        : null;
-
-      return state
-        .set('filteredEvents', filteredEvents)
-        .set('eventsQuery', query);
-    }
-    case CLEAR_CURRENT_SESSION: {
-      const session = new Session();
-
-      return state
-        .set('current', session)
-        .set('eventsIndex', [])
-        .set('visitedEvents', List())
-        .set('host', '');
-    }
-    case FETCH.FAILURE:
-      return state.set('fetchFailed', true);
-    case FETCH.SUCCESS: {
-      // TODO: more common.. or TEMP filters', 'appliedFilter
-      const events = action.filter.events;
-      const session = new Session(action.data);
-
-      const matching: number[] = [];
-
-      const visitedEvents: Location[] = [];
-      const tmpMap = new Set();
-      session.events.forEach((event) => {
-        if (event.type === 'LOCATION' && !tmpMap.has(event.url)) {
-          tmpMap.add(event.url);
-          visitedEvents.push(event);
-        }
-      });
-
-      events.forEach(({ key, operator, value }) => {
-        session.events.forEach((e, index) => {
-          if (key === e.type) {
-            const val = e.type === 'LOCATION' ? e.url : e.value;
-            if (operator === 'is' && value === val) {
-              matching.push(index);
-            }
-            if (operator === 'contains' && val.includes(value)) {
-              matching.push(index);
-            }
-          }
-        });
-      });
-
-      return state
-        .set('current', session)
-        .set('eventsIndex', matching)
-        .set('visitedEvents', visitedEvents)
-        .set('host', visitedEvents[0] && visitedEvents[0].host);
-    }
-    case FETCHV2.SUCCESS: {
-      const session = new Session(action.data);
-
-      return state.set('current', session).set('prefetched', false);
-    }
-    case PREFETCH_SESSION: {
-      const { data } = action;
-      return state.set('current', data).set('prefetched', true);
-    }
-    case FETCH_EVENTS.SUCCESS: {
-      const {
-        errors,
-        events,
-        issues,
-        crashes,
-        resources,
-        stackEvents,
-        userEvents,
-        userTesting,
-      } = action.data as {
-        errors: any[];
-        crashes: any[];
-        events: any[];
-        issues: any[];
-        resources: any[];
-        stackEvents: any[];
-        userEvents: EventData[];
-        userTesting: any[];
-      };
-      const filterEvents = action.filter.events as Record<string, any>[];
-      const session = state.get('current') as Session;
-      const matching: number[] = [];
-
-      const visitedEvents: Location[] = [];
-      const tmpMap = new Set();
-      events.forEach((event) => {
-        // @ts-ignore assume that event is LocationEvent
-        if (event.type === 'LOCATION' && !tmpMap.has(event.url)) {
-          // @ts-ignore assume that event is LocationEvent
-          tmpMap.add(event.url);
-          // @ts-ignore assume that event is LocationEvent
-          visitedEvents.push(event);
-        }
-      });
-
-      filterEvents.forEach(({ key, operator, value }) => {
-        events.forEach((e, index) => {
-          if (key === e.type) {
-            // @ts-ignore assume that event is LocationEvent
-            const val = e.type === 'LOCATION' ? e.url : e.value;
-            if (operator === 'is' && value === val) {
-              matching.push(index);
-            }
-            if (operator === 'contains' && val.includes(value)) {
-              matching.push(index);
-            }
-          }
-        });
-      });
-
-      const newSession = session.addEvents(
-        events,
-        crashes,
-        errors,
-        issues,
-        resources,
-        userEvents,
-        stackEvents,
-        userTesting
-      );
-
-      const forceUpdate = state.set('current', {});
-      return forceUpdate
-        .set('current', newSession)
-        .set('eventsIndex', matching)
-        .set('visitedEvents', visitedEvents)
-        .set('host', visitedEvents[0] && visitedEvents[0].host);
-    }
-    case FETCH_NOTES.SUCCESS: {
-      const notes = action.data;
-      if (notes.length > 0) {
-        const session = state.get('current') as Session;
-        const newSession = session.addNotes(notes);
-        const forceUpdate = state.set('current', {});
-        return forceUpdate.set('current', newSession);
-      }
-      return state;
-    }
-    case FETCH_FAVORITE_LIST.SUCCESS:
-      return state.set(
-        'favoriteList',
-        action.data.map((s) => new Session(s))
-      );
-    case TOGGLE_FAVORITE.SUCCESS: {
-      const id = action.sessionId;
-      let mutableState = state;
-      const list = state.get('list') as unknown as Session[];
-      const sessionIdx = list.findIndex(({ sessionId }) => sessionId === id);
-      const session = list[sessionIdx];
-      const current = state.get('current') as unknown as Session;
-      const wasInFavorite =
-        state
-          .get('favoriteList')
-          .findIndex(({ sessionId }) => sessionId === id) > -1;
-
-      if (session && !wasInFavorite) {
-        session.favorite = true;
-        mutableState = mutableState.updateIn(
-          ['list', sessionIdx],
-          () => session
-        );
-      }
-      if (current.sessionId === id) {
-        mutableState = mutableState.update('current', (s: Session) => ({
-          ...s,
-          favorite: !wasInFavorite,
-        }));
-      }
-      return mutableState.update('favoriteList', (list: Session[]) =>
-        session
-          ? wasInFavorite
-            ? list.filter(({ sessionId }) => sessionId !== id)
-            : list.push(session)
-          : list
-      );
-    }
-    case SORT: {
-      const comparator = (s1, s2) => {
-        let diff = s1[action.sortKey] - s2[action.sortKey];
-        diff = diff === 0 ? s1.startedAt - s2.startedAt : diff;
-        return action.sign * diff;
-      };
-      return state
-        .update('list', (list: Session[]) => list.sort(comparator))
-        .update('favoriteList', (list: Session[]) => list.sort(comparator));
-    }
-    case SET_ACTIVE_TAB:
-      const allList =
-        action.tab.type === 'all'
-          ? state.get('list')
-          : state
-              .get('list')
-              .filter((s) => s.issueTypes.includes(action.tab.type));
-
-      return state.set('activeTab', action.tab).set(
-        'sessionIds',
-        allList.map(({ sessionId }) => sessionId)
-      );
-    case SET_TIMEZONE:
-      return state.set('timezone', action.timezone);
-    case TOGGLE_CHAT_WINDOW:
-      return state.set('showChatWindow', action.state);
-    case FETCH_SESSION_CLICKMAP.SUCCESS:
-    case FETCH_INSIGHTS.SUCCESS:
-      return state.set(
-        'insights',
-        List(action.data).sort((a, b) => b.count - a.count)
-      );
-    case SET_FUNNEL_PAGE_FLAG:
-      return state.set(
-        'funnelPage',
-        action.funnelPage ? Map(action.funnelPage) : false
-      );
-    case SET_TIMELINE_POINTER:
-      return state.set('timelinePointer', action.pointer);
-    case SET_TIMELINE_HOVER_POINTER:
-      return state.set('timeLineTooltip', action.timeLineTooltip);
-    case SET_CREATE_NOTE_TOOLTIP:
-      return state.set('createNoteTooltip', action.noteTooltip);
-    case SET_EDIT_NOTE_TOOLTIP:
-      return state.set('createNoteTooltip', action.noteTooltip);
-    case FILTER_OUT_NOTE:
-      return state.updateIn(['current'], (session: Session) => ({
-        ...session,
-        notesWithEvents: session.notesWithEvents.filter((item) => {
-          if ('noteId' in item) {
-            return item.noteId !== action.noteId;
-          }
-          return true;
-        }),
-      }));
-    case ADD_NOTE:
-      const session = state.get('current') as Session;
-      session.notesWithEvents = [...session.notesWithEvents, action.note].sort(
-        (a, b) => {
-          const aTs = a.time || a.timestamp;
-          const bTs = b.time || b.timestamp;
-
-          return aTs - bTs;
-        }
-      );
-      return state.set('current', session);
-    case UPDATE_NOTE:
-      const currSession = state.get('current') as Session;
-      const noteIndex = currSession.notesWithEvents.findIndex(
-        (item) => item.noteId === action.note.noteId
-      );
-      currSession.notesWithEvents[noteIndex] = action.note;
-      return state.set('current', currSession);
-    case SET_SESSION_PATH:
-      return state.set('sessionPath', action.path);
-    case LAST_PLAYED_SESSION_ID:
-      const sessionList = state.get('list') as unknown as Session[];
-      const sIndex = sessionList.findIndex(
-        ({ sessionId }) => sessionId === action.sessionId
-      );
-      if (sIndex === -1) return state;
-
-      return state.updateIn(['list', sIndex], (session: Session) => ({
-        ...session,
-        viewed: true,
-      }));
-    default:
-      return state;
-  }
-};
-
-export default withRequestState(
-  {
-    _: [FETCH, FETCH_LIST],
-    fetchLiveListRequest: FETCH_LIVE_LIST,
-    fetchFavoriteListRequest: FETCH_FAVORITE_LIST,
-    toggleFavoriteRequest: TOGGLE_FAVORITE,
-    fetchErrorStackList: FETCH_ERROR_STACK,
-    fetchInsightsRequest: FETCH_INSIGHTS,
-  },
-  reducer
-);
-
-export const fetchList =
-  (params = {}, force = false) =>
-  (dispatch) => {
-    if (!force) {
-      // compare with the last fetched filter
-      const oldFilters = getSessionFilter();
-      if (compareJsonObjects(oldFilters, cleanSessionFilters(params))) {
-        return;
-      }
-    }
-
-    setSessionFilter(cleanSessionFilters(params));
-    return dispatch({
-      types: FETCH_LIST.toArray(),
-      call: (client) => client.post('/sessions/search', params),
-      params: cleanParams(params),
-    });
-  };
-
-export const fetchAutoplayList =
-  (params = {}) =>
-  (dispatch) => {
-    setSessionFilter(cleanSessionFilters(params));
-    return dispatch({
-      types: FETCH_AUTOPLAY_LIST.toArray(),
-      call: (client) => client.post('/sessions/search/ids', params),
-      params: cleanParams(params),
-    });
-  };
-
-export function fetchErrorStackList(sessionId, errorId) {
-  return {
-    types: FETCH_ERROR_STACK.toArray(),
-    call: (client) =>
-      client.get(`/sessions/${sessionId}/errors/${errorId}/sourcemaps`),
-  };
-}
-
-export const fetch =
-  (sessionId, isLive = false) =>
-  (dispatch, getState) => {
-    dispatch({
-      types: FETCH.toArray(),
-      call: (client) =>
-        client.get(
-          isLive ? `/assist/sessions/${sessionId}` : `/sessions/${sessionId}`
-        ),
-      filter: getState().getIn(['filters', 'appliedFilter']),
-    });
-  };
-
-// implementing custom middleware-like request to keep the behavior
-// TODO: move all to mobx
-export const fetchV2 = (sessionId: string) => (dispatch, getState) => {
-  const apiClient = new APIClient();
-  const apiGet = (url: string, dispatch: any, FAILURE?: string) =>
-    apiClient
-      .get(url)
-      .then(async (response) => {
-        if (response.status === 403) {
-          dispatch({ type: FETCH_ACCOUNT.FAILURE });
-        }
-        if (!response.ok) {
-          const text = await response.text();
-          return Promise.reject(text);
-        }
-        return response.json();
-      })
-      .then((json) => json || {})
-      .catch(async (e) => {
-        const data = await e.response?.json();
-        logger.error('Error during API request. ', e);
-        return (
-          FAILURE &&
-          dispatch({
-            type: FAILURE,
-            errors: data ? parseError(data.errors) : [],
-          })
-        );
-      });
-
-  const filter = getState().getIn(['filters', 'appliedFilter']);
-  apiGet(`/sessions/${sessionId}/replay`, dispatch, FETCH.FAILURE).then(
-    async ({ jwt, errors, data }) => {
-      if (errors) {
-        dispatch({ type: FETCH.FAILURE, errors, data });
-      } else {
-        dispatch({ type: FETCHV2.SUCCESS, data, ...filter });
-
-        const events = await apiGet(`/sessions/${sessionId}/events`, dispatch);
-        if (events) {
-          dispatch({ type: FETCH_EVENTS.SUCCESS, data: events.data, filter });
-        }
-      }
-      if (jwt) {
-        dispatch({ type: UPDATE_JWT, data: jwt });
-      }
-    }
-  );
-};
-
-export function presetSession(sessionData) {
-  return {
-    type: PREFETCH_SESSION,
-    data: sessionData,
-  };
-}
-
-export function clearCurrentSession() {
-  return {
-    type: CLEAR_CURRENT_SESSION,
-  };
-}
-
-export const setCustomSession = (session, filter) => (dispatch, getState) => {
-  dispatch({
-    type: FETCH.SUCCESS,
-    filter: getState().getIn(['filters', 'appliedFilter']),
-    data: session,
-  });
-};
-
-export function toggleFavorite(sessionId) {
-  return {
-    types: TOGGLE_FAVORITE.toArray(),
-    call: (client) => client.get(`/sessions/${sessionId}/favorite`),
-    sessionId,
-  };
-}
-
-export function fetchInsights(params) {
-  return {
-    types: FETCH_INSIGHTS.toArray(),
-    call: (client) => client.post('/heatmaps/url', params),
-  };
-}
-
-export function fetchSessionClickmap(sessionId, params) {
-  return {
-    types: FETCH_SESSION_CLICKMAP.toArray(),
-    call: (client) => client.post(`/sessions/${sessionId}/clickmaps`, params),
-  };
-
-}
-
-export function fetchLiveList(params = {}) {
-  return {
-    types: FETCH_LIVE_LIST.toArray(),
-    call: (client) => client.get('/assist/sessions', params),
-  };
-}
-
-export function toggleChatWindow(state) {
-  return {
-    type: TOGGLE_CHAT_WINDOW,
-    state,
-  };
-}
-
-export function sort(sortKey, sign = 1, listName = 'list') {
-  return {
-    type: SORT,
-    sortKey,
-    sign,
-    listName,
-  };
-}
-
-export const setAutoplayValues = (sessionId) => {
-  return {
-    type: SET_AUTOPLAY_VALUES,
-    sessionId,
-  };
-};
-
-export const setActiveTab = (tab) => ({
-  type: SET_ACTIVE_TAB,
-  tab,
-});
-
-export function setTimezone(timezone) {
-  return {
-    type: SET_TIMEZONE,
-    timezone,
-  };
-}
-
-export function setEventFilter(filter) {
-  return {
-    type: SET_EVENT_QUERY,
-    filter,
-  };
-}
-
-export function setFunnelPage(funnelPage) {
-  return {
-    type: SET_FUNNEL_PAGE_FLAG,
-    funnelPage,
-  };
-}
-
-export function setTimelinePointer(pointer) {
-  return {
-    type: SET_TIMELINE_POINTER,
-    pointer,
-  };
-}
-
-export function setTimelineHoverTime(timeLineTooltip) {
-  return {
-    type: SET_TIMELINE_HOVER_POINTER,
-    timeLineTooltip,
-  };
-}
-
-export function filterOutNote(noteId) {
-  return {
-    type: FILTER_OUT_NOTE,
-    noteId,
-  };
-}
-
-export function addNote(note) {
-  return {
-    type: ADD_NOTE,
-    note,
-  };
-}
-
-export function updateNote(note) {
-  return {
-    type: UPDATE_NOTE,
-    note,
-  };
-}
-
-export function setSessionPath(path: any) {
-  return {
-    type: SET_SESSION_PATH,
-    path,
-  };
-}
-
-export function updateLastPlayedSession(sessionId) {
-  return {
-    type: LAST_PLAYED_SESSION_ID,
-    sessionId,
-  };
-}
diff --git a/frontend/app/duck/site.js b/frontend/app/duck/site.js
deleted file mode 100644
index 9678b94a9..000000000
--- a/frontend/app/duck/site.js
+++ /dev/null
@@ -1,167 +0,0 @@
-import Site from 'Types/site';
-import GDPR from 'Types/site/gdpr';
-import {
-  mergeReducers,
-  createItemInListUpdater,
-  success,
-  array,
-  createListUpdater
-} from './funcTools/tools';
-import {
-  createCRUDReducer,
-  getCRUDRequestTypes,
-  createInit,
-  createEdit,
-  createRemove,
-  createUpdate,
-  saveType
-} from './funcTools/crud';
-import { createRequestReducer } from './funcTools/request';
-import { Map, List, fromJS } from 'immutable';
-import { GLOBAL_HAS_NO_RECORDINGS, SITE_ID_STORAGE_KEY } from 'App/constants/storageKeys';
-
-const storedSiteId = localStorage.getItem(SITE_ID_STORAGE_KEY);
-
-const name = 'project';
-const idKey = 'id';
-const itemInListUpdater = createItemInListUpdater(idKey);
-const updateItemInList = createListUpdater(idKey);
-
-const EDIT_GDPR = 'sites/EDIT_GDPR';
-const SAVE_GDPR = 'sites/SAVE_GDPR';
-const FETCH_GDPR = 'sites/FETCH_GDPR';
-const FETCH_LIST = 'sites/FETCH_LIST';
-const SET_SITE_ID = 'sites/SET_SITE_ID';
-const FETCH_GDPR_SUCCESS = success(FETCH_GDPR);
-const SAVE_GDPR_SUCCESS = success(SAVE_GDPR);
-const FETCH_LIST_SUCCESS = success(FETCH_LIST);
-const SAVE = saveType('sites/SAVE');
-
-const UPDATE_PROJECT_RECORDING_STATUS = 'sites/UPDATE_PROJECT_RECORDING_STATUS';
-
-const initialState = Map({
-  list: List(),
-  instance: fromJS(),
-  remainingSites: undefined,
-  siteId: null,
-  active: null
-});
-
-const reducer = (state = initialState, action = {}) => {
-  switch (action.type) {
-    case EDIT_GDPR:
-      return state.mergeIn(['instance', 'gdpr'], action.gdpr);
-    case FETCH_GDPR_SUCCESS:
-      return state.mergeIn(['instance', 'gdpr'], action.data);
-    case success(SAVE):
-      const newSite = Site(action.data);
-      return updateItemInList(state, newSite)
-        .set('siteId', newSite.get('id'))
-        .set('active', newSite);
-    case SAVE_GDPR_SUCCESS:
-      const gdpr = GDPR(action.data);
-      return state.setIn(['instance', 'gdpr'], gdpr);
-    case FETCH_LIST_SUCCESS:
-      let siteId = state.get('siteId');
-      const siteIds = action.data.map(s => parseInt(s.projectId));
-      const siteExists = siteIds.includes(siteId);
-      if (action.siteIdFromPath && siteIds.includes(parseInt(action.siteIdFromPath))) {
-        siteId = action.siteIdFromPath;
-      } else if (!siteId || !siteExists) {
-        siteId = siteIds.includes(parseInt(storedSiteId))
-          ? storedSiteId
-          : action.data[0].projectId;
-      }
-      const list = List(action.data.map(Site));
-      const hasRecordings = list.some(s => s.recorded);
-      if (!hasRecordings) {
-        localStorage.setItem(GLOBAL_HAS_NO_RECORDINGS, true);
-      } else {
-        localStorage.removeItem(GLOBAL_HAS_NO_RECORDINGS);
-      }
-
-      return state.set('list', list)
-        .set('siteId', siteId)
-        .set('active', list.find(s => parseInt(s.id) === parseInt(siteId)));
-    case SET_SITE_ID:
-      const _siteId = action.siteId ? action.siteId : state.get('list').get(0).id;
-      localStorage.setItem(SITE_ID_STORAGE_KEY, _siteId);
-      const site = state.get('list').find(s => parseInt(s.id) == _siteId);
-      return state.set('siteId', _siteId).set('active', site);
-    case UPDATE_PROJECT_RECORDING_STATUS:
-      const { siteId: _siteIdToUpdate, status } = action;
-      const siteToUpdate = state.get('list').find(s => parseInt(s.id) === parseInt(_siteIdToUpdate));
-      const updatedSite = siteToUpdate.set('recorded', status);
-      return updateItemInList(state, updatedSite);
-  }
-  return state;
-};
-
-export function editGDPR(gdpr) {
-  return {
-    type: EDIT_GDPR,
-    gdpr
-  };
-}
-
-export function fetchGDPR(siteId) {
-  return {
-    types: array(FETCH_GDPR),
-    call: client => client.get(`/${siteId}/gdpr`)
-  };
-}
-
-export const saveGDPR = (siteId, gdpr) => (dispatch, getState) => {
-  const g = getState().getIn(['site', 'instance', 'gdpr']);
-  return dispatch({
-    types: array(SAVE_GDPR),
-    call: client => client.post(`/${siteId}/gdpr`, g.toData())
-  });
-};
-
-export function fetchList(siteId) {
-  return {
-    types: array(FETCH_LIST),
-    call: client => client.get('/projects'),
-    siteIdFromPath: siteId
-  };
-}
-
-export function save(site) {
-  return {
-    types: array(SAVE),
-    call: client => client.post(`/projects`, site.toData())
-  };
-}
-
-// export const fetchList = createFetchList(name);
-export const init = createInit(name);
-export const edit = createEdit(name);
-// export const save = createSave(name);
-export const update = createUpdate(name);
-export const remove = createRemove(name);
-
-export function setSiteId(siteId) {
-  return {
-    type: SET_SITE_ID,
-    siteId
-  };
-}
-
-export const updateProjectRecordingStatus = (siteId, status) => {
-  return {
-    type: UPDATE_PROJECT_RECORDING_STATUS,
-    siteId,
-    status
-  };
-};
-
-export default mergeReducers(
-  reducer,
-  createCRUDReducer(name, Site, idKey),
-  createRequestReducer({
-    saveGDPR: SAVE_GDPR,
-    ...getCRUDRequestTypes(name)
-  })
-);
-
diff --git a/frontend/app/duck/sources/index.js b/frontend/app/duck/sources/index.js
deleted file mode 100644
index 66203d13a..000000000
--- a/frontend/app/duck/sources/index.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { fromJS, Map, List } from 'immutable';
-import listSourceCreator, { getAction } from './listSourceCreator';
-
-
-const filtersFromJS = data => fromJS(data)
-  .update('USERDEVICE', list => list.filter(value => value !== ""))
-  .update('FID0', list => list.filter(value => value !== ""))
-
-export default {
-  values: listSourceCreator('values', '/events/values', ({ value }) => value),
-  selectors: listSourceCreator('selectors', '/events/selectors', ({ targetSelector }) => targetSelector),
-  filterValues: listSourceCreator('filterValues', '/sessions/filters', filtersFromJS, true, Map({
-    USEROS: List(),
-    USERBROWSER: List(),
-    USERDEVICE: List(),
-    FID0: List(),
-    REFERRER: List(),
-    USERCOUNTRY: List(),
-  })),
-};
-
-export function fetch(name, params) {
-  return getAction(name, params);
-}
diff --git a/frontend/app/duck/sources/listSourceCreator.js b/frontend/app/duck/sources/listSourceCreator.js
deleted file mode 100644
index a82473f20..000000000
--- a/frontend/app/duck/sources/listSourceCreator.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { List, Map } from 'immutable';
-import withRequestState, { RequestTypes } from 'Duck/requestStateCreator';
-
-const actionMap = {};
-
-export default (
-  name,
-  endpoint,
-  fromJS = a => a,
-  convertFromRoot = false,
-  customInitialState = Map({ list: List() }),
-) => {
-  const initialState = customInitialState || Map({
-    list: List(),
-  });
-
-  const FETCH_LIST = new RequestTypes(`${ name }/FETCH_LIST`);
-
-  actionMap[ name ] = params => ({
-    types: FETCH_LIST.toArray(),
-    call: client => client.get(endpoint, params),
-  });
-
-  const reducer = (state = initialState, action = {}) => {
-    switch (action.type) {
-      case FETCH_LIST.SUCCESS:
-        return convertFromRoot
-          ? state.merge(fromJS(action.data))
-          : state.set('list', List(action.data).map(fromJS).toSet().toList()); // ??
-    }
-    return state;
-  };
-
-  return withRequestState(FETCH_LIST, reducer);
-};
-
-export function getAction(name, params) {
-  return actionMap[ name ](params);
-}
diff --git a/frontend/app/duck/templates.js b/frontend/app/duck/templates.js
deleted file mode 100644
index b4ad9c9cc..000000000
--- a/frontend/app/duck/templates.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Template from 'Types/template';
-import crudDuckGenerator from './tools/crudDuck';
-
-const crudDuck = crudDuckGenerator(
-  'template', Template,
-  { endpoints: { fetchList: '/templates' } },
-);
-
-export const {
-  fetchList, fetch, init, edit, save, remove,
-} = crudDuck.actions;
-
-export default crudDuck.reducer;
diff --git a/frontend/app/duck/tools/crudDuck.js b/frontend/app/duck/tools/crudDuck.js
deleted file mode 100644
index d095c12da..000000000
--- a/frontend/app/duck/tools/crudDuck.js
+++ /dev/null
@@ -1,208 +0,0 @@
-import { Map, List } from 'immutable';
-
-import requestDuckGenerator, { RequestTypes } from './requestDuck';
-
-function getActionTypes(name) {
-  return {
-    FETCH_LIST: new RequestTypes(`${ name }/FETCH_LIST`),
-    FETCH: new RequestTypes(`${ name }/FETCH`),
-    FETCH_IN_LIST: new RequestTypes(`${ name }/FETCH_IN_LIST`),
-    REMOVE: new RequestTypes(`${ name }/REMOVE`),
-    SAVE: new RequestTypes(`${ name }/SAVE`),
-    INIT: `${ name }/INIT`,
-    EDIT: `${ name }/EDIT`,
-  };
-}
-
-function getListUpdater(idKey) {
-  return (state, instance) => state.update('list', (list) => {
-    const index = list.findIndex(item => item[ idKey ] === instance[ idKey ]);
-    return (index >= 0
-      ? list.mergeIn([ index ], instance)
-      : list.push(instance)
-    );
-  });
-}
-
-function getInitialState(fromJS) {
-  return Map({
-    list: List(),
-    instance: fromJS(),
-  });
-}
-
-function getDefaultEndpoints(namePl) {
-  return {
-    fetch: {
-      method: 'GET',
-      endpoint: id => `/${ namePl }/${ id }`,
-    },
-    fetchList: {
-      method: 'GET',
-      endpoint: `/${ namePl }`,
-    },
-    save: {
-      method: 'PUT',
-      endpoint: `/${ namePl }`,
-    },
-    remove: {
-      method: 'DELETE',
-      endpoint: id => `/${ namePl }/${ id }`,
-    },
-  };
-}
-
-const defaultReducer = (state = Map()) => state;
-
-export default function generate(
-  name,
-  fromJS = r => r,
-  options = {},
-) {
-  const {
-    endpoints = {},
-    customReducer = defaultReducer,
-    idKey = `${ name }Id`,
-  } = options;
-  const namePl = `${ name }s`;
-
-  const defaultEndpoints = getDefaultEndpoints(namePl);
-
-  function getCallFn(key, arg2) {
-    let method;
-    let endpoint;
-    const e = !!endpoints && endpoints[ key ];
-    const eType = typeof e;
-    if (eType === 'string' || eType === 'function') {
-      ({ method } = defaultEndpoints[ key ]);
-      endpoint = e;
-    } else if (eType === 'object' && e !== null) { // TODO: more general
-      ({ method, endpoint } = e);
-    } else {
-      ({ method, endpoint } = defaultEndpoints[ key ]);
-    }
-
-    const methodName = method.toLowerCase();
-    const endpointString = typeof endpoint === 'function'
-      ? endpoint(arg2)
-      : endpoint;
-    const params = typeof arg2 === 'object' && arg2;
-    return client => client[ methodName ](endpointString, params);
-  }
-  /* ======================================= */
-
-  /* Action types */
-  const actionTypes = getActionTypes(name);
-  const {
-    FETCH_LIST,
-    FETCH,
-    FETCH_IN_LIST,
-    REMOVE,
-    SAVE,
-    INIT,
-    EDIT,
-  } = actionTypes;
-  /* ============ */
-
-  const updateList = getListUpdater(idKey);
-  const initialState = getInitialState(fromJS);
-
-  const reducer = (argState, action = {}) => {
-    let state = customReducer(argState, action);
-    // initialization
-    state = argState ? state : state.merge(initialState);
-
-    switch (action.type) {
-      case FETCH_LIST.SUCCESS:        
-        // TODO: use OreredMap by id & merge;
-        return state.set('list', List(action.data).map(fromJS));
-      case FETCH_IN_LIST.SUCCESS:
-        return updateList(state, fromJS(action.data));
-      case INIT:
-        return state.set('instance', fromJS(action.instance));
-      case SAVE.SUCCESS:
-        const instance = fromJS(action.data);
-        return updateList(state, instance).set('instance', instance);
-      case FETCH.SUCCESS: {        
-        const instance = fromJS(action.data);
-        return updateList(state, instance).set('instance', instance);
-      }
-      case EDIT:
-        return state.mergeIn([ 'instance' ], action.instance);
-      case REMOVE.SUCCESS:
-        return state
-          .update('list', list => list.filter(item => item[ idKey ] !== action.id))
-          .updateIn([ 'instance', idKey ], id => (id === action.id ? '' : id));
-      default:
-        return state;
-    }
-  };
-
-  const actions = {
-
-    fetch: (id, options = { thenInit: true }) => (dispatch, getState) => {
-      const itemInList = getState().getIn([ namePl, 'list' ]).find(item => item[ idKey ] === id);
-      if (!itemInList || !itemInList.isComplete()) { // name of func?
-        return dispatch({
-          types: options.thenInit ? FETCH.toArray() : FETCH_IN_LIST.toArray(),
-          call: getCallFn('fetch', id),
-        });
-      }
-      if (options.thenInit) dispatch(actions.init(itemInList));
-      return Promise.resolve();
-    },
-
-    fetchList(params) {
-      return {
-        types: FETCH_LIST.toArray(),
-        call: getCallFn('fetchList', params),
-      };
-    },
-
-    init(instance) {
-      return {
-        type: INIT,
-        instance,
-      };
-    },
-
-    edit(instance) {
-      return {
-        type: EDIT,
-        instance,
-      };
-    },
-
-    save(instance) {
-      return {
-        types: SAVE.toArray(),
-        call: getCallFn('save', instance.toData()),
-        instance,
-      };
-    },
-
-    remove(id) {
-      return {
-        types: REMOVE.toArray(),
-        call: getCallFn('remove', id),
-        id,
-      };
-    },
-
-  };
-
-  const requestDuck = requestDuckGenerator({
-    _: FETCH_LIST,
-    inListRequest: FETCH_IN_LIST,
-    fetchRequest: FETCH,
-    saveRequest: SAVE,
-    removeRequest: REMOVE,
-  }, reducer);
-
-  return {
-    actions,
-    reducer: requestDuck.reducer,
-    actionTypes,
-    initialState: initialState.merge(requestDuck.initialState),
-  };
-}
diff --git a/frontend/app/duck/tools/index.js b/frontend/app/duck/tools/index.js
deleted file mode 100644
index b93a9c026..000000000
--- a/frontend/app/duck/tools/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Map } from 'immutable';
-
-export function reduceReducers(...args) {
-  const initialState = args[ args.length - 1 ];
-  const reducers = args.slice(0, -1);
-  return (state = initialState, action) =>
-    reducers.reduce((accumState, reducer) => reducer(accumState, action), state);
-}
-
-export function reduceDucks(...ducks) {
-  const accumulatedInitialState = ducks
-    .reduce((accumState, { initialState }) => accumState.merge(initialState), Map());
-  const accumulatedReducer = (state = accumulatedInitialState, action) =>
-    ducks.reduce((accumState, { reducer }) => reducer(accumState, action), state); 
-  return {
-    initialState: accumulatedInitialState,
-    reducer: accumulatedReducer,
-  };
-}
diff --git a/frontend/app/duck/tools/requestDuck.js b/frontend/app/duck/tools/requestDuck.js
deleted file mode 100644
index fe0f7a209..000000000
--- a/frontend/app/duck/tools/requestDuck.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import { List, Map } from 'immutable';
-
-const ROOT_KEY = '_';
-const defaultReducer = (state = Map()) => state;
-const defaultInitialState = Map({
-  loading: false,
-  errors: null,
-});
-
-export class RequestTypes {
-  constructor(type) {
-    this.REQUEST = `${ type }_REQUEST`;
-    this.SUCCESS = `${ type }_SUCCESS`;
-    this.FAILURE = `${ type }_FAILURE`;
-  }
-  toArray() {
-    return [ this.REQUEST, this.SUCCESS, this.FAILURE ];
-  }
-}
-
-function simpleRequestDuck (
-  types,
-  customReducer = defaultReducer,
-) {
-  const typesArray = Array.isArray(types) ? types : [ types ];
-  const requestEvents = typesArray.map(a => a.REQUEST);
-  const successEvents = typesArray.map(a => a.SUCCESS);
-  const failureEvents = typesArray.map(a => a.FAILURE);
-
-  let loadingCounter = 0;
-
-  const reducer = (inputState, action = {}) => {
-    let state = customReducer(inputState, action);
-    state = inputState ? state : state.merge(defaultInitialState);
-
-    if (requestEvents.includes(action.type)) {
-      loadingCounter += 1;
-      return state.set('loading', loadingCounter > 0).set('errors', null);
-    }
-    if (successEvents.includes(action.type)) {
-      loadingCounter -= 1;
-      return state.set('loading', loadingCounter > 0).set('errors', null);
-    }
-    if (failureEvents.includes(action.type)) {
-      loadingCounter -= 1;
-      return state.set('loading', loadingCounter > 0).set('errors', List(action.errors));
-    }
-    return state;
-  };
-
-  return { reducer, initialState: defaultInitialState };
-};
-
-// TODO: Errors
-
-/**
- * @types: RequestTypes - array or single
- *           or object like {'state1': RequestTypes, 'state2': [RequestTypes] ... }
- * @reducer: wrapped reducer
- * */
-export default function requestDuck(
-  types,
-  customReducer = defaultReducer,
-) {
-  if (types instanceof RequestTypes || types instanceof Array) {
-    return simpleRequestDuck(types, customReducer);
-  }
-
-  const keys = Object.keys(types).filter(key => key !== ROOT_KEY);
-  const ducks = {};
-  keys.map((key) => { ducks[ key ] = simpleRequestDuck(types[ key ]); });
-
-  let initialState = Map();
-  let actualReducer = customReducer;
-  if (types[ ROOT_KEY ]) {
-    ({ initialState, reducer: actualReducer } = 
-      simpleRequestDuck(types[ ROOT_KEY ], customReducer));
-  }
-  initialState = keys.reduce(
-    (accumState, key) => accumState.set(key, ducks[ key ].initialState), 
-    initialState,
-  );
-
-  const reducer = (inputState, action = {}) => {
-    let state = actualReducer(inputState, action);
-    keys.map((key) => {
-      state = state.update(key, subState => ducks[ key ].reducer(subState, action));
-    });
-    return state;
-  };
-
-  return { reducer, initialState };
-};
diff --git a/frontend/app/duck/tools/storageDuck.js b/frontend/app/duck/tools/storageDuck.js
deleted file mode 100644
index 618b03224..000000000
--- a/frontend/app/duck/tools/storageDuck.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Map } from 'immutable';
-
-const initialState = Map({
-  storage: Map(),
-});
-
-export default function storageDuck(name, fromJS = t => t, actions = []) {
-  const idKey = `${name}Id`;
-
-  const reducer = (state = initialState, action) => {
-    if (actions.includes(action.type)) {
-      const { data } = action;
-      const updatingList = List(Array.isArray(data) ? data : [ data ]).map(fromJS);
-
-
-      return state
-        .update('storage', storage => updatingList
-          .reduce((storage, item) => storage // mergeDeep???
-            .mergeIn([ item [ idKey ] ], item), storage))
-    }
-    return state;
-  }
-
-  return { reducer, initialState };
-}
\ No newline at end of file
diff --git a/frontend/app/duck/user.js b/frontend/app/duck/user.js
deleted file mode 100644
index 695ac9bff..000000000
--- a/frontend/app/duck/user.js
+++ /dev/null
@@ -1,279 +0,0 @@
-import Account from 'Types/account';
-import Client from 'Types/client';
-import { List, Map } from 'immutable';
-
-import { deleteCookie } from 'App/utils';
-
-import withRequestState, { RequestTypes } from './requestStateCreator';
-
-export const LOGIN = new RequestTypes('user/LOGIN');
-export const SIGNUP = new RequestTypes('user/SIGNUP');
-export const RESET_PASSWORD = new RequestTypes('user/RESET_PASSWORD');
-export const REQUEST_RESET_PASSWORD = new RequestTypes(
-  'user/REQUEST_RESET_PASSWORD'
-);
-export const FETCH_ACCOUNT = new RequestTypes('user/FETCH_ACCOUNT');
-const FETCH_TENANTS = new RequestTypes('user/FETCH_TENANTS');
-const UPDATE_ACCOUNT = new RequestTypes('user/UPDATE_ACCOUNT');
-const RESEND_EMAIL_VERIFICATION = new RequestTypes(
-  'user/RESEND_EMAIL_VERIFICATION'
-);
-const FETCH_CLIENT = new RequestTypes('user/FETCH_CLIENT');
-export const UPDATE_PASSWORD = new RequestTypes('user/UPDATE_PASSWORD');
-const PUT_CLIENT = new RequestTypes('user/PUT_CLIENT');
-const RESET_ERRORS = 'user/RESET_ERRORS';
-
-const PUSH_NEW_SITE = 'user/PUSH_NEW_SITE';
-const SET_ONBOARDING = 'user/SET_ONBOARDING';
-const UPDATE_ACCOUNT_MODULE = 'user/UPDATE_ACCOUNT_MODULE';
-const UPGRADE_ACCOUNT_SCOPE = new RequestTypes('user/UPGRADE_ACCOUNT_SCOPE');
-const DOWNGRADE_ACCOUNT_SCOPE = new RequestTypes('user/DOWNGRADE_ACCOUNT_SCOPE');
-
-export const initialState = Map({
-  account: Account(),
-  siteId: null,
-  passwordRequestError: false,
-  passwordErrors: List(),
-  tenants: [],
-  authDetails: {},
-  onboarding: false,
-  sites: List(),
-  jwt: null,
-  spotJwt: null,
-  errors: List(),
-  loginRequest: {
-    loading: false,
-    errors: [],
-  },
-  scopeState: null,
-});
-
-const setClient = (state, data) => {
-  const client = Client(data);
-  return state.set('client', client);
-};
-
-export const UPDATE_JWT = 'jwt/UPDATE';
-export const DELETE = new RequestTypes('jwt/DELETE');
-
-export function setJwt(data) {
-  return {
-    type: UPDATE_JWT,
-    data,
-  };
-}
-
-export const getScope = (state) => state.getIn(['user', 'scopeState']);
-
-const reducer = (state = initialState, action = {}) => {
-  switch (action.type) {
-    case RESET_ERRORS:
-      return state.set('requestResetPassowrd', List());
-    case UPDATE_JWT:
-      return state
-        .set('jwt', action.data.jwt)
-        .set('spotJwt', action.data.spotJwt);
-    case LOGIN.REQUEST:
-      return state.set('loginRequest', { loading: true, errors: [] });
-    case LOGIN.SUCCESS:
-      return state
-        .set('account', Account({ ...action.data.data.user }))
-        .set('spotJwt', action.data.spotJwt)
-        .set('scope', action.data.data.scopeState)
-        .set('loginRequest', { loading: false, errors: [] });
-    case RESET_PASSWORD.SUCCESS:
-      return state
-        .set('account', Account({ ...action.data.user }))
-    case UPDATE_PASSWORD.REQUEST:
-    case UPDATE_PASSWORD.SUCCESS:
-      return state.set('passwordErrors', List());
-    case SIGNUP.SUCCESS:
-      return state
-        .set('account', Account(action.data.user))
-        .set('scope', action.data.scopeState)
-        .set('spotJwt', action.data.spotJwt)
-    case UPGRADE_ACCOUNT_SCOPE.SUCCESS:
-        return state
-          .set('scopeState', 2)
-    case DOWNGRADE_ACCOUNT_SCOPE.SUCCESS:
-        return state
-          .set('scopeState', 1)
-    case REQUEST_RESET_PASSWORD.SUCCESS:
-      break;
-    case UPDATE_ACCOUNT.SUCCESS:
-    case FETCH_ACCOUNT.SUCCESS:
-      return state
-        .set('account', Account(action.data))
-        .set('scopeState', action.data.scopeState)
-        .set('passwordErrors', List());
-    case FETCH_TENANTS.SUCCESS:
-      return state.set('authDetails', action.data);
-    case UPDATE_PASSWORD.FAILURE:
-      return state.set('passwordErrors', List(action.errors));
-    case LOGIN.FAILURE:
-      console.log('login failed', action);
-      deleteCookie('jwt', '/', 'openreplay.com');
-      return state.set('loginRequest', {
-        loading: false,
-        errors: action.errors,
-      });
-    case FETCH_ACCOUNT.FAILURE:
-    case DELETE.SUCCESS:
-    case DELETE.FAILURE:
-      deleteCookie('jwt', '/', 'openreplay.com');
-      return initialState;
-    case PUT_CLIENT.REQUEST:
-      return state.mergeIn(['account'], action.params);
-    case FETCH_CLIENT.SUCCESS:
-      return setClient(state, action.data);
-    case PUSH_NEW_SITE:
-      return state.updateIn(['site', 'list'], (list) =>
-        list.push(action.newSite)
-      );
-    case SET_ONBOARDING:
-      return state.set('onboarding', action.state);
-    case UPDATE_ACCOUNT_MODULE:
-      return state.updateIn(['account', 'settings', 'modules'], (modules) => {
-        if (modules.includes(action.moduleKey)) {
-          return modules.filter((module) => module !== action.moduleKey);
-        } else {
-          return modules.concat(action.moduleKey);
-        }
-      });
-  }
-  return state;
-};
-
-export default withRequestState(
-  {
-    signupRequest: SIGNUP,
-    updatePasswordRequest: UPDATE_PASSWORD,
-    requestResetPassowrd: REQUEST_RESET_PASSWORD,
-    resetPassword: RESET_PASSWORD,
-    fetchUserInfoRequest: [FETCH_ACCOUNT, FETCH_CLIENT, FETCH_TENANTS],
-    putClientRequest: PUT_CLIENT,
-    updateAccountRequest: UPDATE_ACCOUNT,
-  },
-  reducer
-);
-
-export const upgradeScope = () => ({
-  types: UPGRADE_ACCOUNT_SCOPE.toArray(),
-  call: (client) => client.post('/account/scope', { scope: 2 }),
-})
-
-export const downgradeScope = () => ({
-  types: DOWNGRADE_ACCOUNT_SCOPE.toArray(),
-  call: (client) => client.post('/account/scope', { scope: 1 }),
-})
-
-export const login = (params) => ({
-  types: LOGIN.toArray(),
-  call: (client) => client.post('/login', params),
-});
-
-export const loadingLogin = () => ({
-  type: LOGIN.REQUEST,
-});
-
-export const loginSuccess = (data) => ({
-  type: LOGIN.SUCCESS,
-  data,
-});
-
-export const loginFailure = (errors) => ({
-  type: LOGIN.FAILURE,
-  errors,
-});
-
-export const signup = (params) => (dispatch) =>
-  dispatch({
-    types: SIGNUP.toArray(),
-    call: (client) => client.post('/signup', params),
-  });
-
-export const resetPassword = (params) => (dispatch) =>
-  dispatch({
-    types: RESET_PASSWORD.toArray(),
-    call: (client) => client.post('/password/reset', params),
-  });
-
-export const requestResetPassword = (params) => (dispatch) =>
-  dispatch({
-    types: REQUEST_RESET_PASSWORD.toArray(),
-    call: (client) => client.post('/password/reset-link', params),
-  });
-
-export const updatePassword = (params) => (dispatch) =>
-  dispatch({
-    types: UPDATE_PASSWORD.toArray(),
-    call: (client) => client.post('/account/password', params),
-  });
-
-export function fetchTenants() {
-  return {
-    types: FETCH_TENANTS.toArray(),
-    call: (client) => client.get('/signup'),
-  };
-}
-
-export const fetchUserInfo = () => ({
-  types: FETCH_ACCOUNT.toArray(),
-  call: (client) => client.get('/account'),
-});
-
-export function logout() {
-  return {
-    types: DELETE.toArray(),
-    call: (client) => client.get('/logout'),
-  };
-}
-
-export function updateClient(params) {
-  return {
-    types: PUT_CLIENT.toArray(),
-    call: (client) => client.post('/account', params),
-    params,
-  };
-}
-
-export function updateAccount(params) {
-  return {
-    types: UPDATE_ACCOUNT.toArray(),
-    call: (client) => client.post('/account', params),
-  };
-}
-
-export function resendEmailVerification(email) {
-  return {
-    types: RESEND_EMAIL_VERIFICATION.toArray(),
-    call: (client) => client.post('/re-validate', { email }),
-  };
-}
-
-export function pushNewSite(newSite) {
-  return {
-    type: PUSH_NEW_SITE,
-    newSite,
-  };
-}
-
-export function setOnboarding(state = false) {
-  return {
-    type: SET_ONBOARDING,
-    state,
-  };
-}
-
-export function resetErrors() {
-  return {
-    type: RESET_ERRORS,
-  };
-}
-
-export function updateModule(moduleKey) {
-  return {
-    type: UPDATE_ACCOUNT_MODULE,
-    moduleKey,
-  };
-}
diff --git a/frontend/app/initialize.tsx b/frontend/app/initialize.tsx
index 594f9ff0a..827c6357c 100644
--- a/frontend/app/initialize.tsx
+++ b/frontend/app/initialize.tsx
@@ -2,8 +2,6 @@ import './styles/index.scss';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import './init';
-import { Provider } from 'react-redux';
-import store from './store';
 import Router from './Router';
 import { StoreProvider, RootStore } from './mstore';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -73,7 +71,6 @@ document.addEventListener('DOMContentLoaded', () => {
   // const theme = window.localStorage.getItem('theme');
   root.render(
     <ConfigProvider theme={customTheme}>
-      <Provider store={store}>
         <StoreProvider store={new RootStore()}>
           <DndProvider backend={HTML5Backend}>
             <BrowserRouter>
@@ -83,7 +80,6 @@ document.addEventListener('DOMContentLoaded', () => {
           </DndProvider>
           <MountPoint />
         </StoreProvider>
-      </Provider>
     </ConfigProvider>
   );
 });
diff --git a/frontend/app/layout/Layout.tsx b/frontend/app/layout/Layout.tsx
index ca073ff9a..49a96df2c 100644
--- a/frontend/app/layout/Layout.tsx
+++ b/frontend/app/layout/Layout.tsx
@@ -4,38 +4,19 @@ import SideMenu from 'App/layout/SideMenu';
 import TopHeader from 'App/layout/TopHeader';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
-import { fetchListActive as fetchMetadata } from 'Duck/customField';
-import { init as initSite } from 'Duck/site';
-import { connect } from 'react-redux';
-
 
 const { Sider, Content } = AntLayout;
 
 interface Props {
   children: React.ReactNode;
   hideHeader?: boolean;
-  siteId?: string;
-  fetchMetadata: (siteId: string) => void;
-  initSite: (site: any) => void;
-  sites: any[];
 }
 
 function Layout(props: Props) {
-  const { hideHeader, siteId } = props;
+  const { hideHeader } = props;
   const isPlayer = /\/(session|assist|view-spot)\//.test(window.location.pathname);
-  const { settingsStore } = useStore();
-
-  // const lastFetchedSiteIdRef = React.useRef<string | null>(null);
-  //
-  // useEffect(() => {
-  //   if (!siteId || siteId === lastFetchedSiteIdRef.current) return;
-  //
-  //   const activeSite = props.sites.find((s) => s.id == siteId);
-  //   props.initSite(activeSite);
-  //   props.fetchMetadata(siteId);
-  //
-  //   lastFetchedSiteIdRef.current = siteId;
-  // }, [siteId]);
+  const { settingsStore, projectsStore } = useStore();
+  const siteId = projectsStore.siteId;
 
   return (
     <AntLayout style={{ minHeight: '100vh' }}>
@@ -43,7 +24,7 @@ function Layout(props: Props) {
         <TopHeader />
       )}
       <AntLayout>
-        {!hideHeader && !window.location.pathname.includes('/onboarding/') && (
+        {!hideHeader && !window.location.pathname.includes('/onboarding/') ? (
           <Sider
             style={{
               position: 'sticky',
@@ -55,9 +36,9 @@ function Layout(props: Props) {
             collapsed={settingsStore.menuCollapsed}
             width={250}
           >
-            <SideMenu siteId={siteId} isCollapsed={settingsStore.menuCollapsed} />
+            <SideMenu siteId={siteId!} isCollapsed={settingsStore.menuCollapsed} />
           </Sider>
-        )}
+        ) : null}
         <Content style={{ padding: isPlayer ? '0' : '20px', minHeight: 'calc(100vh - 60px)' }}>
           {props.children}
         </Content>
@@ -66,7 +47,4 @@ function Layout(props: Props) {
   );
 }
 
-export default connect((state: any) => ({
-  siteId: state.getIn(['site', 'siteId']),
-  sites: state.getIn(['site', 'list'])
-}), { fetchMetadata, initSite })(observer(Layout));
+export default observer(Layout);
diff --git a/frontend/app/layout/SideMenu.tsx b/frontend/app/layout/SideMenu.tsx
index 8a86fda75..53d256af7 100644
--- a/frontend/app/layout/SideMenu.tsx
+++ b/frontend/app/layout/SideMenu.tsx
@@ -1,8 +1,8 @@
 import { Divider, Menu, Tag, Typography } from 'antd';
 import cn from 'classnames';
 import React from 'react';
-import { connect } from 'react-redux';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { observer } from 'mobx-react-lite';
 
 import SupportModal from 'App/layout/SupportModal';
 import * as routes from 'App/routes';
@@ -14,14 +14,12 @@ import {
   fflags,
   notes,
   sessions,
-  withSiteId,
+  withSiteId
 } from 'App/routes';
 import { MODULES } from 'Components/Client/Modules';
-import { setActiveTab } from 'Duck/search';
 import { Icon } from 'UI';
 import SVG from 'UI/SVG';
 
-import { getScope } from 'App/duck/user';
 import InitORCard from './InitORCard';
 import SpotToOpenReplayPrompt from './SpotToOpenReplayPrompt';
 import {
@@ -29,8 +27,9 @@ import {
   PREFERENCES_MENU,
   categories as main_menu,
   preferences,
-  spotOnlyCats,
+  spotOnlyCats
 } from './data';
+import { useStore } from 'App/mstore';
 
 const { Text } = Typography;
 
@@ -38,34 +37,28 @@ const TabToUrlMap = {
   all: sessions() as '/sessions',
   bookmark: bookmarks() as '/bookmarks',
   notes: notes() as '/notes',
-  flags: fflags() as '/feature-flags',
+  flags: fflags() as '/feature-flags'
 };
 
 interface Props extends RouteComponentProps {
   siteId?: string;
-  modules: string[];
-  setActiveTab: (tab: any) => void;
-  activeTab: string;
-  isEnterprise: boolean;
   isCollapsed?: boolean;
-  spotOnly?: boolean;
-  account: any;
 }
 
 function SideMenu(props: Props) {
   const {
-    activeTab,
-    siteId,
-    modules,
     location,
-    account,
-    isEnterprise,
-    isCollapsed,
-    spotOnly,
   } = props;
+
   const isPreferencesActive = location.pathname.includes('/client/');
   const [supportOpen, setSupportOpen] = React.useState(false);
+  const { searchStore, projectsStore, userStore } = useStore();
+  const spotOnly = userStore.scopeState === 1;
+  const account = userStore.account;
+  const modules = account.settings?.modules ?? [];
   const isAdmin = account.admin || account.superAdmin;
+  const isEnterprise = account.edition === 'ee';
+  const siteId = projectsStore.siteId
 
   const [isModalVisible, setIsModalVisible] = React.useState(false);
 
@@ -117,18 +110,18 @@ function SideMenu(props: Props) {
 
             const isHidden = [
               item.key === MENU.RECOMMENDATIONS &&
-                modules.includes(MODULES.RECOMMENDATIONS),
+              modules.includes(MODULES.RECOMMENDATIONS),
               item.key === MENU.FEATURE_FLAGS &&
-                modules.includes(MODULES.FEATURE_FLAGS),
+              modules.includes(MODULES.FEATURE_FLAGS),
               item.key === MENU.NOTES && modules.includes(MODULES.NOTES),
               item.key === MENU.LIVE_SESSIONS &&
-                modules.includes(MODULES.ASSIST),
+              modules.includes(MODULES.ASSIST),
               item.key === MENU.SESSIONS &&
-                modules.includes(MODULES.OFFLINE_RECORDINGS),
+              modules.includes(MODULES.OFFLINE_RECORDINGS),
               item.key === MENU.ALERTS && modules.includes(MODULES.ALERTS),
               item.key === MENU.USABILITY_TESTS && modules.includes(MODULES.USABILITY_TESTS),
               item.isAdmin && !isAdmin,
-              item.isEnterprise && !isEnterprise,
+              item.isEnterprise && !isEnterprise
             ].some((cond) => cond);
 
             return { ...item, hidden: isHidden };
@@ -139,7 +132,7 @@ function SideMenu(props: Props) {
         return {
           ...category,
           items: updatedItems,
-          hidden: allItemsHidden,
+          hidden: allItemsHidden
         };
       });
   }, [isAdmin, isEnterprise, isPreferencesActive, modules, spotOnly]);
@@ -149,8 +142,8 @@ function SideMenu(props: Props) {
     const tab = Object.keys(TabToUrlMap).find((tab: keyof typeof TabToUrlMap) =>
       currentLocation.includes(TabToUrlMap[tab])
     );
-    if (tab && tab !== activeTab) {
-      props.setActiveTab({ type: tab });
+    if (tab && tab !== searchStore.activeTab && siteId) {
+      searchStore.setActiveTab({ type: tab });
     }
   }, [location.pathname]);
 
@@ -181,7 +174,7 @@ function SideMenu(props: Props) {
     [PREFERENCES_MENU.TEAM]: () => client(CLIENT_TABS.MANAGE_USERS),
     [PREFERENCES_MENU.NOTIFICATIONS]: () => client(CLIENT_TABS.NOTIFICATIONS),
     [PREFERENCES_MENU.BILLING]: () => client(CLIENT_TABS.BILLING),
-    [PREFERENCES_MENU.MODULES]: () => client(CLIENT_TABS.MODULES),
+    [PREFERENCES_MENU.MODULES]: () => client(CLIENT_TABS.MODULES)
   };
 
   const handleClick = (item: any) => {
@@ -211,10 +204,10 @@ function SideMenu(props: Props) {
     props.history.push(path);
   };
 
-  const RenderDivider = (props: {index: number}) => {
+  const RenderDivider = (props: { index: number }) => {
     if (props.index === 0) return null;
     return <Divider style={{ margin: '6px 0' }} />;
-  }
+  };
   return (
     <>
       <Menu
@@ -284,7 +277,7 @@ function SideMenu(props: Props) {
                             style={{
                               display: 'flex',
                               justifyContent: 'space-between',
-                              alignItems: 'center',
+                              alignItems: 'center'
                             }}
                           >
                             {item.label}
@@ -315,7 +308,7 @@ function SideMenu(props: Props) {
                           <Menu.Item
                             className={cn('ml-8', {
                               'ant-menu-item-selected !bg-active-dark-blue':
-                                isMenuItemActive(child.key),
+                                isMenuItemActive(child.key)
                             })}
                             key={child.key}
                           >
@@ -369,15 +362,4 @@ function SideMenu(props: Props) {
   );
 }
 
-export default withRouter(
-  connect(
-    (state: any) => ({
-      modules: state.getIn(['user', 'account', 'settings', 'modules']) || [],
-      activeTab: state.getIn(['search', 'activeTab', 'type']),
-      isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
-      account: state.getIn(['user', 'account']),
-      spotOnly: getScope(state) === 1,
-    }),
-    { setActiveTab }
-  )(SideMenu)
-);
+export default withRouter(observer(SideMenu));
diff --git a/frontend/app/layout/SpotToOpenReplayPrompt.tsx b/frontend/app/layout/SpotToOpenReplayPrompt.tsx
index 3b7e93827..db49e49a1 100644
--- a/frontend/app/layout/SpotToOpenReplayPrompt.tsx
+++ b/frontend/app/layout/SpotToOpenReplayPrompt.tsx
@@ -1,22 +1,20 @@
 import React from 'react';
 import { Modal, Button, List, Divider } from 'antd';
 import { CircleDot, Play, TrendingUp, Radio, Sparkles, Plug, ArrowRight } from 'lucide-react';
-import { upgradeScope } from 'App/duck/user';
-import { connect } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { onboarding } from 'App/routes';
+import { useStore } from 'App/mstore';
 
 interface SpotToOpenReplayPromptProps {
   isVisible: boolean;
   onCancel: () => void;
-  upgradeScope: () => void;
 }
 
-const SpotToOpenReplayPrompt: React.FC<SpotToOpenReplayPromptProps> = ({ upgradeScope, isVisible, onCancel }: {
-  upgradeScope: () => Promise<void>;
+const SpotToOpenReplayPrompt = ({ isVisible, onCancel }: {
   isVisible: boolean;
   onCancel: () => void;
 }) => {
+  const { userStore } = useStore();
   const history = useHistory();
   const features = [
     { icon: <CircleDot />, text: 'Spot', noBorder: true },
@@ -29,7 +27,7 @@ const SpotToOpenReplayPrompt: React.FC<SpotToOpenReplayPromptProps> = ({ upgrade
   ];
 
   const onUpgrade = () => {
-    upgradeScope().then(() => {
+    userStore.upgradeScope().then(() => {
       history.push(onboarding());
       onCancel();
     })
@@ -71,4 +69,4 @@ const SpotToOpenReplayPrompt: React.FC<SpotToOpenReplayPromptProps> = ({ upgrade
   );
 };
 
-export default connect(null, { upgradeScope })(SpotToOpenReplayPrompt);
+export default SpotToOpenReplayPrompt;
diff --git a/frontend/app/layout/TopHeader.tsx b/frontend/app/layout/TopHeader.tsx
index e35323fa3..d1c8f7b18 100644
--- a/frontend/app/layout/TopHeader.tsx
+++ b/frontend/app/layout/TopHeader.tsx
@@ -1,38 +1,27 @@
-import React, { useEffect, useState } from 'react';
+import { Layout, Space, Tooltip } from 'antd';
+import { observer } from 'mobx-react-lite';
+import React, { useEffect } from 'react';
+
+import { INDEXES } from 'App/constants/zindex';
 import Logo from 'App/layout/Logo';
 import TopRight from 'App/layout/TopRight';
-import { Layout, Space, Tooltip } from 'antd';
 import { useStore } from 'App/mstore';
 import { Icon } from 'UI';
-import { observer, useObserver } from 'mobx-react-lite';
-import { INDEXES } from 'App/constants/zindex';
-import { connect } from 'react-redux';
-import { logout } from 'Duck/user';
-import { init as initSite } from 'Duck/site';
-import { fetchListActive as fetchMetadata } from 'Duck/customField';
 
 const { Header } = Layout;
 
-interface Props {
-  account: any;
-  siteId: string;
-  fetchMetadata: (siteId: string) => void;
-  initSite: (site: any) => void;
-}
-
-function TopHeader(props: Props) {
-  const { settingsStore } = useStore();
-
-  const { account, siteId } = props;
-  const { userStore, notificationStore } = useStore();
+function TopHeader() {
+  const { userStore, notificationStore, projectsStore, settingsStore } =
+    useStore();
+  const account = userStore.account;
+  const siteId = projectsStore.siteId;
   const initialDataFetched = userStore.initialDataFetched;
 
   useEffect(() => {
     if (!account.id || initialDataFetched) return;
     Promise.all([
       userStore.fetchLimits(),
-      notificationStore.fetchNotificationsCount()
-
+      notificationStore.fetchNotificationsCount(),
     ]).then(() => {
       userStore.updateKey('initialDataFetched', true);
     });
@@ -47,9 +36,9 @@ function TopHeader(props: Props) {
         padding: '0 20px',
         display: 'flex',
         alignItems: 'center',
-        height: '60px'
+        height: '60px',
       }}
-      className='justify-between'
+      className="justify-between"
     >
       <Space>
         <div
@@ -57,14 +46,24 @@ function TopHeader(props: Props) {
             settingsStore.updateMenuCollapsed(!settingsStore.menuCollapsed);
           }}
           style={{ paddingTop: '4px' }}
-          className='cursor-pointer'
+          className="cursor-pointer"
         >
-          <Tooltip title={settingsStore.menuCollapsed ? 'Show Menu' : 'Hide Menu'} mouseEnterDelay={1}>
-            <Icon name={settingsStore.menuCollapsed ? 'side_menu_closed' : 'side_menu_open'} size={20} />
+          <Tooltip
+            title={settingsStore.menuCollapsed ? 'Show Menu' : 'Hide Menu'}
+            mouseEnterDelay={1}
+          >
+            <Icon
+              name={
+                settingsStore.menuCollapsed
+                  ? 'side_menu_closed'
+                  : 'side_menu_open'
+              }
+              size={20}
+            />
           </Tooltip>
         </div>
 
-        <div className='flex items-center'>
+        <div className="flex items-center">
           <Logo siteId={siteId} />
         </div>
       </Space>
@@ -74,18 +73,4 @@ function TopHeader(props: Props) {
   );
 }
 
-const mapStateToProps = (state: any) => ({
-  account: state.getIn(['user', 'account']),
-  siteId: state.getIn(['site', 'siteId'])
-});
-
-const mapDispatchToProps = {
-  onLogoutClick: logout,
-  initSite,
-  fetchMetadata
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(observer(TopHeader));
+export default observer(TopHeader);
diff --git a/frontend/app/layout/TopRight.tsx b/frontend/app/layout/TopRight.tsx
index 2a398eddc..7234c59ca 100644
--- a/frontend/app/layout/TopRight.tsx
+++ b/frontend/app/layout/TopRight.tsx
@@ -1,7 +1,5 @@
 import { Popover, Space } from 'antd';
 import React from 'react';
-import { connect } from 'react-redux';
-
 import { getInitials } from 'App/utils';
 import Notifications from 'Components/Alerts/Notifications/Notifications';
 import HealthStatus from 'Components/Header/HealthStatus';
@@ -9,19 +7,18 @@ import UserMenu from 'Components/Header/UserMenu/UserMenu';
 
 import GettingStartedProgress from 'Shared/GettingStarted/GettingStartedProgress';
 import ProjectDropdown from 'Shared/ProjectDropdown';
-import { getScope } from "../duck/user";
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 
 interface Props {
   account: any;
-  siteId: any;
-  sites: any;
-  boardingCompletion: any;
   spotOnly?: boolean;
 }
 
 function TopRight(props: Props) {
-  const { account } = props;
-  // @ts-ignore
+  const { userStore } = useStore();
+  const spotOnly = userStore.scopeState === 1;
+  const account = userStore.account;
   return (
     <Space style={{ lineHeight: '0' }}>
       {props.spotOnly ? null : (
@@ -49,14 +46,4 @@ function TopRight(props: Props) {
   );
 }
 
-function mapStateToProps(state: any) {
-  return {
-    account: state.getIn(['user', 'account']),
-    spotOnly: getScope(state) === 1,
-    siteId: state.getIn(['site', 'siteId']),
-    sites: state.getIn(['site', 'list']),
-    boardingCompletion: state.getIn(['dashboard', 'boardingCompletion']),
-  };
-}
-
-export default connect(mapStateToProps)(TopRight);
+export default observer(TopRight);
diff --git a/frontend/app/mstore/customFieldStore.ts b/frontend/app/mstore/customFieldStore.ts
new file mode 100644
index 000000000..2b4b9a2e2
--- /dev/null
+++ b/frontend/app/mstore/customFieldStore.ts
@@ -0,0 +1,119 @@
+import { makeAutoObservable } from 'mobx';
+import { customFieldService } from 'App/services';
+
+import {
+  addElementToConditionalFiltersMap,
+  addElementToMobileConditionalFiltersMap,
+  addElementToFiltersMap,
+  addElementToFlagConditionsMap,
+  addElementToLiveFiltersMap,
+  clearMetaFilters
+} from 'Types/filter/newFilter';
+import { FilterCategory } from 'Types/filter/filterType';
+import CustomField from 'App/mstore/types/customField';
+import customFields from 'Components/Client/CustomFields';
+
+class CustomFieldStore {
+  isLoading: boolean = false;
+  isAllLoading: boolean = false;
+  isSaving: boolean = false;
+  list: CustomField[] = [];
+  allList: CustomField[] = [];
+  instance: CustomField = new CustomField();
+  sources: CustomField[] = [];
+  fetchedMetadata: boolean = false;
+  search: string = '';
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  edit = (field: Partial<CustomField>) => {
+    Object.assign(this.instance!, field);
+  };
+
+  async fetchList(siteId?: string): Promise<any> {
+    this.isLoading = true;
+    try {
+      const response = await customFieldService.get(siteId);
+      this.list = response.map((item: any) => new CustomField(item));
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  async fetchListActive(siteId?: string): Promise<any> {
+    this.isLoading = true;
+    try {
+      const response = await customFieldService.fetchList(siteId);
+      clearMetaFilters();
+      response.forEach((item: any) => {
+        addElementToFiltersMap(FilterCategory.METADATA, '_' + item.key);
+        addElementToLiveFiltersMap(FilterCategory.METADATA, '_' + item.key);
+        addElementToFlagConditionsMap(FilterCategory.METADATA, '_' + item.key);
+        addElementToConditionalFiltersMap(FilterCategory.METADATA, '_' + item.key);
+        addElementToMobileConditionalFiltersMap(FilterCategory.METADATA, '_' + item.key);
+      });
+      this.list = response.map((item_1: any) => new CustomField(item_1));
+      this.fetchedMetadata = true;
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  async fetchSources(): Promise<any> {
+    this.isLoading = true;
+    try {
+      const response = await customFieldService.get('/integration/sources');
+      this.sources = response.map(({ value, ...item }: any) => new CustomField({
+        label: value,
+        key: value,
+        ...item
+      }));
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  async save(siteId: string, instance: CustomField): Promise<any> {
+    this.isSaving = true;
+    try {
+      const wasCreating = !instance.exists();
+      const response = instance.exists() ? await customFieldService.create(siteId, instance.toData()) :
+        await customFieldService.update(siteId, instance.toData());
+      const updatedInstance = new CustomField(response);
+
+      if (wasCreating) {
+        this.list.push(updatedInstance);
+      } else {
+        const index = this.list.findIndex(item => item.index === instance.index);
+        if (index >= 0)
+          this.list[index] = updatedInstance;
+      }
+    } finally {
+      this.isSaving = false;
+    }
+  }
+
+  async remove(siteId: string, index: string): Promise<any> {
+    this.isSaving = true;
+    try {
+      await customFieldService.delete(siteId, index);
+      this.list = this.list.filter(item => item.index !== index);
+    } finally {
+      this.isSaving = false;
+    }
+  }
+
+  init(instance?: any) {
+    // this.instance = new CustomField(instance);
+    if (instance) {
+      this.instance = new CustomField().fromJson(instance);
+    } else {
+      this.instance = new CustomField();
+    }
+  }
+}
+
+
+export default CustomFieldStore;
diff --git a/frontend/app/mstore/errorStore.ts b/frontend/app/mstore/errorStore.ts
index b7aaed549..6b0ce0c9e 100644
--- a/frontend/app/mstore/errorStore.ts
+++ b/frontend/app/mstore/errorStore.ts
@@ -1,55 +1,91 @@
-import { makeAutoObservable } from "mobx"
-import { errorService } from "App/services"
-import Error from "./types/error"
+import { makeAutoObservable } from 'mobx';
+
+import apiClient from 'App/api_client';
+import { errorService, sessionService } from 'App/services';
+
+import { ErrorInfo } from './types/error';
 
 export default class ErrorStore {
-    isLoading: boolean = false
-    isSaving: boolean = false
+  instance: ErrorInfo | null = null;
+  instanceTrace: Record<string, any>[] = [];
+  stats: Record<string, any> = {};
+  sourcemapUploaded = false;
+  isLoading = false;
+  errorStates: Record<string, any> = {};
 
-    errors: any[] = []
-    instance: Error | null = null
+  constructor() {
+    makeAutoObservable(this);
+  }
 
-    constructor() {
-        makeAutoObservable(this, {
-            
-        })
+  setLoadingState(value: boolean) {
+    this.isLoading = value;
+  }
+
+  setErrorState(actionKey: string, error: any) {
+    this.errorStates[actionKey] = error;
+  }
+
+  setInstance(errorData: ErrorInfo | null) {
+    this.instance = errorData ? new ErrorInfo(errorData) : null;
+  }
+
+  setInstanceTrace(trace: any) {
+    this.instanceTrace = trace || [];
+  }
+
+  setSourcemapUploaded(value: boolean) {
+    this.sourcemapUploaded = value;
+  }
+
+  setStats(stats: any) {
+    this.stats = stats;
+  }
+
+  async fetchError(id: string) {
+    const actionKey = 'fetchError';
+    this.setLoadingState(true);
+    this.setErrorState(actionKey, null);
+
+    try {
+      const response = await errorService.fetchError(id);
+      const errorData = response.data;
+      this.setInstance(errorData);
+    } catch (error) {
+      this.setInstance(null);
+      this.setErrorState(actionKey, error);
+    } finally {
+      this.setLoadingState(false);
     }
+  }
 
-    updateKey(key: string, value: any) {
-        this[key] = value
-    }
+  async fetchErrorTrace(id: string) {
+    const actionKey = 'fetchErrorTrace';
+    this.setLoadingState(true);
+    this.setErrorState(actionKey, null);
 
-    fetchErrors(): Promise<any> {
-        this.isLoading = true
-        return new Promise((resolve, reject) => {
-            errorService.all()
-                .then(response => {
-                    const errors = response.map(e => new Error().fromJSON(e));
-                    this.errors = errors
-                    resolve(errors)
-                }).catch(error => {
-                    reject(error)
-                }).finally(() => {
-                    this.isLoading = false
-                }
-            )
-        })
+    try {
+      const response = await errorService.fetchErrorTrace(id);
+      this.setInstanceTrace(response.trace);
+      this.setSourcemapUploaded(response.sourcemapUploaded);
+    } catch (error) {
+      this.setErrorState(actionKey, error);
+    } finally {
+      this.setLoadingState(false);
     }
+  }
 
-    fetchError(errorId: string): Promise<any> {
-        this.isLoading = true
-        return new Promise((resolve, reject) => {
-            errorService.one(errorId)
-                .then(response => {
-                    const error = new Error().fromJSON(response);
-                    this.instance = error
-                    resolve(error)
-                }).catch(error => {
-                    reject(error)
-                }).finally(() => {
-                    this.isLoading = false
-                }
-            )
-        })
+  async fetchNewErrorsCount(params: any) {
+    const actionKey = 'fetchNewErrorsCount';
+    this.setLoadingState(true);
+    this.setErrorState(actionKey, null);
+
+    try {
+      const response = await errorService.fetchNewErrorsCount(params);
+      this.setStats(response.data);
+    } catch (error) {
+      this.setErrorState(actionKey, error);
+    } finally {
+      this.setLoadingState(false);
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/frontend/app/mstore/featureFlagsStore.ts b/frontend/app/mstore/featureFlagsStore.ts
index 4d3024685..29151882b 100644
--- a/frontend/app/mstore/featureFlagsStore.ts
+++ b/frontend/app/mstore/featureFlagsStore.ts
@@ -21,9 +21,9 @@ export default class FeatureFlagsStore {
   readonly pageSize: number = 10;
   client: typeof fflagsService
 
-  constructor(customClient?: typeof fflagsService) {
+  constructor() {
     makeAutoObservable(this);
-    this.client = customClient ?? fflagsService
+    this.client = fflagsService
   }
 
 
diff --git a/frontend/app/mstore/index.tsx b/frontend/app/mstore/index.tsx
index 0faf86249..e0f6c4cdb 100644
--- a/frontend/app/mstore/index.tsx
+++ b/frontend/app/mstore/index.tsx
@@ -1,36 +1,87 @@
 import React from 'react';
-import DashboardStore from './dashboardStore';
-import MetricStore from './metricStore';
-import UserStore from './userStore';
-import RoleStore from './roleStore';
+
 import APIClient from 'App/api_client';
-import FunnelStore from './funnelStore';
 import { services } from 'App/services';
-import SettingsStore from './settingsStore';
-import AuditStore from './auditStore';
-import NotificationStore from './notificationStore';
-import ErrorStore from './errorStore';
-import SessionStore from './sessionStore';
-import NotesStore from './notesStore';
-import RecordingsStore from './recordingsStore';
-import AssistMultiviewStore from './assistMultiviewStore';
-import WeeklyReportStore from './weeklyReportConfigStore';
+
+import AiFiltersStore from './aiFiltersStore';
+import AiSummaryStore from './aiSummaryStore';
 import AlertStore from './alertsStore';
+import AssistMultiviewStore from './assistMultiviewStore';
+import AuditStore from './auditStore';
+import CustomFieldStore from './customFieldStore';
+import DashboardStore from './dashboardStore';
+import ErrorStore from './errorStore';
 import FeatureFlagsStore from './featureFlagsStore';
+import FilterStore from './filterStore';
+import FunnelStore from './funnelStore';
+import { IntegrationsStore } from './integrationsStore';
+import IssueReportingStore from './issueReportingStore';
+import LoginStore from './loginStore';
+import MetricStore from './metricStore';
+import NotesStore from './notesStore';
+import NotificationStore from './notificationStore';
+import ProjectsStore from './projectsStore';
+import RecordingsStore from './recordingsStore';
+import RoleStore from './roleStore';
+import SearchStore from './searchStore';
+import SearchStoreLive from './searchStoreLive';
+import SessionStore from './sessionStore';
+import SettingsStore from './settingsStore';
+import SpotStore from './spotStore';
+import TagWatchStore from './tagWatchStore';
+import UiPlayerStore from './uiPlayerStore';
+import userStore from './userStore';
 import UxtestingStore from './uxtestingStore';
-import TagWatchStore  from './tagWatchStore';
-import AiSummaryStore from "./aiSummaryStore";
-import AiFiltersStore from "./aiFiltersStore";
-import SpotStore from "./spotStore";
-import LoginStore from "./loginStore";
-import FilterStore from "./filterStore";
+import WeeklyReportStore from './weeklyReportConfigStore';
+
+const projectStore = new ProjectsStore();
+const sessionStore = new SessionStore();
+const searchStore = new SearchStore();
+const searchStoreLive = new SearchStoreLive();
+
+function copyToClipboard(text: string) {
+  const textArea = document.createElement('textarea');
+  textArea.value = text;
+
+  textArea.style.top = '0';
+  textArea.style.left = '0';
+  textArea.style.position = 'fixed';
+
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+
+  try {
+    const successful = document.execCommand('copy');
+    const msg = successful ? 'successful' : 'unsuccessful';
+    console.log('Token copy ' + msg);
+  } catch (err) {
+    console.error('unable to copy', err);
+  }
+
+  document.body.removeChild(textArea);
+}
+
+window.getJWT = () => {
+  const jwtToken = userStore.getJwt() ?? null;
+  if (jwtToken) {
+    console.log(jwtToken);
+    copyToClipboard(jwtToken);
+  } else {
+    console.log('not logged in');
+  }
+};
+
+window.setJWT = (jwt) => {
+  userStore.updateJwt(jwt);
+};
 
 export class RootStore {
   dashboardStore: DashboardStore;
   metricStore: MetricStore;
   funnelStore: FunnelStore;
   settingsStore: SettingsStore;
-  userStore: UserStore;
+  userStore: typeof userStore;
   roleStore: RoleStore;
   auditStore: AuditStore;
   errorStore: ErrorStore;
@@ -49,18 +100,25 @@ export class RootStore {
   spotStore: SpotStore;
   loginStore: LoginStore;
   filterStore: FilterStore;
+  uiPlayerStore: UiPlayerStore;
+  issueReportingStore: IssueReportingStore;
+  customFieldStore: CustomFieldStore;
+  searchStore: SearchStore;
+  searchStoreLive: SearchStoreLive;
+  integrationsStore: IntegrationsStore;
+  projectsStore: ProjectsStore;
 
   constructor() {
     this.dashboardStore = new DashboardStore();
     this.metricStore = new MetricStore();
     this.funnelStore = new FunnelStore();
     this.settingsStore = new SettingsStore();
-    this.userStore = new UserStore();
+    this.userStore = userStore;
     this.roleStore = new RoleStore();
     this.auditStore = new AuditStore();
     this.errorStore = new ErrorStore();
     this.notificationStore = new NotificationStore();
-    this.sessionStore = new SessionStore();
+    this.sessionStore = sessionStore;
     this.notesStore = new NotesStore();
     this.recordingsStore = new RecordingsStore();
     this.assistMultiviewStore = new AssistMultiviewStore();
@@ -74,10 +132,21 @@ export class RootStore {
     this.spotStore = new SpotStore();
     this.loginStore = new LoginStore();
     this.filterStore = new FilterStore();
+    this.uiPlayerStore = new UiPlayerStore();
+    this.issueReportingStore = new IssueReportingStore();
+    this.customFieldStore = new CustomFieldStore();
+    this.projectsStore = projectStore;
+    this.searchStore = searchStore;
+    this.searchStoreLive = searchStoreLive;
+    this.integrationsStore = new IntegrationsStore();
   }
 
   initClient() {
     const client = new APIClient();
+    client.setSiteIdCheck(projectStore.getSiteId);
+    client.setJwt(userStore.getJwt());
+    client.setJwtChecker(userStore.getJwt);
+    client.setOnUpdateJwt(userStore.updateJwt);
     services.forEach((service) => {
       service.initClient(client);
     });
@@ -87,7 +156,9 @@ export class RootStore {
 const StoreContext = React.createContext<RootStore>({} as RootStore);
 
 export const StoreProvider = ({ children, store }: any) => {
-  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
+  return (
+    <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
+  );
 };
 
 export const useStore = () => React.useContext(StoreContext);
@@ -95,3 +166,5 @@ export const useStore = () => React.useContext(StoreContext);
 export const withStore = (Component: any) => (props: any) => {
   return <Component {...props} mstore={useStore()} />;
 };
+
+export { userStore, sessionStore, searchStore, searchStoreLive, projectStore };
\ No newline at end of file
diff --git a/frontend/app/mstore/integrationsStore.ts b/frontend/app/mstore/integrationsStore.ts
new file mode 100644
index 000000000..cca108a94
--- /dev/null
+++ b/frontend/app/mstore/integrationsStore.ts
@@ -0,0 +1,296 @@
+import { makeAutoObservable } from 'mobx';
+
+import { integrationsService } from 'App/services';
+import ElasticsearchForm from "../components/Client/Integrations/ElasticsearchForm";
+
+import { MessengerConfig } from './types/integrations/messengers';
+import {
+  Bugsnag,
+  Cloudwatch,
+  DatadogInt,
+  ElasticSearchInt,
+  GithubInt,
+  Integration,
+  IssueTracker,
+  JiraInt,
+  NewRelicInt,
+  RollbarInt,
+  SentryInt,
+  StackDriverInt,
+  SumoLogic,
+} from './types/integrations/services';
+
+class GenericIntegrationsStore {
+  list: any[] = [];
+  isLoading: boolean = false;
+  siteId: string = '';
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  setSiteId(siteId: string) {
+    this.siteId = siteId;
+  }
+
+  setList(list: any[]) {
+    this.list = list;
+  }
+
+  setLoading(loading: boolean) {
+    this.isLoading = loading;
+  }
+
+  fetchIntegrations = async (siteId?: string) => {
+    this.setLoading(true);
+    try {
+      const { data } = await integrationsService.fetchList(undefined, siteId);
+      this.setList(data);
+    } catch (e) {
+      console.log(e);
+    } finally {
+      this.setLoading(false);
+    }
+  };
+}
+
+class NamedIntegrationStore<T extends Integration> {
+  instance: T | null = null;
+  list: T[] = [];
+  fetched: boolean = false;
+  issuesFetched: boolean = false;
+  loading = false;
+
+  constructor(
+    private readonly name: string,
+    private readonly namedTypeCreator: (config: Record<string, any>) => T
+  ) {
+    this.instance = namedTypeCreator({});
+    makeAutoObservable(this);
+  }
+
+  setLoading(loading: boolean): void {
+    this.loading = loading;
+  }
+
+  setInstance(instance: T): void {
+    this.instance = instance;
+  }
+
+  setList = (list: T[]): void => {
+    this.list = list;
+  }
+
+  setFetched = (fetched: boolean): void => {
+    this.fetched = fetched;
+  }
+
+  setIssuesFetched = (issuesFetched: boolean): void => {
+    this.issuesFetched = issuesFetched;
+  }
+
+  fetchIntegrations = async (): Promise<void> => {
+    this.setLoading(true);
+    try {
+      const { data } = await integrationsService.fetchList(this.name);
+      if (Array.isArray(data)) {
+        this.setList(
+          data.map((config: Record<string, any>) => this.namedTypeCreator(config))
+        );
+      } else {
+        this.setList([this.namedTypeCreator(data)]);
+      }
+    } catch (e) {
+      console.log(e);
+    } finally {
+      this.setFetched(true);
+      this.setLoading(false);
+    }
+  };
+
+  fetchIntegration = async (siteId: string): Promise<void> => {
+    this.setLoading(true);
+    try {
+      const { data } = await integrationsService.fetchIntegration(
+        this.name,
+        siteId
+      );
+      this.setInstance(this.namedTypeCreator(data));
+    } catch (e) {
+      console.log(e);
+    } finally {
+      this.setLoading(false);
+    }
+  };
+
+  saveIntegration = async (name: string, siteId?: string): Promise<void> => {
+    if (!this.instance) return;
+    await integrationsService.saveIntegration(
+      this.name ?? name,
+      this.instance.toData(),
+      siteId
+    );
+    return;
+  }
+
+  edit = (data: T): void => {
+    if (!this.instance) {
+      this.instance = this.namedTypeCreator({});
+    }
+    this.instance.edit(data);
+  }
+
+  deleteIntegration = async (siteId?: string) => {
+    if (!this.instance) return;
+    return integrationsService.removeIntegration(this.name, siteId);
+  }
+
+  init = (config: Record<string, any>): void => {
+    this.instance = this.namedTypeCreator(config);
+  }
+}
+
+class MessengerIntegrationStore {
+  list: MessengerConfig[] = [];
+  instance: MessengerConfig | null = null;
+  loaded: boolean = false;
+  loading: boolean = false;
+  errors: any[] = [];
+
+  constructor(private readonly mName: 'slack' | 'msteams') {
+    makeAutoObservable(this);
+  }
+
+  setList(list: MessengerConfig[]): void {
+    this.list = list;
+  }
+
+  setLoading(loading: boolean): void {
+    this.loading = loading;
+  }
+
+  setInstance(instance: MessengerConfig): void {
+    this.instance = instance;
+  }
+
+  setLoaded(loaded: boolean): void {
+    this.loaded = loaded;
+  }
+
+  setErrors = (errors: any[]) => {
+    this.errors = errors;
+  };
+
+  saveIntegration = async (): Promise<void> => {
+    // redux todo: errors
+    if (!this.instance) return;
+    this.setLoading(true);
+    try {
+      await integrationsService.saveIntegration(
+        this.mName,
+        this.instance.toData(),
+        undefined
+      );
+      this.setList([...this.list, this.instance]);
+    } catch (e) {
+      console.log(e);
+      this.setErrors(["Couldn't process the request: check your data."]);
+    } finally {
+      this.setLoading(false);
+    }
+  };
+
+  fetchIntegrations = async (): Promise<void> => {
+    const { data } = await integrationsService.fetchMessengerChannels(
+      this.mName
+    );
+    this.setList(
+      data.map((config: Record<string, any>) => new MessengerConfig(config))
+    );
+    this.setLoaded(true);
+  };
+
+  sendMessage = ({
+    integrationId,
+    entity,
+    entityId,
+    data,
+  }: {
+    integrationId: string;
+    entity: string;
+    entityId: string;
+    data: any;
+  }) => {
+    return integrationsService.sendMsg(
+      integrationId,
+      entity,
+      entityId,
+      this.mName,
+      data
+    );
+  };
+
+  init = (config: Record<string, any>): void => {
+    this.instance = new MessengerConfig(config);
+  };
+
+  removeInt = async (intId: string) => {
+    await integrationsService.removeMessengerInt(this.mName, intId);
+    this.setList(this.list.filter((int) => int.webhookId !== intId));
+  };
+
+  edit = (data: Record<string, any>): void => {
+    if (!this.instance) {
+      this.instance = new MessengerConfig({});
+    }
+    this.instance.edit(data);
+  };
+
+  update = async () => {
+    // redux todo: errors
+    if (!this.instance) return;
+    this.setLoading(true);
+    await integrationsService.updateMessengerInt(
+      this.mName,
+      this.instance.toData()
+    );
+    this.setList(
+      this.list.map((int) =>
+        int.webhookId === this.instance?.webhookId ? this.instance : int
+      )
+    );
+    this.setLoading(false);
+  };
+}
+export type namedStore = 'sentry'
+  | 'datadog'
+  | 'stackdriver'
+  | 'rollbar'
+  | 'newrelic'
+  | 'bugsnag'
+  | 'cloudwatch'
+  | 'elasticsearch'
+  | 'sumologic'
+  | 'jira'
+  | 'github'
+  | 'issues'
+export class IntegrationsStore {
+  sentry = new NamedIntegrationStore('sentry', (d) => new SentryInt(d));
+  datadog = new NamedIntegrationStore('datadog', (d) => new DatadogInt(d));
+  stackdriver = new NamedIntegrationStore('stackdriver', (d) => new StackDriverInt(d));
+  rollbar = new NamedIntegrationStore('rollbar', (d) => new RollbarInt(d));
+  newrelic = new NamedIntegrationStore('newrelic', (d) => new NewRelicInt(d));
+  bugsnag = new NamedIntegrationStore('bugsnag', (d) => new Bugsnag(d));
+  cloudwatch = new NamedIntegrationStore('cloudwatch', (d) => new Cloudwatch(d));
+  elasticsearch = new NamedIntegrationStore('elasticsearch', (d) => new ElasticSearchInt(d));
+  sumologic = new NamedIntegrationStore('sumologic', (d) => new SumoLogic(d));
+  jira = new NamedIntegrationStore('jira', (d) => new JiraInt(d));
+  github = new NamedIntegrationStore('github', (d) => new GithubInt(d));
+  issues = new NamedIntegrationStore('issues', (d) => new IssueTracker(d));
+  integrations = new GenericIntegrationsStore();
+  slack = new MessengerIntegrationStore('slack');
+  msteams = new MessengerIntegrationStore('msteams');
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+}
diff --git a/frontend/app/mstore/issueReportingStore.ts b/frontend/app/mstore/issueReportingStore.ts
new file mode 100644
index 000000000..b104548e1
--- /dev/null
+++ b/frontend/app/mstore/issueReportingStore.ts
@@ -0,0 +1,106 @@
+import { makeAutoObservable } from 'mobx';
+import ReportedIssue from "../types/session/assignment";
+import { issueReportsService } from "App/services";
+
+export default class issueReportingStore {
+  instance: ReportedIssue
+  issueTypes: any[] = []
+  list: any[] = []
+  issueTypeIcons: {}
+  users: any[] = []
+  projects: any[] = []
+  issuesFetched = false
+  projectsFetched = false
+  projectsLoading = false
+  metaLoading = false
+  createLoading = false
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  init = (instance: any) => {
+    this.instance = new ReportedIssue(instance);
+    if (this.issueTypes.length > 0) {
+      this.instance.issueType = this.issueTypes[0].id;
+    }
+  }
+
+  editInstance = (data: any) => {
+    const inst = this.instance
+    this.instance = new ReportedIssue({ ...inst, ...data })
+  }
+
+  setList = (list: any[]) => {
+    this.list = list;
+    this.issuesFetched = true
+  }
+
+  setProjects = (projects: any[]) => {
+    this.projectsFetched = true;
+    this.projects = projects;
+  }
+
+  setMeta = (data: any) => {
+    const issueTypes = data.issueTypes || [];
+    const itIcons = {}
+    issueTypes.forEach((it: any) => {
+      itIcons[it.id] = it.iconUrl
+    })
+
+    this.issueTypes = issueTypes;
+    this.issueTypeIcons = itIcons;
+    this.users = data.users || [];
+  }
+
+  fetchProjects = async () => {
+    if (this.projectsLoading) return;
+    this.projectsLoading = true;
+    try {
+      const { data } = await issueReportsService.fetchProjects();
+      this.setProjects(data);
+      this.projectsFetched = true;
+      return data;
+    } catch (e) {
+      console.error(e)
+    } finally {
+      this.projectsLoading = false;
+    }
+  }
+
+  fetchMeta = async (projectId: number) => {
+    if (this.metaLoading) return;
+    this.metaLoading = true;
+    try {
+      const { data } = await issueReportsService.fetchMeta(projectId);
+      this.setMeta(data);
+    } catch (e) {
+      console.error(e)
+    } finally {
+      this.metaLoading = false;
+    }
+  }
+
+  saveIssue = async (sessionId: string, params: any) => {
+    if (this.createLoading) return;
+    this.createLoading = true;
+    try {
+      const data = { ...params, assignee: params.assignee, issueType: params.issueType }
+      const { data: issue } = await issueReportsService.saveIssue(sessionId, data);
+      this.init(issue)
+    } catch (e) {
+      console.error(e)
+    } finally {
+      this.createLoading = false;
+    }
+  }
+
+  fetchList = async (sessionId: string) => {
+    try {
+      const { data } = await issueReportsService.fetchIssueIntegrations(sessionId);
+      this.setList(data);
+    } catch (e) {
+      console.error(e)
+    }
+  }
+}
\ No newline at end of file
diff --git a/frontend/app/mstore/loginStore.ts b/frontend/app/mstore/loginStore.ts
index 2cae37203..eebbb6533 100644
--- a/frontend/app/mstore/loginStore.ts
+++ b/frontend/app/mstore/loginStore.ts
@@ -1,7 +1,6 @@
 import { makeAutoObservable } from 'mobx';
 import { loginService } from "../services";
-import { isTokenExpired } from "../utils";
-
+import { handleSpotJWT, isTokenExpired } from 'App/utils';
 const spotTokenKey = "___$or_spotToken$___"
 
 class LoginStore {
@@ -18,25 +17,6 @@ class LoginStore {
     }
   }
 
-  getSpotJWT = async (): Promise<string | null> => {
-    if (this.spotJwtPending) {
-      let tries = 0
-      return new Promise<string | null>((resolve) => {
-        const interval = setInterval(() => {
-          if (!this.spotJwtPending && this.spotJWT) {
-            clearInterval(interval)
-            resolve(this.spotJWT)
-          }
-          if (tries > 50) {
-            clearInterval(interval)
-            resolve(null)
-          }
-        }, 100)
-      })
-    }
-    return this.spotJWT ?? null
-  }
-
   setEmail = (email: string) => {
     this.email = email;
   }
@@ -52,6 +32,7 @@ class LoginStore {
   setSpotJWT = (spotJWT: string) => {
     this.spotJWT = spotJWT;
     localStorage.setItem(spotTokenKey, spotJWT);
+    handleSpotJWT(spotJWT);
   }
 
   spotJwtPending = false
diff --git a/frontend/app/mstore/metricStore.ts b/frontend/app/mstore/metricStore.ts
index 6119ddff5..950e79249 100644
--- a/frontend/app/mstore/metricStore.ts
+++ b/frontend/app/mstore/metricStore.ts
@@ -2,7 +2,7 @@ import { makeAutoObservable } from 'mobx';
 import Widget from './types/widget';
 import { metricService, errorService } from 'App/services';
 import { toast } from 'react-toastify';
-import Error from './types/error';
+import { ErrorInfo } from './types/error';
 import {
   TIMESERIES,
   TABLE,
@@ -318,7 +318,7 @@ export default class MetricStore {
       errorService
         .one(errorId)
         .then((error: any) => {
-          resolve(new Error().fromJSON(error));
+          resolve(new ErrorInfo(error));
         })
         .catch((error: any) => {
           toast.error('Failed to fetch error details.');
diff --git a/frontend/app/mstore/projectsStore.ts b/frontend/app/mstore/projectsStore.ts
new file mode 100644
index 000000000..961547981
--- /dev/null
+++ b/frontend/app/mstore/projectsStore.ts
@@ -0,0 +1,189 @@
+import { makeAutoObservable, runInAction } from 'mobx';
+import Project from './types/project';
+import GDPR from './types/gdpr';
+import { GLOBAL_HAS_NO_RECORDINGS, SITE_ID_STORAGE_KEY } from 'App/constants/storageKeys';
+import { projectsService } from "App/services";
+
+export default class ProjectsStore {
+  list: Project[] = [];
+  instance: Project | null = null;
+  siteId: string | null = null;
+  active: Project | null = null;
+  sitesLoading = true;
+  loading = false;
+
+  constructor() {
+    const storedSiteId = localStorage.getItem(SITE_ID_STORAGE_KEY);
+    this.siteId = storedSiteId ?? null;
+    makeAutoObservable(this);
+  }
+
+  get isMobile() {
+    return this.instance ? ['ios', 'android'].includes(this.instance.platform) : false;
+  }
+
+  getSiteId = () => {
+    return {
+      siteId: this.siteId,
+      active: this.active,
+    };
+  }
+
+  initProject = (project: Partial<Project>) => {
+    this.instance = new Project(project);
+  }
+
+  setSitesLoading = (loading: boolean) => {
+    this.sitesLoading = loading;
+  }
+
+  setLoading = (loading: boolean) => {
+    this.loading = loading;
+  }
+
+  setSiteId = (siteId: string) => {
+    localStorage.setItem(SITE_ID_STORAGE_KEY, siteId.toString());
+    this.siteId = siteId;
+    this.active = this.list.find((site) => site.id! === siteId) ?? null;
+  }
+
+  editGDPR = (gdprData: Partial<GDPR>) => {
+    if (this.instance) {
+      this.instance.gdpr.edit(gdprData);
+    }
+  }
+
+  editInstance = (instance: Partial<Project>) => {
+    if (!this.instance) return;
+    this.instance.edit(instance);
+  }
+
+  fetchGDPR = async (siteId: string) => {
+    try {
+      const response = await projectsService.fetchGDPR(siteId)
+      runInAction(() => {
+        if (this.instance) {
+          Object.assign(this.instance.gdpr, response.data);
+        }
+      });
+    } catch (error) {
+      console.error('Failed to fetch GDPR:', error);
+    }
+  }
+
+  saveGDPR = async (siteId: string) => {
+    if (!this.instance) return;
+    try {
+      const gdprData = this.instance.gdpr.toData();
+      const response = await projectsService.saveGDPR(siteId, gdprData);
+      this.editGDPR(response.data);
+    } catch (error) {
+      console.error('Failed to save GDPR:', error);
+    }
+  }
+
+  fetchList = async (siteIdFromPath?: string) => {
+    this.setSitesLoading(true);
+    try {
+      const response = await projectsService.fetchList();
+      runInAction(() => {
+        this.list = response.data.map((data) => new Project(data));
+        const siteIds = this.list.map(site => site.id);
+        let siteId = this.siteId;
+        const siteExists = siteId ? siteIds.includes(siteId) : false;
+
+        if (siteIdFromPath && siteIds.includes(siteIdFromPath)) {
+          siteId = siteIdFromPath;
+        } else if (!siteId || !siteExists) {
+          siteId = siteIds.includes(this.siteId)
+            ? this.siteId
+            : response.data[0].projectId;
+        }
+
+        const hasRecordings = this.list.some(site => site.recorded);
+        if (!hasRecordings) {
+          localStorage.setItem(GLOBAL_HAS_NO_RECORDINGS, 'true');
+        } else {
+          localStorage.removeItem(GLOBAL_HAS_NO_RECORDINGS);
+        }
+        if (siteId) {
+          this.setSiteId(siteId);
+        }
+      });
+    } catch (error) {
+      console.error('Failed to fetch site list:', error);
+    } finally {
+      this.setSitesLoading(false);
+    }
+  }
+
+  save = async (projectData: Partial<Project>) => {
+    this.setLoading(true);
+    try {
+      const response = await projectsService.saveProject(projectData);
+      runInAction(() => {
+        const newSite = new Project(response.data);
+        const index = this.list.findIndex(site => site.id === newSite.id);
+        if (index !== -1) {
+          this.list[index] = newSite;
+        } else {
+          this.list.push(newSite);
+        }
+        this.setSiteId(newSite.id);
+        this.active = newSite;
+      });
+    } catch (error) {
+      console.error('Failed to save site:', error);
+    } finally {
+      this.setLoading(false);
+    }
+  }
+
+  updateProjectRecordingStatus = (siteId: string, status: boolean) => {
+    const site = this.list.find(site => site.id === siteId);
+    if (site) {
+      site.recorded = status;
+      const hasRecordings = this.list.some(site => site.recorded);
+      if (!hasRecordings) {
+        localStorage.setItem(GLOBAL_HAS_NO_RECORDINGS, 'true');
+      } else {
+        localStorage.removeItem(GLOBAL_HAS_NO_RECORDINGS);
+      }
+    }
+  }
+
+  removeProject = async (projectId: string) => {
+    this.setLoading(true);
+    try {
+      await projectsService.removeProject(projectId);
+      runInAction(() => {
+        this.list = this.list.filter(site => site.id !== projectId);
+        if (this.siteId === projectId) {
+          this.setSiteId(this.list[0].id!);
+        }
+      })
+    } catch (e) {
+      console.error('Failed to remove project:', e);
+    } finally {
+      this.setLoading(false);
+    }
+  }
+
+  updateProject = async (projectId: string, projectData: Partial<Project>) => {
+    this.setLoading(true);
+    try {
+      const response = await projectsService.updateProject(projectId, projectData);
+      runInAction(() => {
+        const updatedSite = new Project(response.data);
+        const index = this.list.findIndex(site => site.id === updatedSite.id);
+        if (index !== -1) {
+          this.list[index] = updatedSite;
+        }
+      });
+    } catch (error) {
+      console.error('Failed to update site:', error);
+    } finally {
+      this.setLoading
+    }
+  }
+}
diff --git a/frontend/app/mstore/roleStore.ts b/frontend/app/mstore/roleStore.ts
index 45c8b65d0..3631105ef 100644
--- a/frontend/app/mstore/roleStore.ts
+++ b/frontend/app/mstore/roleStore.ts
@@ -1,31 +1,109 @@
-import { makeAutoObservable, observable } from "mobx"
-import { userService } from "App/services";
-import Role, { IRole } from "./types/role";
+import { makeAutoObservable } from 'mobx';
+
+import { userService } from 'App/services';
+
+import Role from './types/role';
+
+const permissions = [
+  { text: 'Session Replay', value: 'SESSION_REPLAY' },
+  { text: 'Developer Tools', value: 'DEV_TOOLS' },
+  { text: 'Dashboard', value: 'METRICS' },
+  { text: 'Assist (Live)', value: 'ASSIST_LIVE' },
+  { text: 'Assist (Call)', value: 'ASSIST_CALL' },
+  { text: 'Feature Flags', value: 'FEATURE_FLAGS' },
+  { text: 'Spots', value: "SPOT" },
+  { text: 'Change Spot Visibility', value: 'SPOT_PUBLIC' }
+]
 
 export default class UserStore {
-    list: IRole[] = [];
-    loading: boolean = false;
+  list: Role[] = [];
+  loading: boolean = false;
+  permissions = permissions;
+  instance = new Role();
 
-    constructor() {
-        makeAutoObservable(this, {
-            list: observable,
-            loading: observable,
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  toggleLoading = (val: boolean) => {
+    this.loading = val;
+  }
+
+  setRoles = (roles: Role[]) => {
+    this.list = roles;
+  }
+
+  init = (role?: any) => {
+    if (role) {
+      this.instance = new Role().fromJson(role);
+    } else {
+      this.instance = new Role();
+    }
+  }
+
+  editRole = (role: Partial<Role>) => {
+    Object.assign(this.instance, role)
+  }
+
+  saveRole = async (role: Role): Promise<void> => {
+    if (role.roleId) {
+      return this.modifyRole(role);
+    } else {
+      return this.createRole(role);
+    }
+  }
+
+  deleteRole = async (role: Role): Promise<void> => {
+    this.toggleLoading(true)
+    try {
+      const { data } = await userService.deleteRole(role.roleId);
+      this.setRoles(data.map((role: any) => new Role().fromJson(role)));
+    } catch (e) {
+      console.error(e)
+    } finally {
+      this.toggleLoading(false)
+    }
+  }
+
+  createRole = async (role: Role): Promise<void> => {
+    this.toggleLoading(true)
+    try {
+      const { data } = await userService.createRole(role);
+      this.setRoles([...this.list, new Role().fromJson(data)]);
+    } catch (e) {
+      console.error(e)
+    } finally {
+      this.toggleLoading(false)
+    }
+  }
+
+  modifyRole = async (role: Role): Promise<void> => {
+    this.toggleLoading(true)
+    try {
+      const { data } = await userService.modifyRole(role);
+      this.setRoles(this.list.map((r) => r.roleId === data.roleId ? new Role().fromJson(data) : r));
+    } catch (e) {
+      console.error(e)
+    } finally {
+      this.toggleLoading(false)
+    }
+  }
+
+  fetchRoles = (): Promise<any> => {
+    this.toggleLoading(true)
+    return new Promise((resolve, reject) => {
+      userService
+        .getRoles()
+        .then((response) => {
+          this.setRoles(response.map((role: any) => new Role().fromJson(role)))
+          resolve(response);
         })
-    }
-
-    fetchRoles(): Promise<any> {
-        this.loading = true;
-        return new Promise((resolve, reject) => {
-            userService.getRoles()
-                .then(response => {
-                    this.list = response.map((role: any) => new Role().fromJson(role));
-                    resolve(response);
-                }).catch(error => {
-                    this.loading = false;
-                    reject(error);
-                }).finally(() => {
-                    this.loading = false;
-                });
+        .catch((error) => {
+          reject(error);
+        })
+        .finally(() => {
+          this.toggleLoading(false)
         });
-    }
-}
\ No newline at end of file
+    });
+  }
+}
diff --git a/frontend/app/mstore/searchStore.ts b/frontend/app/mstore/searchStore.ts
new file mode 100644
index 000000000..310e64cdd
--- /dev/null
+++ b/frontend/app/mstore/searchStore.ts
@@ -0,0 +1,287 @@
+import Period, { CUSTOM_RANGE } from 'Types/app/period';
+import { FilterCategory, FilterKey } from 'Types/filter/filterType';
+import {
+  conditionalFiltersMap,
+  filtersMap,
+  generateFilterOptions,
+  liveFiltersMap,
+  mobileConditionalFiltersMap
+} from 'Types/filter/newFilter';
+import { List } from 'immutable';
+import { makeAutoObservable, action, observable } from 'mobx';
+import { searchService } from 'App/services';
+import Search from 'App/mstore/types/search';
+import Filter, { checkFilterValue, IFilter } from 'App/mstore/types/filter';
+import FilterItem from 'App/mstore/types/filterItem';
+import { sessionStore } from 'App/mstore';
+import SavedSearch, { ISavedSearch } from 'App/mstore/types/savedSearch';
+
+const PER_PAGE = 10;
+
+export const checkValues = (key: any, value: any) => {
+  if (key === FilterKey.DURATION) {
+    return value[0] === '' || value[0] === null ? [0, value[1]] : value;
+  }
+  return value.filter((i: any) => i !== '' && i !== null);
+};
+
+export const filterMap = ({
+                            category,
+                            value,
+                            key,
+                            operator,
+                            sourceOperator,
+                            source,
+                            custom,
+                            isEvent,
+                            filters,
+                            sort,
+                            order
+                          }: any) => ({
+  value: checkValues(key, value),
+  custom,
+  type: category === FilterCategory.METADATA ? FilterKey.METADATA : key,
+  operator,
+  source: category === FilterCategory.METADATA ? key.replace(/^_/, '') : source,
+  sourceOperator,
+  isEvent,
+  filters: filters ? filters.map(filterMap) : []
+});
+
+class SearchStore {
+  filterList = generateFilterOptions(filtersMap);
+  filterListLive = generateFilterOptions(liveFiltersMap);
+  filterListConditional = generateFilterOptions(conditionalFiltersMap);
+  filterListMobileConditional = generateFilterOptions(mobileConditionalFiltersMap);
+  list = List();
+  latestRequestTime: number | null = null;
+  latestList = List();
+  alertMetricId: number | null = null;
+  instance = new Search();
+  savedSearch: ISavedSearch = new SavedSearch();
+  filterSearchList: any = {};
+  currentPage = 1;
+  pageSize = PER_PAGE;
+  activeTab = { name: 'All', type: 'all' };
+  scrollY = 0;
+  sessions = List();
+  total: number = 0;
+  loadingFilterSearch = false;
+  isSaving: boolean = false;
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  applySavedSearch(savedSearch: ISavedSearch) {
+    this.savedSearch = savedSearch;
+    // this.instance = new Search({
+    //   filters: savedSearch.filter.filters
+    // });
+    console.log('savedSearch.filter.filters', savedSearch.filter.filters);
+    this.edit({ filters: savedSearch.filter ? savedSearch.filter.filters.map((i: FilterItem) => new FilterItem().fromJson(i)) : []});
+    // this.edit({ filters: savedSearch.filter ? savedSearch.filter.filters : [] });
+    this.currentPage = 1;
+  }
+
+  async fetchSavedSearchList() {
+    const response = await searchService.fetchSavedSearch();
+    this.list = List(response.map((item: any) => new SavedSearch(item)));
+  }
+
+  edit(instance: Partial<Search>) {
+    this.instance = new Search(Object.assign(this.instance.toData(), instance));
+    this.currentPage = 1;
+  }
+
+  editSavedSearch(instance: Partial<SavedSearch>) {
+    this.savedSearch = new SavedSearch(Object.assign(this.savedSearch.toData(), instance));
+  }
+
+  apply(filter: any, fromUrl: boolean) {
+    if (fromUrl) {
+      this.instance = new Search(filter);
+      this.currentPage = 1;
+    } else {
+      this.instance = { ...this.instance, ...filter };
+    }
+  }
+
+  applyFilter(filter: any, force = false) {
+    this.apply(filter, false);
+  }
+
+  fetchFilterSearch(params: any) {
+    this.loadingFilterSearch = true;
+    searchService.fetchFilterSearch(params).then((response: any) => {
+      this.filterSearchList = response.reduce((acc: any, item: any) => {
+        const { projectId, type, value } = item;
+        const key = type;
+        if (!acc[key]) acc[key] = [];
+        acc[key].push({ projectId, value });
+        return acc;
+      }, {}).finally(() => {
+        this.loadingFilterSearch = false;
+      });
+    });
+  }
+
+  updateCurrentPage(page: number) {
+    this.currentPage = page;
+    void this.fetchSessions();
+  }
+
+  setActiveTab(tab: any) {
+    this.activeTab = tab;
+    this.currentPage = 1;
+    // this.fetchSessions();
+  }
+
+  async removeSavedSearch(id: string): Promise<void> {
+    await searchService.deleteSavedSearch(id);
+    this.savedSearch = new SavedSearch({});
+    await this.fetchSavedSearchList();
+  }
+
+  async save(id?: string | null, rename = false): Promise<void> {
+    const filter = this.instance.toData();
+    const isNew = !id;
+    const instance = this.savedSearch.toData();
+    const newInstance = rename ? instance : { ...instance, filter };
+    newInstance.filter.filters = newInstance.filter.filters.map(filterMap);
+
+    await searchService.saveSavedSearch(newInstance, id);
+    await this.fetchSavedSearchList();
+
+    if (isNew) {
+      const lastSavedSearch = this.list.last();
+      this.applySavedSearch(lastSavedSearch);
+    }
+  }
+
+  clearList() {
+    this.list = List();
+  }
+
+  clearSearch() {
+    const instance = this.instance;
+    this.edit(new Search({
+      rangeValue: instance.rangeValue,
+      startDate: instance.startDate,
+      endDate: instance.endDate,
+      filters: []
+    }));
+
+    this.savedSearch = new SavedSearch({});
+    sessionStore.clearList();
+  }
+
+  checkForLatestSessions() {
+    const filter = this.instance.toData();
+    if (this.latestRequestTime) {
+      const period = Period({ rangeName: CUSTOM_RANGE, start: this.latestRequestTime, end: Date.now() });
+      const newTimestamps: any = period.toJSON();
+      filter.startTimestamp = newTimestamps.startDate;
+      filter.endTimestamp = newTimestamps.endDate;
+    }
+    searchService.checkLatestSessions(filter).then((response: any) => {
+      this.latestList = response;
+      this.latestRequestTime = Date.now();
+    });
+  }
+
+  addFilter(filter: any) {
+    const index = this.instance.filters.findIndex((i: FilterItem) => i.key === filter.key);
+
+    filter.value = checkFilterValue(filter.value);
+    filter.filters = filter.filters
+      ? filter.filters.map((subFilter: any) => ({
+        ...subFilter,
+        value: checkFilterValue(subFilter.value)
+      }))
+      : null;
+
+    if (index > -1) {
+      const oldFilter = this.instance.filters[index];
+      const updatedFilter = {
+        ...oldFilter,
+        value: oldFilter.value.concat(filter.value)
+      };
+      oldFilter.merge(updatedFilter);
+    } else {
+      this.instance.filters.push(filter);
+      this.instance = new Search({
+        ...this.instance.toData()
+      });
+    }
+
+    if (filter.value && filter.value[0] && filter.value[0] !== '') {
+      this.fetchSessions();
+    }
+  }
+
+  addFilterByKeyAndValue(key: any, value: any, operator?: string, sourceOperator?: string, source?: string) {
+    let defaultFilter = { ...filtersMap[key] };
+    defaultFilter.value = value;
+
+    if (operator) {
+      defaultFilter.operator = operator;
+    }
+    if (defaultFilter.hasSource && source && sourceOperator) {
+      defaultFilter.sourceOperator = sourceOperator;
+      defaultFilter.source = source;
+    }
+
+    this.addFilter(defaultFilter);
+  }
+
+  refreshFilterOptions() {
+    // TODO
+  }
+
+  updateFilter = (index: number, search: Partial<IFilter>) => {
+    const newFilters = this.instance.filters.map((_filter: any, i: any) => {
+      if (i === index) {
+        return search;
+      } else {
+        return _filter;
+      }
+    });
+
+    this.instance = new Search({
+      ...this.instance.toData(),
+      filters: newFilters
+    });
+  };
+
+  removeFilter = (index: number) => {
+    const newFilters = this.instance.filters.filter((_filter: any, i: any) => {
+      return i !== index;
+    });
+
+    this.instance = new Search({
+      ...this.instance.toData(),
+      filters: newFilters
+    });
+  };
+
+  setScrollPosition = (y: number) => {
+    this.scrollY = y;
+  };
+
+  async fetchAutoplaySessions(page: number): Promise<void> {
+    // TODO
+  }
+
+  async fetchSessions(force: boolean = false): Promise<void> {
+    await sessionStore.fetchSessions({
+      ...this.instance.toSearch(),
+      page: this.currentPage,
+      perPage: this.pageSize,
+      tab: this.activeTab.type,
+      bookmarked: this.activeTab.type === 'bookmark' ? true : undefined
+    }, force);
+  };
+}
+
+export default SearchStore;
diff --git a/frontend/app/mstore/searchStoreLive.ts b/frontend/app/mstore/searchStoreLive.ts
new file mode 100644
index 000000000..880dc99f3
--- /dev/null
+++ b/frontend/app/mstore/searchStoreLive.ts
@@ -0,0 +1,199 @@
+import { FilterCategory, FilterKey } from 'Types/filter/filterType';
+import {
+  conditionalFiltersMap,
+  filtersMap,
+  generateFilterOptions,
+  liveFiltersMap,
+  mobileConditionalFiltersMap
+} from 'Types/filter/newFilter';
+import { List } from 'immutable';
+import { makeAutoObservable } from 'mobx';
+import Search from 'App/mstore/types/search';
+import { checkFilterValue, IFilter } from 'App/mstore/types/filter';
+import FilterItem from 'App/mstore/types/filterItem';
+import { sessionStore } from 'App/mstore';
+import { searchService } from 'App/services';
+
+const PER_PAGE = 10;
+
+export const checkValues = (key: any, value: any) => {
+  if (key === FilterKey.DURATION) {
+    return value[0] === '' || value[0] === null ? [0, value[1]] : value;
+  }
+  return value.filter((i: any) => i !== '' && i !== null);
+};
+
+export const filterMap = ({
+                            category,
+                            value,
+                            key,
+                            operator,
+                            sourceOperator,
+                            source,
+                            custom,
+                            isEvent,
+                            filters,
+                            sort,
+                            order
+                          }: any) => ({
+  value: checkValues(key, value),
+  custom,
+  type: category === FilterCategory.METADATA ? FilterKey.METADATA : key,
+  operator,
+  source: category === FilterCategory.METADATA ? key.replace(/^_/, '') : source,
+  sourceOperator,
+  isEvent,
+  filters: filters ? filters.map(filterMap) : []
+});
+
+class SearchStoreLive {
+  filterList = generateFilterOptions(filtersMap);
+  filterListLive = generateFilterOptions(liveFiltersMap);
+  filterListConditional = generateFilterOptions(conditionalFiltersMap);
+  filterListMobileConditional = generateFilterOptions(mobileConditionalFiltersMap);
+  list = List();
+  latestRequestTime: number | null = null;
+  latestList = List();
+  alertMetricId: number | null = null;
+  instance = new Search();
+  instanceLive = new Search();
+  savedSearch = new Search();
+  filterSearchList: any = {};
+  currentPage = 1;
+  pageSize = PER_PAGE;
+  activeTab = { name: 'All', type: 'all' };
+  scrollY = 0;
+  sessions = List();
+  total: number = 0;
+  loadingFilterSearch = false;
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  fetchFilterSearch(params: any) {
+    this.loadingFilterSearch = true;
+    searchService.fetchFilterSearch(params).then((response: any) => {
+      this.filterSearchList = response.reduce((acc: any, item: any) => {
+        const { projectId, type, value } = item;
+        const key = type;
+        if (!acc[key]) acc[key] = [];
+        acc[key].push({ projectId, value });
+        return acc;
+      }, {}).finally(() => {
+        this.loadingFilterSearch = false;
+      });
+    });
+  }
+
+  edit(instance: Partial<Search>) {
+    this.instance = new Search(Object.assign(this.instance.toData(), instance));
+    this.currentPage = 1;
+  }
+
+
+  apply(filter: any, fromUrl: boolean) {
+    if (fromUrl) {
+      this.instance = new Search(filter);
+      this.currentPage = 1;
+    } else {
+      this.instance = { ...this.instance, ...filter };
+    }
+  }
+
+  applyFilter(filter: any, force = false) {
+    this.apply(filter, false);
+  }
+
+  updateCurrentPage(page: number) {
+    this.currentPage = page;
+    this.fetchSessions();
+  }
+
+  clearSearch() {
+    const instance = this.instance;
+    this.edit(new Search({
+      rangeValue: instance.rangeValue,
+      startDate: instance.startDate,
+      endDate: instance.endDate,
+      filters: []
+    }));
+  }
+
+  addFilter(filter: any) {
+    const index = this.instance.filters.findIndex((i: FilterItem) => i.key === filter.key);
+
+    filter.value = checkFilterValue(filter.value);
+    filter.filters = filter.filters
+      ? filter.filters.map((subFilter: any) => ({
+        ...subFilter,
+        value: checkFilterValue(subFilter.value)
+      }))
+      : null;
+
+    if (index > -1) {
+      const oldFilter = this.instance.filters[index];
+      const updatedFilter = {
+        ...oldFilter,
+        value: oldFilter.value.concat(filter.value)
+      };
+      oldFilter.merge(updatedFilter);
+    } else {
+      this.instance.filters.push(filter);
+      this.instance = new Search({
+        ...this.instance.toData()
+      });
+    }
+
+    if (filter.value && filter.value[0] && filter.value[0] !== '') {
+      this.fetchSessions();
+    }
+  }
+
+  addFilterByKeyAndValue(key: any, value: any, operator?: string, sourceOperator?: string, source?: string) {
+    let defaultFilter = { ...filtersMap[key] };
+    defaultFilter.value = value;
+
+    if (operator) {
+      defaultFilter.operator = operator;
+    }
+    if (defaultFilter.hasSource && source && sourceOperator) {
+      defaultFilter.sourceOperator = sourceOperator;
+      defaultFilter.source = source;
+    }
+
+    this.addFilter(defaultFilter);
+  }
+
+  updateFilter = (index: number, search: Partial<IFilter>) => {
+    const newFilters = this.instance.filters.map((_filter: any, i: any) => {
+      if (i === index) {
+        return search;
+      } else {
+        return _filter;
+      }
+    });
+
+    this.instance = new Search({
+      ...this.instance.toData(),
+      filters: newFilters
+    });
+  };
+
+  removeFilter = (index: number) => {
+    const newFilters = this.instance.filters.filter((_filter: any, i: any) => {
+      return i !== index;
+    });
+
+    this.instance = new Search({
+      ...this.instance.toData(),
+      filters: newFilters
+    });
+  };
+
+  async fetchSessions() {
+    await sessionStore.fetchLiveSessions(this.instance.toSearch());
+  };
+}
+
+export default SearchStoreLive;
diff --git a/frontend/app/mstore/sessionStore.ts b/frontend/app/mstore/sessionStore.ts
index 6d2ac4e1b..64520085a 100644
--- a/frontend/app/mstore/sessionStore.ts
+++ b/frontend/app/mstore/sessionStore.ts
@@ -1,14 +1,9 @@
-import Record, { LAST_7_DAYS } from 'Types/app/period';
+import { action, makeAutoObservable, observable, runInAction } from 'mobx';
+import { sessionService } from 'App/services';
+import { Note } from 'App/services/NotesService';
 import Session from 'Types/session';
 import ErrorStack from 'Types/session/errorStack';
 import { InjectedEvent, Location } from 'Types/session/event';
-import Watchdog from 'Types/watchdog';
-import { action, makeAutoObservable, observable } from 'mobx';
-
-import { getDateRangeFromValue } from 'App/dateRange';
-import { sessionService } from 'App/services';
-import { Note } from 'App/services/NotesService';
-import store from 'App/store';
 import {
   cleanSessionFilters,
   compareJsonObjects,
@@ -16,9 +11,20 @@ import {
   getSessionFilter,
   setSessionFilter,
 } from 'App/utils';
-import { filterMap } from 'Duck/search';
+import { loadFile } from 'App/player/web/network/loadFiles';
+import { LAST_7_DAYS } from 'Types/app/period';
+import { filterMap } from 'App/mstore/searchStore';
+import { clean as cleanParams } from "../api_client";
+import { searchStore, searchStoreLive } from "./index";
+import { getDateRangeFromValue } from 'App/dateRange';
+const range = getDateRangeFromValue(LAST_7_DAYS);
 
-import { loadFile } from '../player/web/network/loadFiles';
+const defaultDateFilters = {
+  url: '',
+  rangeValue: LAST_7_DAYS,
+  startDate: range.start?.toMillis(),
+  endDate: range.end?.toMillis(),
+};
 
 class UserFilter {
   endDate: number = new Date().getTime();
@@ -27,33 +33,24 @@ class UserFilter {
   filters: any = [];
   page: number = 1;
   limit: number = 10;
-  period: any = Record({ rangeName: LAST_7_DAYS });
-
+  period: any = { rangeName: LAST_7_DAYS };
   constructor() {
-    makeAutoObservable(this, {
-      page: observable,
-      update: action,
-    });
+    makeAutoObservable(this);
   }
-
   update(key: string, value: any) {
     // @ts-ignore
     this[key] = value;
-
     if (key === 'period') {
       this.startDate = this.period.start;
       this.endDate = this.period.end;
     }
   }
-
   setFilters(filters: any[]) {
     this.filters = filters;
   }
-
   setPage(page: number) {
     this.page = page;
   }
-
   toJson() {
     return {
       endDate: this.period.end,
@@ -97,43 +94,31 @@ class DevTools {
   }
 }
 
-const range = getDateRangeFromValue(LAST_7_DAYS);
-const defaultDateFilters = {
-  url: '',
-  rangeValue: LAST_7_DAYS,
-  startDate: range.start.ts,
-  endDate: range.end.ts,
-};
+
 
 export default class SessionStore {
   userFilter: UserFilter = new UserFilter();
   devTools: DevTools = new DevTools();
-
   list: Session[] = [];
   sessionIds: string[] = [];
   current = new Session();
   total = 0;
-  keyMap = {};
-  wdTypeCount = {};
+  totalLiveSessions = 0;
   favoriteList: Session[] = [];
-  activeTab = Watchdog({ name: 'All', type: 'all' });
+  activeTab = { name: 'All', type: 'all' }
   timezone = 'local';
   errorStack: ErrorStack[] = [];
-  eventsIndex = [];
+  eventsIndex: number[] = [];
   sourcemapUploaded = true;
   filteredEvents: InjectedEvent[] | null = null;
   eventsQuery = '';
-  showChatWindow = false;
   liveSessions: Session[] = [];
-  visitedEvents = [];
+  visitedEvents: Location[] = [];
   insights: any[] = [];
-  insightFilters = defaultDateFilters;
+  insightsFilters = defaultDateFilters;
   host = '';
-  funnelPage = {};
-  /** @Deprecated */
-  timelinePointer = {};
-  sessionPath = {};
-  lastPlayedSessionId: string;
+  sessionPath: Record<string, any> = {};
+  lastPlayedSessionId: string = '';
   timeLineTooltip = {
     time: 0,
     offset: 0,
@@ -145,67 +130,57 @@ export default class SessionStore {
   previousId = '';
   nextId = '';
   userTimezone = '';
-  prefetchedMobUrls: Record<string, { data: Uint8Array; entryNum: number }> =
-    {};
+  prefetchedMobUrls: Record<string, { data: Uint8Array; entryNum: number }> = {};
+  prefetched: boolean = false;
+  fetchFailed: boolean = false;
+  loadingLiveSessions: boolean = false;
+  loadingSessions: boolean = false;
+  loadingSessionData: boolean = false;
 
   constructor() {
-    makeAutoObservable(this, {
-      userFilter: observable,
-      devTools: observable,
-    });
+    makeAutoObservable(this);
   }
 
-  setUserTimezone(timezone: string) {
+  setUserTimezone = (timezone: string) => {
     this.userTimezone = timezone;
   }
 
-  resetUserFilter() {
+  resetUserFilter = () => {
     this.userFilter = new UserFilter();
   }
 
-  async getFirstMob(sessionId: string) {
+  getFirstMob = async (sessionId: string) => {
     const { domURL } = await sessionService.getFirstMobUrl(sessionId);
-    await loadFile(domURL[0], (data) =>
-      this.setPrefetchedMobUrl(sessionId, data)
-    );
+    await loadFile(domURL[0], (data) => this.setPrefetchedMobUrl(sessionId, data));
   }
 
-  setPrefetchedMobUrl(sessionId: string, fileData: Uint8Array) {
+  setPrefetchedMobUrl = (sessionId: string, fileData: Uint8Array) => {
     const keys = Object.keys(this.prefetchedMobUrls);
     const toLimit = 10 - keys.length;
     if (toLimit < 0) {
       const oldest = keys.sort(
         (a, b) =>
-          this.prefetchedMobUrls[a].entryNum -
-          this.prefetchedMobUrls[b].entryNum
+          this.prefetchedMobUrls[a].entryNum - this.prefetchedMobUrls[b].entryNum
       )[0];
       delete this.prefetchedMobUrls[oldest];
     }
     const nextEntryNum =
       keys.length > 0
-        ? Math.max(
-            ...keys.map((key) =>
-              this.prefetchedMobUrls[key]
-                ? this.prefetchedMobUrls[key].entryNum
-                : 0
-            )
-          ) + 1
-        : 0;
+      ? Math.max(...keys.map((key) => this.prefetchedMobUrls[key].entryNum || 0)) + 1
+      : 0;
     this.prefetchedMobUrls[sessionId] = {
       data: fileData,
       entryNum: nextEntryNum,
     };
   }
 
-  getSessions(filter: any): Promise<any> {
+  getSessions = (filter: any): Promise<any> => {
     return new Promise((resolve, reject) => {
       sessionService
         .getSessions(filter.toJson?.() || filter)
         .then((response: any) => {
           resolve({
-            sessions: response.sessions.map(
-              (session: any) => new Session(session)
-            ),
+            sessions: response.sessions.map((session: any) => new Session(session)),
             total: response.total,
           });
         })
@@ -215,18 +190,27 @@ export default class SessionStore {
     });
   }
 
-  async fetchLiveSessions(params = {}) {
+  fetchLiveSessions = async (params = {}) => {
+    runInAction(() => {
+      this.loadingLiveSessions = true;
+    })
     try {
-      const data = await sessionService.getLiveSessions(params);
-      this.liveSessions = data.map(
-        (session) => new Session({ ...session, live: true })
-      );
+      const data: any = await sessionService.getLiveSessions(params);
+      this.liveSessions = data.sessions.map((session: any) => new Session({ ...session, live: true }));
+      this.totalLiveSessions = data.total;
     } catch (e) {
       console.error(e);
+    } finally {
+      runInAction(() => {
+        this.loadingLiveSessions = false;
+      });
     }
   }
 
-  async fetchSessions(params = {}, force = false) {
+  fetchSessions = async (params = {}, force = false) => {
+    runInAction(() => {
+      this.loadingSessions = true;
+    })
     try {
       if (!force) {
         const oldFilters = getSessionFilter();
@@ -244,28 +228,50 @@ export default class SessionStore {
       this.favoriteList = list.filter((s) => s.favorite);
     } catch (e) {
       console.error(e);
+    } finally {
+      runInAction(() => {
+        this.loadingSessions = false;
+      });
     }
   }
 
-  async fetchSessionInfo(sessionId: string, isLive = false) {
+  clearAll = () => {
+    this.list = [];
+    this.clearCurrentSession();
+  }
+
+  fetchSessionData = async (sessionId: string, isLive = false) => {
     try {
-      const { events } = store.getState().getIn(['filters', 'appliedFilter']);
+      const filter = isLive ? searchStoreLive.instance : searchStore.instance;
       const data = await sessionService.getSessionInfo(sessionId, isLive);
-      const session = new Session(data);
+      const eventsData = await sessionService.getSessionEvents(sessionId);
 
+      const {
+        errors,
+        events,
+        issues,
+        crashes,
+        resources,
+        stackEvents,
+        userEvents,
+        userTesting,
+      } = eventsData;
+
+      const filterEvents = filter.events as Record<string, any>[];
       const matching: number[] = [];
-      const visitedEvents: Location[] = [];
-      const tmpMap: Set<string> = new Set();
 
-      session.events.forEach((event) => {
+      const visitedEvents: Location[] = [];
+      const tmpMap = new Set();
+
+      events.forEach((event) => {
         if (event.type === 'LOCATION' && !tmpMap.has(event.url)) {
           tmpMap.add(event.url);
-          visitedEvents.push(event);
+          visitedEvents.push(event as Location);
         }
       });
 
-      (events as {}[]).forEach(({ key, operator, value }: any) => {
-        session.events.forEach((e, index) => {
+      filterEvents.forEach(({ key, operator, value }) => {
+        events.forEach((e, index) => {
           if (key === e.type) {
             const val = e.type === 'LOCATION' ? e.url : e.value;
             if (operator === 'is' && value === val) {
@@ -277,60 +283,89 @@ export default class SessionStore {
           }
         });
       });
+
+      runInAction(() => {
+        const session = new Session(data);
+        session.addEvents(
+          events,
+          crashes,
+          errors,
+          issues,
+          resources,
+          userEvents,
+          stackEvents,
+          userTesting
+        );
+        this.current = session;
+        this.eventsIndex = matching;
+        this.visitedEvents = visitedEvents;
+        this.host = visitedEvents[0]?.host || '';
+        this.prefetched = false;
+      })
     } catch (e) {
       console.error(e);
+      this.fetchFailed = true;
     }
   }
 
-  async fetchErrorStack(sessionId: string, errorId: string) {
+  fetchNotes = async (sessionId: string) => {
     try {
-      const data = await sessionService.getErrorStack(sessionId, errorId);
-      this.errorStack = data.trace.map((es) => new ErrorStack(es));
+      const notes = await sessionService.getSessionNotes(sessionId);
+      if (notes.length > 0) {
+        this.current = this.current.addNotes(notes);
+      }
     } catch (e) {
       console.error(e);
     }
   }
 
-  async fetchAutoplayList(params = {}) {
+  fetchFavoriteList = async () => {
     try {
-      setSessionFilter(cleanSessionFilters(params));
-      const data = await sessionService.getAutoplayList(params);
-      const list = [...this.sessionIds, ...data.map((s) => s.sessionId)];
-      this.sessionIds = list.filter((id, ind) => list.indexOf(id) === ind);
+      const data = await sessionService.getFavoriteSessions();
+      this.favoriteList = data.map((s: any) => new Session(s));
     } catch (e) {
       console.error(e);
     }
   }
 
-  setAutoplayValues() {
+  fetchSessionClickmap = async (sessionId: string, params: any) => {
+    try {
+      const data = await sessionService.getSessionClickmap(sessionId, params);
+      this.insights = data;
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  setAutoplayValues = () => {
     const currentId = this.current.sessionId;
     const currentIndex = this.sessionIds.indexOf(currentId);
 
-    this.previousId = this.sessionIds[currentIndex - 1];
-    this.nextId = this.sessionIds[currentIndex + 1];
+    this.previousId = this.sessionIds[currentIndex - 1] || '';
+    this.nextId = this.sessionIds[currentIndex + 1] || '';
   }
 
-  setEventQuery(filter: { query: string }) {
+  setEventQuery = (filter: { query: string }) => {
     const events = this.current.events;
     const query = filter.query;
     const searchRe = getRE(query, 'i');
 
     const filteredEvents = query
-      ? events.filter(
-          (e) =>
-            searchRe.test(e.url) ||
-            searchRe.test(e.value) ||
-            searchRe.test(e.label) ||
-            searchRe.test(e.type) ||
-            (e.type === 'LOCATION' && searchRe.test('visited'))
-        )
-      : null;
+                           ? events.filter(
+        (e) =>
+          searchRe.test(e.url) ||
+          searchRe.test(e.value) ||
+          searchRe.test(e.label) ||
+          searchRe.test(e.type) ||
+          (e.type === 'LOCATION' && searchRe.test('visited'))
+      )
+                           : null;
 
     this.filteredEvents = filteredEvents;
     this.eventsQuery = query;
   }
 
-  async toggleFavorite(id: string) {
+   toggleFavorite = async (id: string) => {
     try {
       const r = await sessionService.toggleFavorite(id);
       if (r.success) {
@@ -341,22 +376,20 @@ export default class SessionStore {
         const wasInFavorite =
           this.favoriteList.findIndex(({ sessionId }) => sessionId === id) > -1;
 
-        if (session && !wasInFavorite) {
-          session.favorite = true;
+        if (session) {
+          session.favorite = !wasInFavorite;
           this.list[sessionIdx] = session;
         }
         if (current.sessionId === id) {
           this.current.favorite = !wasInFavorite;
         }
 
-        if (session) {
-          if (wasInFavorite) {
-            this.favoriteList = this.favoriteList.filter(
-              ({ sessionId }) => sessionId !== id
-            );
-          } else {
-            this.favoriteList.push(session);
-          }
+        if (wasInFavorite) {
+          this.favoriteList = this.favoriteList.filter(
+            ({ sessionId }) => sessionId !== id
+          );
+        } else {
+          this.favoriteList.push(session);
         }
       } else {
         console.error(r);
@@ -366,7 +399,7 @@ export default class SessionStore {
     }
   }
 
-  sortSessions(sortKey: string, sign: number) {
+  sortSessions = (sortKey: string, sign: number = 1) => {
     const comparator = (s1: Session, s2: Session) => {
       // @ts-ignore
       let diff = s1[sortKey] - s2[sortKey];
@@ -374,87 +407,61 @@ export default class SessionStore {
       return sign * diff;
     };
 
-    this.list = this.list.sort(comparator);
-    this.favoriteList = this.favoriteList.sort(comparator);
-    return;
+    this.list = this.list.slice().sort(comparator);
+    this.favoriteList = this.favoriteList.slice().sort(comparator);
   }
 
-  setActiveTab(tab: { type: string }) {
+  setActiveTab = (tab: { type: string, name: string }) => {
     const list =
       tab.type === 'all'
-        ? this.list
-        : this.list.filter((s) => s.issueTypes.includes(tab.type));
+      ? this.list
+      : this.list.filter((s) => s.issueTypes.includes(tab.type));
 
-    // @ts-ignore
     this.activeTab = tab;
     this.sessionIds = list.map((s) => s.sessionId);
   }
 
-  setTimezone(tz: string) {
+  setTimezone = (tz: string) => {
     this.timezone = tz;
   }
 
-  toggleChatWindow(isActive: boolean) {
-    this.showChatWindow = isActive;
-  }
-
-  async fetchInsights(filters = {}) {
+  fetchInsights = async (params = {}) => {
     try {
-      const data = await sessionService.getClickMap(filters);
-
-      this.insights = data;
+      const data = await sessionService.getClickMap(params);
+      this.insights = data.sort((a: any, b: any) => b.count - a.count);
     } catch (e) {
       console.error(e);
     }
   }
 
-  setFunnelPage(page = {}) {
-    this.funnelPage = page || false;
-  }
-
-  /* @deprecated */
-  setTimelinePointer(pointer: {}) {
-    this.timelinePointer = pointer;
-  }
-
-  setTimelineTooltip(tp: {
+  setTimelineTooltip = (tp: {
     time: number;
     offset: number;
     isVisible: boolean;
     localTime: string;
     userTime?: string;
-  }) {
+  }) => {
     this.timeLineTooltip = tp;
   }
 
-  filterOutNote(noteId: string) {
-    const current = this.current;
+  setCreateNoteTooltip = (noteTooltip: any) => {
+    this.createNoteTooltip = noteTooltip;
+  }
 
-    current.notesWithEvents = current.notesWithEvents.filter((n) => {
+  setEditNoteTooltip = (noteTooltip: any) => {
+    this.createNoteTooltip = noteTooltip;
+  }
+
+  filterOutNote = (noteId: string) => {
+    this.current.notesWithEvents = this.current.notesWithEvents.filter((item) => {
       if ('noteId' in item) {
         return item.noteId !== noteId;
       }
       return true;
     });
-
-    this.current = current;
   }
 
-  addNote(note: Note) {
-    const current = this.current;
-
-    current.notesWithEvents.push(note);
-    current.notesWithEvents.sort((a, b) => {
-      const aTs = a.time || a.timestamp;
-      const bTs = b.time || b.timestamp;
-
-      return aTs - bTs;
-    });
-
-    this.current = current;
-  }
-
-  updateNote(note: Note) {
+  updateNote = (note: Note) => {
     const noteIndex = this.current.notesWithEvents.findIndex((item) => {
       if ('noteId' in item) {
         return item.noteId === note.noteId;
@@ -462,18 +469,54 @@ export default class SessionStore {
       return false;
     });
 
-    this.current.notesWithEvents[noteIndex] = note;
+    if (noteIndex !== -1) {
+      this.current.notesWithEvents[noteIndex] = note;
+    }
   }
 
-  setSessionPath(path = {}) {
+  setSessionPath = (path = {}) => {
     this.sessionPath = path;
   }
 
-  setLastPlayed(sessionId: string) {
-    const list = this.list;
-    const sIndex = list.findIndex((s) => s.sessionId === sessionId);
+  updateLastPlayedSession = (sessionId: string) => {
+    const sIndex = this.list.findIndex((s) => s.sessionId === sessionId);
     if (sIndex !== -1) {
       this.list[sIndex].viewed = true;
     }
   }
+
+  clearCurrentSession = () => {
+    this.current = new Session();
+    this.eventsIndex = [];
+    this.visitedEvents = [];
+    this.host = '';
+  }
+
+  prefetchSession = (sessionData: Session) => {
+    this.current = sessionData;
+    this.prefetched = true;
+  }
+
+  customSetSessions = (data: any) => {
+    this.liveSessions = data.sessions.map((s: any) => new Session(s));
+    this.totalLiveSessions = data.total
+  }
+
+  fetchAutoplayList = async (params = {}) => {
+    try {
+      setSessionFilter(cleanSessionFilters(params));
+      const data = await sessionService.getAutoplayList(params);
+      this.sessionIds = this.sessionIds
+        .concat(data.map((i: any) => i.sessionId + ''))
+        .filter((i, index) => this.sessionIds.indexOf(i) === index);
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  clearList = () => {
+    this.list = [];
+    this.total = 0;
+    this.sessionIds = [];
+  }
 }
diff --git a/frontend/app/mstore/types/customField.ts b/frontend/app/mstore/types/customField.ts
new file mode 100644
index 000000000..41ddac22e
--- /dev/null
+++ b/frontend/app/mstore/types/customField.ts
@@ -0,0 +1,55 @@
+import { makeAutoObservable, runInAction } from 'mobx';
+
+const varRegExp = new RegExp('^[A-Za-z_-][A-Za-z0-9_-]*$');
+
+export const BOOLEAN = 'boolean';
+export const STRING = 'string';
+export const NUMBER = 'number';
+export const MAX_COUNT = 20;
+
+interface CustomRecord {
+  index?: string;
+  key: string;
+  label: string;
+  type: string;
+  validate: () => boolean;
+  toData: () => any;
+}
+
+class CustomField implements CustomRecord {
+  index: string = '';
+  key: string = '';
+  label: string = '';
+  type: string = STRING;
+
+  constructor(props: Partial<CustomRecord> = {}) {
+    Object.assign(this, props);
+    makeAutoObservable(this);
+  }
+
+  fromJson(json: any) {
+    runInAction(() => {
+      Object.assign(this, json);
+    });
+    return this;
+  }
+
+  exists(): boolean {
+    return Boolean(this.index);
+  }
+
+  validate(): boolean {
+    return varRegExp.test(this.key) && this.type !== '';
+  }
+
+  toData(): any {
+    return {
+      index: this.index,
+      key: this.key,
+      label: this.label,
+      type: this.type
+    };
+  }
+}
+
+export default CustomField;
diff --git a/frontend/app/mstore/types/error.ts b/frontend/app/mstore/types/error.ts
index 9682f61ea..08ff80b01 100644
--- a/frontend/app/mstore/types/error.ts
+++ b/frontend/app/mstore/types/error.ts
@@ -1,56 +1,102 @@
+import Session from './session';
+
 export default class Error {
-    sessionId: string = ''
-    messageId: string = ''
-    errorId: string = ''
-    projectId: string = ''
-    source: string = ''
-    name: string = ''
-    message: string = ''
-    time: string = ''
-    function: string = '?'
-    stack0InfoString: string = ''
-    status: string = ''
-    
-    chart: any = []
-    sessions: number = 0
-    users: number = 0
-    firstOccurrence: string = ''
-    lastOccurrence: string = ''
-    timestamp: string = ''
+  sessionId: string = '';
+  messageId: string = '';
+  errorId: string = '';
+  projectId: string = '';
+  source: string = '';
+  name: string = '';
+  message: string = '';
+  time: string = '';
+  function: string = '?';
+  stack0InfoString: string = '';
+  status: string = '';
 
-    constructor() {
-    }
+  chart: any = [];
+  sessions: number = 0;
+  users: number = 0;
+  firstOccurrence: string = '';
+  lastOccurrence: string = '';
+  timestamp: string = '';
 
-    fromJSON(json: any) {
-        this.sessionId = json.sessionId
-        this.messageId = json.messageId
-        this.errorId = json.errorId
-        this.projectId = json.projectId
-        this.source = json.source
-        this.name = json.name
-        this.message = json.message
-        this.time = json.time
-        this.function = json.function
-        this.stack0InfoString = getStck0InfoString(json.stack || [])
-        this.status = json.status
-
-        this.chart = json.chart
-        this.sessions = json.sessions
-        this.users = json.users
-        this.firstOccurrence = json.firstOccurrence
-        this.lastOccurrence = json.lastOccurrence
-        this.timestamp = json.timestamp
-
-        return this
-    }
+  constructor() {}
 }
 
 function getStck0InfoString(stack: any) {
-    const stack0 = stack[0];
-    if (!stack0) return "";
-    let s = stack0.function || "";
-    if (stack0.url) {
-      s += ` (${stack0.url})`;
+  const stack0 = stack[0];
+  if (!stack0) return '';
+  let s = stack0.function || '';
+  if (stack0.url) {
+    s += ` (${stack0.url})`;
+  }
+  return s;
+}
+
+export interface ErrorInfoData {
+  errorId?: string;
+  favorite: boolean;
+  viewed: boolean;
+  source: string;
+  name: string;
+  message: string;
+  stack0InfoString: string;
+  status: string;
+  parentErrorId?: string;
+  users: number;
+  sessions: number;
+  lastOccurrence: number;
+  firstOccurrence: number;
+  chart: any[];
+  chart24: any[];
+  chart30: any[];
+  tags: string[];
+  customTags: string[];
+  lastHydratedSession: Session;
+  disabled: boolean;
+}
+
+export class ErrorInfo implements ErrorInfoData {
+  errorId?: string;
+  favorite = false;
+  viewed = false;
+  source = '';
+  name = '';
+  message = '';
+  stack0InfoString = '';
+  status = '';
+  parentErrorId?: string;
+  users = 0;
+  sessions = 0;
+  lastOccurrence = Date.now();
+  firstOccurrence = Date.now();
+  chart: any[] = [];
+  chart24: any[] = [];
+  chart30: any[] = [];
+  tags: string[] = [];
+  customTags: string[] = [];
+  lastHydratedSession: Session;
+  disabled = false;
+
+  constructor(data?: Partial<ErrorInfoData>) {
+    if (data) {
+      Object.assign(this, data);
     }
-    return s;
-  }
\ No newline at end of file
+    if (data?.lastHydratedSession) {
+      this.lastHydratedSession = new Session().fromJson(
+        data.lastHydratedSession
+      );
+    } else {
+      this.lastHydratedSession = new Session();
+    }
+  }
+
+  static fromJS(data: any): ErrorInfo {
+    const { stack, lastHydratedSession, ...other } = data;
+    return new ErrorInfo({
+      ...other,
+      lastHydratedSession: new Session().fromJson(data.lastHydratedSession),
+      stack0InfoString: getStck0InfoString(stack || []),
+    });
+  }
+}
diff --git a/frontend/app/mstore/types/filter.ts b/frontend/app/mstore/types/filter.ts
index 6a5dfc7dd..ccde4e386 100644
--- a/frontend/app/mstore/types/filter.ts
+++ b/frontend/app/mstore/types/filter.ts
@@ -1,134 +1,226 @@
-import {makeAutoObservable, runInAction, observable, action} from "mobx"
-import FilterItem from "./filterItem"
-import {filtersMap, conditionalFiltersMap} from 'Types/filter/newFilter';
-import {FilterKey} from "Types/filter/filterType";
+import { makeAutoObservable, runInAction, observable, action } from 'mobx';
+import FilterItem from './filterItem';
+import { filtersMap, conditionalFiltersMap } from 'Types/filter/newFilter';
+import { FilterKey } from 'Types/filter/filterType';
 
-export default class Filter {
-    public static get ID_KEY(): string {
-        return "filterId"
-    }
+export const checkFilterValue = (value: any) => {
+  return Array.isArray(value) ? (value.length === 0 ? [''] : value) : [value];
+};
 
-    filterId: string = ''
-    name: string = ''
-    filters: FilterItem[] = []
-    excludes: FilterItem[] = []
-    eventsOrder: string = 'then'
-    eventsOrderSupport: string[] = ['then', 'or', 'and']
-    startTimestamp: number = 0
-    endTimestamp: number = 0
-    eventsHeader: string = "EVENTS"
-    page: number = 1
-    limit: number = 10
+export interface IFilter {
+  filterId: string;
+  name: string;
+  filters: FilterItem[];
+  excludes: FilterItem[];
+  eventsOrder: string;
+  eventsOrderSupport: string[];
+  startTimestamp: number;
+  endTimestamp: number;
+  eventsHeader: string;
+  page: number;
+  limit: number;
 
-    constructor(private readonly isConditional = false, private readonly isMobile = false) {
-        makeAutoObservable(this, {
-            filters: observable,
-            eventsOrder: observable,
-            startTimestamp: observable,
-            endTimestamp: observable,
+  merge(filter: any): void;
 
-            addFilter: action,
-            removeFilter: action,
-            updateKey: action,
-            merge: action,
-            addExcludeFilter: action,
-            updateFilter: action,
-            replaceFilters: action,
-        })
-    }
+  addFilter(filter: any): void;
 
-    merge(filter: any) {
-        runInAction(() => {
-            Object.assign(this, filter)
-        })
-    }
+  replaceFilters(filters: any): void;
 
-    addFilter(filter: any) {
-        filter.value = [""]
-        if (Array.isArray(filter.filters)) {
-            filter.filters = filter.filters.map((i: Record<string, any>) => {
-                i.value = [""]
-                return new FilterItem(i)
-            })
-        }
-        this.filters.push(new FilterItem(filter))
-    }
+  updateFilter(index: number, filter: any): void;
 
-    replaceFilters(filters: any) {
-        this.filters = filters;
-    }
+  updateKey(key: string, value: any): void;
 
-    updateFilter(index: number, filter: any) {
-        this.filters[index] = new FilterItem(filter)
-    }
+  removeFilter(index: number): void;
 
-    updateKey(key: string, value: any) {
-        // @ts-ignore fix later
-        this[key] = value
-    }
+  fromJson(json: any, isHeatmap?: boolean): IFilter;
 
-    removeFilter(index: number) {
-        this.filters.splice(index, 1)
-    }
+  fromData(data: any): IFilter;
 
-    fromJson(json: any, isHeatmap?: boolean) {
-        this.name = json.name
-        this.filters = json.filters.map((i: Record<string, any>) =>
-            new FilterItem(undefined, this.isConditional, this.isMobile).fromJson(i, undefined, isHeatmap)
-        );
-        this.eventsOrder = json.eventsOrder
-        return this
-    }
+  toJsonDrilldown(): any;
 
-    fromData(data) {
-        this.name = data.name
-        this.filters = data.filters.map((i: Record<string, any>) =>
-            new FilterItem(undefined, this.isConditional, this.isMobile).fromData(i)
-        )
-        this.eventsOrder = data.eventsOrder
-        return this
-    }
+  createFilterBykey(key: string): FilterItem;
 
-    toJsonDrilldown() {
-        const json = {
-            name: this.name,
-            filters: this.filters.map(i => i.toJson()),
-            eventsOrder: this.eventsOrder,
-            startTimestamp: this.startTimestamp,
-            endTimestamp: this.endTimestamp,
-        }
-        return json
-    }
+  toJson(): any;
 
-    createFilterBykey(key: string) {
-        const usedMap = this.isConditional ? conditionalFiltersMap : filtersMap
-        return usedMap[key] ? new FilterItem(usedMap[key]) : new FilterItem()
-    }
+  addExcludeFilter(filter: FilterItem): void;
 
-    toJson() {
-        const json = {
-            name: this.name,
-            filters: this.filters.map(i => i.toJson()),
-            eventsOrder: this.eventsOrder,
-        }
-        return json
-    }
+  updateExcludeFilter(index: number, filter: FilterItem): void;
 
-    addExcludeFilter(filter: FilterItem) {
-        this.excludes.push(filter)
-    }
+  removeExcludeFilter(index: number): void;
 
-    updateExcludeFilter(index: number, filter: FilterItem) {
-        this.excludes[index] = new FilterItem(filter)
-    }
+  addFunnelDefaultFilters(): void;
 
-    removeExcludeFilter(index: number) {
-        this.excludes.splice(index, 1)
-    }
+  toData(): any;
 
-    addFunnelDefaultFilters() {
-        this.filters = []
-        this.addFilter({...filtersMap[FilterKey.LOCATION], value: [''], operator: 'isAny'})
-        this.addFilter({...filtersMap[FilterKey.CLICK], value: [''], operator: 'onAny'})
-    }
+  addOrUpdateFilter(filter: any): void;
+}
+
+export default class Filter implements IFilter {
+  public static get ID_KEY(): string {
+    return 'filterId';
+  }
+
+  filterId: string = '';
+  name: string = '';
+  filters: FilterItem[] = [];
+  excludes: FilterItem[] = [];
+  eventsOrder: string = 'then';
+  eventsOrderSupport: string[] = ['then', 'or', 'and'];
+  startTimestamp: number = 0;
+  endTimestamp: number = 0;
+  eventsHeader: string = 'EVENTS';
+  page: number = 1;
+  limit: number = 10;
+
+  constructor(
+    filters: any[] = [],
+    private readonly isConditional = false,
+    private readonly isMobile = false) {
+    makeAutoObservable(this, {
+      filters: observable,
+      eventsOrder: observable,
+      startTimestamp: observable,
+      endTimestamp: observable,
+
+      addFilter: action,
+      removeFilter: action,
+      updateKey: action,
+      merge: action,
+      addExcludeFilter: action,
+      updateFilter: action,
+      replaceFilters: action
+    });
+    this.filters = filters.map(i => new FilterItem(i));
+  }
+
+  merge(filter: any) {
+    runInAction(() => {
+      Object.assign(this, filter);
+    });
+  }
+
+  addFilter(filter: any) {
+    filter.value = [''];
+    if (Array.isArray(filter.filters)) {
+      filter.filters = filter.filters.map((i: Record<string, any>) => {
+        i.value = [''];
+        return new FilterItem(i);
+      });
+    }
+    this.filters.push(new FilterItem(filter));
+  }
+
+  replaceFilters(filters: any) {
+    this.filters = filters;
+  }
+
+  updateFilter(index: number, filter: any) {
+    this.filters[index] = new FilterItem(filter);
+  }
+
+  updateKey(key: string, value: any) {
+    // @ts-ignore fix later
+    this[key] = value;
+  }
+
+  removeFilter(index: number) {
+    this.filters.splice(index, 1);
+  }
+
+  fromJson(json: any, isHeatmap?: boolean) {
+    this.name = json.name;
+    this.filters = json.filters.map((i: Record<string, any>) =>
+      new FilterItem(undefined, this.isConditional, this.isMobile).fromJson(i, undefined, isHeatmap)
+    );
+    this.eventsOrder = json.eventsOrder;
+    return this;
+  }
+
+  fromData(data: any) {
+    this.name = data.name;
+    this.filters = data.filters.map((i: Record<string, any>) =>
+      new FilterItem(undefined, this.isConditional, this.isMobile).fromData(i)
+    );
+    this.eventsOrder = data.eventsOrder;
+    return this;
+  }
+
+  toJsonDrilldown() {
+    const json = {
+      name: this.name,
+      filters: this.filters.map(i => i.toJson()),
+      eventsOrder: this.eventsOrder,
+      startTimestamp: this.startTimestamp,
+      endTimestamp: this.endTimestamp
+    };
+    return json;
+  }
+
+  createFilterBykey(key: string) {
+    const usedMap = this.isConditional ? conditionalFiltersMap : filtersMap;
+    return usedMap[key] ? new FilterItem(usedMap[key]) : new FilterItem();
+  }
+
+  toJson() {
+    const json = {
+      name: this.name,
+      filters: this.filters.map(i => i.toJson()),
+      eventsOrder: this.eventsOrder
+    };
+    return json;
+  }
+
+  addExcludeFilter(filter: FilterItem) {
+    this.excludes.push(filter);
+  }
+
+  updateExcludeFilter(index: number, filter: FilterItem) {
+    this.excludes[index] = new FilterItem(filter);
+  }
+
+  removeExcludeFilter(index: number) {
+    this.excludes.splice(index, 1);
+  }
+
+  addFunnelDefaultFilters() {
+    this.filters = [];
+    this.addFilter({ ...filtersMap[FilterKey.LOCATION], value: [''], operator: 'isAny' });
+    this.addFilter({ ...filtersMap[FilterKey.CLICK], value: [''], operator: 'onAny' });
+  }
+
+  toData() {
+    return {
+      name: this.name,
+      filters: this.filters.map(i => i.toJson()),
+      eventsOrder: this.eventsOrder
+    };
+  }
+
+  addOrUpdateFilter(filter: any) {
+    const index = this.filters.findIndex(i => i.key === filter.key);
+    filter.value = checkFilterValue;
+
+    if (index > -1) {
+      this.updateFilter(index, filter);
+    } else {
+      this.addFilter(filter);
+    }
+  }
+
+  addFilterByKeyAndValue(key: any, value: any, operator: undefined, sourceOperator: undefined, source: undefined) {
+    let defaultFilter = { ...filtersMap[key] };
+    if (defaultFilter) {
+      defaultFilter = { ...defaultFilter, value: checkFilterValue(value) };
+      if (operator) {
+        defaultFilter.operator = operator;
+      }
+      if (sourceOperator) {
+        defaultFilter.sourceOperator = sourceOperator;
+      }
+      if (source) {
+        defaultFilter.source = source;
+      }
+      this.addOrUpdateFilter(defaultFilter);
+    }
+  }
 }
diff --git a/frontend/app/mstore/types/filterItem.ts b/frontend/app/mstore/types/filterItem.ts
index eeba50783..3a97b9008 100644
--- a/frontend/app/mstore/types/filterItem.ts
+++ b/frontend/app/mstore/types/filterItem.ts
@@ -32,19 +32,7 @@ export default class FilterItem {
     private readonly isConditional?: boolean,
     private readonly isMobile?: boolean
   ) {
-    makeAutoObservable(this, {
-      type: observable,
-      key: observable,
-      value: observable,
-      operator: observable,
-      source: observable,
-      filters: observable,
-      isActive: observable,
-      sourceOperator: observable,
-      category: observable,
-
-      merge: action,
-    });
+    makeAutoObservable(this);
 
     if (Array.isArray(data.filters)) {
       data.filters = data.filters.map(function (i: Record<string, any>) {
diff --git a/frontend/app/mstore/types/gdpr.ts b/frontend/app/mstore/types/gdpr.ts
new file mode 100644
index 000000000..2871d763c
--- /dev/null
+++ b/frontend/app/mstore/types/gdpr.ts
@@ -0,0 +1,30 @@
+import { makeAutoObservable } from 'mobx';
+
+export default class GDPR {
+  id = undefined;
+  maskEmails = false;
+  maskNumbers = false;
+  defaultInputMode = 'plain';
+  sampleRate = 0;
+
+  constructor(data = {}) {
+    Object.assign(this, data);
+    makeAutoObservable(this);
+  }
+
+  edit = (data: Partial<GDPR>) => {
+    Object.keys(data).forEach((key) => {
+      this[key] = data[key];
+    })
+  }
+
+  toData = () => {
+    return {
+      id: this.id,
+      maskEmails: this.maskEmails,
+      maskNumbers: this.maskNumbers,
+      defaultInputMode: this.defaultInputMode,
+      sampleRate: this.sampleRate,
+    };
+  }
+}
diff --git a/frontend/app/mstore/types/integrations/consts.ts b/frontend/app/mstore/types/integrations/consts.ts
new file mode 100644
index 000000000..6e9561657
--- /dev/null
+++ b/frontend/app/mstore/types/integrations/consts.ts
@@ -0,0 +1,37 @@
+export const sumoRegionLabels = {
+  au: 'Asia Pacific (Sydney)',
+  ca: 'Canada (Central)',
+  de: 'EU (Frankfurt)',
+  eu: 'EU (Ireland)',
+  fed: 'US East (N. Virginia)',
+  in: 'Asia Pacific (Mumbai)',
+  jp: 'Asia Pacific (Tokyo)',
+  us1: 'US East (N. Virginia)',
+  us2: 'US West (Oregon)',
+};
+export const API_KEY_ID_LENGTH = 5;
+export const API_KEY_LENGTH = 5;
+export const SECRET_ACCESS_KEY_LENGTH = 40;
+export const ACCESS_KEY_ID_LENGTH = 20;
+export const tokenRE =
+  /^[a-z0-9]{8}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{12}$/i;
+export const awsRegionLabels = {
+  'us-east-1': 'US East (N. Virginia)',
+  'us-east-2': 'US East (Ohio)',
+  'us-west-1': 'US West (N. California)',
+  'us-west-2': 'US West (Oregon)',
+  'ap-east-1': 'Asia Pacific (Hong Kong)',
+  'ap-south-1': 'Asia Pacific (Mumbai)',
+  'ap-northeast-2': 'Asia Pacific (Seoul)',
+  'ap-southeast-1': 'Asia Pacific (Singapore)',
+  'ap-southeast-2': 'Asia Pacific (Sydney)',
+  'ap-northeast-1': 'Asia Pacific (Tokyo)',
+  'ca-central-1': 'Canada (Central)',
+  'eu-central-1': 'EU (Frankfurt)',
+  'eu-west-1': 'EU (Ireland)',
+  'eu-west-2': 'EU (London)',
+  'eu-west-3': 'EU (Paris)',
+  'eu-north-1': 'EU (Stockholm)',
+  'me-south-1': 'Middle East (Bahrain)',
+  'sa-east-1': 'South America (São Paulo)',
+};
diff --git a/frontend/app/mstore/types/integrations/messengers.ts b/frontend/app/mstore/types/integrations/messengers.ts
new file mode 100644
index 000000000..1e6ae9300
--- /dev/null
+++ b/frontend/app/mstore/types/integrations/messengers.ts
@@ -0,0 +1,41 @@
+import { validateURL } from "App/validate";
+import { makeAutoObservable } from "mobx";
+
+export class MessengerConfig {
+  endpoint: string = "";
+  name: string = "";
+  webhookId: string = "";
+
+  constructor(config: any) {
+    Object.assign(this, {
+      endpoint: config.endpoint,
+      name: config.name,
+      webhookId: config.webhookId
+    });
+    makeAutoObservable(this);
+  }
+
+  edit = (data: any): void => {
+    Object.keys(data).forEach((key) => {
+      // @ts-ignore
+      this[key] = data[key];
+    })
+  }
+
+  validate(): boolean {
+    return this.endpoint !== '' && this.name != '' && validateURL(this.endpoint);
+  }
+
+  exists(): boolean {
+    return !!this.webhookId;
+  }
+
+  toData(): { endpoint: string, url: string, name: string, webhookId: string } {
+    return {
+      endpoint: this.endpoint,
+      url: this.endpoint,
+      name: this.name,
+      webhookId: this.webhookId
+    };
+  }
+}
diff --git a/frontend/app/mstore/types/integrations/services.ts b/frontend/app/mstore/types/integrations/services.ts
new file mode 100644
index 000000000..0acbdc687
--- /dev/null
+++ b/frontend/app/mstore/types/integrations/services.ts
@@ -0,0 +1,501 @@
+import { makeAutoObservable } from 'mobx';
+
+import { validateURL } from 'App/validate';
+
+import {
+  ACCESS_KEY_ID_LENGTH,
+  API_KEY_ID_LENGTH,
+  API_KEY_LENGTH,
+  SECRET_ACCESS_KEY_LENGTH,
+  awsRegionLabels,
+  sumoRegionLabels,
+  tokenRE,
+} from './consts';
+
+export interface Integration {
+  validate(): boolean;
+  exists(): boolean;
+  toData(): Record<string, any>;
+  edit(data: Record<string, any>): void;
+}
+
+export class SentryInt implements Integration {
+  projectId: number;
+  organizationSlug: string = '';
+  projectSlug: string = '';
+  token: string = '';
+
+  constructor(config: any) {
+    Object.assign(this, {
+      ...config,
+      projectId: config?.projectId ?? -1,
+    });
+    makeAutoObservable(this);
+  }
+
+  edit = (data: Record<string, any>) => {
+    Object.keys(data).forEach((key) => {
+      this[key] = data[key];
+    });
+  };
+
+  validate() {
+    return Boolean(this.organizationSlug && this.projectSlug && this.token);
+  }
+
+  exists() {
+    return this.projectId >= 0;
+  }
+
+  toData() {
+    return {
+      organizationSlug: this.organizationSlug,
+      projectSlug: this.projectSlug,
+      token: this.token,
+      projectId: this.projectId,
+    };
+  }
+}
+
+export class DatadogInt implements Integration {
+  apiKey: string = '';
+  applicationKey: string = '';
+  projectId: number;
+
+  constructor(config: any) {
+    Object.assign(this, {
+      ...config,
+      projectId: config?.projectId ?? -1,
+    });
+    makeAutoObservable(this);
+  }
+
+  edit = (data: Record<string, any>) => {
+    Object.keys(data).forEach((key) => {
+      this[key] = data[key];
+    });
+  };
+
+  validate() {
+    return Boolean(this.apiKey && this.applicationKey);
+  }
+
+  exists() {
+    return this.projectId >= 0;
+  }
+
+  toData() {
+    return {
+      apiKey: this.apiKey,
+      applicationKey: this.applicationKey,
+      projectId: this.projectId,
+    };
+  }
+}
+
+export class StackDriverInt implements Integration {
+  projectId: number;
+  logName: string = '';
+  serviceAccountCredentials: string = '';
+
+  constructor(config: any) {
+    Object.assign(this, {
+      ...config,
+      projectId: config?.projectId ?? -1,
+    });
+    makeAutoObservable(this);
+  }
+
+  edit = (data: Record<string, any>) => {
+    Object.keys(data).forEach((key) => {
+      this[key] = data[key];
+    });
+  };
+
+  validate() {
+    return Boolean(
+      this.serviceAccountCredentials !== '' && this.logName !== ''
+    );
+  }
+
+  exists() {
+    return this.projectId >= 0;
+  }
+
+  toData() {
+    return {
+      logName: this.logName,
+      serviceAccountCredentials: this.serviceAccountCredentials,
+      projectId: this.projectId,
+    };
+  }
+}
+
+export class RollbarInt implements Integration {
+  projectId: number;
+  accessToken: string = '';
+
+  constructor(config: any) {
+    Object.assign(this, {
+      ...config,
+      projectId: config?.projectId ?? -1,
+    });
+    makeAutoObservable(this);
+  }
+
+  edit = (data: Record<string, any>) => {
+    Object.keys(data).forEach((key) => {
+      this[key] = data[key];
+    });
+  };
+
+  validate() {
+    return Boolean(this.accessToken);
+  }
+
+  exists() {
+    return this.projectId >= 0;
+  }
+
+  toData() {
+    return {
+      accessToken: this.accessToken,
+      projectId: this.projectId,
+    };
+  }
+}
+
+export class NewRelicInt implements Integration {
+  projectId: number;
+  applicationId: string = '';
+  xQueryKey: string = '';
+  region: boolean = true;
+
+  constructor(config: any) {
+    Object.assign(this, {
+      ...config,
+      projectId: config?.projectId ?? -1,
+    });
+    makeAutoObservable(this);
+  }
+
+  edit = (data: Record<string, any>) => {
+    Object.keys(data).forEach((key) => {
+      this[key] = data[key];
+    });
+  };
+
+  validate() {
+    return Boolean(this.applicationId && this.xQueryKey);
+  }
+
+  exists() {
+    return this.projectId >= 0;
+  }
+
+  toData() {
+    return {
+      applicationId: this.applicationId,
+      xQueryKey: this.xQueryKey,
+      region: this.region,
+      projectId: this.projectId,
+    };
+  }
+}
+
+export class Bugsnag implements Integration {
+  projectId: number;
+  authorizationToken: string = '';
+  bugsnagProjectId: string = '';
+
+  constructor(config: any) {
+    Object.assign(this, {
+      ...config,
+      projectId: config?.projectId ?? -1,
+    });
+    makeAutoObservable(this);
+  }
+
+  edit = (data: Record<string, any>) => {
+    Object.keys(data).forEach((key) => {
+      this[key] = data[key];
+    });
+  };
+
+  validate() {
+    return Boolean(
+      this.bugsnagProjectId !== '' && tokenRE.test(this.authorizationToken)
+    );
+  }
+
+  exists() {
+    return this.projectId >= 0;
+  }
+
+  toData() {
+    return {
+      authorizationToken: this.authorizationToken,
+      bugsnagProjectId: this.bugsnagProjectId,
+      projectId: this.projectId,
+    };
+  }
+}
+
+export class Cloudwatch implements Integration {
+  projectId: number;
+  awsAccessKeyId: string = '';
+  awsSecretAccessKey: string = '';
+  region: string = 'us-east-1';
+  logGroupName: string = '';
+
+  constructor(config: any) {
+    Object.assign(this, {
+      ...config,
+      projectId: config?.projectId ?? -1,
+    });
+    makeAutoObservable(this);
+  }
+
+  edit = (data: Record<string, any>) => {
+    Object.keys(data).forEach((key) => {
+      this[key] = data[key];
+    });
+  };
+
+  validate() {
+    return Boolean(
+      this.awsAccessKeyId !== '' &&
+        this.awsSecretAccessKey !== '' &&
+        this.logGroupName !== '' &&
+        this.region !== ''
+    );
+  }
+
+  exists() {
+    return this.projectId >= 0;
+  }
+
+  toData() {
+    return {
+      awsAccessKeyId: this.awsAccessKeyId,
+      awsSecretAccessKey: this.awsSecretAccessKey,
+      region: this.region,
+      logGroupName: this.logGroupName,
+      projectId: this.projectId,
+    };
+  }
+}
+
+export class ElasticSearchInt implements Integration {
+  projectId: number;
+  host: string = '';
+  apiKeyId: string = '';
+  apiKey: string = '';
+  indexes: string = '*log*';
+  port: number = 9200;
+
+  constructor(config: any) {
+    Object.assign(this, {
+      ...config,
+      projectId: config?.projectId ?? -1,
+    });
+    makeAutoObservable(this);
+  }
+
+  edit = (data: Record<string, any>) => {
+    Object.keys(data).forEach((key) => {
+      this[key] = data[key];
+    });
+  };
+
+  private validateKeys() {
+    return Boolean(
+      this.apiKeyId.length > API_KEY_ID_LENGTH &&
+        this.apiKey.length > API_KEY_LENGTH &&
+        validateURL(this.host)
+    );
+  }
+
+  validate() {
+    return (
+      this.host !== '' &&
+      this.apiKeyId !== '' &&
+      this.apiKey !== '' &&
+      this.indexes !== '' &&
+      !!this.port &&
+      this.validateKeys()
+    );
+  }
+
+  exists() {
+    return this.projectId >= 0;
+  }
+
+  toData() {
+    return {
+      host: this.host,
+      apiKeyId: this.apiKeyId,
+      apiKey: this.apiKey,
+      indexes: this.indexes,
+      port: this.port,
+      projectId: this.projectId,
+    };
+  }
+}
+
+export class SumoLogic implements Integration {
+  projectId: number;
+  accessId: string = '';
+  accessKey: string = '';
+  region: 'au';
+
+  constructor(config: any) {
+    Object.assign(this, {
+      ...config,
+      projectId: config?.projectId ?? -1,
+    });
+    makeAutoObservable(this);
+  }
+
+  edit = (data: Record<string, any>) => {
+    Object.keys(data).forEach((key) => {
+      this[key] = data[key];
+    });
+  };
+
+  validate() {
+    return Boolean(this.accessKey && this.accessId);
+  }
+
+  exists() {
+    return this.projectId >= 0;
+  }
+
+  toData() {
+    return {
+      accessId: this.accessId,
+      accessKey: this.accessKey,
+      region: this.region,
+      projectId: this.projectId,
+    };
+  }
+}
+
+export class JiraInt implements Integration {
+  projectId: number;
+  username: string = '';
+  token: string = '';
+  url: string = '';
+
+  constructor(config: any) {
+    Object.assign(this, {
+      ...config,
+      projectId: config?.projectId ?? -1,
+    });
+    makeAutoObservable(this);
+  }
+
+  edit = (data: Record<string, any>) => {
+    Object.keys(data).forEach((key) => {
+      this[key] = data[key];
+    });
+  };
+
+  validateFetchProjects() {
+    return this.username !== '' && this.token !== '' && validateURL(this.url);
+  }
+
+  validate() {
+    return this.validateFetchProjects();
+  }
+
+  exists() {
+    return !!this.token;
+  }
+
+  toData() {
+    return {
+      username: this.username,
+      token: this.token,
+      url: this.url,
+      projectId: this.projectId,
+    };
+  }
+}
+
+export class GithubInt implements Integration {
+  projectId: number;
+  provider: string = 'github';
+  token: string = '';
+
+  constructor(config: any) {
+    Object.assign(this, {
+      ...config,
+      projectId: config?.projectId ?? -1,
+    });
+    makeAutoObservable(this);
+  }
+
+  edit = (data: Record<string, any>) => {
+    Object.keys(data).forEach((key) => {
+      this[key] = data[key];
+    });
+  };
+
+  validate() {
+    return this.token !== '';
+  }
+
+  exists() {
+    return !!this.token;
+  }
+
+  toData() {
+    return {
+      provider: this.provider,
+      token: this.token,
+      projectId: this.projectId,
+    };
+  }
+}
+
+export class IssueTracker implements Integration {
+  username: string = '';
+  token: string = '';
+  url: string = '';
+  provider = 'jira';
+
+  constructor(config: any) {
+    Object.assign(this, {
+      ...config,
+    });
+    makeAutoObservable(this);
+  }
+
+  edit = (data: Record<string, any>) => {
+    Object.keys(data).forEach((key) => {
+      this[key] = data[key];
+    });
+  };
+
+  validateFetchProjects() {
+    return this.username !== '' && this.token !== '' && validateURL(this.url);
+  }
+
+  validate() {
+    return !!this.url;
+  }
+
+  exists() {
+    return !!this.token;
+  }
+
+  toData() {
+    return {
+      username: this.username,
+      token: this.token,
+      url: this.url,
+      provider: this.provider,
+    };
+  }
+}
diff --git a/frontend/app/mstore/types/project.ts b/frontend/app/mstore/types/project.ts
new file mode 100644
index 000000000..6fe11e27f
--- /dev/null
+++ b/frontend/app/mstore/types/project.ts
@@ -0,0 +1,62 @@
+import { makeAutoObservable } from 'mobx';
+import GDPR from './gdpr';
+
+export default class Project {
+  id?: string;
+  name: string = '';
+  host: string = '';
+  platform: string = 'web';
+  lastRecordedSessionAt?: any;
+  gdpr: GDPR;
+  recorded: boolean = false;
+  stackIntegrations: boolean = false;
+  projectKey?: string;
+  projectId?: number;
+  trackerVersion?: string;
+  saveRequestPayloads: boolean = false;
+  sampleRate: number = 0;
+  conditionsCount: number = 0;
+
+  constructor(data: Partial<Project> = {}) {
+    Object.assign(this, data);
+    this.gdpr = data.gdpr ? new GDPR(data.gdpr) : new GDPR();
+    this.id = data.projectId?.toString();
+    this.host = data.name || '';
+    makeAutoObservable(this);
+  }
+
+  exists = () => {
+    return !!this.id;
+  }
+
+  get validate() {
+    return this.name.length > 0;
+  }
+
+  edit = (data: Partial<Project>) => {
+    Object.keys(data).forEach((key) => {
+      if (key in this) {
+        this[key] = data[key];
+      }
+    })
+  }
+
+  toData = () => {
+    return {
+      id: this.id,
+      name: this.name,
+      host: this.host,
+      platform: this.platform,
+      lastRecordedSessionAt: this.lastRecordedSessionAt,
+      gdpr: this.gdpr.toData(),
+      recorded: this.recorded,
+      stackIntegrations: this.stackIntegrations,
+      projectKey: this.projectKey,
+      projectId: this.projectId,
+      trackerVersion: this.trackerVersion,
+      saveRequestPayloads: this.saveRequestPayloads,
+      sampleRate: this.sampleRate,
+      conditionsCount: this.conditionsCount,
+    };
+  }
+}
diff --git a/frontend/app/mstore/types/role.ts b/frontend/app/mstore/types/role.ts
index 041648192..30acfced9 100644
--- a/frontend/app/mstore/types/role.ts
+++ b/frontend/app/mstore/types/role.ts
@@ -1,36 +1,49 @@
-import { makeAutoObservable, observable, runInAction } from "mobx";
+import { makeAutoObservable, runInAction } from 'mobx';
 
+import { notEmptyString, validateName } from 'App/validate';
 
 export default class Role {
-    roleId: string = '';
-    name: string = '';
-    description: string = '';   
-    isProtected: boolean = false;
+  roleId: string = '';
+  name: string = '';
+  description: string = '';
+  permissions: string[] = [];
+  createdAt: number = 0;
+  isProtected: boolean = false;
+  serviceRole: boolean = false;
+  allProjects = false;
+  projects: string[] = [];
+  protected = false;
 
+  constructor() {
+    makeAutoObservable(this);
+  }
 
-    constructor() {
-        makeAutoObservable(this, {
-            roleId: observable,
-            name: observable,
-            description: observable,
-        })
-    }
+  fromJson(json: any) {
+    runInAction(() => {
+      Object.assign(this, json);
+    });
+    return this;
+  }
 
-    fromJson(json: any) {
-        runInAction(() => {
-            this.roleId = json.roleId;
-            this.name = json.name;
-            this.description = json.description;
-            this.isProtected = json.protected;
-        })
-        return this;
-    }
+  get validate() {
+    return (
+      notEmptyString(this.name) &&
+      validateName(this.name, { diacritics: true }) &&
+      (this.allProjects || this.projects.length > 0)
+    );
+  };
 
-    toJson() {
-        return {
-            id: this.roleId,
-            name: this.name,
-            description: this.description,
-        }
-    }
+  exists() {
+    return Boolean(this.roleId);
+  }
+
+  toJson() {
+    return {
+      id: this.roleId,
+      name: this.name,
+      description: this.description,
+      permissions: this.permissions,
+      allProjects: this.allProjects,
+    };
+  }
 }
diff --git a/frontend/app/mstore/types/savedSearch.ts b/frontend/app/mstore/types/savedSearch.ts
new file mode 100644
index 000000000..fe7d0d653
--- /dev/null
+++ b/frontend/app/mstore/types/savedSearch.ts
@@ -0,0 +1,77 @@
+import Filter from './filter';
+import { notEmptyString } from 'App/validate';
+import FilterItem from 'App/mstore/types/filterItem';
+
+interface FilterType {
+  filters: FilterItem[];
+}
+
+export interface ISavedSearch {
+  searchId?: string;
+  projectId?: string;
+  userId?: string;
+  name: string;
+  filter: FilterType;
+  createdAt?: string;
+  count: number;
+  isPublic: boolean;
+  toData(): any;
+  exists(): boolean;
+}
+
+class SavedSearch implements ISavedSearch{
+  searchId?: string;
+  projectId?: string;
+  userId?: string;
+  name: string;
+  filter: FilterType;
+  createdAt?: string;
+  count: number;
+  isPublic: boolean;
+
+  constructor({
+                searchId,
+                projectId,
+                userId,
+                name = '',
+                filter = new Filter(),
+                createdAt,
+                count = 0,
+                isPublic = false
+              }: Partial<ISavedSearch> = {}) {
+    this.searchId = searchId;
+    this.projectId = projectId;
+    this.userId = userId;
+    this.name = name;
+    this.filter = filter;
+    this.createdAt = createdAt;
+    this.count = count;
+    this.isPublic = isPublic;
+  }
+
+  exists(): boolean {
+    return !!this.searchId;
+  }
+
+  validate(): boolean {
+    return notEmptyString(this.name);
+  }
+
+  toData() {
+    const js = { ...this };
+    js.filter.filters = js.filter.filters.map(f => ({
+      ...f,
+      value: Array.isArray(f.value) ? f.value : [f.value]
+    }));
+    return js;
+  }
+
+  static fromJS(data: Partial<ISavedSearch>): SavedSearch {
+    return new SavedSearch({
+      ...data,
+      filter: new Filter().fromJson(data.filter)
+    });
+  }
+}
+
+export default SavedSearch;
diff --git a/frontend/app/mstore/types/search.ts b/frontend/app/mstore/types/search.ts
new file mode 100644
index 000000000..059b724a6
--- /dev/null
+++ b/frontend/app/mstore/types/search.ts
@@ -0,0 +1,178 @@
+import { DATE_RANGE_VALUES, CUSTOM_RANGE, getDateRangeFromValue } from 'App/dateRange';
+import Filter, { checkFilterValue, IFilter } from 'App/mstore/types/filter';
+import FilterItem from 'App/mstore/types/filterItem';
+import { action, makeAutoObservable, observable } from 'mobx';
+
+// @ts-ignore
+const rangeValue = DATE_RANGE_VALUES.LAST_24_HOURS;
+const range: any = getDateRangeFromValue(rangeValue);
+const startDate = range.start.ts;
+const endDate = range.end.ts;
+
+interface ISearch {
+  name: string;
+  searchId?: number;
+  referrer?: string;
+  userBrowser?: string;
+  userOs?: string;
+  userCountry?: string;
+  userDevice?: string;
+  fid0?: string;
+  events: Event[];
+  filters: IFilter[];
+  minDuration?: number;
+  maxDuration?: number;
+  custom: Record<string, any>;
+  rangeValue: string;
+  startDate: number;
+  endDate: number;
+  groupByUser: boolean;
+  sort: string;
+  order: string;
+  viewed?: boolean;
+  consoleLogCount?: number;
+  eventsCount?: number;
+  suspicious?: boolean;
+  consoleLevel?: string;
+  strict: boolean;
+  eventsOrder: string;
+}
+
+export default class Search {
+  name: string;
+  searchId?: number;
+  referrer?: string;
+  userBrowser?: string;
+  userOs?: string;
+  userCountry?: string;
+  userDevice?: string;
+  fid0?: string;
+  events: Event[];
+  filters: FilterItem[];
+  minDuration?: number;
+  maxDuration?: number;
+  custom: Record<string, any>;
+  rangeValue: string;
+  startDate: number;
+  endDate: number;
+  groupByUser: boolean;
+  sort: string;
+  order: string;
+  viewed?: boolean;
+  consoleLogCount?: number;
+  eventsCount?: number;
+  suspicious?: boolean;
+  consoleLevel?: string;
+  strict: boolean;
+  eventsOrder: string;
+  limit: number;
+
+  constructor(initialData?: Partial<ISearch>) {
+    makeAutoObservable(this, {
+      filters: observable,
+    });
+    Object.assign(this, {
+      name: '',
+      searchId: undefined,
+      referrer: undefined,
+      userBrowser: undefined,
+      userOs: undefined,
+      userCountry: undefined,
+      userDevice: undefined,
+      fid0: undefined,
+      events: [],
+      filters: [],
+      minDuration: undefined,
+      maxDuration: undefined,
+      custom: {},
+      rangeValue,
+      startDate,
+      endDate,
+      groupByUser: false,
+      sort: 'startTs',
+      order: 'desc',
+      viewed: undefined,
+      consoleLogCount: undefined,
+      eventsCount: undefined,
+      suspicious: undefined,
+      consoleLevel: undefined,
+      strict: false,
+      eventsOrder: 'then',
+      limit: 10,
+      ...initialData
+    });
+  }
+
+  exists() {
+    return Boolean(this.searchId);
+  }
+
+  toSaveData() {
+    const js: any = { ...this };
+    js.filters = js.filters.map((filter: any) => {
+      filter.type = filter.key;
+      delete filter.category;
+      delete filter.icon;
+      delete filter.operatorOptions;
+      delete filter._key;
+      delete filter.key;
+      return filter;
+    });
+
+    delete js.createdAt;
+    delete js.key;
+    delete js._key;
+    return js;
+  }
+
+  toData() {
+    const js: any = { ...this };
+    // js.filters = this.filters.map((filter: any) => {
+    //   return new FilterItem().fromJson(filter).toJson();
+    // });
+
+    delete js.createdAt;
+    delete js.key;
+    return js;
+  }
+
+  toSearch() {
+    const js: any = { ...this };
+    js.filters = this.filters.map((filter: any) => {
+      return new FilterItem(filter).toJson();
+    });
+
+    delete js.createdAt;
+    delete js.key;
+    return js;
+  }
+
+  static fromJS({ eventsOrder, filters, events, custom, ...filterData }: any) {
+    let startDate, endDate;
+    const rValue = filterData.rangeValue || rangeValue;
+
+    if (rValue !== CUSTOM_RANGE) {
+      const range: any = getDateRangeFromValue(rValue);
+      startDate = range.start.ts;
+      endDate = range.end.ts;
+    } else if (filterData.startDate && filterData.endDate) {
+      startDate = filterData.startDate;
+      endDate = filterData.endDate;
+    }
+
+    return new Search({
+      ...filterData,
+      eventsOrder,
+      startDate,
+      endDate,
+      events: events.map((event: any) => new Event(event)),
+      filters: filters.map((i: any) => {
+        const filter = new Filter(i).toData();
+        if (Array.isArray(i.filters)) {
+          filter.filters = i.filters.map((f: any) => new Filter({ ...f, subFilter: i.type }).toData());
+        }
+        return filter;
+      })
+    });
+  }
+}
diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts
index 8495f1aed..99f1ad92d 100644
--- a/frontend/app/mstore/types/widget.ts
+++ b/frontend/app/mstore/types/widget.ts
@@ -9,7 +9,7 @@ import Period, {LAST_24_HOURS} from 'Types/app/period';
 import Funnel from '../types/funnel';
 import {metricService} from 'App/services';
 import { FUNNEL, HEATMAP, INSIGHTS, TABLE, USER_PATH, WEB_VITALS } from "App/constants/card";
-import Error from '../types/error';
+import { ErrorInfo } from '../types/error';
 import {getChartFormatter} from 'Types/dashboard/helper';
 import FilterItem from './filterItem';
 import {filtersMap} from 'Types/filter/newFilter';
@@ -299,7 +299,7 @@ export default class Widget {
         }
 
         if (this.metricOf === FilterKey.ERRORS) {
-            _data['errors'] = data.errors.map((s: any) => new Error().fromJSON(s));
+            _data['errors'] = data.errors.map((s: any) => new ErrorInfo(s));
         } else if (this.metricType === INSIGHTS) {
             _data['issues'] = data
                 .filter((i: any) => i.change > 0 || i.change < 0)
diff --git a/frontend/app/mstore/uiPlayerStore.ts b/frontend/app/mstore/uiPlayerStore.ts
new file mode 100644
index 000000000..34c7a5cd2
--- /dev/null
+++ b/frontend/app/mstore/uiPlayerStore.ts
@@ -0,0 +1,110 @@
+import { makeAutoObservable } from 'mobx';
+
+interface ToggleZoomPayload {
+  enabled: boolean;
+  range?: [number, number];
+}
+
+export const NONE = 0;
+export const CONSOLE = 1;
+export const NETWORK = 2;
+export const STACKEVENTS = 3;
+export const STORAGE = 4;
+export const PROFILER = 5;
+export const PERFORMANCE = 6;
+export const GRAPHQL = 7;
+export const FETCH = 8;
+export const EXCEPTIONS = 9;
+export const INSPECTOR = 11;
+export const OVERVIEW = 12;
+
+export const blocks = {
+  none: NONE,
+  console: CONSOLE,
+  network: NETWORK,
+  stackEvents: STACKEVENTS,
+  storage: STORAGE,
+  profiler: PROFILER,
+  performance: PERFORMANCE,
+  graphql: GRAPHQL,
+  fetch: FETCH,
+  exceptions: EXCEPTIONS,
+  inspector: INSPECTOR,
+  overview: OVERVIEW,
+} as const;
+
+export const blockValues = [
+  NONE,
+  CONSOLE,
+  NETWORK,
+  STACKEVENTS,
+  STORAGE,
+  PROFILER,
+  PERFORMANCE,
+  GRAPHQL,
+  FETCH,
+  EXCEPTIONS,
+  INSPECTOR,
+  OVERVIEW,
+] as const;
+
+export default class UiPlayerStore {
+  fullscreen = false;
+  bottomBlock = 0;
+  hiddenHints = {
+    storage: localStorage.getItem('storageHideHint') || undefined,
+    stack: localStorage.getItem('stackHideHint') || undefined,
+  };
+  skipInterval: 2 | 5 | 10 | 15 | 20 | 30 | 60 = parseInt(localStorage.getItem('CHANGE_SKIP_INTERVAL') || '10', 10) as (2 | 5 | 10 | 15 | 20 | 30 | 60)
+  timelineZoom = {
+    enabled: false,
+    startTs: 0,
+    endTs: 0,
+  }
+  zoomTab: 'overview' | 'journey' | 'issues' | 'errors' = 'overview'
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  toggleFullscreen = (val?: boolean) => {
+    this.fullscreen = val ?? !this.fullscreen;
+  }
+
+  fullscreenOff = () => {
+    this.fullscreen = false;
+  }
+
+  fullscreenOn = () => {
+    this.fullscreen = true;
+  }
+
+  toggleBottomBlock = (block: number) => {
+    this.bottomBlock = this.bottomBlock === block ? 0 : block;
+  }
+
+  closeBottomBlock = () => {
+    this.bottomBlock = 0;
+  }
+
+  changeSkipInterval = (interval: 2 | 5 | 10 | 15 | 20 | 30 | 60) => {
+    localStorage.setItem('CHANGE_SKIP_INTERVAL', interval.toString());
+    this.skipInterval = interval;
+  }
+
+  hideHint = (hint: 'storage' | 'stack') => {
+    this.hiddenHints[hint] = 'true';
+    localStorage.setItem(`${hint}HideHint`, 'true');
+    this.bottomBlock = 0;
+  }
+
+  toggleZoom = (payload: ToggleZoomPayload) => {
+    this.timelineZoom.enabled = payload.enabled;
+    this.timelineZoom.startTs = payload.range?.[0] ?? 0;
+    this.timelineZoom.endTs = payload.range?.[1] ?? 0;
+  }
+
+  setZoomTab = (tab: 'overview' | 'journey' | 'issues' | 'errors') => {
+    this.zoomTab = tab;
+  }
+}
\ No newline at end of file
diff --git a/frontend/app/mstore/userStore.ts b/frontend/app/mstore/userStore.ts
index 8af7111e4..9a59bb9e6 100644
--- a/frontend/app/mstore/userStore.ts
+++ b/frontend/app/mstore/userStore.ts
@@ -1,53 +1,132 @@
+import Account from 'Types/account';
+import Client from 'Types/client';
 import copy from 'copy-to-clipboard';
-import { action, makeAutoObservable, observable } from 'mobx';
+import { makeAutoObservable, runInAction } from 'mobx';
+import { makePersistable } from 'mobx-persist-store';
 import { toast } from 'react-toastify';
 
 import { userService } from 'App/services';
+import { deleteCookie } from 'App/utils';
 
-import User from './types/user';
+import User from 'App/mstore/types/user';
 
-export default class UserStore {
+class UserStore {
   list: User[] = [];
   instance: User | null = null;
   page: number = 1;
   pageSize: number = 10;
   searchQuery: string = '';
   modifiedCount: number = 0;
-
   loading: boolean = false;
   saving: boolean = false;
   limits: any = {};
   initialDataFetched: boolean = false;
 
+  account = new Account();
+  siteId: string | null = null;
+  passwordRequestError: boolean = false;
+  passwordErrors: string[] = [];
+  tenants: any[] = [];
+  authDetails: Record<string, any> = {};
+  onboarding: boolean = false;
+  sites: any[] = [];
+  jwt: string | null = null;
+  spotJwt: string | null = null;
+  errors: any[] = [];
+  loginRequest = {
+    loading: false,
+    errors: [] as string[],
+  };
+  fetchInfoRequest = {
+    loading: false,
+    errors: [] as string[],
+  };
+  signUpRequest = {
+    loading: false,
+    errors: [] as string[],
+  };
+  updatePasswordRequest = {
+    loading: false,
+    errors: [] as string[],
+  };
+  scopeState: number | null = null;
+  client = new Client();
+
   constructor() {
-    makeAutoObservable(this, {
-      instance: observable,
-      updateUser: action,
-      updateKey: action,
-      initUser: action,
-      setLimits: action,
-    });
+    makeAutoObservable(this);
+
+    makePersistable(
+      this,
+      {
+        name: 'UserStore',
+        properties: [
+          'siteId',
+          'tenants',
+          'jwt',
+          'spotJwt',
+          'scopeState',
+          'authDetails',
+          'onboarding',
+          {
+            key: 'account',
+            serialize: (acc) => {
+              return acc.id ? JSON.stringify(acc.toData()) : JSON.stringify({});
+            },
+            deserialize: (json) => {
+              return new Account(JSON.parse(json));
+            },
+          },
+          {
+            key: 'authDetails',
+            serialize: (ad) => {
+              return Object.keys(ad).length > 0 ? JSON.stringify(ad) : JSON.stringify({});
+            },
+            deserialize: (json) => {
+              return JSON.parse(json)
+            },
+          },
+        ],
+        storage: window.localStorage,
+      },
+      {
+        delay: 200,
+      }
+    );
   }
 
-  fetchLimits(): Promise<any> {
+  get isEnterprise() {
+    return (
+      this.account?.edition === 'ee' ||
+      this.account?.edition === 'msaas' ||
+      this.authDetails?.edition === 'ee'
+    );
+  }
+
+  get isLoggedIn() {
+    return Boolean(this.jwt);
+  }
+
+  fetchLimits = (): Promise<any> => {
     return new Promise((resolve, reject) => {
       userService
         .getLimits()
         .then((response: any) => {
-          this.setLimits(response);
+          runInAction(() => {
+            this.setLimits(response);
+          });
           resolve(response);
         })
         .catch((error: any) => {
           reject(error);
         });
     });
-  }
+  };
 
-  setLimits(limits: any) {
+  setLimits = (limits: any) => {
     this.limits = limits;
-  }
+  };
 
-  initUser(user?: any): Promise<void> {
+  initUser = (user?: User): Promise<void> => {
     return new Promise((resolve) => {
       if (user) {
         this.instance = new User().fromJson(user.toJson());
@@ -56,82 +135,99 @@ export default class UserStore {
       }
       resolve();
     });
-  }
+  };
 
-  updateKey(key: keyof this, value: any) {
+  updateKey = (key: keyof this, value: any) => {
+    // @ts-ignore
     this[key] = value;
 
     if (key === 'searchQuery') {
       this.page = 1;
     }
-  }
+  };
 
-  updateUser(user: User) {
+  updateUser = (user: User) => {
     const index = this.list.findIndex((u) => u.userId === user.userId);
     if (index > -1) {
       this.list[index] = user;
     }
-  }
+  };
 
-  fetchUser(userId: string): Promise<any> {
+  fetchUser = (userId: string): Promise<any> => {
     this.loading = true;
     return new Promise((resolve, reject) => {
       userService
         .one(userId)
-        .then((response) => {
-          this.instance = new User().fromJson(response.data);
-          resolve(response);
+        .then((data) => {
+          runInAction(() => {
+            this.instance = new User().fromJson(data);
+          });
+          resolve(data);
         })
         .catch((error) => {
-          this.loading = false;
+          runInAction(() => {
+            this.loading = false;
+          });
           reject(error);
         })
         .finally(() => {
-          this.loading = false;
+          runInAction(() => {
+            this.loading = false;
+          });
         });
     });
-  }
+  };
 
-  fetchUsers(): Promise<any> {
+  fetchUsers = (): Promise<any> => {
     this.loading = true;
     return new Promise((resolve, reject) => {
       userService
         .all()
         .then((response) => {
-          this.list = response.map((user) => new User().fromJson(user));
+          runInAction(() => {
+            this.list = response.map((user: any) => new User().fromJson(user));
+          });
           resolve(response);
         })
         .catch((error) => {
-          this.loading = false;
+          runInAction(() => {
+            this.loading = false;
+          });
           reject(error);
         })
         .finally(() => {
-          this.loading = false;
+          runInAction(() => {
+            this.loading = false;
+          });
         });
     });
-  }
+  };
 
-  saveUser(user: User): Promise<any> {
+  saveUser = (user: User): Promise<any> => {
     this.saving = true;
     const wasCreating = !user.userId;
     return new Promise((resolve, reject) => {
       userService
         .save(user)
         .then((response) => {
-          const newUser = new User().fromJson(response);
-          if (wasCreating) {
-            this.modifiedCount -= 1;
-            this.list.push(newUser);
-            toast.success('User created successfully');
-          } else {
-            this.updateUser(newUser);
-            toast.success('User updated successfully');
-          }
+          runInAction(() => {
+            const newUser = new User().fromJson(response);
+            if (wasCreating) {
+              this.modifiedCount -= 1;
+              this.list.push(newUser);
+              toast.success('User created successfully');
+            } else {
+              this.updateUser(newUser);
+              toast.success('User updated successfully');
+            }
+          });
           resolve(response);
         })
         .catch(async (e) => {
           const err = await e.response?.json();
-          this.saving = false;
+          runInAction(() => {
+            this.saving = false;
+          });
           const errStr = err.errors[0]
             ? err.errors[0].includes('already exists')
               ? `This email is already linked to an account or team on OpenReplay and can't be used again.`
@@ -141,33 +237,41 @@ export default class UserStore {
           reject(e);
         })
         .finally(() => {
-          this.saving = false;
+          runInAction(() => {
+            this.saving = false;
+          });
         });
     });
-  }
+  };
 
-  deleteUser(userId: string): Promise<any> {
+  deleteUser = (userId: string): Promise<any> => {
     this.saving = true;
     return new Promise((resolve, reject) => {
       userService
         .delete(userId)
         .then((response) => {
-          this.modifiedCount += 1;
-          this.list = this.list.filter((user) => user.userId !== userId);
+          runInAction(() => {
+            this.modifiedCount += 1;
+            this.list = this.list.filter((user) => user.userId !== userId);
+          });
           resolve(response);
         })
         .catch((error) => {
-          this.saving = false;
+          runInAction(() => {
+            this.saving = false;
+          });
           toast.error('Error deleting user');
           reject(error);
         })
         .finally(() => {
-          this.saving = false;
+          runInAction(() => {
+            this.saving = false;
+          });
         });
     });
-  }
+  };
 
-  copyInviteCode(userId: string): void {
+  copyInviteCode = (userId: string): void => {
     const content = this.list.find((u) => u.userId === userId)?.invitationLink;
     if (content) {
       copy(content);
@@ -175,31 +279,37 @@ export default class UserStore {
     } else {
       toast.error('Invite code not found');
     }
-  }
+  };
 
-  generateInviteCode(userId: string): Promise<any> {
+  generateInviteCode = (userId: string): Promise<any> => {
     this.saving = true;
     const promise = new Promise((resolve, reject) => {
       userService
         .generateInviteCode(userId)
         .then((response) => {
-          const index = this.list.findIndex((u) => u.userId === userId);
-          if (index > -1) {
-            this.list[index].updateKey('isExpiredInvite', false);
-            this.list[index].updateKey(
-              'invitationLink',
-              response.invitationLink
-            );
-          }
-          copy(response.invitationLink);
+          runInAction(() => {
+            const index = this.list.findIndex((u) => u.userId === userId);
+            if (index > -1) {
+              this.list[index].updateKey('isExpiredInvite', false);
+              this.list[index].updateKey(
+                'invitationLink',
+                response.invitationLink
+              );
+            }
+            copy(response.invitationLink);
+          });
           resolve(response);
         })
         .catch((error) => {
-          this.saving = false;
+          runInAction(() => {
+            this.saving = false;
+          });
           reject(error);
         })
         .finally(() => {
-          this.saving = false;
+          runInAction(() => {
+            this.saving = false;
+          });
         });
     });
 
@@ -209,5 +319,309 @@ export default class UserStore {
     });
 
     return promise;
-  }
+  };
+
+  syntheticLogin = ({ data }: any) => {
+    this.account = new Account(data.user);
+    this.spotJwt = data.spotJwt;
+    this.scopeState = data.scopeState;
+    this.loginRequest = { loading: false, errors: [] };
+  };
+
+  syntheticLoginError = (errors: any) => {
+    deleteCookie('jwt', '/', 'openreplay.com');
+    this.loginRequest = {
+      loading: false,
+      errors: errors || [],
+    };
+  };
+
+  login = async (params: any) => {
+    this.loginRequest = { loading: true, errors: [] };
+    try {
+      const data = await userService.login(params);
+      runInAction(() => {
+        this.account = new Account(data.user);
+        this.jwt = data.jwt;
+        this.spotJwt = data.spotJwt;
+        this.scopeState = data.scopeState;
+        this.loginRequest = { loading: false, errors: [] };
+      });
+    } catch (error: any) {
+      runInAction(() => {
+        console.log('Login failed', error);
+        deleteCookie('jwt', '/', 'openreplay.com');
+        this.loginRequest = {
+          loading: false,
+          errors: error.errors || [],
+        };
+      });
+    }
+  };
+
+  signup = async (params: any) => {
+    runInAction(() => {
+      this.signUpRequest = { loading: true, errors: [] };
+    });
+    try {
+      const data = await userService.signup(params);
+      runInAction(() => {
+        this.account = new Account(data.user);
+        this.scopeState = data.scopeState;
+        this.spotJwt = data.spotJwt;
+        this.jwt = data.jwt;
+        this.signUpRequest = { loading: false, errors: [] };
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.signUpRequest = {
+          loading: false,
+          errors: error.response?.errors || [],
+        };
+      });
+      toast.error('Error signing up; please check your data and try again');
+    } finally {
+      runInAction(() => {
+        this.signUpRequest.loading = false;
+      });
+    }
+  };
+
+  resetPassword = async (params: any) => {
+    runInAction(() => {
+      this.loading = true;
+    });
+    try {
+      const data = await userService.resetPassword(params);
+      runInAction(() => {
+        this.account = new Account(data.user);
+      });
+    } catch (error) {
+      toast.error('Error resetting your password; please try again');
+      return error.response;
+    } finally {
+      runInAction(() => {
+        this.loading = false;
+      });
+    }
+  };
+
+  requestResetPassword = async (params: any) => {
+    runInAction(() => {
+      this.loading = true;
+    });
+    try {
+      await userService.requestResetPassword(params);
+    } catch (error) {
+      toast.error('Error resetting your password; please try again');
+      return error.response;
+    } finally {
+      runInAction(() => {
+        this.loading = false;
+      });
+    }
+  };
+
+  updatePassword = async (params: any) => {
+    runInAction(() => {
+      this.updatePasswordRequest = { loading: true, errors: [] };
+    });
+    try {
+      await userService.updatePassword(params);
+      runInAction(() => {
+        this.updatePasswordRequest = { loading: false, errors: [] };
+      });
+      return;
+    } catch (error: any) {
+      runInAction(() => {
+        this.updatePasswordRequest = {
+          loading: false,
+          errors: error.response?.errors || [],
+        };
+      });
+      return error.response;
+    }
+  };
+
+  fetchTenants = async () => {
+    try {
+      const response = await userService.fetchTenants();
+      runInAction(() => {
+        this.authDetails = response;
+      });
+    } catch (error) {
+      // TODO error handling
+    }
+  };
+
+  fetchUserInfo = async () => {
+    runInAction(() => {
+      this.fetchInfoRequest = { loading: true, errors: [] };
+    });
+    try {
+      const data = await userService.fetchUserInfo();
+      runInAction(() => {
+        this.account = new Account(data);
+        this.scopeState = data.scopeState;
+        this.passwordErrors = [];
+      });
+    } catch (error) {
+      runInAction(() => {
+        deleteCookie('jwt', '/', 'openreplay.com');
+        this.resetStore();
+      });
+    } finally {
+      runInAction(() => {
+        this.fetchInfoRequest = { loading: false, errors: [] };
+      });
+    }
+  };
+
+  logout = async () => {
+    try {
+      await userService.logout();
+      runInAction(() => {
+        deleteCookie('jwt', '/', 'openreplay.com');
+        this.resetStore();
+      });
+    } catch (error) {
+      // TODO error handling
+    }
+  };
+
+  updateClient = async (params: any) => {
+    runInAction(() => {
+      this.loading = true;
+    });
+    try {
+      await userService.updateClient(params);
+      runInAction(() => {
+        this.client = new Client({ ...this.client, ...params });
+      });
+    } catch (error) {
+      // TODO error handling
+    } finally {
+      runInAction(() => {
+        this.loading = false;
+      });
+    }
+  };
+
+  updateJwt = ({ jwt, spotJwt }: { jwt?: string; spotJwt?: string }) => {
+    this.jwt = jwt ?? null;
+    this.spotJwt = spotJwt ?? null;
+  };
+
+  getJwt = () => {
+    return this.jwt;
+  };
+
+  updateAccount = async (params: any) => {
+    runInAction(() => {
+      this.loading = true;
+    });
+    try {
+      const data = await userService.updateAccount(params);
+      runInAction(() => {
+        this.account = new Account(data);
+        this.scopeState = data.scopeState;
+        this.passwordErrors = [];
+      });
+    } catch (error) {
+      // TODO error handling
+    } finally {
+      runInAction(() => {
+        this.loading = false;
+      });
+    }
+  };
+
+  resendEmailVerification = async (email: string) => {
+    try {
+      await userService.resendEmailVerification(email);
+    } catch (error) {
+      // TODO error handling
+    }
+  };
+
+  pushNewSite = (newSite: any) => {
+    this.sites.push(newSite);
+  };
+
+  setOnboarding = (state: boolean = false) => {
+    this.onboarding = state;
+  };
+
+  resetErrors = () => {
+    this.passwordErrors = [];
+    this.loginRequest.errors = [];
+    this.errors = [];
+  };
+
+  updateModule = (moduleKey: string) => {
+    const modules = this.account.settings?.modules || [];
+    if (modules.includes(moduleKey)) {
+      this.account.settings.modules = modules.filter(
+        (module: string) => module !== moduleKey
+      );
+    } else {
+      this.account.settings.modules = [...modules, moduleKey];
+    }
+  };
+
+  upgradeScope = async () => {
+    try {
+      await userService.changeScope(2);
+      runInAction(() => {
+        this.scopeState = 2;
+      });
+    } catch (error) {
+      // TODO error handling
+    }
+  };
+
+  downgradeScope = async () => {
+    try {
+      await userService.changeScope(1);
+      runInAction(() => {
+        this.scopeState = 1;
+      });
+    } catch (error) {
+      // TODO error handling
+    }
+  };
+
+  resetStore = async () => {
+    this.account = new Account();
+    this.siteId = null;
+    this.passwordRequestError = false;
+    this.passwordErrors = [];
+    this.tenants = [];
+    this.authDetails = {};
+    this.onboarding = false;
+    this.sites = [];
+    this.jwt = null;
+    this.spotJwt = null;
+    this.errors = [];
+    this.loginRequest = {
+      loading: false,
+      errors: [],
+    };
+    this.scopeState = null;
+    this.client = new Client();
+    this.list = [];
+    this.instance = null;
+    this.page = 1;
+    this.pageSize = 10;
+    this.searchQuery = '';
+    this.modifiedCount = 0;
+    this.loading = false;
+    this.saving = false;
+    this.limits = {};
+    this.initialDataFetched = false;
+  };
 }
+
+const userStore = new UserStore();
+
+export default userStore;
\ No newline at end of file
diff --git a/frontend/app/player/web/WebPlayer.ts b/frontend/app/player/web/WebPlayer.ts
index f89e93e50..1276a3208 100644
--- a/frontend/app/player/web/WebPlayer.ts
+++ b/frontend/app/player/web/WebPlayer.ts
@@ -2,7 +2,6 @@ import { Log, LogLevel, SessionFilesInfo } from 'App/player'
 
 import type { Store } from 'App/player'
 import Player from '../player/Player'
-
 import MessageManager from './MessageManager'
 import MessageLoader from './MessageLoader'
 import InspectorController from './addons/InspectorController'
@@ -73,7 +72,6 @@ export default class WebPlayer extends Player {
     this.targetMarker = new TargetMarker(this.screen, wpState)
     this.inspectorController = new InspectorController(screen, wpState)
 
-
     const endTime = session.duration?.valueOf() || 0
     wpState.update({
       //@ts-ignore
diff --git a/frontend/app/player/web/assist/Call.ts b/frontend/app/player/web/assist/Call.ts
index 7dd24e668..659e8b796 100644
--- a/frontend/app/player/web/assist/Call.ts
+++ b/frontend/app/player/web/assist/Call.ts
@@ -4,8 +4,7 @@ import type { MediaConnection } from 'peerjs';
 import type { LocalStream } from './LocalStream';
 import type { Socket } from './types';
 import type { Store } from '../../common/types';
-
-import appStore from 'App/store';
+import { userStore } from "App/mstore";
 
 export enum CallingState {
   NoCall,
@@ -168,7 +167,8 @@ export default class Call {
   };
 
   initiateCallEnd = async () => {
-    this.emitData('call_end', appStore.getState().getIn(['user', 'account', 'name']));
+    const userName = userStore.account.name;
+    this.emitData('call_end', userName);
     this.handleCallEnd();
     // TODO:  We have it separated, right? (check)
     // const remoteControl = this.store.get().remoteControl
@@ -249,7 +249,8 @@ export default class Call {
         ? this.peerID
         : `${this.peerID}-${tab || Object.keys(this.store.get().tabs)[0]}`;
 
-    this.emitData('_agent_name', appStore.getState().getIn(['user', 'account', 'name']));
+    const userName = userStore.account.name;
+    this.emitData('_agent_name', userName);
     void this._peerConnection(peerId);
   }
 
diff --git a/frontend/app/services/CustomFieldService.ts b/frontend/app/services/CustomFieldService.ts
new file mode 100644
index 000000000..1b85e92ba
--- /dev/null
+++ b/frontend/app/services/CustomFieldService.ts
@@ -0,0 +1,29 @@
+import BaseService from './BaseService';
+
+export default class CustomFieldService extends BaseService {
+  async fetchList(projectId?: string): Promise<any> {
+    return this.client.get(projectId ? `/${projectId}/metadata` : '/metadata')
+      .then(r => r.json()).then(j => j.data);
+  }
+
+  async get(projectId?: string): Promise<any> {
+    const url = projectId ? `/${projectId}/metadata` : '/PROJECT_ID/metadata';
+    return this.client.get(url)
+      .then(r => r.json()).then(j => j.data);
+  }
+
+  async create(projectId: string, customField: any): Promise<any> {
+    return this.client.post(`/${projectId}/metadata`, customField)
+      .then(r => r.json()).then(j => j.data);
+  }
+
+  async update(projectId: string, instance: any): Promise<any> {
+    return this.client.put(`/${projectId}/metadata/${instance.index}`, instance)
+      .then(r => r.json()).then(j => j.data);
+  }
+
+  async delete(projectId: string, index: string): Promise<any> {
+    return this.client.delete(`/${projectId}/metadata/${index}`)
+      .then(r => r.json()).then(j => j.data);
+  }
+}
diff --git a/frontend/app/services/DashboardService.ts b/frontend/app/services/DashboardService.ts
index 4c16c4e76..0b8e2a07d 100644
--- a/frontend/app/services/DashboardService.ts
+++ b/frontend/app/services/DashboardService.ts
@@ -1,22 +1,12 @@
 import Dashboard from "App/mstore/types/dashboard";
-import APIClient from 'App/api_client';
+import BaseService from "./BaseService";
 import Widget from "App/mstore/types/widget";
 
-export default class DashboardService {
-    private client: APIClient;
-
-    constructor(client?: APIClient) {
-        this.client = client ? client : new APIClient();
-    }
-
-    initClient(client?: APIClient) {
-        this.client = client || new APIClient();
-    }
-
+export default class DashboardService  extends BaseService {
     /**
      * Get all widgets from a dashboard.
      * @param dashboardId Required
-     * @returns 
+     * @returns
      */
     getWidgets(dashboardId: string): Promise<any> {
         return this.client.get(`/dashboards/${dashboardId}/widgets`)
@@ -34,10 +24,10 @@ export default class DashboardService {
             .then(response => response.json())
             .then(response => response.data || []);
     }
-    
+
     /**
      * Get a dashboard by dashboardId.
-     * @param dashboardId 
+     * @param dashboardId
      * @returns {Promise<any>}
      */
     getDashboard(dashboardId: string): Promise<any> {
@@ -66,9 +56,9 @@ export default class DashboardService {
 
     /**
      * Add a widget to a dashboard.
-     * @param dashboard 
-     * @param metricIds 
-     * @returns 
+     * @param dashboard
+     * @param metricIds
+     * @returns
      */
     addWidget(dashboard: Dashboard, metricIds: any): Promise<any> {
         const data = dashboard.toJson()
@@ -80,7 +70,7 @@ export default class DashboardService {
 
     /**
      * Delete a dashboard.
-     * @param dashboardId 
+     * @param dashboardId
      * @returns {Promise<any>}
      */
     deleteDashboard(dashboardId: string): Promise<any> {
@@ -89,7 +79,7 @@ export default class DashboardService {
 
 
     /**
-     * Create a new Meitrc, if the dashboardId is not provided, 
+     * Create a new Meitrc, if the dashboardId is not provided,
      * it will add the metric to the dashboard.
      * @param metric Required
      * @param dashboardId Optional
diff --git a/frontend/app/services/ErrorService.ts b/frontend/app/services/ErrorService.ts
index 9e9402b45..70d51ccc3 100644
--- a/frontend/app/services/ErrorService.ts
+++ b/frontend/app/services/ErrorService.ts
@@ -1,17 +1,35 @@
 import BaseService from './BaseService';
+import { IErrorStack } from 'Types/session/errorStack';
 
 export default class ErrorService extends BaseService {
-    all(params: any = {}): Promise<any[]> {
-        return this.client.post('/errors/search', params)
-            .then(r => r.json())
-            .then((response: { data: any; }) => response.data || [])
-            .catch(e => Promise.reject(e))
-    }
+  fetchError = async (id: string) => {
+    const r = await this.client.get(`/errors/${id}`);
 
-    one(id: string): Promise<any> {
-        return this.client.get(`/errors/${id}`)
-            .then(r => r.json())
-            .then((response: { data: any; }) => response.data || {})
-            .catch(e => Promise.reject(e))
-    }
-}
\ No newline at end of file
+    return await r.json();
+  };
+
+  fetchErrorList = async (params: Record<string, any>) => {
+    const r = await this.client.post('/errors/search', params);
+
+    return await r.json();
+  };
+
+  fetchErrorTrace = async (id: string): Promise<{ trace: IErrorStack[], sourcemapUploaded: boolean }> => {
+    const r = await this.client.get(`/errors/${id}/sourcemaps`);
+    const { data } = await r.json()
+
+    return data;
+  };
+
+  fetchNewErrorsCount = async (params: any) => {
+    const r = await this.client.get('/errors/stats', params);
+
+    return await r.json();
+  };
+
+  fetchErrorStats = async (errorId: string) => {
+    const r = await this.client.get(`/errors/${errorId}/stats`);
+
+    return await r.json();
+  }
+}
diff --git a/frontend/app/services/IntegrationsService.ts b/frontend/app/services/IntegrationsService.ts
new file mode 100644
index 000000000..b07e50df9
--- /dev/null
+++ b/frontend/app/services/IntegrationsService.ts
@@ -0,0 +1,63 @@
+import BaseService from "./BaseService";
+
+export default class IntegrationsService extends BaseService {
+  fetchList = async (name?: string, siteId?: string) => {
+    const r = await this.client.get(`${siteId ? `/${siteId}` : ''}/integrations${name ? `/${name}` : ''}`)
+    const data = await r.json()
+
+    return data
+  }
+
+  fetchIntegration = async (name: string, siteId: string) => {
+    const url = siteId && name !== 'github' && name !== 'jira' ? `/${siteId}/integrations/${name}` : `/integrations/${name}`
+    const r = await this.client.get(url)
+    const data = await r.json()
+
+    return data
+  }
+
+  saveIntegration = async (name: string, data: any, siteId?: string) => {
+    const url = (siteId ? `/${siteId}` : '') + `/integrations/${name}`
+    const r = await this.client.post(url, data)
+    const res = await r.json()
+
+    return res
+  }
+
+  removeIntegration = async (name: string, siteId?: string) => {
+    const url = (siteId ? `/${siteId}` : '') + `/integrations/${name}`
+    const r = await this.client.delete(url)
+
+    return await r.json()
+  }
+
+  fetchMessengerChannels = async (name: string) => {
+    const r = await this.client.get(`/integrations/${name}/channels`)
+
+    return await r.json()
+  }
+
+  updateMessengerInt = async (name: string, data: any) => {
+    const r = await this.client.put(`/integrations/${name}/${data.webhookId}`, data)
+
+    return await r.json()
+  }
+
+  removeMessengerInt = async (name: string, webhookId: string) => {
+    const r = await this.client.delete(`/integrations/${name}/${webhookId}`)
+
+    return await r.json()
+  }
+
+  sendMsg = async (integrationId, entity, entityId, name, data) => {
+    const r = await this.client.post(`/integrations/${name}/notify/${integrationId}/${entity}/${entityId}`, data)
+
+    return await r.json()
+  }
+
+  testElastic = async (data: any) => {
+    const r = await this.client.post('/integrations/elasticsearch/test', data)
+
+    return r.json();
+  }
+}
diff --git a/frontend/app/services/IssueReportsService.ts b/frontend/app/services/IssueReportsService.ts
new file mode 100644
index 000000000..505a7bf8a
--- /dev/null
+++ b/frontend/app/services/IssueReportsService.ts
@@ -0,0 +1,27 @@
+import BaseService from 'App/services/BaseService';
+
+export default class IssueReportsService extends BaseService {
+  fetchProjects = async () => {
+    const r = await this.client.get(`/integrations/issues/list_projects`)
+
+    return await r.json();
+  }
+
+  fetchMeta = async (projectId?: number) => {
+    const r = await this.client.get(`/integrations/issues/${projectId}`)
+
+    return await r.json();
+  }
+
+  saveIssue = async (sessionId: string, data: any) => {
+    const r = await this.client.post(`/sessions/${ sessionId }/assign/projects/${data.projectId}`, data)
+
+    return await r.json();
+  }
+
+  fetchIssueIntegrations = async (sessionId: string) => {
+    const r = await this.client.get(`/sessions/${ sessionId }/assign`)
+
+    return await r.json();
+  }
+}
\ No newline at end of file
diff --git a/frontend/app/services/ProjectsService.ts b/frontend/app/services/ProjectsService.ts
new file mode 100644
index 000000000..dec448903
--- /dev/null
+++ b/frontend/app/services/ProjectsService.ts
@@ -0,0 +1,39 @@
+import BaseService from "./BaseService";
+
+export default class ProjectsService extends BaseService {
+  fetchGDPR = async (siteId: string) => {
+    const r = await this.client.get(`/${siteId}/gdpr`);
+
+    return await r.json();
+  }
+
+  saveGDPR = async (siteId: string, gdprData: any) => {
+    const r = await this.client.post(`/${siteId}/gdpr`, gdprData);
+
+    return await r.json();
+  }
+
+  fetchList = async () => {
+    const r = await this.client.get('/projects');
+
+    return await r.json();
+  }
+
+  saveProject = async (projectData: any) => {
+    const r = await this.client.post('/projects', projectData);
+
+    return await r.json();
+  }
+
+  removeProject = async (projectId: string) => {
+    const r = await this.client.delete(`/projects/${projectId}`)
+
+    return await r.json();
+  }
+
+  updateProject = async (projectId: string, projectData: any) => {
+    const r = await this.client.put(`/projects/${projectId}`, projectData);
+
+    return await r.json();
+  }
+}
diff --git a/frontend/app/services/SearchService.ts b/frontend/app/services/SearchService.ts
new file mode 100644
index 000000000..f195909ac
--- /dev/null
+++ b/frontend/app/services/SearchService.ts
@@ -0,0 +1,51 @@
+import BaseService from 'App/services/BaseService';
+
+export default class SearchService extends BaseService {
+  async fetchSessions(params: any) {
+    const r = await this.client.post('/PROJECT_ID/sessions/search', params);
+    const j = await r.json();
+    return j.data;
+  }
+
+  async fetchSavedSearchList() {
+    const r = await this.client.get('/PROJECT_ID/saved_search');
+    const j = await r.json();
+    return j.data;
+  }
+
+  async deleteSavedSearch(id: string) {
+    const r = await this.client.delete(`/saved_search/${id}`);
+    const j = await r.json();
+    return j.data;
+  }
+
+  async fetchFilterSearch(params: any) {
+    const r = await this.client.get('/PROJECT_ID/events/search', params);
+    const j = await r.json();
+    return j.data;
+  }
+
+  async saveSavedSearch(data: any, id: string) {
+    const r = await this.client.post(id ? `/PROJECT_ID/saved_search/${id}` : '/PROJECT_ID/saved_search', data);
+    const j = await r.json();
+    return j.data;
+  }
+
+  async fetchSavedSearch() {
+    const r = await this.client.get('/PROJECT_ID/saved_search');
+    const j = await r.json();
+    return j.data;
+  }
+
+  async checkLatestSessions(filter: any) {
+    const r = await this.client.post('/PROJECT_ID/sessions/search/ids', filter);
+    const j = await r.json();
+    return j.data;
+  }
+
+  async fetchAutoCompleteValues(params: {}): Promise<any> {
+    const r = await this.client.get('/PROJECT_ID/events/search', params);
+    const j = await r.json();
+    return j.data;
+  }
+}
diff --git a/frontend/app/services/SessionService.ts b/frontend/app/services/SessionService.ts
index 9b4ecc648..f83941d3a 100644
--- a/frontend/app/services/SessionService.ts
+++ b/frontend/app/services/SessionService.ts
@@ -56,12 +56,20 @@ export default class SettingsService {
 
   getSessionInfo(sessionId: string, isLive?: boolean): Promise<ISession> {
     return this.client
-      .get(isLive ? `/assist/sessions/${sessionId}` : `/sessions/${sessionId}`)
+      .get(isLive ? `/assist/sessions/${sessionId}` : `/sessions/${sessionId}/replay`)
       .then((r) => r.json())
       .then((j) => j.data || {})
       .catch(console.error);
   }
 
+  getSessionEvents = async (sessionId: string) => {
+    return this.client
+      .get(`/sessions/${sessionId}/events`)
+      .then((r) => r.json())
+      .then((j) => j.data || [])
+      .catch(console.error);
+  }
+
   getLiveSessions(filter: any): Promise<{ sessions: ISession[] }> {
     return this.client
       .post('/assist/sessions', cleanParams(filter))
diff --git a/frontend/app/services/UserService.ts b/frontend/app/services/UserService.ts
index 89bffd3fc..994efc77a 100644
--- a/frontend/app/services/UserService.ts
+++ b/frontend/app/services/UserService.ts
@@ -1,98 +1,205 @@
 import APIClient from 'App/api_client';
-import  User from 'App/mstore/types/user'
+import User from 'App/mstore/types/user';
 
 export default class UserService {
-    private client: APIClient;
+  private client: APIClient;
 
-    constructor(client?: APIClient) {
-        this.client = client ? client : new APIClient();
+  constructor(client?: APIClient) {
+    this.client = client ? client : new APIClient();
+  }
+
+  initClient(client?: APIClient) {
+    this.client = client || new APIClient();
+  }
+
+  all() {
+    return this.client
+      .get('/client/members')
+      .then((response: { json: () => any }) => response.json())
+      .then((response: { data: any }) => response.data || []);
+  }
+
+  one(userId: string) {
+    return this.client
+      .get('/users/' + userId)
+      .then((response: { json: () => any }) => response.json())
+      .then((response: { data: any }) => response.data || {});
+  }
+
+  save(user: User): Promise<any> {
+    const data = user.toSave();
+    if (user.userId) {
+      return this.client
+        .put('/client/members/' + user.userId, data)
+        .then((r) => r.json())
+        .then((response: { data: any }) => response.data || {})
+        .catch((e) => Promise.reject(e));
+    } else {
+      return this.client
+        .post('/client/members', data)
+        .then((r) => r.json())
+        .then((response: { data: any }) => response.data || {})
+        .catch((e) => Promise.reject(e));
+    }
+  }
+
+  generateInviteCode(userId: any): Promise<any> {
+    return this.client
+      .get(`/client/members/${userId}/reset`)
+      .then((response: { json: () => any }) => response.json())
+      .then((response: { data: any }) => response.data || {});
+  }
+
+  delete(userId: string) {
+    return this.client
+      .delete('/client/members/' + userId)
+      .then((r) => r.json())
+      .then((response: { data: any }) => response.data || {})
+      .catch((e) => Promise.reject(e));
+  }
+
+  getRoles() {
+    return this.client
+      .get('/client/roles')
+      .then((response: { json: () => any }) => response.json())
+      .then((response: { data: any }) => response.data || []);
+  }
+
+  createRole(role: any) {
+    return this.client.post('/client/roles/', role).then((r) => r.json());
+  }
+
+  modifyRole(role: any) {
+    return this.client
+      .put(`/client/roles/${role.roleId}`, role)
+      .then((r) => r.json());
+  }
+
+  deleteRole(roleId: string) {
+    return this.client.delete(`/client/roles/${roleId}`).then((r) => r.json());
+  }
+
+  getLimits() {
+    return this.client
+      .get('/limits')
+      .then((response: { json: () => any }) => response.json())
+      .then((response: { data: any }) => response.data || {});
+  }
+
+  getNotificationsCount() {
+    return this.client
+      .get('/notifications/count')
+      .then((response: { json: () => any }) => response.json())
+      .then((response: { data: any }) => response.data || {});
+  }
+
+  getNotifications() {
+    return this.client
+      .get('/notifications')
+      .then((response: { json: () => any }) => response.json())
+      .then((response: { data: any }) => response.data || {});
+  }
+
+  ignoreNotification(notificationId: number) {
+    return this.client
+      .get(`/notifications/${notificationId}/view`)
+      .then((response: { json: () => any }) => response.json())
+      .then((response: { data: any }) => response.data || {});
+  }
+
+  ignoreAllNotifications(params: any) {
+    return this.client
+      .post(`/notifications/view`, params)
+      .then((response: { json: () => any }) => response.json())
+      .then((response: { data: any }) => response.data || {});
+  }
+
+  saveModules(module: any) {
+    return this.client
+      .post('/users/modules', module)
+      .then((r) => r.json())
+      .then((response: { data: any }) => response.data || {})
+      .catch((e) => Promise.reject(e));
+  }
+
+  login(data: any) {
+    return this.client
+      .post('/login', data)
+      .then((response: { json: () => any }) => response.json())
+      .then((response: { data: any }) => response.data || {});
+  }
+
+  signup(data: any) {
+    return this.client
+      .post('/signup', data)
+      .then((response: { json: () => any }) => response.json())
+      .then((response: { data: any }) => response.data || {});
+  }
+
+  resetPassword(data: any) {
+    return this.client
+      .post('/password/reset', data)
+      .then((response: { json: () => any }) => response.json())
+      .then((response: { data: any }) => response.data || {});
+  }
+
+  requestResetPassword(data: any) {
+    return this.client
+      .post('/password/reset-link', data)
+      .then((response: { json: () => any }) => response.json())
+      .then((response: { data: any }) => response.data || {});
+  }
+
+  updatePassword(data: any) {
+    return this.client
+      .post('/account/password', data)
+      .then((response: { json: () => any }) => response.json())
+      .then((response: { data: any }) => response.data || {});
+  }
+
+  fetchTenants() {
+    return this.client
+      .get('/signup')
+      .then((response: { json: () => any }) => response.json())
+      .then((response: { data: any }) => response.data || []);
+  }
+
+  fetchUserInfo() {
+    return this.client
+      .get('/account')
+      .then((response: { json: () => any }) => response.json())
+      .then((response: { data: any }) => response.data || {});
+  }
+
+  logout() {
+    return this.client
+      .post('/logout')
+      .then((response: { json: () => any }) => response.json())
+      .then((response: { data: any }) => response.data || {});
+  }
+
+  updateClient(data: any) {
+    return this.client
+      .post('/account', data)
+      .then((response: { json: () => any }) => response.json())
+      .then((response: { data: any }) => response.data || {});
+  }
+
+    updateAccount(data: any) {
+      return this.updateClient(data)
     }
 
-    initClient(client?: APIClient) {
-        this.client = client || new APIClient();
+    resendEmailVerification(data: any) {
+      return this.client
+        .post('/re-validate', data)
+        .then((response: { json: () => any }) => response.json())
+        .then((response: { data: any }) => response.data || {});
     }
 
-    all() {
-        return this.client.get('/client/members')
-            .then((response: { json: () => any; }) => response.json())
-            .then((response: { data: any; }) => response.data || []);
+    changeScope(scope: 1 | 2) {
+      return this.client
+        .post('/account/scope', { scope })
+        .then((response: { json: () => any }) => response.json())
+        .then((response: { data: any }) => response.data || {});
     }
-
-    one(userId: string) {
-        return this.client.get('/users/' + userId)
-            .then((response: { json: () => any; }) => response.json())
-            .then((response: { data: any; }) => response.data || {});
-    }
-
-    save(user: User): Promise<any> {
-        const data = user.toSave();
-        if (user.userId) {
-            return this.client.put('/client/members/' + user.userId, data)
-                .then(r => r.json())
-                .then((response: { data: any; }) => response.data || {})
-                .catch(e => Promise.reject(e))
-        } else {
-            return this.client.post('/client/members', data)
-                .then(r => r.json())
-                .then((response: { data: any; }) => response.data || {})
-                .catch(e => Promise.reject(e))
-        }
-    }
-
-    generateInviteCode(userId: any): Promise<any> {
-        return this.client.get(`/client/members/${userId}/reset`)
-            .then((response: { json: () => any; }) => response.json())
-            .then((response: { data: any; }) => response.data || {});
-    }
-
-    delete(userId: string) {
-        return this.client.delete('/client/members/' + userId)
-            .then(r => r.json())
-            .then((response: { data: any; }) => response.data || {})
-            .catch(e => Promise.reject(e))
-    }
-
-    getRoles() {
-        return this.client.get('/client/roles')
-            .then((response: { json: () => any; }) => response.json())
-            .then((response: { data: any; }) => response.data || []);
-    }
-
-    getLimits() {
-        return this.client.get('/limits')
-            .then((response: { json: () => any; }) => response.json())
-            .then((response: { data: any; }) => response.data || {});
-    }
-
-    getNotificationsCount() {
-        return this.client.get('/notifications/count')
-            .then((response: { json: () => any; }) => response.json())
-            .then((response: { data: any; }) => response.data || {});
-    }
-
-    getNotifications() {
-        return this.client.get('/notifications')
-            .then((response: { json: () => any; }) => response.json())
-            .then((response: { data: any; }) => response.data || {});
-    }
-
-    ignoreNotification(notificationId: number) {
-        return this.client.get(`/notifications/${notificationId}/view`)
-            .then((response: { json: () => any; }) => response.json())
-            .then((response: { data: any; }) => response.data || {});
-    }
-
-    ignoreAllNotifications(params: any) {
-        return this.client.post(`/notifications/view`, params)
-            .then((response: { json: () => any; }) => response.json())
-            .then((response: { data: any; }) => response.data || {});
-    }
-
-    saveModules(module: any) {
-        return this.client.post('/users/modules', module)
-            .then(r => r.json())
-            .then((response: { data: any; }) => response.data || {})
-            .catch(e => Promise.reject(e))
-    }
-
-}
\ No newline at end of file
+}
diff --git a/frontend/app/services/index.ts b/frontend/app/services/index.ts
index 56a343b5d..17cf02003 100644
--- a/frontend/app/services/index.ts
+++ b/frontend/app/services/index.ts
@@ -18,8 +18,13 @@ import UserService from './UserService';
 import UxtestingService from './UxtestingService';
 import WebhookService from './WebhookService';
 import SpotService from './spotService';
-import LoginService from "./loginService";
-import FilterService from "./FilterService";
+import LoginService from './loginService';
+import FilterService from './FilterService';
+import IssueReportsService from './IssueReportsService';
+import CustomFieldService from './CustomFieldService';
+import IntegrationsService from './IntegrationsService';
+import ProjectsService from './ProjectsService';
+import SearchService from 'App/services/SearchService';
 
 export const dashboardService = new DashboardService();
 export const metricService = new MetricService();
@@ -42,8 +47,14 @@ export const aiService = new AiService();
 export const spotService = new SpotService();
 export const loginService = new LoginService();
 export const filterService = new FilterService();
+export const issueReportsService = new IssueReportsService();
+export const customFieldService = new CustomFieldService();
+export const integrationsService = new IntegrationsService();
+export const searchService = new SearchService();
+export const projectsService = new ProjectsService();
 
 export const services = [
+  projectsService,
   dashboardService,
   metricService,
   sessionService,
@@ -65,4 +76,8 @@ export const services = [
   spotService,
   loginService,
   filterService,
+  issueReportsService,
+  customFieldService,
+  integrationsService,
+  searchService,
 ];
diff --git a/frontend/app/store.js b/frontend/app/store.js
deleted file mode 100644
index 371c82a1f..000000000
--- a/frontend/app/store.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import { createStore, applyMiddleware, compose } from 'redux';
-import { thunk } from 'redux-thunk';
-import { Map } from 'immutable';
-import indexReducer from './duck';
-import apiMiddleware from './api_middleware';
-import LocalStorage from './local_storage';
-import { initialState as initUserState, UPDATE_JWT } from './duck/user'
-
-const storage = new LocalStorage({
-  user: Object,
-});
-
-const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ && window.env.NODE_ENV === "development" 
-  ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose;
-
-const storageState = storage.state();
-const initialState = Map({ user:
-    initUserState
-      .update('jwt', () => storageState.user?.jwt || null)
-      .update('spotJwt', () => storageState.user?.spotJwt || null)
-});
-
-const store = createStore(indexReducer, initialState, composeEnhancers(applyMiddleware(thunk, apiMiddleware)));
-store.subscribe(() => {
-  const state = store.getState();
-
-  storage.sync({
-    user: state.get('user')
-  });
-});
-
-function copyToClipboard(text) {
-  const textArea = document.createElement("textarea");
-  textArea.value = text;
-
-  // Avoid scrolling to bottom
-  textArea.style.top = "0";
-  textArea.style.left = "0";
-  textArea.style.position = "fixed";
-
-  document.body.appendChild(textArea);
-  textArea.focus();
-  textArea.select();
-
-  try {
-    const successful = document.execCommand('copy');
-    const msg = successful ? 'successful' : 'unsuccessful';
-    console.log('Token copy ' + msg);
-  } catch (err) {
-    console.error('unable to copy', err);
-  }
-
-  document.body.removeChild(textArea);
-}
-
-
-window.getJWT = () => {
-  const jwtToken = storage.state().user?.jwt ? JSON.stringify(storage.state().user?.jwt) : null
-  if (jwtToken) {
-    console.log(jwtToken);
-    copyToClipboard(jwtToken)
-  } else {
-    console.log('not logged in')
-  }
-}
-window.setJWT = (jwt) => {
-  store.dispatch({ type: UPDATE_JWT, data: { jwt } })
-}
-
-export default store;
diff --git a/frontend/app/types/account/account.ts b/frontend/app/types/account/account.ts
index 1ac4ccdf6..7a7ab8604 100644
--- a/frontend/app/types/account/account.ts
+++ b/frontend/app/types/account/account.ts
@@ -1,8 +1,8 @@
-import Member, { IMember } from 'Types/member';
+import { IMember } from 'Types/member';
 import Limit, { ILimits } from './limit';
 import { DateTime } from 'luxon';
+import { makeAutoObservable } from 'mobx';
 
-// TODO types for mobx and all
 export interface IAccount extends IMember {
   changePassword?: any
   limits: ILimits
@@ -12,7 +12,7 @@ export interface IAccount extends IMember {
   id: string
   smtp: boolean
   license: string
-  expirationDate?: DateTime
+  expirationDate?: number
   permissions: string[]
   settings: any
   iceServers: string
@@ -24,30 +24,73 @@ export interface IAccount extends IMember {
   versionNumber: string
 }
 
-export default Member.extend({
-  changePassword: undefined,
-  limits: Limit(),
-  banner: undefined,
-  email: '',
-  verifiedEmail: undefined,
-  id: undefined,
-  smtp: false,
-  license: '',
-  expirationDate: undefined,
-  permissions: [],
-  settings: {},
-  iceServers: undefined,
-  hasPassword: false, // to check if it's SSO
-  apiKey: undefined,
-  tenantKey: undefined,
-  tenantName: undefined,
-  edition: undefined,
-  optOut: false,
-  versionNumber: undefined,
-}, {
-  fromJS: ({ ...account})=> ({
-    ...account,
-    id: account.id || account.userId,
-    expirationDate: account.expirationDate > 0 && DateTime.fromMillis(account.expirationDate || 0),
-  })
-});
+export default class Account {
+  changePassword: boolean
+  limits: Limit[] = []
+  banner: boolean
+  email: string
+  verifiedEmail: boolean
+  id: string
+  smtp: false
+  license: string
+  expirationDate: DateTime
+  permissions: string[] = []
+  settings: Record<string, any> = {}
+  iceServers: any[] = []
+  hasPassword: boolean
+  apiKey: string
+  tenantKey: string
+  tenantName: string
+  edition: string
+  optOut: boolean
+  versionNumber: string
+  tenantId: string
+  name: string
+  createdAt: DateTime
+  admin: boolean
+  superAdmin: boolean
+  joined: boolean
+  expiredInvitation: boolean
+  roleId: string
+  roleName: string
+  invitationLink: string
+
+  constructor(account: Partial<IAccount> = {}) {
+    Object.assign(this, {
+      ...account,
+      id: account.id || account.userId,
+      expirationDate: DateTime.fromMillis(account.expirationDate ?? 0),
+    });
+
+    makeAutoObservable(this);
+  }
+
+  toData = () => {
+    return {
+      id: this.id,
+      email: this.email,
+      verifiedEmail: this.verifiedEmail,
+      smtp: this.smtp,
+      license: this.license,
+      expirationDate: this.expirationDate.toMillis(),
+      permissions: this.permissions,
+      settings: this.settings,
+      iceServers: this.iceServers,
+      hasPassword: this.hasPassword,
+      apiKey: this.apiKey,
+      tenantKey: this.tenantKey,
+      edition: this.edition,
+      optOut: this.optOut,
+      versionNumber: this.versionNumber,
+      name: this.name,
+      createdAt: this.createdAt,
+      admin: this.admin,
+      superAdmin: this.superAdmin,
+      joined: this.joined,
+      expiredInvitation: this.expiredInvitation,
+      roleId: this.roleId,
+      roleName: this.roleName,
+      invitationLink: this.invitationLink,
+    }
+  }
+}
diff --git a/frontend/app/types/account/limit.ts b/frontend/app/types/account/limit.ts
index 7ded53b51..3b530cf29 100644
--- a/frontend/app/types/account/limit.ts
+++ b/frontend/app/types/account/limit.ts
@@ -1,5 +1,4 @@
-import Record from 'Types/Record';
-import { Map } from 'immutable';
+import { makeAutoObservable } from 'mobx';
 
 interface ILimitValue {
   limit: number
@@ -11,10 +10,14 @@ export interface ILimits {
   sites: ILimitValue
 }
 
-const defaultValues = Map({ limit: 0, remaining: 0 });
-const Limit = Record({
-  teamMember: defaultValues,
-  sites: defaultValues
-});
+const defaultValues = { limit: 0, remaining: 0 };
 
-export default Limit;
\ No newline at end of file
+export default class Limit {
+  teamMember = defaultValues;
+  sites = defaultValues;
+
+  constructor(data: Record<string, any>) {
+    Object.assign(this, data);
+    makeAutoObservable(this);
+  }
+}
diff --git a/frontend/app/types/announcement.js b/frontend/app/types/announcement.js
deleted file mode 100644
index f73eb0dca..000000000
--- a/frontend/app/types/announcement.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import Record from 'Types/Record';
-import { DateTime } from 'luxon';
-
-export default Record({
-  announcementId: undefined,
-  type: undefined,
-  title: undefined,
-  description: undefined,
-  imageUrl: undefined,
-  createdAt: undefined,
-  viewed: undefined,
-  buttonUrl: undefined,
-  buttonText: undefined
-}, {
-  idKey: 'announcementId',
-  fromJS: ({ createdAt, ...rest }) => ({
-    ...rest,
-    createdAt: createdAt ? DateTime.fromMillis(createdAt) : undefined,
-  }),
-});
diff --git a/frontend/app/types/app/platform.js b/frontend/app/types/app/platform.js
deleted file mode 100644
index 3c7d69d9d..000000000
--- a/frontend/app/types/app/platform.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export const ALL = 'all';
-export const DESKTOP = 'desktop';
-export const MOBILE = 'mobile';
\ No newline at end of file
diff --git a/frontend/app/types/client/client.js b/frontend/app/types/client/client.js
deleted file mode 100644
index 66b7a256e..000000000
--- a/frontend/app/types/client/client.js
+++ /dev/null
@@ -1,26 +0,0 @@
-// import { List } from 'immutable';
-import Record from 'Types/Record';
-// import Site from 'Types/site';
-// import { DateTime } from 'luxon';
-import LoggerOptions from './loggerOptions';
-
-export default Record({
-  loggerOptions: LoggerOptions(),
-  apiKey: undefined,
-  tenantId: undefined,
-  tenantKey: '',
-  name: undefined,
-  // sites: List(),
-  optOut: true,
-  edition: '',
-}, {
-  fromJS: ({
-    projects,
-    loggerOptions, 
-    ...rest
-  }) => ({
-    ...rest,
-    loggerOptions: LoggerOptions(loggerOptions),
-    // sites: List(projects).map(Site),
-  }),
-});
diff --git a/frontend/app/types/client/client.ts b/frontend/app/types/client/client.ts
new file mode 100644
index 000000000..df6dcff48
--- /dev/null
+++ b/frontend/app/types/client/client.ts
@@ -0,0 +1,15 @@
+import { makeAutoObservable } from 'mobx';
+
+export default class Client {
+  apiKey?: string = undefined;
+  tenantId?: number = undefined;
+  name?: string = undefined;
+  tenantKey: string = '';
+  optOut = true;
+  edition: string = '';
+
+  constructor(data: Record<string, any> = {}) {
+    Object.assign(this, data);
+    makeAutoObservable(this);
+  }
+}
diff --git a/frontend/app/types/client/index.js b/frontend/app/types/client/index.ts
similarity index 100%
rename from frontend/app/types/client/index.js
rename to frontend/app/types/client/index.ts
diff --git a/frontend/app/types/client/loggerOptions.js b/frontend/app/types/client/loggerOptions.js
deleted file mode 100644
index b258ba6b8..000000000
--- a/frontend/app/types/client/loggerOptions.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Record from 'Types/Record';
-
-export default Record({ 
-  ipWhitelist: [],
-  allowedDomains: [],
-  defaultInputMode: 0,
-  obscureEmailData: undefined,
-  obscureNumericData: undefined,
-});
\ No newline at end of file
diff --git a/frontend/app/types/customMetric.js b/frontend/app/types/customMetric.js
index 9db8e920e..688de4394 100644
--- a/frontend/app/types/customMetric.js
+++ b/frontend/app/types/customMetric.js
@@ -4,7 +4,7 @@ import Filter from 'Types/filter';
 import { validateName } from 'App/validate';
 import { LAST_7_DAYS } from 'Types/app/period';
 import { FilterKey } from 'Types/filter/filterType';
-import { filterMap } from 'Duck/search';
+import { filterMap } from 'App/mstore/searchStore';
 
 export const FilterSeries = Record({
   seriesId: undefined,
@@ -50,7 +50,7 @@ export default Record({
       const js = this.toJS();
 
       js.metricValue = js.metricValue.map(value => value === 'all' ? '' : value);
-      
+
       js.series = js.series.map(series => {
         series.filter.filters = series.filter.filters.map(filterMap);
         // delete series._key
diff --git a/frontend/app/types/environment.js b/frontend/app/types/environment.js
deleted file mode 100644
index f0b575ba6..000000000
--- a/frontend/app/types/environment.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Record from 'Types/Record';
-import { validateURL, validateName } from 'App/validate';
-
-export default Record({
-  environmentId: undefined,
-  url: '',
-  name: '',
-  default: undefined,
-}, {
-  idKey: 'environmentId',
-  methods: {
-    validate() {
-      return validateURL(this.url) && validateName(this.name, { empty: false });
-    },
-  },
-});
diff --git a/frontend/app/types/feedbackOptions.js b/frontend/app/types/feedbackOptions.js
deleted file mode 100644
index b764eb990..000000000
--- a/frontend/app/types/feedbackOptions.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import Record from 'Types/Record';
-
-export default Record({
-  feedbackButtonText: 'Feedback',
-  feedbackButtonPosition: 'right',
-  feedbackButtonBackgroundColor: '#3EAAAF',
-  feedbackButtonBorderColor: '#3EAAAF',
-  feedbackButtonFontColor: '#FFFFFF',
-  feedbackButtonBackgroundColorHover: '#3EAAAF',
-  feedbackButtonBorderColorHover: '#3EAAAF',
-
-  feedbackTitleText: 'How would you rate your experience.',
-  // labels: 'Hate,Dislike,Neutral,Happy,Love',
-  feedbackSubmitText: 'Send',
-  feedbackSubmitBackgroundColor: '#3EAAAF',
-  feedbackSubmitBorderColor: '#3EAAAF',
-  feedbackSubmitFontColor: '#FFFFFF',
-  feedbackSubmitBackgroundColorHover: '#3EAAAF',
-  feedbackSubmitBorderColorHover: '#3EAAAF',
-});
diff --git a/frontend/app/types/filter/customFilter.js b/frontend/app/types/filter/customFilter.js
index 29557da21..be720a959 100644
--- a/frontend/app/types/filter/customFilter.js
+++ b/frontend/app/types/filter/customFilter.js
@@ -75,7 +75,7 @@ export const KEYS = {
   UTM_SOURCE,
   UTM_MEDIUM,
   UTM_CAMPAIGN,
-  
+
   DOM_COMPLETE,
   LARGEST_CONTENTFUL_PAINT_TIME,
   TIME_BETWEEN_EVENTS,
@@ -89,7 +89,7 @@ const getOperatorDefault = (type) => {
   if (type === KEYS.SLOW_SESSION) return 'true';
   if (type === KEYS.CLICK_RAGE) return 'true';
   if (type === KEYS.CLICK) return 'on';
-  
+
   return 'is';
 }
 
@@ -108,7 +108,6 @@ export default Record({
   key: '',
   operator: 'is',
   label: '',
-  icon: '',
   type: '',
   value: [""],
   custom: '',
diff --git a/frontend/app/types/filter/filter.js b/frontend/app/types/filter/filter.js
index 09fbd2d63..2496f8e42 100644
--- a/frontend/app/types/filter/filter.js
+++ b/frontend/app/types/filter/filter.js
@@ -2,7 +2,7 @@ import { List, Map } from 'immutable';
 import Record from 'Types/Record';
 import { KEYS } from 'Types/filter/customFilter';
 import { TYPES } from 'Types/filter/event';
-import { 
+import {
   DATE_RANGE_VALUES,
   CUSTOM_RANGE,
   getDateRangeFromValue
@@ -52,7 +52,7 @@ export default Record({
       const js = this.toJS();
       js.filters = js.filters.map(filter => {
         filter.type = filter.key
-        
+
         delete filter.category
         delete filter.icon
         delete filter.operatorOptions
@@ -109,69 +109,68 @@ export default Record({
   }
 });
 
-export const preloadedFilters = [];
+// export const preloadedFilters = [];
 
-export const defaultFilters = [
-  {
-		category: 'Interactions',
-		type: 'default',
-		keys: [
-      { label: 'Click', key: KEYS.CLICK, type: KEYS.CLICK, filterKey: KEYS.CLICK, icon: 'filters/click', isFilter: false },
-      { label: 'DOM Complete', key: KEYS.DOM_COMPLETE, type: KEYS.DOM_COMPLETE, filterKey: KEYS.DOM_COMPLETE, icon: 'filters/click', isFilter: false },
-      { label: 'Largest Contentful Paint Time', key: KEYS.LARGEST_CONTENTFUL_PAINT_TIME, type: KEYS.LARGEST_CONTENTFUL_PAINT_TIME, filterKey: KEYS.LARGEST_CONTENTFUL_PAINT_TIME, icon: 'filters/click', isFilter: false },
-      { label: 'Time Between Events', key: KEYS.TIME_BETWEEN_EVENTS, type: KEYS.TIME_BETWEEN_EVENTS, filterKey: KEYS.TIME_BETWEEN_EVENTS, icon: 'filters/click', isFilter: false },
-      { label: 'Avg CPU Load', key: KEYS.AVG_CPU_LOAD, type: KEYS.AVG_CPU_LOAD, filterKey: KEYS.AVG_CPU_LOAD, icon: 'filters/click', isFilter: false },
-      { label: 'Memory Usage', key: KEYS.AVG_MEMORY_USAGE, type: KEYS.AVG_MEMORY_USAGE, filterKey: KEYS.AVG_MEMORY_USAGE, icon: 'filters/click', isFilter: false },
-      { label: 'Input', key: KEYS.INPUT, type: KEYS.INPUT, filterKey: KEYS.INPUT, icon: 'event/input', isFilter: false },
-      { label: 'Path', key: KEYS.LOCATION, type: KEYS.LOCATION, filterKey: KEYS.LOCATION, icon: 'event/link', isFilter: false },
-      // { label: 'View', key: KEYS.VIEW, type: KEYS.VIEW, filterKey: KEYS.VIEW, icon: 'event/view', isFilter: false }
-		]
-	},
-  {
-		category: 'Gear',
-		type: 'default',
-		keys: [
-      { label: 'OS', key: KEYS.USER_OS, type: KEYS.USER_OS, filterKey: KEYS.USER_OS, icon: 'os', isFilter: true },
-			{ label: 'Browser', key: KEYS.USER_BROWSER, type: KEYS.USER_BROWSER, filterKey: KEYS.USER_BROWSER, icon: 'window', isFilter: true },
-      { label: 'Device', key: KEYS.USER_DEVICE, type: KEYS.USER_DEVICE, filterKey: KEYS.USER_DEVICE, icon: 'device', isFilter: true },
-      { label: 'Rev ID', key: KEYS.REVID, type: KEYS.REVID, filterKey: KEYS.REVID, icon: 'filters/rev-id', isFilter: true },
-      { label: 'Platform', key: KEYS.PLATFORM, type: KEYS.PLATFORM, filterKey: KEYS.PLATFORM, icon: 'filters/platform', isFilter: true },
-		]
-  },
-  {
-		category: 'Recording Attributes',
-		type: 'default',
-		keys: [
-      { label: 'Referrer', key: KEYS.REFERRER, type: KEYS.REFERRER, filterKey: KEYS.REFERRER, icon: 'chat-square-quote', isFilter: true },
-      { label: 'Duration', key: KEYS.DURATION, type: KEYS.DURATION, filterKey: KEYS.DURATION, icon: 'clock', isFilter: true },
-			{ label: 'Country', key: KEYS.USER_COUNTRY, type: KEYS.USER_COUNTRY, filterKey: KEYS.USER_COUNTRY, icon: 'map-marker-alt', isFilter: true },
-		]
-	},
-  {
-		category: 'Javascript',
-		type: 'default',
-		keys: [
-      { label: 'Errors', key: KEYS.ERROR, type: KEYS.ERROR, filterKey: KEYS.ERROR, icon: 'exclamation-circle', isFilter: false },
-      { label: 'Issues', key: KEYS.ISSUES, type: KEYS.ISSUES, filterKey: KEYS.ISSUES, icon: 'exclamation-circle', isFilter: true },
-      { label: 'UTM Source', key: KEYS.UTM_SOURCE, type: KEYS.UTM_SOURCE, filterKey: KEYS.UTM_SOURCE, icon: 'exclamation-circle', isFilter: true },
-      { label: 'UTM Medium', key: KEYS.UTM_MEDIUM, type: KEYS.UTM_MEDIUM, filterKey: KEYS.UTM_MEDIUM, icon: 'exclamation-circle', isFilter: true },
-      { label: 'UTM Campaign', key: KEYS.UTM_CAMPAIGN, type: KEYS.UTM_CAMPAIGN, filterKey: KEYS.UTM_CAMPAIGN, icon: 'exclamation-circle', isFilter: true },
-      
-      { label: 'Fetch Requests', key: KEYS.FETCH, type: KEYS.FETCH, filterKey: KEYS.FETCH, icon: 'fetch', isFilter: false },
-      { label: 'GraphQL Queries', key: KEYS.GRAPHQL, type: KEYS.GRAPHQL, filterKey: KEYS.GRAPHQL, icon: 'vendors/graphql', isFilter: false },
-      { label: 'Store Actions', key: KEYS.STATEACTION, type: KEYS.STATEACTION, filterKey: KEYS.STATEACTION, icon: 'store', isFilter: false },
-      { label: 'Custom Events', key: KEYS.CUSTOM, type: KEYS.CUSTOM, filterKey: KEYS.CUSTOM, icon: 'filters/file-code', isFilter: false },
-		]
-  },
-  {
-		category: 'User',
-		type: 'default',
-		keys: [
-      { label: 'User ID', key: KEYS.USERID, type: KEYS.USERID, filterKey: KEYS.USERID, icon: 'filters/user-alt', isFilter: true },
-      { label: 'Anonymous ID', key: KEYS.USERANONYMOUSID, type: KEYS.USERANONYMOUSID, filterKey: KEYS.USERANONYMOUSID, icon: 'filters/userid', isFilter: true },
-		]
-	}
-];
+// export const defaultFilters = [
+//   {
+// 		category: 'Interactions',
+// 		type: 'default',
+// 		keys: [
+//       { label: 'Click', key: KEYS.CLICK, type: KEYS.CLICK, filterKey: KEYS.CLICK, icon: 'filters/click', isFilter: false },
+//       { label: 'DOM Complete', key: KEYS.DOM_COMPLETE, type: KEYS.DOM_COMPLETE, filterKey: KEYS.DOM_COMPLETE, icon: 'filters/click', isFilter: false },
+//       { label: 'Largest Contentful Paint Time', key: KEYS.LARGEST_CONTENTFUL_PAINT_TIME, type: KEYS.LARGEST_CONTENTFUL_PAINT_TIME, filterKey: KEYS.LARGEST_CONTENTFUL_PAINT_TIME, icon: 'filters/click', isFilter: false },
+//       { label: 'Time Between Events', key: KEYS.TIME_BETWEEN_EVENTS, type: KEYS.TIME_BETWEEN_EVENTS, filterKey: KEYS.TIME_BETWEEN_EVENTS, icon: 'filters/click', isFilter: false },
+//       { label: 'Avg CPU Load', key: KEYS.AVG_CPU_LOAD, type: KEYS.AVG_CPU_LOAD, filterKey: KEYS.AVG_CPU_LOAD, icon: 'filters/click', isFilter: false },
+//       { label: 'Memory Usage', key: KEYS.AVG_MEMORY_USAGE, type: KEYS.AVG_MEMORY_USAGE, filterKey: KEYS.AVG_MEMORY_USAGE, icon: 'filters/click', isFilter: false },
+//       { label: 'Input', key: KEYS.INPUT, type: KEYS.INPUT, filterKey: KEYS.INPUT, icon: 'event/input', isFilter: false },
+//       { label: 'Path', key: KEYS.LOCATION, type: KEYS.LOCATION, filterKey: KEYS.LOCATION, icon: 'event/link', isFilter: false },
+//       // { label: 'View', key: KEYS.VIEW, type: KEYS.VIEW, filterKey: KEYS.VIEW, icon: 'event/view', isFilter: false }
+// 		]
+// 	},
+//   {
+// 		category: 'Gear',
+// 		type: 'default',
+// 		keys: [
+//       { label: 'OS', key: KEYS.USER_OS, type: KEYS.USER_OS, filterKey: KEYS.USER_OS, icon: 'os', isFilter: true },
+// 			{ label: 'Browser', key: KEYS.USER_BROWSER, type: KEYS.USER_BROWSER, filterKey: KEYS.USER_BROWSER, icon: 'window', isFilter: true },
+//       { label: 'Device', key: KEYS.USER_DEVICE, type: KEYS.USER_DEVICE, filterKey: KEYS.USER_DEVICE, icon: 'device', isFilter: true },
+//       { label: 'Rev ID', key: KEYS.REVID, type: KEYS.REVID, filterKey: KEYS.REVID, icon: 'filters/rev-id', isFilter: true },
+//       { label: 'Platform', key: KEYS.PLATFORM, type: KEYS.PLATFORM, filterKey: KEYS.PLATFORM, icon: 'filters/platform', isFilter: true },
+// 		]
+//   },
+//   {
+// 		category: 'Recording Attributes',
+// 		type: 'default',
+// 		keys: [
+//       { label: 'Referrer', key: KEYS.REFERRER, type: KEYS.REFERRER, filterKey: KEYS.REFERRER, icon: 'chat-square-quote', isFilter: true },
+//       { label: 'Duration', key: KEYS.DURATION, type: KEYS.DURATION, filterKey: KEYS.DURATION, icon: 'clock', isFilter: true },
+// 			{ label: 'Country', key: KEYS.USER_COUNTRY, type: KEYS.USER_COUNTRY, filterKey: KEYS.USER_COUNTRY, icon: 'map-marker-alt', isFilter: true },
+// 		]
+// 	},
+//   {
+// 		category: 'Javascript',
+// 		type: 'default',
+// 		keys: [
+//       { label: 'Errors', key: KEYS.ERROR, type: KEYS.ERROR, filterKey: KEYS.ERROR, icon: 'exclamation-circle', isFilter: false },
+//       { label: 'Issues', key: KEYS.ISSUES, type: KEYS.ISSUES, filterKey: KEYS.ISSUES, icon: 'exclamation-circle', isFilter: true },
+//       { label: 'UTM Source', key: KEYS.UTM_SOURCE, type: KEYS.UTM_SOURCE, filterKey: KEYS.UTM_SOURCE, icon: 'exclamation-circle', isFilter: true },
+//       { label: 'UTM Medium', key: KEYS.UTM_MEDIUM, type: KEYS.UTM_MEDIUM, filterKey: KEYS.UTM_MEDIUM, icon: 'exclamation-circle', isFilter: true },
+//       { label: 'UTM Campaign', key: KEYS.UTM_CAMPAIGN, type: KEYS.UTM_CAMPAIGN, filterKey: KEYS.UTM_CAMPAIGN, icon: 'exclamation-circle', isFilter: true },
+//       { label: 'Fetch Requests', key: KEYS.FETCH, type: KEYS.FETCH, filterKey: KEYS.FETCH, icon: 'fetch', isFilter: false },
+//       { label: 'GraphQL Queries', key: KEYS.GRAPHQL, type: KEYS.GRAPHQL, filterKey: KEYS.GRAPHQL, icon: 'vendors/graphql', isFilter: false },
+//       { label: 'Store Actions', key: KEYS.STATEACTION, type: KEYS.STATEACTION, filterKey: KEYS.STATEACTION, icon: 'store', isFilter: false },
+//       { label: 'Custom Events', key: KEYS.CUSTOM, type: KEYS.CUSTOM, filterKey: KEYS.CUSTOM, icon: 'filters/file-code', isFilter: false },
+// 		]
+//   },
+//   {
+// 		category: 'User',
+// 		type: 'default',
+// 		keys: [
+//       { label: 'User ID', key: KEYS.USERID, type: KEYS.USERID, filterKey: KEYS.USERID, icon: 'filters/user-alt', isFilter: true },
+//       { label: 'Anonymous ID', key: KEYS.USERANONYMOUSID, type: KEYS.USERANONYMOUSID, filterKey: KEYS.USERANONYMOUSID, icon: 'filters/userid', isFilter: true },
+// 		]
+// 	}
+// ];
 
 export const getEventIcon = (filter) => {
   let { type, key, source } = filter;
@@ -205,4 +204,4 @@ export const getEventIcon = (filter) => {
 		return 'integrations/' + source;
   }
   return '';
-}
\ No newline at end of file
+}
diff --git a/frontend/app/types/index.js b/frontend/app/types/index.js
deleted file mode 100644
index d58b7449e..000000000
--- a/frontend/app/types/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Run from './run';
-
-export const Results = results => Run(results);
-
diff --git a/frontend/app/types/issue/issueUser.js b/frontend/app/types/issue/issueUser.js
deleted file mode 100644
index ede9efeeb..000000000
--- a/frontend/app/types/issue/issueUser.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import Record from 'Types/Record';
-
-export default Record({
-  id: undefined,
-  name: undefined,
-  email: undefined,
-}, {
-})
diff --git a/frontend/app/types/issue/issuesType.js b/frontend/app/types/issue/issuesType.js
deleted file mode 100644
index c40864bea..000000000
--- a/frontend/app/types/issue/issuesType.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Record from 'Types/Record';
-
-export default Record({
-  id: undefined,
-  color: undefined,
-  description: '',
-  name: undefined,
-  iconUrl: undefined
-}, {
-  fromJS: ({ iconUrl, color, ...issueType }) => ({
-    ...issueType,
-    color,
-    iconUrl: iconUrl ? 
-      <img className="mr-2" src={ iconUrl } width="13" height="13" /> :
-      <div className="mr-2 w-2 h-2 rounded-full float-left" style={{ backgroundColor: `#${color}`}} />,
-  }),
-})
diff --git a/frontend/app/types/member.ts b/frontend/app/types/member.ts
index 0a88d51ba..d0447587a 100644
--- a/frontend/app/types/member.ts
+++ b/frontend/app/types/member.ts
@@ -1,4 +1,4 @@
-import Record from 'Types/Record';
+import { makeAutoObservable } from 'mobx';
 import { DateTime } from 'luxon';
 import { validateEmail, validateName } from 'App/validate';
 
@@ -30,35 +30,41 @@ export interface IMemberApiRes {
   invitationLink: string
 }
 
-export default Record({
-  id: undefined,
-  name: '',
-  email: '',
-  createdAt: undefined,
-  admin: false,
-  superAdmin: false,
-  joined: false,
-  expiredInvitation: false,
-  roleId: undefined,
-  roleName: undefined,
-  invitationLink: '',
-}, {
-  idKey: 'id',
-  methods: {
-    validate() {
-      return validateEmail(this.email) && validateName(this.name, { diacritics: true });
-    },
+export default class Member {
+  id: string
+  name: string
+  email: string
+  createdAt: DateTime
+  admin: boolean
+  superAdmin: boolean
+  joined: boolean
+  expiredInvitation: boolean
+  roleId: string
+  roleName: string
+  invitationLink: string
 
-    toData() {
-      const js = this.toJS();
+  constructor(data: Partial<IMemberApiRes> = {}) {
+    Object.assign(this, data);
+    makeAutoObservable(this);
+  }
+
+  validate = () => {
+    return validateEmail(this.email) && validateName(this.name, { diacritics: true });
+  }
+
+  toData = () => {
+    return {
+      id: this.id,
+      name: this.name,
+      email: this.email,
+      roleId: this.roleId,
+      roleName: this.roleName,
+      admin: this.admin,
+      superAdmin: this.superAdmin,
+      joined: this.joined,
+      expiredInvitation: this.expiredInvitation,
+      invitationLink: this.invitationLink,
+    }
+  }
+}
 
-      delete js.createdAt;
-      return js;
-    },
-  },
-  fromJS: ({ createdAt, ...rest }: IMemberApiRes) => ({
-    ...rest,
-    createdAt: createdAt && DateTime.fromISO(createdAt || '0'),
-    id: rest.userId,
-  }),
-});
diff --git a/frontend/app/types/rehydrateJob.js b/frontend/app/types/rehydrateJob.js
deleted file mode 100644
index a9188ba35..000000000
--- a/frontend/app/types/rehydrateJob.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Record from 'Types/Record';
-import { DateTime } from 'luxon';
-
-export default Record({
-  rehydrationId: undefined,
-  name: '',
-  startAt: '',
-  endAt: '',
-  createdAt: undefined,
-  state: undefined, // in_progress, fail, succeess
-  createdBy: undefined,
-  sessionsCount: undefined
-}, {
-  idKey: 'rehydrationId',
-  methods: {
-    validate() {
-      return this.name !== '';
-    },
-    period() {
-      return this.startAt.toFormat('LLL dd, yyyy') + ' - ' + this.endAt.toFormat('LLL dd, yyyy');
-    },
-    isInProgress() {
-      return this.state === 'in progress';
-    }
-  },
-  fromJS: ({ startTs, endTs, createdAt, userId, ...rest }) => ({
-    ...rest,
-    createdBy: userId,
-    createdAt: createdAt && DateTime.fromMillis(createdAt || 0),
-    endAt: endTs && DateTime.fromMillis(endTs || 0),
-    startAt: startTs && DateTime.fromMillis(startTs || 0),
-  }),
-});
diff --git a/frontend/app/types/role.js b/frontend/app/types/role.js
deleted file mode 100644
index d63afa5db..000000000
--- a/frontend/app/types/role.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import Record from 'Types/Record';
-import { notEmptyString, validateName } from 'App/validate';
-import { List } from 'immutable';
-
-export default Record({
-  roleId: undefined,
-  name: '',
-  allProjects: true,
-  permissions: List(),
-  projects: List(),
-  protected: false,
-  description: '',
-  permissionOptions: List(),
-}, {
-  idKey: 'roleId',
-  methods: {
-    validate() {
-      return notEmptyString(this.name) && validateName(this.name, { diacritics: true }) && (this.allProjects || this.projects.size > 0);
-    },
-    toData() {
-      const js = this.toJS();
-      delete js.key;
-      delete js.protected;
-      return js;
-    },
-  },
-  fromJS({ projects = [], permissions = [], ...rest }) {
-    return {
-      ...rest,
-      permissions: List(permissions),
-      projects: List(projects),
-    }
-  },
-});
diff --git a/frontend/app/types/session/assignment.ts b/frontend/app/types/session/assignment.ts
index a16361ee8..1ae13825f 100644
--- a/frontend/app/types/session/assignment.ts
+++ b/frontend/app/types/session/assignment.ts
@@ -2,11 +2,10 @@ import Activity, { IActivity } from './activity';
 import { DateTime } from 'luxon';
 import {  notEmptyString } from 'App/validate';
 
-interface IAssignment {
+interface IReportedIssue {
   id: string;
   title: string;
   timestamp: number;
-  creatorId: string;
   sessionId: string;
   projectId: string;
   siteId: string;
@@ -22,23 +21,21 @@ interface IAssignment {
   users: { id: string }[]
 }
 
-export default class Assignment {
-  id: IAssignment["id"];
-  title: IAssignment["title"] = '';
-  timestamp: IAssignment["timestamp"];
-  creatorId: IAssignment["creatorId"];
-  sessionId: IAssignment["sessionId"];
-  projectId: IAssignment["projectId"] = '';
-  siteId: IAssignment["siteId"];
-  activities: IAssignment["activities"];
-  closed: IAssignment["closed"];
-  assignee: IAssignment["assignee"] = '';
-  commentsCount: IAssignment["commentsCount"];
-  issueType: IAssignment["issueType"] = '';
-  description: IAssignment["description"] = '';
-  iconUrl: IAssignment["iconUrl"] = '';
+export default class ReportedIssue {
+  id: IReportedIssue["id"];
+  title: IReportedIssue["title"] = '';
+  timestamp: IReportedIssue["timestamp"];
+  sessionId: IReportedIssue["sessionId"];
+  projectId: IReportedIssue["projectId"] = '';
+  siteId: IReportedIssue["siteId"];
+  activities: IReportedIssue["activities"];
+  closed: IReportedIssue["closed"];
+  assignee: IReportedIssue["assignee"] = '';
+  issueType: IReportedIssue["issueType"] = '';
+  description: IReportedIssue["description"] = '';
+  iconUrl: IReportedIssue["iconUrl"] = '';
 
-  constructor(assignment?: IAssignment) {
+  constructor(assignment?: IReportedIssue) {
     if (assignment) {
       Object.assign(this, {
         ...assignment,
diff --git a/frontend/app/types/session/session.ts b/frontend/app/types/session/session.ts
index 11d976dde..3de179b97 100644
--- a/frontend/app/types/session/session.ts
+++ b/frontend/app/types/session/session.ts
@@ -174,6 +174,7 @@ export default class Session {
   duration: Duration;
   durationMs: ISession['durationMs'];
   events: ISession['events'];
+  uxtVideo?: any;
   stackEvents: ISession['stackEvents'];
   metadata: ISession['metadata'];
   favorite: ISession['favorite'];
@@ -228,6 +229,11 @@ export default class Session {
   fileKey: ISession['fileKey'];
   durationSeconds: number;
   liveOnly: boolean;
+  videoURL: string[]
+  screenWidth?: number
+  screenHeight?: number
+
+  addedEvents = false;
 
   constructor(plainSession?: ISession) {
     const sessionData = plainSession || (emptyValues as unknown as ISession);
@@ -423,6 +429,7 @@ export default class Session {
     // @ts-ignore
     this.frustrations = frustrationList;
     this.crashes = crashes || [];
+    this.addedEvents = true;
     return this;
   }
 
diff --git a/frontend/app/types/site/gdpr.js b/frontend/app/types/site/gdpr.js
deleted file mode 100644
index 9b6c58fd4..000000000
--- a/frontend/app/types/site/gdpr.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Record from 'Types/Record';
-
-export default Record({
-  id: undefined,
-  maskEmails: false,
-  maskNumbers: false,
-  defaultInputMode: 'plain',
-  sampleRate: 0,
-}, {
-  idKey: 'id',
-  methods: {
-    toData() {
-      const js = this.toJS();
-
-      delete js.key;
-      return js;
-    },
-  },
-});
diff --git a/frontend/app/types/site/gdpr.ts b/frontend/app/types/site/gdpr.ts
new file mode 100644
index 000000000..1c899405f
--- /dev/null
+++ b/frontend/app/types/site/gdpr.ts
@@ -0,0 +1,18 @@
+export interface IGDPR {
+  id?: number;
+  maskEmails: boolean;
+  maskNumbers: boolean;
+  defaultInputMode: string;
+  sampleRate: number;
+}
+
+export default function GDPR(data?: Partial<IGDPR>): IGDPR {
+  const defaults: IGDPR = {
+    id: undefined,
+    maskEmails: false,
+    maskNumbers: false,
+    defaultInputMode: 'plain',
+    sampleRate: 0,
+  }
+  return Object.assign({}, defaults, data);
+}
\ No newline at end of file
diff --git a/frontend/app/types/site/site.js b/frontend/app/types/site/site.js
deleted file mode 100644
index 6684c5752..000000000
--- a/frontend/app/types/site/site.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import Record from 'Types/Record';
-import GDPR from './gdpr';
-
-export const RED = 'red';
-export const YELLOW = 'yellow';
-export const GREEN = 'green';
-
-export const STATUS_COLOR_MAP = {
-  [RED]: '#CC0000',
-  [YELLOW]: 'orange',
-  [GREEN]: 'green',
-};
-
-export default Record(
-  {
-    id: undefined,
-    name: '',
-    host: '',
-    platform: 'web',
-    status: RED,
-    lastRecordedSessionAt: undefined,
-    gdpr: GDPR(),
-    recorded: undefined,
-    stackIntegrations: false,
-    projectKey: undefined,
-    trackerVersion: undefined,
-    saveRequestPayloads: false,
-    sampleRate: 0,
-    conditionsCount: 0,
-  },
-  {
-    idKey: 'id',
-    methods: {
-      validate() {
-        return this.name.length > 0;
-      },
-
-      toData() {
-        const js = this.toJS();
-        delete js.key;
-        delete js.gdpr;
-        return js;
-      },
-    },
-    fromJS: ({ gdpr, projectId, name, ...rest }) => ({
-      ...rest,
-      host: name,
-      name: name,
-      id: projectId === undefined ? undefined : `${projectId}`, //?!?!?!?!?
-      gdpr: GDPR(gdpr),
-    }),
-  }
-);
diff --git a/frontend/app/types/site/site.ts b/frontend/app/types/site/site.ts
new file mode 100644
index 000000000..0767541a8
--- /dev/null
+++ b/frontend/app/types/site/site.ts
@@ -0,0 +1,44 @@
+import GDPR, { IGDPR } from './gdpr';
+
+export interface ISite {
+  id?: string;
+  name: string;
+  host: string;
+  platform: string;
+  lastRecordedSessionAt: any;
+  gdpr: IGDPR;
+  recorded: boolean;
+  stackIntegrations: boolean;
+  projectKey?: string;
+  projectId?: number;
+  trackerVersion?: string;
+  saveRequestPayloads: boolean;
+  sampleRate: number;
+  conditionsCount: number;
+}
+
+export default function Site(data: Partial<ISite>): ISite {
+  const defaults: ISite = {
+    id: undefined,
+    name: '',
+    host: '',
+    platform: 'web',
+    lastRecordedSessionAt: undefined,
+    gdpr: GDPR(),
+    recorded: false,
+    stackIntegrations: false,
+    projectKey: undefined,
+    projectId: undefined,
+    trackerVersion: undefined,
+    saveRequestPayloads: false,
+    sampleRate: 0,
+    conditionsCount: 0,
+  };
+
+  return Object.assign({}, defaults, {
+    ...data,
+    id: data?.projectId?.toString(),
+    gdpr: GDPR(data ? data.gdpr : undefined),
+    host: data ? data.name : '',
+  });
+}
\ No newline at end of file
diff --git a/frontend/app/types/targetCustom.js b/frontend/app/types/targetCustom.js
deleted file mode 100644
index 795710580..000000000
--- a/frontend/app/types/targetCustom.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import Record from 'Types/Record';
-
-const TargetCustom = Record({
-  targetId: '',
-  label: '',
-  path: null,
-  isCustom: true,
-  location: '',
-}, {
-  fromJS: (target) => ({ 
-    ...target,
-    label: target.label || target.targetLabel,
-    path: target.path || target.targetSelector,
-  }),
-  idKey: 'targetId',
-});
-
-export default TargetCustom;
\ No newline at end of file
diff --git a/frontend/babel.config.js b/frontend/babel.config.js
index 4fdf68799..16518fa23 100644
--- a/frontend/babel.config.js
+++ b/frontend/babel.config.js
@@ -1,20 +1,27 @@
 module.exports = {
-    "presets": [
-        "@babel/preset-env",
-        "@babel/preset-react",
-        "@babel/preset-typescript"
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
+  plugins: [
+    'babel-plugin-react-require',
+    ['@babel/plugin-proposal-decorators', { legacy: true }],
+    [
+      'prismjs',
+      {
+        languages: [
+          'javascript',
+          'css',
+          'bash',
+          'typescript',
+          'jsx',
+          'kotlin',
+          'swift',
+        ],
+        theme: 'default',
+        css: true,
+      },
     ],
-    "plugins": [
-        "babel-plugin-react-require",
-        ["@babel/plugin-transform-private-property-in-object", { "loose":true } ],
-        [ "@babel/plugin-transform-runtime", { "regenerator": true } ],
-        [ "@babel/plugin-proposal-decorators", { "legacy":true } ],
-        [ "@babel/plugin-transform-class-properties", { "loose":true } ],
-        [ "@babel/plugin-transform-private-methods", { "loose": true }],
-        ["prismjs", {
-            "languages": ["javascript", "css", "bash", "typescript", "jsx", "kotlin", "swift"],
-            "theme": "default",
-            "css": true
-        }]
-    ]
-}
\ No newline at end of file
+  ],
+};
diff --git a/frontend/jest.config.mjs b/frontend/jest.config.mjs
index d3dbab8f4..c0a1bdb72 100644
--- a/frontend/jest.config.mjs
+++ b/frontend/jest.config.mjs
@@ -2,7 +2,7 @@ export default {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
   moduleNameMapper: {
-    '^Types/session/(.+)$': '<rootDir>/app/types/session/$1',
+    '^Types/(.+)$': '<rootDir>/app/types/$1',
     '^App/(.+)$': '<rootDir>/app/$1',
     "\\.(css|less)$": "<rootDir>/tests/mocks/style.mock.js",
   },
diff --git a/frontend/package.json b/frontend/package.json
index 22131b12c..2a82cd4dc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -29,7 +29,6 @@
     "@babel/plugin-transform-private-methods": "^7.23.3",
     "@floating-ui/react-dom-interactions": "^0.10.3",
     "@medv/finder": "^3.1.0",
-    "@reduxjs/toolkit": "^2.2.2",
     "@sentry/browser": "^5.21.1",
     "@svg-maps/world": "^1.0.1",
     "@svgr/webpack": "^6.2.1",
@@ -44,7 +43,7 @@
     "hls.js": "^1.5.13",
     "html-to-image": "^1.9.0",
     "html2canvas": "^1.4.1",
-    "immutable": "^4.0.0-rc.12",
+    "immutable": "^4.3.7",
     "jest-environment-jsdom": "^29.5.0",
     "js-untar": "^2.0.0",
     "jshint": "^2.11.1",
@@ -54,6 +53,7 @@
     "luxon": "^3.5.0",
     "microdiff": "^1.4.0",
     "mobx": "^6.3.8",
+    "mobx-persist-store": "^1.1.5",
     "mobx-react-lite": "^3.1.6",
     "peerjs": "1.3.2",
     "prismjs": "^1.29.0",
@@ -68,7 +68,6 @@
     "react-google-recaptcha": "^2.1.0",
     "react-lazyload": "^3.2.0",
     "react-merge-refs": "^2.0.1",
-    "react-redux": "^9.1.2",
     "react-router": "^5.3.3",
     "react-router-dom": "^5.3.3",
     "react-select": "^5.3.2",
@@ -76,9 +75,6 @@
     "react-toastify": "^9.1.1",
     "react18-json-view": "^0.2.8",
     "recharts": "^2.12.7",
-    "redux": "^5.0.1",
-    "redux-immutable": "^4.0.0",
-    "redux-thunk": "^3.1.0",
     "socket.io-client": "^4.4.1",
     "syncod": "^0.0.1",
     "virtua": "^0.33.4"
@@ -115,7 +111,6 @@
     "@types/react": "^18.0.9",
     "@types/react-confirm": "^0.2.3",
     "@types/react-dom": "^18.0.4",
-    "@types/react-redux": "^7.1.24",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-virtualized": "^9.21.21",
     "@typescript-eslint/eslint-plugin": "^5.24.0",
diff --git a/frontend/path-alias.js b/frontend/path-alias.js
index f74d73d2b..067ad96b2 100644
--- a/frontend/path-alias.js
+++ b/frontend/path-alias.js
@@ -12,8 +12,6 @@ module.exports = {
     'Types/*': path.resolve(__dirname, 'app/types/*'),
     UI: path.resolve(__dirname, 'app/components/ui'),
     'UI/*': path.resolve(__dirname, 'app/components/ui/*'),
-    Duck: path.resolve(__dirname, 'app/duck'),
-    'Duck/*': path.resolve(__dirname, 'app/duck/*'),
     HOCs: path.resolve(__dirname, 'app/components/hocs'),
     'HOCs/*': path.resolve(__dirname, 'app/components/hocs/*'),
     Shared: path.resolve(__dirname, 'app/components/shared'),
diff --git a/frontend/tests/featureFlagsStore.test.js b/frontend/tests/featureFlagsStore.test.js
index 547a937fe..6b8ce2d1a 100644
--- a/frontend/tests/featureFlagsStore.test.js
+++ b/frontend/tests/featureFlagsStore.test.js
@@ -1,93 +1,83 @@
-import { jest, test, expect, describe } from '@jest/globals';
-import FeatureFlag from 'App/mstore/types/FeatureFlag';
+import { describe, expect, jest, test } from '@jest/globals';
+
 import FeatureFlagsStore from 'App/mstore/FeatureFlagsStore';
+import FeatureFlag from 'App/mstore/types/FeatureFlag';
 
-const mockFflagsService = {
-    fetchFlags: jest.fn(),
-    createFlag: jest.fn(),
-    updateFlag: jest.fn(),
-    deleteFlag: jest.fn(),
-    getFlag: jest.fn(),
-};
-
-// not working
+const mockFlags = [{ featureFlagId: 1 }, { featureFlagId: 2 }];
+const mockFlag = { featureFlagId: 3 };
+const mockFlagId = mockFlag.featureFlagId;
 jest.mock('App/services', () => {
-    return {
-        fflagsService: mockFflagsService,
-    };
+  return {
+    fflagsService: {
+      fetchFlags: () => Promise.resolve({ list: mockFlags, total: mockFlags.length }),
+      createFlag: () => Promise.resolve(mockFlag),
+      updateFlag: () => Promise.resolve(mockFlag),
+      deleteFlag: () => Promise.resolve(mockFlagId),
+      getFlag: () => Promise.resolve(mockFlag),
+    },
+  };
 });
 
-// working fine?
 jest.mock('App/mstore/types/FeatureFlag', () => {
-    class FakeClass {
-        constructor(data) {
-            Object.assign(this, data);
-        }
-        setHasChanged() {
-            return jest.fn(() => this)
-        }
-
-        toJS() {
-            return jest.fn(() => this)
-        }
+  class FakeClass {
+    constructor(data) {
+      Object.assign(this, data);
     }
-    return FakeClass;
-})
+    setHasChanged() {
+      return jest.fn(() => this);
+    }
+
+    toJS() {
+      return jest.fn(() => this);
+    }
+  }
+  return FakeClass;
+});
 
 describe('FeatureFlagsStore', () => {
-    test('should fetch flags', async () => {
-        const mockFlags = [{ featureFlagId: 1 }, { featureFlagId: 2 }];
-        mockFflagsService.fetchFlags.mockResolvedValueOnce({ list: mockFlags });
-        const store = new FeatureFlagsStore(mockFflagsService);
+  test('should fetch flags', async () => {
+    const store = new FeatureFlagsStore();
 
-        await store.fetchFlags();
+    await store.fetchFlags();
 
-        expect(store.flags.length).toBe(mockFlags.length);
-        expect(store.flags[0].featureFlagId).toBe(mockFlags[0].featureFlagId);
-        expect(store.flags[1].featureFlagId).toBe(mockFlags[1].featureFlagId);
-    });
+    expect(store.flags.length).toBe(mockFlags.length);
+    expect(store.flags[0].featureFlagId).toBe(mockFlags[0].featureFlagId);
+    expect(store.flags[1].featureFlagId).toBe(mockFlags[1].featureFlagId);
+  });
 
-    test('should create a flag', async () => {
-        const mockFlag = { featureFlagId: 3 };
-        mockFflagsService.createFlag.mockResolvedValueOnce(mockFlag);
-        const store = new FeatureFlagsStore(mockFflagsService);
-        store.setCurrentFlag(new FeatureFlag())
+  test('should create a flag', async () => {
+    const store = new FeatureFlagsStore();
+    store.setCurrentFlag(new FeatureFlag());
 
-        await store.createFlag();
+    await store.createFlag();
 
-        expect(store.flags.length).toBe(1);
-        expect(store.flags[0].featureFlagId).toBe(mockFlag.featureFlagId);
-    });
+    expect(store.flags.length).toBe(1);
+    expect(store.flags[0].featureFlagId).toBe(mockFlag.featureFlagId);
+  });
 
-    test('should update a flag', async () => {
-        const mockFlag = { featureFlagId: 4 };
-        mockFflagsService.updateFlag.mockResolvedValueOnce(mockFlag);
-        const store = new FeatureFlagsStore(mockFflagsService);
-        store.currentFflag = new FeatureFlag();
+  test('should update a flag', async () => {
+    const store = new FeatureFlagsStore();
+    store.currentFflag = new FeatureFlag();
 
-        await store.updateFlag();
+    await store.updateFlag();
 
-        expect(store.currentFflag.featureFlagId).toBe(mockFlag.featureFlagId);
-    });
+    expect(store.currentFflag.featureFlagId).toBe(mockFlag.featureFlagId);
+  });
 
-    test('should delete a flag', async () => {
-        const mockFlagId = 5;
-        mockFflagsService.deleteFlag.mockResolvedValueOnce();
-        const store = new FeatureFlagsStore(mockFflagsService);
-        store.flags = [new FeatureFlag({ featureFlagId: mockFlagId })];
+  test('should delete a flag', async () => {
+    const store = new FeatureFlagsStore();
+    store.flags = [new FeatureFlag({ featureFlagId: mockFlagId })];
 
-        await store.deleteFlag(mockFlagId);
+    await store.deleteFlag(mockFlagId);
 
-        expect(store.flags.length).toBe(0);
-    });
+    expect(store.flags.length).toBe(0);
+  });
 
-    test('should fetch a flag', async () => {
-        const mockFlag = { featureFlagId: 6 };
-        mockFflagsService.getFlag.mockResolvedValueOnce(mockFlag);
-        const store = new FeatureFlagsStore(mockFflagsService);
+  test('should fetch a flag', async () => {
+    const store = new FeatureFlagsStore();
 
-        await store.fetchFlag(mockFlag.featureFlagId);
+    await store.fetchFlag(mockFlag.featureFlagId);
 
-        expect(store.currentFflag.featureFlagId).toBe(mockFlag.featureFlagId);
-    });
-});
\ No newline at end of file
+    expect(store.currentFflag.featureFlagId).toBe(mockFlag.featureFlagId);
+  });
+});
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 4347780a5..aab188729 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -9,25 +9,25 @@
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
-    "target": "es6",
+    "target": "ES2017",
+    "lib": ["dom", "es2022"],
     "allowJs": true,
     "isolatedModules": true,
     "moduleResolution": "node",
     "noEmit": true,
     "jsx": "react",
-    // "baseUrl": ".",
     "paths": {
-      "Shared/*": ["./app/components/shared/*"],
+      "@/*": ["./app/*"],
       "App/*": ["./app/*"],
+      "SVG/*": ["./app/svg/*"],
       "Components/*": ["./app/components/*"],
+      "Types/*": ["./app/types/*"],
       "UI/*": ["./app/components/ui/*"],
       "UI": ["./app/components/ui"],
+      "Shared/*": ["./app/components/shared/*"],
       "Player/*": ["./app/player/*"],
       "Player": ["./app/player"],
       "HOCs/*": ["./app/components/hocs/*"],
-      "Types/*": ["./app/types/*"],
-      "Duck/*": ["./app/duck/*"],
-      "MOBX/*": ["./app/mstore/*"],
     }
   },
   "include": ["app"]
diff --git a/frontend/webpack.config.ts b/frontend/webpack.config.ts
index 367b20546..fa946c48d 100644
--- a/frontend/webpack.config.ts
+++ b/frontend/webpack.config.ts
@@ -15,9 +15,9 @@ import pathAlias from './path-alias';
 interface Configuration extends WebpackConfiguration {
   devServer?: WebpackDevServerConfiguration
 }
-
+console.log('running in', isDevelopment ? 'development' : 'production');
 const config: Configuration = {
-  // mode: isDevelopment ? "development" : "production",
+  mode: isDevelopment ? "development" : "production",
   output: {
     publicPath: "/",
     filename: 'app-[contenthash:7].js',
@@ -34,7 +34,7 @@ const config: Configuration = {
     rules: [
       {
         test: /\.(ts|js)x?$/i,
-        exclude: /node_modules/,
+        exclude: isDevelopment ? /node_modules/ : undefined,
         use: ['thread-loader', {
           loader: "babel-loader",
           options: {
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 00004bf56..6b188c58a 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -3168,26 +3168,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@reduxjs/toolkit@npm:^2.2.2":
-  version: 2.2.3
-  resolution: "@reduxjs/toolkit@npm:2.2.3"
-  dependencies:
-    immer: ^10.0.3
-    redux: ^5.0.1
-    redux-thunk: ^3.1.0
-    reselect: ^5.0.1
-  peerDependencies:
-    react: ^16.9.0 || ^17.0.0 || ^18
-    react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
-  peerDependenciesMeta:
-    react:
-      optional: true
-    react-redux:
-      optional: true
-  checksum: f10f2c8f4b6c5c7a65d8d60246bdfde86b6cd2f542210ebdda8002223c7f4e99ed32964825e63f37345d9d12532671150fcec2809a40690931ae44afe8aba7f8
-  languageName: node
-  linkType: hard
-
 "@sentry/browser@npm:^5.21.1":
   version: 5.30.0
   resolution: "@sentry/browser@npm:5.30.0"
@@ -5064,16 +5044,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/hoist-non-react-statics@npm:^3.3.0":
-  version: 3.3.5
-  resolution: "@types/hoist-non-react-statics@npm:3.3.5"
-  dependencies:
-    "@types/react": "*"
-    hoist-non-react-statics: ^3.3.0
-  checksum: 2a3b64bf3d9817d7830afa60ee314493c475fb09570a64e7737084cd482d2177ebdddf888ce837350bac51741278b077683facc9541f052d4bbe8487b4e3e618
-  languageName: node
-  linkType: hard
-
 "@types/html-minifier-terser@npm:^5.0.0":
   version: 5.1.2
   resolution: "@types/html-minifier-terser@npm:5.1.2"
@@ -5332,18 +5302,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-redux@npm:^7.1.24":
-  version: 7.1.33
-  resolution: "@types/react-redux@npm:7.1.33"
-  dependencies:
-    "@types/hoist-non-react-statics": ^3.3.0
-    "@types/react": "*"
-    hoist-non-react-statics: ^3.3.0
-    redux: ^4.0.0
-  checksum: e17a2fea00c6ab5f22868e927b4da7b7cf8dc7c85102638fa0f87e12ae0ec13335d9b3bf75098b3316dd8d2a18c99fe08bed22daa989a13f3710c4530f7b979e
-  languageName: node
-  linkType: hard
-
 "@types/react-router-dom@npm:^5.3.3":
   version: 5.3.3
   resolution: "@types/react-router-dom@npm:5.3.3"
@@ -5514,13 +5472,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/use-sync-external-store@npm:^0.0.3":
-  version: 0.0.3
-  resolution: "@types/use-sync-external-store@npm:0.0.3"
-  checksum: 82824c1051ba40a00e3d47964cdf4546a224e95f172e15a9c62aa3f118acee1c7518b627a34f3aa87298a2039f982e8509f92bfcc18bea7c255c189c293ba547
-  languageName: node
-  linkType: hard
-
 "@types/webpack-env@npm:^1.16.0":
   version: 1.18.4
   resolution: "@types/webpack-env@npm:1.18.4"
@@ -13573,13 +13524,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"immer@npm:^10.0.3":
-  version: 10.0.4
-  resolution: "immer@npm:10.0.4"
-  checksum: da9da59d6e71cf3f2875024b5cfb58874baef3eefec6425483e53163e31ed0ab24bae85cd2829cb7812acb9723075eedb5946654f8bd47ecf38663388e04d3bd
-  languageName: node
-  linkType: hard
-
 "immutable@npm:^3.7.2":
   version: 3.8.2
   resolution: "immutable@npm:3.8.2"
@@ -13587,13 +13531,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"immutable@npm:^4.0.0, immutable@npm:^4.0.0-rc.12":
+"immutable@npm:^4.0.0":
   version: 4.3.5
   resolution: "immutable@npm:4.3.5"
   checksum: 63d2d7908241a955d18c7822fd2215b6e89ff5a1a33cc72cd475b013cbbdef7a705aa5170a51ce9f84a57f62fdddfaa34e7b5a14b33d8a43c65cc6a881d6e894
   languageName: node
   linkType: hard
 
+"immutable@npm:^4.3.7":
+  version: 4.3.7
+  resolution: "immutable@npm:4.3.7"
+  checksum: 9b099197081b22f6433003e34929da8ecddbbdc1474cdc8aa3b7669dee4adda349c06143de22def36016d1b6de5322b043eccd7a11db1dad2ca85dad4fff5435
+  languageName: node
+  linkType: hard
+
 "import-fresh@npm:^3.1.0, import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0":
   version: 3.3.0
   resolution: "import-fresh@npm:3.3.0"
@@ -17102,6 +17053,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mobx-persist-store@npm:^1.1.5":
+  version: 1.1.5
+  resolution: "mobx-persist-store@npm:1.1.5"
+  peerDependencies:
+    mobx: "*"
+  checksum: 672c772f27bb44f75d6675ac2d2e69033dd80d4b2318b21e1a136206dd1c21e5430ab6173ee1adf76c4fea257a4a200321d0a20980797a5d58b6a0b0158a252c
+  languageName: node
+  linkType: hard
+
 "mobx-react-lite@npm:^3.1.6":
   version: 3.4.3
   resolution: "mobx-react-lite@npm:3.4.3"
@@ -18148,7 +18108,6 @@ __metadata:
     "@jest/globals": ^29.7.0
     "@medv/finder": ^3.1.0
     "@openreplay/sourcemap-uploader": ^3.0.8
-    "@reduxjs/toolkit": ^2.2.2
     "@sentry/browser": ^5.21.1
     "@storybook/addon-actions": ^6.5.12
     "@storybook/addon-docs": ^6.5.12
@@ -18167,7 +18126,6 @@ __metadata:
     "@types/react": ^18.0.9
     "@types/react-confirm": ^0.2.3
     "@types/react-dom": ^18.0.4
-    "@types/react-redux": ^7.1.24
     "@types/react-router-dom": ^5.3.3
     "@types/react-virtualized": ^9.21.21
     "@typescript-eslint/eslint-plugin": ^5.24.0
@@ -18201,7 +18159,7 @@ __metadata:
     html-to-image: ^1.9.0
     html-webpack-plugin: ^5.5.0
     html2canvas: ^1.4.1
-    immutable: ^4.0.0-rc.12
+    immutable: ^4.3.7
     jest: ^29.5.0
     jest-environment-jsdom: ^29.5.0
     js-untar: ^2.0.0
@@ -18214,6 +18172,7 @@ __metadata:
     mini-css-extract-plugin: ^2.6.0
     minio: ^7.1.3
     mobx: ^6.3.8
+    mobx-persist-store: ^1.1.5
     mobx-react-lite: ^3.1.6
     node-gyp: ^9.0.0
     peerjs: 1.3.2
@@ -18236,7 +18195,6 @@ __metadata:
     react-google-recaptcha: ^2.1.0
     react-lazyload: ^3.2.0
     react-merge-refs: ^2.0.1
-    react-redux: ^9.1.2
     react-router: ^5.3.3
     react-router-dom: ^5.3.3
     react-select: ^5.3.2
@@ -18244,9 +18202,6 @@ __metadata:
     react-toastify: ^9.1.1
     react18-json-view: ^0.2.8
     recharts: ^2.12.7
-    redux: ^5.0.1
-    redux-immutable: ^4.0.0
-    redux-thunk: ^3.1.0
     sass: ^1.51.0
     sass-loader: ^13.0.0
     socket.io-client: ^4.4.1
@@ -21068,25 +21023,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-redux@npm:^9.1.2":
-  version: 9.1.2
-  resolution: "react-redux@npm:9.1.2"
-  dependencies:
-    "@types/use-sync-external-store": ^0.0.3
-    use-sync-external-store: ^1.0.0
-  peerDependencies:
-    "@types/react": ^18.2.25
-    react: ^18.0
-    redux: ^5.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    redux:
-      optional: true
-  checksum: 56ac98228e011b26e0202346af9c8dd408ad5ea8235d8761c8e05ea0953b8ca801cdf9d1f481fdec7b285d7f30ceef7238b46b3df7636ef77dd5c2ea8c5be5b2
-  languageName: node
-  linkType: hard
-
 "react-refresh@npm:^0.11.0":
   version: 0.11.0
   resolution: "react-refresh@npm:0.11.0"
@@ -21450,25 +21386,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"redux-immutable@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "redux-immutable@npm:4.0.0"
-  peerDependencies:
-    immutable: ^3.8.1 || ^4.0.0-rc.1
-  checksum: c706c9f72a1fbce92d54ab9117ab641b6d7ee69f2860ec6de827dbed5bed918d4677a0895e6564bb59011202bb5e639cf69f4e2d2d14086053b32e5c4e35f512
-  languageName: node
-  linkType: hard
-
-"redux-thunk@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "redux-thunk@npm:3.1.0"
-  peerDependencies:
-    redux: ^5.0.0
-  checksum: 21557f6a30e1b2e3e470933247e51749be7f1d5a9620069a3125778675ce4d178d84bdee3e2a0903427a5c429e3aeec6d4df57897faf93eb83455bc1ef7b66fd
-  languageName: node
-  linkType: hard
-
-"redux@npm:^4.0.0, redux@npm:^4.1.2, redux@npm:^4.2.0":
+"redux@npm:^4.1.2, redux@npm:^4.2.0":
   version: 4.2.1
   resolution: "redux@npm:4.2.1"
   dependencies:
@@ -21477,13 +21395,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"redux@npm:^5.0.1":
-  version: 5.0.1
-  resolution: "redux@npm:5.0.1"
-  checksum: b10c28357194f38e7d53b760ed5e64faa317cc63de1fb95bc5d9e127fab956392344368c357b8e7a9bedb0c35b111e7efa522210cfdc3b3c75e5074718e9069c
-  languageName: node
-  linkType: hard
-
 "reflect.getprototypeof@npm:^1.0.4":
   version: 1.0.6
   resolution: "reflect.getprototypeof@npm:1.0.6"
@@ -21819,13 +21730,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"reselect@npm:^5.0.1":
-  version: 5.1.0
-  resolution: "reselect@npm:5.1.0"
-  checksum: b0ed789f4f6f10dfbd23741823726793384932969aa7ce8f584c882ad87620a02b09b5d1146cd2ea6eaa0953b3fd9f7df22f113893af73f35f28432a8a4294de
-  languageName: node
-  linkType: hard
-
 "resize-observer-polyfill@npm:^1.5.1":
   version: 1.5.1
   resolution: "resize-observer-polyfill@npm:1.5.1"
@@ -24945,15 +24849,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-sync-external-store@npm:^1.0.0":
-  version: 1.2.2
-  resolution: "use-sync-external-store@npm:1.2.2"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 23b1597c10adf15b26ade9e8c318d8cc0abc9ec0ab5fc7ca7338da92e89c2536abd150a5891bf076836c352fdfa104fc7231fb48f806fd9960e0cbe03601abaf
-  languageName: node
-  linkType: hard
-
 "use@npm:^3.1.0":
   version: 3.1.1
   resolution: "use@npm:3.1.1"