diff --git a/packages/ui/.storybook/preview.tsx b/packages/ui/.storybook/preview.tsx
index 8ba958bc6b..a315b869d7 100644
--- a/packages/ui/.storybook/preview.tsx
+++ b/packages/ui/.storybook/preview.tsx
@@ -7,6 +7,7 @@ import { createGlobalStyle } from 'styled-components'
 
 import { GlobalModals } from '../src/app/GlobalModals'
 import { GlobalStyle } from '../src/app/providers/GlobalStyle'
+import { ResponsiveProvider } from '../src/common/providers/responsive/provider'
 import { OnBoardingProvider } from '../src/common/providers/onboarding/provider'
 import { NotificationsHolder } from '../src/common/components/page/SideNotification'
 import { TransactionStatus } from '../src/common/components/TransactionStatus/TransactionStatus'
@@ -53,16 +54,18 @@ const RHFDecorator: Decorator = (Story) => {
   )
 }
 
-const ModalDecorator: Decorator = (Story) => (
+const Providers: Decorator = (Story) => (
   <TransactionStatusProvider>
     <ModalContextProvider>
       <OnBoardingProvider>
         <ValidatorContextProvider>
-          <Story />
-          <GlobalModals />
-          <NotificationsHolder>
-            <TransactionStatus />
-          </NotificationsHolder>
+          <ResponsiveProvider>
+            <Story />
+            <GlobalModals />
+            <NotificationsHolder>
+              <TransactionStatus />
+            </NotificationsHolder>
+          </ResponsiveProvider>
         </ValidatorContextProvider>
       </OnBoardingProvider>
     </ModalContextProvider>
@@ -85,7 +88,7 @@ const KeyringDecorator: Decorator = (Story) => {
 }
 
 export const decorators = [
-  ModalDecorator,
+  Providers,
   stylesWrapperDecorator,
   i18nextDecorator,
   RHFDecorator,
diff --git a/packages/ui/src/app/App.stories.tsx b/packages/ui/src/app/App.stories.tsx
index 4d7cc51067..1bcf6afc05 100644
--- a/packages/ui/src/app/App.stories.tsx
+++ b/packages/ui/src/app/App.stories.tsx
@@ -123,8 +123,6 @@ export default {
           : {
               query: {
                 members: { membershipPrice: joy(20) },
-                council: { stage: { stage: { isIdle: true }, changedAt: 123 } },
-                referendum: { stage: {} },
                 staking: {
                   validators: {
                     entries: Object.entries(validators).map(([address, { commission }]) => [
diff --git a/packages/ui/src/app/pages/Election/BlacklistedAccounts/BlacklistedAccounts.stories.tsx b/packages/ui/src/app/pages/Election/BlacklistedAccounts/BlacklistedAccounts.stories.tsx
index 9ddb8c56a5..e60cf96e65 100644
--- a/packages/ui/src/app/pages/Election/BlacklistedAccounts/BlacklistedAccounts.stories.tsx
+++ b/packages/ui/src/app/pages/Election/BlacklistedAccounts/BlacklistedAccounts.stories.tsx
@@ -23,9 +23,6 @@ export default {
         accounts: { list: allAccounts },
         chain: {
           query: {
-            council: {
-              stage: { stage: { isIdle: true }, changedAt: 123 },
-            },
             referendum: {
               accountsOptedOut: {
                 keys: Array.from({ length: 23 }).map(
diff --git a/packages/ui/src/app/pages/Proposals/ProposalPreview.stories.tsx b/packages/ui/src/app/pages/Proposals/ProposalPreview.stories.tsx
index 03308ccbeb..b94aa4b0df 100644
--- a/packages/ui/src/app/pages/Proposals/ProposalPreview.stories.tsx
+++ b/packages/ui/src/app/pages/Proposals/ProposalPreview.stories.tsx
@@ -132,7 +132,6 @@ export default {
             council: {
               budget: joy(1000),
               councilorReward: joy(1),
-              stage: { stage: { isIdle: true }, changedAt: 123 },
             },
             referendum: { stage: {} },
           },
diff --git a/packages/ui/src/council/hooks/useElectionStage.ts b/packages/ui/src/council/hooks/useElectionStage.ts
index 38c4e7ff35..6325decf6c 100644
--- a/packages/ui/src/council/hooks/useElectionStage.ts
+++ b/packages/ui/src/council/hooks/useElectionStage.ts
@@ -26,9 +26,9 @@ export const useElectionStage = (): UseElectionStage => {
 export const electionStageObservable = (api: Api) => {
   const councilObservable = api.query.council.stage().pipe(
     concatMap(({ stage: councilStage, changedAt }): Observable<StageInfo> => {
-      if (councilStage.isIdle) {
+      if (councilStage.isIdle.valueOf()) {
         return of({ stage: 'inactive', changedAt })
-      } else if (councilStage.isAnnouncing) {
+      } else if (councilStage.isAnnouncing.valueOf()) {
         return of({ stage: 'announcing', changedAt })
       }
       return EMPTY
@@ -36,9 +36,9 @@ export const electionStageObservable = (api: Api) => {
   )
   const referendumObservable = api.query.referendum.stage().pipe(
     concatMap((referendumStage): Observable<StageInfo> => {
-      if (referendumStage.isVoting) {
+      if (referendumStage.isVoting.valueOf()) {
         return of({ stage: 'voting', changedAt: referendumStage.asVoting.started })
-      } else if (referendumStage.isRevealing) {
+      } else if (referendumStage.isRevealing.valueOf()) {
         return of({ stage: 'revealing', changedAt: referendumStage.asRevealing.started })
       }
       return EMPTY
diff --git a/packages/ui/src/mocks/data/proposals.ts b/packages/ui/src/mocks/data/proposals.ts
index efe2cb2999..f65ecb7c1b 100644
--- a/packages/ui/src/mocks/data/proposals.ts
+++ b/packages/ui/src/mocks/data/proposals.ts
@@ -245,7 +245,6 @@ export const proposalsPagesChain = (
           budget: councilBudget,
           councilorReward,
           nextRewardPayments,
-          stage: { stage: { isIdle: true }, changedAt: 123 },
         },
         referendum: { stage: {} },
 
diff --git a/packages/ui/src/mocks/providers/api.tsx b/packages/ui/src/mocks/providers/api.tsx
index b433f3e025..b07e185aa6 100644
--- a/packages/ui/src/mocks/providers/api.tsx
+++ b/packages/ui/src/mocks/providers/api.tsx
@@ -46,6 +46,8 @@ export const MockApiProvider: FC<MockApiProps> = ({ children, chain }) => {
     const defaultQuery = {
       session: { validators: [] },
       staking: { activeEra: {} },
+      council: { stage: { stage: { isIdle: true, isAnnouncing: false }, changedAt: 123 } },
+      referendum: { stage: { isVoting: false, isRevealing: false } },
     }
     const rpcChain = {
       getBlockHash: createType('BlockHash', BLOCK_HASH),