diff --git a/manifest.webapp b/manifest.webapp
index 4ef7753ca52d7e481970b7e1980bade81cf1b785..29c5693f5ef27dda667ca917bc74f836504a54d4 100644
--- a/manifest.webapp
+++ b/manifest.webapp
@@ -236,6 +236,14 @@
       "type": "org.ecolyo.backoffice",
       "verbs": ["ALL"]
     },
+    "backoffice-custom-popup-rec": {
+      "type": "org.ecolyo.backoffice.custom.popup.rec",
+      "verbs": ["ALL"]
+    },
+    "backoffice-custom-popup": {
+      "type": "org.ecolyo.backoffice.custom.popup",
+      "verbs": ["ALL"]
+    },
     "backoffice-partners-info-rec": {
       "type": "org.ecolyo.backoffice.partners.info.rec",
       "verbs": ["ALL"]
diff --git a/src/assets/icons/ico/speaker.svg b/src/assets/icons/ico/speaker.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f9bdb824845c1b4d4089db53c4992e272c2614d2
--- /dev/null
+++ b/src/assets/icons/ico/speaker.svg
@@ -0,0 +1,60 @@
+<svg width="101" height="100" viewBox="0 0 101 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M51.0755 77.0337L56.5751 80.331L66.2921 67.8887L65.3579 66.2706L61.7573 64.3939L51.0755 77.0337Z" fill="#1A1A1A"/>
+<path d="M56.5756 80.3307L66.4066 67.463L69.3233 71.892L60.1456 84.0229L56.5756 80.3307Z" fill="#454545"/>
+<path d="M56.1192 82.0323L51.0756 77.0333L56.5752 80.3307L60.1452 84.0229L56.1192 82.0323Z" fill="black"/>
+<path d="M59.934 71.1999L64.0822 65.9283L64.5076 66.0423L63.3117 70.5053C63.2099 70.8851 62.8686 71.1515 62.4754 71.158L59.934 71.1999Z" fill="#976D1B"/>
+<path d="M72.301 72.6903C69.0043 69.6792 62.326 63.6344 61.9857 63.5432L65.6168 63.6043L76.8745 67.5326L72.301 72.6903Z" fill="#454545"/>
+<path d="M74.9144 69.7431C74.9144 69.7431 62.326 63.6344 61.9857 63.5432L65.6168 63.6043L76.8745 67.5326L74.9144 69.7431Z" fill="#1A1A1A"/>
+<path d="M69.3228 71.8923L72.3006 72.6902L63.2615 63.8851L60.7091 63.2012L60.4811 64.052L64.8185 66.582L66.0232 68.0023L67.9021 73.7914L69.3228 71.8923Z" fill="#1A1A1A"/>
+<path d="M57.7233 69.2404L59.9337 71.2005L64.0819 65.9288L61.3321 64.2801L57.7233 69.2404Z" fill="#E3B82A"/>
+<path d="M72.167 72.6663L63.8336 64.333L60.5006 63.667V64.0003L63.8339 66.0003L72.167 72.6663Z" fill="black"/>
+<path d="M68.4998 72.9999L69.1665 71.9993L66.1665 67.9999L68.4998 72.9999Z" fill="black"/>
+<path d="M63.8173 49.9C59.5995 65.641 46.6575 75.8499 34.9105 72.7023C23.1636 69.5547 17.0599 54.2425 21.2777 38.5015C25.4955 22.7606 38.4375 12.5516 50.1845 15.6992C61.9315 18.8468 68.0351 34.159 63.8173 49.9Z" fill="#454545"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.7084 59.259L54.2531 53.2646L58.9294 60.9262C52.9472 70.0504 43.6024 75.0324 34.9116 72.7037C28.7054 71.0407 24.0743 65.9822 21.7084 59.259Z" fill="#606060"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.2387 47.1544L48.6391 50.3928L48.8612 52.7329L21.7397 55.4955L21.2387 47.1544Z" fill="#606060"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M46.4195 15.1413L60.7566 47.7126L60.2087 54.8607L29.2964 23.4115C34.1397 18.0462 40.2986 14.9336 46.4195 15.1413Z" fill="#313131"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M64.8063 34.9979L60.7574 47.7132L58.2146 40.1919L50.0264 15.6604C50.0792 15.674 50.132 15.6879 50.1847 15.702C58.0875 17.8196 63.4361 25.4426 64.8063 34.9979Z" fill="#313131"/>
+<path d="M86.3184 45.8989L71.7715 40.6333C75.8732 45.7446 75.9107 50.7092 75.4168 52.5526C74.2737 59.5413 68.2549 63.3998 65.3883 64.4555L72.0807 66.7046L79.9353 69.7211L82.148 68.8044C91.447 64.9518 93.6628 52.7817 86.3184 45.8989Z" fill="#E3B82A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M88.9415 62.7789L74.1628 57.2321L73.5531 57.5841C71.2217 61.4396 67.472 63.6882 65.3882 64.4557L72.0805 66.7048L79.9351 69.7213L82.1479 68.8046C85.2099 67.536 87.5039 65.3655 88.9415 62.7789Z" fill="#976D1B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M87.5244 47.1748L72.7404 41.9434C73.3513 42.8453 73.8429 43.7344 74.2351 44.594L74.6878 45.0623L89.5605 50.4667C89.055 49.3084 88.3785 48.1994 87.5244 47.1748Z" fill="#FFD752"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M90.0479 51.7581L74.9399 46.412C75.0091 46.6276 75.0722 46.8402 75.1296 47.0496L90.2768 52.5537C90.2087 52.2869 90.1324 52.0216 90.0479 51.7581Z" fill="#FFD752"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M83.8446 67.9677L69.0581 62.418C67.6815 63.4251 66.3553 64.1005 65.388 64.4567L72.0804 66.7058L79.935 69.7223L82.1477 68.8056C82.7426 68.5591 83.3084 68.2787 83.8446 67.9677Z" fill="#5B450C"/>
+<path opacity="0.5" d="M90.0872 60.0817C93.0713 50.3207 81.369 44.1074 71.7715 40.6333C75.8732 45.7446 75.9107 50.7092 75.4168 52.5526C74.2737 59.5413 68.2549 63.3998 65.3883 64.4555L72.0807 66.7046L79.9353 69.7211L82.148 68.8044C86.227 67.1145 88.9431 63.8242 90.0872 60.0817Z" fill="url(#paint0_linear_118_40903)"/>
+<path d="M72.6224 40.8608C70.5436 39.5439 65.365 36.6365 64.6844 36.4542L62.8525 50.0974L56.6526 63.0262L65.3885 64.4551L65.6081 64.3848C75.5738 61.1976 79.2152 48.9855 72.6224 40.8608Z" fill="#7A7A7A"/>
+<path d="M72.6224 40.8609C70.5436 39.544 65.3651 36.6366 64.6844 36.4542L64.5399 38.6952L75.1137 45.1759L74.3369 43.495C73.895 42.5391 73.3176 41.6519 72.6224 40.8609Z" fill="#9F9F9F"/>
+<path d="M75.8731 50.8505C73.7943 49.5336 61.8094 44.8025 61.1288 44.6201L59.7833 54.7462L56.6528 63.0261L65.3887 64.455L66.7836 63.8951C72.1407 61.7449 75.7112 56.6208 75.8731 50.8505Z" fill="#444549"/>
+<path d="M56.6529 63.0251L65.3888 64.454L65.8391 64.3017C69.414 63.0928 72.3918 60.5635 74.1632 57.2313L59.7834 54.7451L56.6529 63.0251Z" fill="#1A1A1A"/>
+<path opacity="0.5" d="M63.8173 49.9C59.5995 65.641 46.6575 75.8499 34.9105 72.7023C23.1636 69.5547 17.0599 54.2425 21.2777 38.5015C25.4955 22.7606 38.4375 12.5516 50.1845 15.6992C61.9315 18.8468 68.0351 34.159 63.8173 49.9Z" fill="url(#paint1_linear_118_40903)"/>
+<path d="M55.7186 61.4086L45.5479 50.0205L48.2835 39.811L62.6412 37.275L63.9315 49.4752L55.7186 61.4086Z" fill="#7A7A7A"/>
+<path d="M56.3719 60.6718L46.2011 49.2838L46.6876 45.7666L60.976 53.6986L56.3719 60.6718Z" fill="#444549"/>
+<path d="M62.2604 47.2037L47.4855 42.7888L47.9415 41.0872L63.2639 38.3538L62.2604 47.2037Z" fill="#9F9F9F"/>
+<path d="M63.6277 42.0985L47.485 42.7884L49.1032 41.8541L64.0002 39.0067L63.6277 42.0985Z" fill="#BEBEBE"/>
+<path d="M51.1688 46.055C50.4134 48.8743 48.0869 50.7005 45.9725 50.1339C43.858 49.5674 42.7563 46.8226 43.5117 44.0033C44.2671 41.184 46.5936 39.3579 48.7081 39.9244C50.8225 40.491 51.9243 43.2358 51.1688 46.055Z" fill="#444549"/>
+<path d="M50.318 45.8271C49.5626 48.6463 47.4266 50.5236 45.5471 50.0199C43.6675 49.5163 42.7563 46.8226 43.5117 44.0033C44.2671 41.184 46.4032 39.3068 48.2827 39.8104C50.1622 40.3141 51.0735 43.0078 50.318 45.8271Z" fill="#BEBEBE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.2166 41.7522C49.8616 41.3288 49.4198 41.027 48.9055 40.8892C47.026 40.3856 44.8899 42.2628 44.1345 45.0821C43.7335 46.5787 43.8022 48.0399 44.236 49.1569C43.2936 48.0328 42.963 46.0512 43.5117 44.0033C44.2671 41.184 46.4032 39.3068 48.2827 39.8104C49.1645 40.0467 49.8331 40.765 50.2166 41.7522Z" fill="#B0B0B0"/>
+<path d="M48.4621 47.2646C47.8259 48.2163 46.8549 48.6834 46.2932 48.308C45.7316 47.9325 45.792 46.8567 46.4282 45.905C47.0644 44.9534 48.0354 44.4862 48.597 44.8617C49.1586 45.2371 49.0982 46.313 48.4621 47.2646Z" fill="#DDDDDD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.5509 66.3097C55.2926 62.5694 59.2889 56.5907 61.265 49.2161C63.241 41.8415 62.7694 34.6656 60.5331 29.0555C58.297 23.4458 54.3851 19.5604 49.5006 18.2516C44.6161 16.9428 39.2856 18.3517 34.5442 22.0918C29.8025 25.8322 25.8061 31.8109 23.8301 39.1855C21.8541 46.56 22.3257 53.7359 24.5619 59.346C26.798 64.9557 30.71 68.8412 35.5945 70.1499C40.4789 71.4587 45.8095 70.0498 50.5509 66.3097ZM34.9105 72.7023C46.6575 75.8499 59.5995 65.641 63.8173 49.9C68.0351 34.159 61.9315 18.8468 50.1845 15.6992C38.4375 12.5516 25.4955 22.7606 21.2777 38.5015C17.0599 54.2425 23.1636 69.5547 34.9105 72.7023Z" fill="#BEBEBE"/>
+<path d="M23.2458 54.9487C24.0786 58.9145 25.6708 62.347 27.8293 64.9754C30.4393 68.1536 33.7649 70.0305 37.3779 70.5046C41.0047 70.9805 44.9457 70.0442 48.7109 67.6248C51.808 65.6347 54.6387 62.7309 56.9278 59.1429C57.1327 58.8217 57.4563 58.5927 57.8294 58.5158C58.9697 58.2806 59.8494 59.4678 59.2269 60.4516C56.744 64.3754 53.6269 67.6069 50.1394 69.8478C45.9294 72.553 41.3687 73.6933 37.0341 73.1245C32.6994 72.5557 28.7855 70.3034 25.7872 66.6523C23.2961 63.6189 21.5301 59.7332 20.6303 55.3494C20.4014 54.234 21.599 53.4389 22.5814 54.0147C22.9256 54.2165 23.1638 54.5582 23.2458 54.9487Z" fill="#A4A4A4"/>
+<path d="M61.9541 46.1162C62.9239 40.6462 62.6035 35.1934 61.0613 30.5094C59.2285 24.9433 55.8534 20.9768 51.7647 19.0753C47.7079 17.1885 42.938 17.3261 38.2498 19.7062C34.2199 21.7521 30.5103 25.3364 27.6978 30.0176C27.5036 30.3408 27.1908 30.5768 26.8244 30.6658C25.6873 30.942 24.7662 29.7751 25.3652 28.7699C28.4021 23.674 32.4818 19.6711 37.0536 17.35C42.375 14.6485 47.9998 14.4101 52.879 16.6793C57.7582 18.9485 61.5585 23.5704 63.5711 29.683C65.335 35.04 65.6203 41.2213 64.4159 47.3248C64.2241 48.2968 62.9655 48.4827 62.4551 47.6336L62.1315 47.0951C61.955 46.8016 61.8943 46.4534 61.9541 46.1162Z" fill="#DDDDDD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M57.4814 21.1955C58.0013 20.8953 58.6625 20.9887 59.0523 21.4452C60.9792 23.7023 62.519 26.4894 63.5707 29.6835C63.6197 29.8323 63.6676 29.9817 63.7143 30.1318C63.8906 30.6981 63.6388 31.3048 63.1252 31.6014C62.3736 32.0353 61.4162 31.627 61.1544 30.7996C61.1237 30.7027 61.0926 30.6061 61.0609 30.5099C60.1256 27.6695 58.7887 25.2457 57.1603 23.3003C56.6103 22.6432 56.7393 21.6239 57.4814 21.1955Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M55.8881 63.57C56.1633 64.0468 56.1101 64.6472 55.7404 65.0551C54.0298 66.9427 52.1464 68.5593 50.1404 69.8483C46.4965 72.1898 42.5898 73.3589 38.7944 73.2621C38.0827 73.2439 37.5594 72.6169 37.6097 71.9068C37.6623 71.1623 38.323 70.6159 39.0693 70.6241C42.2114 70.6586 45.5247 69.6733 48.7119 67.6253C50.4795 66.4895 52.1602 65.0562 53.7031 63.3678C54.3196 62.6932 55.4311 62.7785 55.8881 63.57Z" fill="#808080"/>
+<path opacity="0.35" d="M61.3542 69.3014L59.9112 66.1791L61.3198 64.2969L64.5071 66.0428L63.26 70.6967C63.2069 70.8951 62.9576 70.9597 62.8148 70.812L61.3542 69.3014Z" fill="#5B450C"/>
+<path d="M59.0524 72.7881L57.7233 69.2404L59.9337 71.2005L62.714 71.0336L63.5648 71.2615L60.8374 74.6342L59.0524 72.7881Z" fill="black"/>
+<line x1="4.37175" y1="30.3351" x2="16.8351" y2="34.1283" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
+<line x1="13.9135" y1="22.9173" x2="19.4173" y2="26.5866" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
+<line x1="9.10617" y1="41.6363" x2="15.4697" y2="40.7272" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
+<line x1="60.681" y1="16.219" x2="61.0524" y2="14.4857" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
+<line x1="64.293" y1="21.2222" x2="70.0555" y2="14.207" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
+<line x1="24.2179" y1="71.8974" x2="23.064" y2="72.282" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
+<line x1="28.5583" y1="73.9936" x2="25.1603" y2="81.2751" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
+<defs>
+<linearGradient id="paint0_linear_118_40903" x1="88.4454" y1="46.4689" x2="67.0899" y2="64.9114" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFD752"/>
+<stop offset="0.714248" stop-color="#5B450C"/>
+</linearGradient>
+<linearGradient id="paint1_linear_118_40903" x1="38.2734" y1="12.5077" x2="45.9403" y2="77.4815" gradientUnits="userSpaceOnUse">
+<stop stop-color="#25262B"/>
+<stop offset="1" stop-color="#60626C"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/CustomPopup/CustomPopupModal.test.tsx b/src/components/CustomPopup/CustomPopupModal.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8af7b85987f82d3ba36082e4eb9e7ebb0396929d
--- /dev/null
+++ b/src/components/CustomPopup/CustomPopupModal.test.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
+import CustomPopupModal from './CustomPopupModal'
+import {
+  mockCustomPopup,
+  mockCustomPopupOff,
+} from '../../../tests/__mocks__/customPopup.mock'
+import { Button } from '@material-ui/core'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+  return {
+    useI18n: jest.fn(() => {
+      return {
+        t: (str: string) => str,
+      }
+    }),
+  }
+})
+
+const mockHandleClose = jest.fn()
+
+describe('CustomPopupModal component', () => {
+  const wrapper = mount(
+    <CustomPopupModal
+      customPopup={mockCustomPopup}
+      handleCloseClick={mockHandleClose}
+    />
+  )
+  it('should render correctly', () => {
+    expect(toJson(wrapper)).toMatchSnapshot()
+  })
+
+  it('should close modal', () => {
+    wrapper.find(Button).simulate('click')
+    expect(mockHandleClose).toHaveBeenCalled()
+  })
+
+  it('should not be rendered', () => {
+    const wrapper = mount(
+      <CustomPopupModal
+        customPopup={mockCustomPopupOff}
+        handleCloseClick={mockHandleClose}
+      />
+    )
+    expect(wrapper.find('div.customPopupModal').exists()).toBeFalsy()
+  })
+})
diff --git a/src/components/CustomPopup/CustomPopupModal.tsx b/src/components/CustomPopup/CustomPopupModal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f1504a4e65b7c48595e438774933b1f69b730e17
--- /dev/null
+++ b/src/components/CustomPopup/CustomPopupModal.tsx
@@ -0,0 +1,71 @@
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import IconButton from '@material-ui/core/IconButton'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import OrangeWarn from 'assets/icons/ico/warn-orange.svg'
+import Speaker from 'assets/icons/ico/speaker.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import { CustomPopup } from 'models/customPopup.model'
+import React from 'react'
+import './customPopupModal.scss'
+
+interface CustomPopupModalProps {
+  customPopup: CustomPopup
+  handleCloseClick: () => void
+}
+
+const CustomPopupModal: React.FC<CustomPopupModalProps> = ({
+  customPopup,
+  handleCloseClick,
+}) => {
+  const { t } = useI18n()
+  return (
+    <Dialog
+      open={customPopup.popupEnabled}
+      disableEscapeKeyDown
+      onClose={(event, reason): void => {
+        event && reason !== 'backdropClick' && handleCloseClick()
+      }}
+      aria-labelledby={'accessibility-title'}
+      classes={{
+        root: 'modal-root',
+        paper: 'modal-paper',
+      }}
+    >
+      <div id="accessibility-title">{customPopup.title}</div>
+      <div id="accessibility-content">{customPopup.description}</div>
+      <IconButton
+        aria-label={t('feedback.accessibility.button_close')}
+        className="modal-paper-close-button"
+        onClick={handleCloseClick}
+      >
+        <Icon icon={CloseIcon} size={16} />
+      </IconButton>
+      <div className="customPopupModal">
+        <StyledIcon icon={Speaker} size={100} className={'warn-icon'} />
+
+        <div className="customPopup-title text-20-bold">
+          {customPopup.title}
+        </div>
+
+        <div className="customPopup-content text-16-normal">
+          {customPopup.description}
+        </div>
+
+        <Button
+          onClick={handleCloseClick}
+          classes={{
+            root: 'btn-highlight ',
+            label: 'text-16-bold',
+          }}
+        >
+          {t('consumption.partners_issue_modal.ok')}
+        </Button>
+      </div>
+    </Dialog>
+  )
+}
+
+export default CustomPopupModal
diff --git a/src/components/CustomPopup/__snapshots__/CustomPopupModal.test.tsx.snap b/src/components/CustomPopup/__snapshots__/CustomPopupModal.test.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..0871899eda032786ddedcbd4f5f8d8d843608212
--- /dev/null
+++ b/src/components/CustomPopup/__snapshots__/CustomPopupModal.test.tsx.snap
@@ -0,0 +1,1018 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CustomPopupModal component should render correctly 1`] = `
+<CustomPopupModal
+  customPopup={
+    Object {
+      "description": "Interesting description",
+      "popupEnabled": true,
+      "title": "Bold title",
+    }
+  }
+  handleCloseClick={[MockFunction]}
+>
+  <WithStyles(ForwardRef(Dialog))
+    aria-labelledby="accessibility-title"
+    classes={
+      Object {
+        "paper": "modal-paper",
+        "root": "modal-root",
+      }
+    }
+    disableEscapeKeyDown={true}
+    onClose={[Function]}
+    open={true}
+  >
+    <ForwardRef(Dialog)
+      aria-labelledby="accessibility-title"
+      classes={
+        Object {
+          "container": "MuiDialog-container",
+          "paper": "MuiDialog-paper modal-paper",
+          "paperFullScreen": "MuiDialog-paperFullScreen",
+          "paperFullWidth": "MuiDialog-paperFullWidth",
+          "paperScrollBody": "MuiDialog-paperScrollBody",
+          "paperScrollPaper": "MuiDialog-paperScrollPaper",
+          "paperWidthFalse": "MuiDialog-paperWidthFalse",
+          "paperWidthLg": "MuiDialog-paperWidthLg",
+          "paperWidthMd": "MuiDialog-paperWidthMd",
+          "paperWidthSm": "MuiDialog-paperWidthSm",
+          "paperWidthXl": "MuiDialog-paperWidthXl",
+          "paperWidthXs": "MuiDialog-paperWidthXs",
+          "root": "MuiDialog-root modal-root",
+          "scrollBody": "MuiDialog-scrollBody",
+          "scrollPaper": "MuiDialog-scrollPaper",
+        }
+      }
+      disableEscapeKeyDown={true}
+      onClose={[Function]}
+      open={true}
+    >
+      <ForwardRef(Modal)
+        BackdropComponent={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "Naked": Object {
+              "$$typeof": Symbol(react.forward_ref),
+              "propTypes": Object {
+                "children": [Function],
+                "className": [Function],
+                "classes": [Function],
+                "invisible": [Function],
+                "open": [Function],
+                "transitionDuration": [Function],
+              },
+              "render": [Function],
+            },
+            "displayName": "WithStyles(ForwardRef(Backdrop))",
+            "options": Object {
+              "defaultTheme": Object {
+                "breakpoints": Object {
+                  "between": [Function],
+                  "down": [Function],
+                  "keys": Array [
+                    "xs",
+                    "sm",
+                    "md",
+                    "lg",
+                    "xl",
+                  ],
+                  "only": [Function],
+                  "up": [Function],
+                  "values": Object {
+                    "lg": 1280,
+                    "md": 960,
+                    "sm": 600,
+                    "xl": 1920,
+                    "xs": 0,
+                  },
+                  "width": [Function],
+                },
+                "direction": "ltr",
+                "mixins": Object {
+                  "gutters": [Function],
+                  "toolbar": Object {
+                    "@media (min-width:0px) and (orientation: landscape)": Object {
+                      "minHeight": 48,
+                    },
+                    "@media (min-width:600px)": Object {
+                      "minHeight": 64,
+                    },
+                    "minHeight": 56,
+                  },
+                },
+                "overrides": Object {},
+                "palette": Object {
+                  "action": Object {
+                    "activatedOpacity": 0.12,
+                    "active": "rgba(0, 0, 0, 0.54)",
+                    "disabled": "rgba(0, 0, 0, 0.26)",
+                    "disabledBackground": "rgba(0, 0, 0, 0.12)",
+                    "disabledOpacity": 0.38,
+                    "focus": "rgba(0, 0, 0, 0.12)",
+                    "focusOpacity": 0.12,
+                    "hover": "rgba(0, 0, 0, 0.04)",
+                    "hoverOpacity": 0.04,
+                    "selected": "rgba(0, 0, 0, 0.08)",
+                    "selectedOpacity": 0.08,
+                  },
+                  "augmentColor": [Function],
+                  "background": Object {
+                    "default": "#fafafa",
+                    "paper": "#fff",
+                  },
+                  "common": Object {
+                    "black": "#000",
+                    "white": "#fff",
+                  },
+                  "contrastThreshold": 3,
+                  "divider": "rgba(0, 0, 0, 0.12)",
+                  "error": Object {
+                    "contrastText": "#fff",
+                    "dark": "#d32f2f",
+                    "light": "#e57373",
+                    "main": "#f44336",
+                  },
+                  "getContrastText": [Function],
+                  "grey": Object {
+                    "100": "#f5f5f5",
+                    "200": "#eeeeee",
+                    "300": "#e0e0e0",
+                    "400": "#bdbdbd",
+                    "50": "#fafafa",
+                    "500": "#9e9e9e",
+                    "600": "#757575",
+                    "700": "#616161",
+                    "800": "#424242",
+                    "900": "#212121",
+                    "A100": "#d5d5d5",
+                    "A200": "#aaaaaa",
+                    "A400": "#303030",
+                    "A700": "#616161",
+                  },
+                  "info": Object {
+                    "contrastText": "#fff",
+                    "dark": "#1976d2",
+                    "light": "#64b5f6",
+                    "main": "#2196f3",
+                  },
+                  "primary": Object {
+                    "contrastText": "#fff",
+                    "dark": "#303f9f",
+                    "light": "#7986cb",
+                    "main": "#3f51b5",
+                  },
+                  "secondary": Object {
+                    "contrastText": "#fff",
+                    "dark": "#c51162",
+                    "light": "#ff4081",
+                    "main": "#f50057",
+                  },
+                  "success": Object {
+                    "contrastText": "rgba(0, 0, 0, 0.87)",
+                    "dark": "#388e3c",
+                    "light": "#81c784",
+                    "main": "#4caf50",
+                  },
+                  "text": Object {
+                    "disabled": "rgba(0, 0, 0, 0.38)",
+                    "hint": "rgba(0, 0, 0, 0.38)",
+                    "primary": "rgba(0, 0, 0, 0.87)",
+                    "secondary": "rgba(0, 0, 0, 0.54)",
+                  },
+                  "tonalOffset": 0.2,
+                  "type": "light",
+                  "warning": Object {
+                    "contrastText": "rgba(0, 0, 0, 0.87)",
+                    "dark": "#f57c00",
+                    "light": "#ffb74d",
+                    "main": "#ff9800",
+                  },
+                },
+                "props": Object {},
+                "shadows": Array [
+                  "none",
+                  "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+                  "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+                  "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+                  "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+                  "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+                  "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+                  "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+                  "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+                  "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+                  "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+                  "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+                  "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+                  "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+                  "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+                  "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+                  "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+                  "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+                  "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
+                ],
+                "shape": Object {
+                  "borderRadius": 4,
+                },
+                "spacing": [Function],
+                "transitions": Object {
+                  "create": [Function],
+                  "duration": Object {
+                    "complex": 375,
+                    "enteringScreen": 225,
+                    "leavingScreen": 195,
+                    "short": 250,
+                    "shorter": 200,
+                    "shortest": 150,
+                    "standard": 300,
+                  },
+                  "easing": Object {
+                    "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+                    "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+                    "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+                    "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
+                  },
+                  "getAutoHeightDuration": [Function],
+                },
+                "typography": Object {
+                  "body1": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "1rem",
+                    "fontWeight": 400,
+                    "letterSpacing": "0.00938em",
+                    "lineHeight": 1.5,
+                  },
+                  "body2": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "0.875rem",
+                    "fontWeight": 400,
+                    "letterSpacing": "0.01071em",
+                    "lineHeight": 1.43,
+                  },
+                  "button": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "0.875rem",
+                    "fontWeight": 500,
+                    "letterSpacing": "0.02857em",
+                    "lineHeight": 1.75,
+                    "textTransform": "uppercase",
+                  },
+                  "caption": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "0.75rem",
+                    "fontWeight": 400,
+                    "letterSpacing": "0.03333em",
+                    "lineHeight": 1.66,
+                  },
+                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                  "fontSize": 14,
+                  "fontWeightBold": 700,
+                  "fontWeightLight": 300,
+                  "fontWeightMedium": 500,
+                  "fontWeightRegular": 400,
+                  "h1": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "6rem",
+                    "fontWeight": 300,
+                    "letterSpacing": "-0.01562em",
+                    "lineHeight": 1.167,
+                  },
+                  "h2": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "3.75rem",
+                    "fontWeight": 300,
+                    "letterSpacing": "-0.00833em",
+                    "lineHeight": 1.2,
+                  },
+                  "h3": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "3rem",
+                    "fontWeight": 400,
+                    "letterSpacing": "0em",
+                    "lineHeight": 1.167,
+                  },
+                  "h4": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "2.125rem",
+                    "fontWeight": 400,
+                    "letterSpacing": "0.00735em",
+                    "lineHeight": 1.235,
+                  },
+                  "h5": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "1.5rem",
+                    "fontWeight": 400,
+                    "letterSpacing": "0em",
+                    "lineHeight": 1.334,
+                  },
+                  "h6": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "1.25rem",
+                    "fontWeight": 500,
+                    "letterSpacing": "0.0075em",
+                    "lineHeight": 1.6,
+                  },
+                  "htmlFontSize": 16,
+                  "overline": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "0.75rem",
+                    "fontWeight": 400,
+                    "letterSpacing": "0.08333em",
+                    "lineHeight": 2.66,
+                    "textTransform": "uppercase",
+                  },
+                  "pxToRem": [Function],
+                  "round": [Function],
+                  "subtitle1": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "1rem",
+                    "fontWeight": 400,
+                    "letterSpacing": "0.00938em",
+                    "lineHeight": 1.75,
+                  },
+                  "subtitle2": Object {
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": "0.875rem",
+                    "fontWeight": 500,
+                    "letterSpacing": "0.00714em",
+                    "lineHeight": 1.57,
+                  },
+                },
+                "zIndex": Object {
+                  "appBar": 1100,
+                  "drawer": 1200,
+                  "mobileStepper": 1000,
+                  "modal": 1300,
+                  "snackbar": 1400,
+                  "speedDial": 1050,
+                  "tooltip": 1500,
+                },
+              },
+              "name": "MuiBackdrop",
+            },
+            "propTypes": Object {
+              "classes": [Function],
+              "innerRef": [Function],
+            },
+            "render": [Function],
+            "useStyles": [Function],
+          }
+        }
+        BackdropProps={
+          Object {
+            "transitionDuration": Object {
+              "enter": 225,
+              "exit": 195,
+            },
+          }
+        }
+        className="MuiDialog-root modal-root"
+        closeAfterTransition={true}
+        disableEscapeKeyDown={true}
+        onClose={[Function]}
+        open={true}
+      >
+        <ForwardRef(Portal)
+          disablePortal={false}
+        >
+          <Portal
+            containerInfo={
+              <body
+                style="padding-right: 0px; overflow: hidden;"
+              >
+                <div
+                  class="MuiDialog-root modal-root"
+                  role="presentation"
+                  style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+                >
+                  <div
+                    aria-hidden="true"
+                    class="MuiBackdrop-root"
+                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+                  />
+                  <div
+                    data-test="sentinelStart"
+                    tabindex="0"
+                  />
+                  <div
+                    class="MuiDialog-container MuiDialog-scrollPaper"
+                    role="none presentation"
+                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+                    tabindex="-1"
+                  >
+                    <div
+                      aria-labelledby="accessibility-title"
+                      class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+                      role="dialog"
+                    >
+                      <div
+                        id="accessibility-title"
+                      >
+                        Bold title
+                      </div>
+                      <div
+                        id="accessibility-content"
+                      >
+                        Interesting description
+                      </div>
+                      <button
+                        aria-label="feedback.accessibility.button_close"
+                        class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label"
+                        >
+                          <svg
+                            class="styles__icon___23x3R"
+                            height="16"
+                            width="16"
+                          >
+                            <use
+                              xlink:href="#test-file-stub"
+                            />
+                          </svg>
+                        </span>
+                        <span
+                          class="MuiTouchRipple-root"
+                        />
+                      </button>
+                      <div
+                        class="customPopupModal"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="warn-icon styles__icon___23x3R"
+                          height="100"
+                          width="100"
+                        >
+                          <use
+                            xlink:href="#test-file-stub"
+                          />
+                        </svg>
+                        <div
+                          class="customPopup-title text-20-bold"
+                        >
+                          Bold title
+                        </div>
+                        <div
+                          class="customPopup-content text-16-normal"
+                        >
+                          Interesting description
+                        </div>
+                        <button
+                          class="MuiButtonBase-root MuiButton-root btn-highlight  MuiButton-text"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <span
+                            class="MuiButton-label text-16-bold"
+                          >
+                            consumption.partners_issue_modal.ok
+                          </span>
+                          <span
+                            class="MuiTouchRipple-root"
+                          />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    data-test="sentinelEnd"
+                    tabindex="0"
+                  />
+                </div>
+              </body>
+            }
+          >
+            <div
+              className="MuiDialog-root modal-root"
+              onKeyDown={[Function]}
+              role="presentation"
+              style={
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "fixed",
+                  "right": 0,
+                  "top": 0,
+                  "zIndex": 1300,
+                }
+              }
+            >
+              <WithStyles(ForwardRef(Backdrop))
+                onClick={[Function]}
+                open={true}
+                transitionDuration={
+                  Object {
+                    "enter": 225,
+                    "exit": 195,
+                  }
+                }
+              >
+                <ForwardRef(Backdrop)
+                  classes={
+                    Object {
+                      "invisible": "MuiBackdrop-invisible",
+                      "root": "MuiBackdrop-root",
+                    }
+                  }
+                  onClick={[Function]}
+                  open={true}
+                  transitionDuration={
+                    Object {
+                      "enter": 225,
+                      "exit": 195,
+                    }
+                  }
+                >
+                  <ForwardRef(Fade)
+                    in={true}
+                    onClick={[Function]}
+                    timeout={
+                      Object {
+                        "enter": 225,
+                        "exit": 195,
+                      }
+                    }
+                  >
+                    <Transition
+                      appear={true}
+                      enter={true}
+                      exit={true}
+                      in={true}
+                      mountOnEnter={false}
+                      onClick={[Function]}
+                      onEnter={[Function]}
+                      onEntered={[Function]}
+                      onEntering={[Function]}
+                      onExit={[Function]}
+                      onExited={[Function]}
+                      onExiting={[Function]}
+                      timeout={
+                        Object {
+                          "enter": 225,
+                          "exit": 195,
+                        }
+                      }
+                      unmountOnExit={false}
+                    >
+                      <div
+                        aria-hidden={true}
+                        className="MuiBackdrop-root"
+                        onClick={[Function]}
+                        style={
+                          Object {
+                            "opacity": 1,
+                            "visibility": undefined,
+                          }
+                        }
+                      />
+                    </Transition>
+                  </ForwardRef(Fade)>
+                </ForwardRef(Backdrop)>
+              </WithStyles(ForwardRef(Backdrop))>
+              <Unstable_TrapFocus
+                disableAutoFocus={false}
+                disableEnforceFocus={false}
+                disableRestoreFocus={false}
+                getDoc={[Function]}
+                isEnabled={[Function]}
+                open={true}
+              >
+                <div
+                  data-test="sentinelStart"
+                  tabIndex={0}
+                />
+                <ForwardRef(Fade)
+                  appear={true}
+                  in={true}
+                  onEnter={[Function]}
+                  onExited={[Function]}
+                  role="none presentation"
+                  tabIndex="-1"
+                  timeout={
+                    Object {
+                      "enter": 225,
+                      "exit": 195,
+                    }
+                  }
+                >
+                  <Transition
+                    appear={true}
+                    enter={true}
+                    exit={true}
+                    in={true}
+                    mountOnEnter={false}
+                    onEnter={[Function]}
+                    onEntered={[Function]}
+                    onEntering={[Function]}
+                    onExit={[Function]}
+                    onExited={[Function]}
+                    onExiting={[Function]}
+                    role="none presentation"
+                    tabIndex="-1"
+                    timeout={
+                      Object {
+                        "enter": 225,
+                        "exit": 195,
+                      }
+                    }
+                    unmountOnExit={false}
+                  >
+                    <div
+                      className="MuiDialog-container MuiDialog-scrollPaper"
+                      onMouseDown={[Function]}
+                      onMouseUp={[Function]}
+                      role="none presentation"
+                      style={
+                        Object {
+                          "opacity": 1,
+                          "visibility": undefined,
+                        }
+                      }
+                      tabIndex="-1"
+                    >
+                      <WithStyles(ForwardRef(Paper))
+                        aria-labelledby="accessibility-title"
+                        className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+                        elevation={24}
+                        role="dialog"
+                      >
+                        <ForwardRef(Paper)
+                          aria-labelledby="accessibility-title"
+                          className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+                          classes={
+                            Object {
+                              "elevation0": "MuiPaper-elevation0",
+                              "elevation1": "MuiPaper-elevation1",
+                              "elevation10": "MuiPaper-elevation10",
+                              "elevation11": "MuiPaper-elevation11",
+                              "elevation12": "MuiPaper-elevation12",
+                              "elevation13": "MuiPaper-elevation13",
+                              "elevation14": "MuiPaper-elevation14",
+                              "elevation15": "MuiPaper-elevation15",
+                              "elevation16": "MuiPaper-elevation16",
+                              "elevation17": "MuiPaper-elevation17",
+                              "elevation18": "MuiPaper-elevation18",
+                              "elevation19": "MuiPaper-elevation19",
+                              "elevation2": "MuiPaper-elevation2",
+                              "elevation20": "MuiPaper-elevation20",
+                              "elevation21": "MuiPaper-elevation21",
+                              "elevation22": "MuiPaper-elevation22",
+                              "elevation23": "MuiPaper-elevation23",
+                              "elevation24": "MuiPaper-elevation24",
+                              "elevation3": "MuiPaper-elevation3",
+                              "elevation4": "MuiPaper-elevation4",
+                              "elevation5": "MuiPaper-elevation5",
+                              "elevation6": "MuiPaper-elevation6",
+                              "elevation7": "MuiPaper-elevation7",
+                              "elevation8": "MuiPaper-elevation8",
+                              "elevation9": "MuiPaper-elevation9",
+                              "outlined": "MuiPaper-outlined",
+                              "root": "MuiPaper-root",
+                              "rounded": "MuiPaper-rounded",
+                            }
+                          }
+                          elevation={24}
+                          role="dialog"
+                        >
+                          <div
+                            aria-labelledby="accessibility-title"
+                            className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+                            role="dialog"
+                          >
+                            <div
+                              id="accessibility-title"
+                            >
+                              Bold title
+                            </div>
+                            <div
+                              id="accessibility-content"
+                            >
+                              Interesting description
+                            </div>
+                            <WithStyles(ForwardRef(IconButton))
+                              aria-label="feedback.accessibility.button_close"
+                              className="modal-paper-close-button"
+                              onClick={[MockFunction]}
+                            >
+                              <ForwardRef(IconButton)
+                                aria-label="feedback.accessibility.button_close"
+                                className="modal-paper-close-button"
+                                classes={
+                                  Object {
+                                    "colorInherit": "MuiIconButton-colorInherit",
+                                    "colorPrimary": "MuiIconButton-colorPrimary",
+                                    "colorSecondary": "MuiIconButton-colorSecondary",
+                                    "disabled": "Mui-disabled",
+                                    "edgeEnd": "MuiIconButton-edgeEnd",
+                                    "edgeStart": "MuiIconButton-edgeStart",
+                                    "label": "MuiIconButton-label",
+                                    "root": "MuiIconButton-root",
+                                    "sizeSmall": "MuiIconButton-sizeSmall",
+                                  }
+                                }
+                                onClick={[MockFunction]}
+                              >
+                                <WithStyles(ForwardRef(ButtonBase))
+                                  aria-label="feedback.accessibility.button_close"
+                                  centerRipple={true}
+                                  className="MuiIconButton-root modal-paper-close-button"
+                                  disabled={false}
+                                  focusRipple={true}
+                                  onClick={[MockFunction]}
+                                >
+                                  <ForwardRef(ButtonBase)
+                                    aria-label="feedback.accessibility.button_close"
+                                    centerRipple={true}
+                                    className="MuiIconButton-root modal-paper-close-button"
+                                    classes={
+                                      Object {
+                                        "disabled": "Mui-disabled",
+                                        "focusVisible": "Mui-focusVisible",
+                                        "root": "MuiButtonBase-root",
+                                      }
+                                    }
+                                    disabled={false}
+                                    focusRipple={true}
+                                    onClick={[MockFunction]}
+                                  >
+                                    <button
+                                      aria-label="feedback.accessibility.button_close"
+                                      className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+                                      disabled={false}
+                                      onBlur={[Function]}
+                                      onClick={[MockFunction]}
+                                      onDragLeave={[Function]}
+                                      onFocus={[Function]}
+                                      onKeyDown={[Function]}
+                                      onKeyUp={[Function]}
+                                      onMouseDown={[Function]}
+                                      onMouseLeave={[Function]}
+                                      onMouseUp={[Function]}
+                                      onTouchEnd={[Function]}
+                                      onTouchMove={[Function]}
+                                      onTouchStart={[Function]}
+                                      tabIndex={0}
+                                      type="button"
+                                    >
+                                      <span
+                                        className="MuiIconButton-label"
+                                      >
+                                        <Icon
+                                          icon="test-file-stub"
+                                          size={16}
+                                          spin={false}
+                                        >
+                                          <Component
+                                            className="styles__icon___23x3R"
+                                            height={16}
+                                            style={Object {}}
+                                            width={16}
+                                          >
+                                            <svg
+                                              className="styles__icon___23x3R"
+                                              height={16}
+                                              style={Object {}}
+                                              width={16}
+                                            >
+                                              <use
+                                                xlinkHref="#test-file-stub"
+                                              />
+                                            </svg>
+                                          </Component>
+                                        </Icon>
+                                      </span>
+                                      <WithStyles(memo)
+                                        center={true}
+                                      >
+                                        <ForwardRef(TouchRipple)
+                                          center={true}
+                                          classes={
+                                            Object {
+                                              "child": "MuiTouchRipple-child",
+                                              "childLeaving": "MuiTouchRipple-childLeaving",
+                                              "childPulsate": "MuiTouchRipple-childPulsate",
+                                              "ripple": "MuiTouchRipple-ripple",
+                                              "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                                              "rippleVisible": "MuiTouchRipple-rippleVisible",
+                                              "root": "MuiTouchRipple-root",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="MuiTouchRipple-root"
+                                          >
+                                            <TransitionGroup
+                                              childFactory={[Function]}
+                                              component={null}
+                                              exit={true}
+                                            />
+                                          </span>
+                                        </ForwardRef(TouchRipple)>
+                                      </WithStyles(memo)>
+                                    </button>
+                                  </ForwardRef(ButtonBase)>
+                                </WithStyles(ForwardRef(ButtonBase))>
+                              </ForwardRef(IconButton)>
+                            </WithStyles(ForwardRef(IconButton))>
+                            <div
+                              className="customPopupModal"
+                            >
+                              <StyledIcon
+                                className="warn-icon"
+                                icon="test-file-stub"
+                                size={100}
+                              >
+                                <Icon
+                                  aria-hidden={true}
+                                  className="warn-icon"
+                                  icon="test-file-stub"
+                                  size={100}
+                                  spin={false}
+                                >
+                                  <Component
+                                    aria-hidden={true}
+                                    className="warn-icon styles__icon___23x3R"
+                                    height={100}
+                                    style={Object {}}
+                                    width={100}
+                                  >
+                                    <svg
+                                      aria-hidden={true}
+                                      className="warn-icon styles__icon___23x3R"
+                                      height={100}
+                                      style={Object {}}
+                                      width={100}
+                                    >
+                                      <use
+                                        xlinkHref="#test-file-stub"
+                                      />
+                                    </svg>
+                                  </Component>
+                                </Icon>
+                              </StyledIcon>
+                              <div
+                                className="customPopup-title text-20-bold"
+                              >
+                                Bold title
+                              </div>
+                              <div
+                                className="customPopup-content text-16-normal"
+                              >
+                                Interesting description
+                              </div>
+                              <WithStyles(ForwardRef(Button))
+                                classes={
+                                  Object {
+                                    "label": "text-16-bold",
+                                    "root": "btn-highlight ",
+                                  }
+                                }
+                                onClick={[MockFunction]}
+                              >
+                                <ForwardRef(Button)
+                                  classes={
+                                    Object {
+                                      "colorInherit": "MuiButton-colorInherit",
+                                      "contained": "MuiButton-contained",
+                                      "containedPrimary": "MuiButton-containedPrimary",
+                                      "containedSecondary": "MuiButton-containedSecondary",
+                                      "containedSizeLarge": "MuiButton-containedSizeLarge",
+                                      "containedSizeSmall": "MuiButton-containedSizeSmall",
+                                      "disableElevation": "MuiButton-disableElevation",
+                                      "disabled": "Mui-disabled",
+                                      "endIcon": "MuiButton-endIcon",
+                                      "focusVisible": "Mui-focusVisible",
+                                      "fullWidth": "MuiButton-fullWidth",
+                                      "iconSizeLarge": "MuiButton-iconSizeLarge",
+                                      "iconSizeMedium": "MuiButton-iconSizeMedium",
+                                      "iconSizeSmall": "MuiButton-iconSizeSmall",
+                                      "label": "MuiButton-label text-16-bold",
+                                      "outlined": "MuiButton-outlined",
+                                      "outlinedPrimary": "MuiButton-outlinedPrimary",
+                                      "outlinedSecondary": "MuiButton-outlinedSecondary",
+                                      "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+                                      "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+                                      "root": "MuiButton-root btn-highlight ",
+                                      "sizeLarge": "MuiButton-sizeLarge",
+                                      "sizeSmall": "MuiButton-sizeSmall",
+                                      "startIcon": "MuiButton-startIcon",
+                                      "text": "MuiButton-text",
+                                      "textPrimary": "MuiButton-textPrimary",
+                                      "textSecondary": "MuiButton-textSecondary",
+                                      "textSizeLarge": "MuiButton-textSizeLarge",
+                                      "textSizeSmall": "MuiButton-textSizeSmall",
+                                    }
+                                  }
+                                  onClick={[MockFunction]}
+                                >
+                                  <WithStyles(ForwardRef(ButtonBase))
+                                    className="MuiButton-root btn-highlight  MuiButton-text"
+                                    component="button"
+                                    disabled={false}
+                                    focusRipple={true}
+                                    focusVisibleClassName="Mui-focusVisible"
+                                    onClick={[MockFunction]}
+                                    type="button"
+                                  >
+                                    <ForwardRef(ButtonBase)
+                                      className="MuiButton-root btn-highlight  MuiButton-text"
+                                      classes={
+                                        Object {
+                                          "disabled": "Mui-disabled",
+                                          "focusVisible": "Mui-focusVisible",
+                                          "root": "MuiButtonBase-root",
+                                        }
+                                      }
+                                      component="button"
+                                      disabled={false}
+                                      focusRipple={true}
+                                      focusVisibleClassName="Mui-focusVisible"
+                                      onClick={[MockFunction]}
+                                      type="button"
+                                    >
+                                      <button
+                                        className="MuiButtonBase-root MuiButton-root btn-highlight  MuiButton-text"
+                                        disabled={false}
+                                        onBlur={[Function]}
+                                        onClick={[MockFunction]}
+                                        onDragLeave={[Function]}
+                                        onFocus={[Function]}
+                                        onKeyDown={[Function]}
+                                        onKeyUp={[Function]}
+                                        onMouseDown={[Function]}
+                                        onMouseLeave={[Function]}
+                                        onMouseUp={[Function]}
+                                        onTouchEnd={[Function]}
+                                        onTouchMove={[Function]}
+                                        onTouchStart={[Function]}
+                                        tabIndex={0}
+                                        type="button"
+                                      >
+                                        <span
+                                          className="MuiButton-label text-16-bold"
+                                        >
+                                          consumption.partners_issue_modal.ok
+                                        </span>
+                                        <WithStyles(memo)
+                                          center={false}
+                                        >
+                                          <ForwardRef(TouchRipple)
+                                            center={false}
+                                            classes={
+                                              Object {
+                                                "child": "MuiTouchRipple-child",
+                                                "childLeaving": "MuiTouchRipple-childLeaving",
+                                                "childPulsate": "MuiTouchRipple-childPulsate",
+                                                "ripple": "MuiTouchRipple-ripple",
+                                                "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+                                                "rippleVisible": "MuiTouchRipple-rippleVisible",
+                                                "root": "MuiTouchRipple-root",
+                                              }
+                                            }
+                                          >
+                                            <span
+                                              className="MuiTouchRipple-root"
+                                            >
+                                              <TransitionGroup
+                                                childFactory={[Function]}
+                                                component={null}
+                                                exit={true}
+                                              />
+                                            </span>
+                                          </ForwardRef(TouchRipple)>
+                                        </WithStyles(memo)>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(Button)>
+                              </WithStyles(ForwardRef(Button))>
+                            </div>
+                          </div>
+                        </ForwardRef(Paper)>
+                      </WithStyles(ForwardRef(Paper))>
+                    </div>
+                  </Transition>
+                </ForwardRef(Fade)>
+                <div
+                  data-test="sentinelEnd"
+                  tabIndex={0}
+                />
+              </Unstable_TrapFocus>
+            </div>
+          </Portal>
+        </ForwardRef(Portal)>
+      </ForwardRef(Modal)>
+    </ForwardRef(Dialog)>
+  </WithStyles(ForwardRef(Dialog))>
+</CustomPopupModal>
+`;
diff --git a/src/components/CustomPopup/customPopupModal.scss b/src/components/CustomPopup/customPopupModal.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2646579c3519bf12eeb3e39d0816467cf14a2a3d
--- /dev/null
+++ b/src/components/CustomPopup/customPopupModal.scss
@@ -0,0 +1,29 @@
+@import '../../styles/base/typo-variables';
+@import '../../styles/base/color';
+
+.customPopupModal {
+  padding: 1rem;
+  max-width: 20rem;
+  .warn-icon {
+    margin: 1rem auto;
+    display: block;
+  }
+  .customPopup-title {
+    text-align: center;
+    color: $gold-shadow;
+    margin: 1rem auto;
+  }
+  .customPopup-content {
+    text-align: center;
+    color: $grey-bright;
+  }
+
+  button.btn-highlight {
+    padding: 0.65rem;
+  }
+}
+
+#accessibility-title,
+#accessibility-content {
+  display: none;
+}
diff --git a/src/components/Home/ConsumptionView.spec.tsx b/src/components/Home/ConsumptionView.spec.tsx
index 99ff6a0d2275bab61c87ec15a963e64c3b249ff6..839e1eb6652327f4501e7b3d9144414752d0315f 100644
--- a/src/components/Home/ConsumptionView.spec.tsx
+++ b/src/components/Home/ConsumptionView.spec.tsx
@@ -14,6 +14,10 @@ import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
 import ConsumptionView from './ConsumptionView'
 import { FluidStatus } from 'models'
 import { mockTestProfile1 } from '../../../tests/__mocks__/profileType.mock'
+import {
+  mockCustomPopup,
+  mockCustomPopupOff,
+} from '../../../tests/__mocks__/customPopup.mock'
 
 jest.mock('cozy-ui/transpiled/react/I18n', () => {
   return {
@@ -49,6 +53,7 @@ jest.mock(
   'components/PartnersIssue/PartnersIssueModal',
   () => 'mock-partnersissuemodal'
 )
+jest.mock('components/CustomPopup/CustomPopupModal', () => 'mock-custompopup')
 jest.mock(
   'components/Connection/ExpiredConsentModal',
   () => 'mock-expiredconsentmodal'
@@ -76,7 +81,6 @@ describe('ConsumptionView component', () => {
       loading: false,
       fluidStatus: mockFluidStatus,
       releaseNotes: mockInitialEcolyoState.global.releaseNotes,
-      openPartnersIssueModal: false,
     })
     const wrapper = mount(
       <Provider store={store}>
@@ -100,7 +104,6 @@ describe('ConsumptionView component', () => {
       loading: true,
       fluidStatus: mockFluidStatus,
       releaseNotes: mockInitialEcolyoState.global.releaseNotes,
-      openPartnersIssueModal: false,
     })
     const wrapper = mount(
       <Provider store={store}>
@@ -119,7 +122,6 @@ describe('ConsumptionView component', () => {
       loading: true,
       fluidStatus: mockInitialEcolyoState.global.fluidStatus,
       releaseNotes: mockInitialEcolyoState.global.releaseNotes,
-      openPartnersIssueModal: false,
     })
     mount(
       <Provider store={store}>
@@ -136,7 +138,6 @@ describe('ConsumptionView component', () => {
       loading: true,
       fluidStatus: mockInitialEcolyoState.global.fluidStatus,
       releaseNotes: mockInitialEcolyoState.global.releaseNotes,
-      openPartnersIssueModal: false,
     })
     const wrapper = mount(
       <Provider store={store}>
@@ -150,13 +151,11 @@ describe('ConsumptionView component', () => {
     const updatedStatus: FluidStatus[] =
       mockInitialEcolyoState.global.fluidStatus
     updatedStatus[1].status = FluidState.DONE
-
     useSelectorSpy.mockReturnValue({
       currentTimeStep: TimeStep.WEEK,
       loading: true,
       fluidStatus: updatedStatus,
       releaseNotes: mockInitialEcolyoState.global.releaseNotes,
-      openPartnersIssueModal: false,
     })
     const wrapper = mount(
       <Provider store={store}>
@@ -175,7 +174,6 @@ describe('ConsumptionView component', () => {
       loading: true,
       fluidStatus: updatedStatus,
       releaseNotes: mockInitialEcolyoState.global.releaseNotes,
-      openPartnersIssueModal: false,
     })
     const wrapper = mount(
       <Provider store={store}>
@@ -185,7 +183,7 @@ describe('ConsumptionView component', () => {
     expect(wrapper.find('.consumptionview-content').exists()).toBeTruthy()
     expect(wrapper.find('mock-consumptiondetails').exists()).toBeTruthy()
   })
-  it('should show partner issue Modal', async () => {
+  it('should render partner issue Modal', async () => {
     const updatedStatus: FluidStatus[] =
       mockInitialEcolyoState.global.fluidStatus
     updatedStatus[0] = mockExpiredElec
@@ -194,7 +192,6 @@ describe('ConsumptionView component', () => {
       loading: true,
       fluidStatus: updatedStatus,
       releaseNotes: mockInitialEcolyoState.global.releaseNotes,
-      openPartnersIssueModal: true,
     })
     useDispatchSpy.mockReturnValue(jest.fn())
     mockUpdateProfile.mockResolvedValue(mockTestProfile1)
@@ -205,6 +202,25 @@ describe('ConsumptionView component', () => {
     )
     expect(wrapper.find('mock-partnersissuemodal').exists()).toBeTruthy()
   })
+  it('should render customPopup Modal', async () => {
+    const updatedStatus: FluidStatus[] =
+      mockInitialEcolyoState.global.fluidStatus
+    updatedStatus[0] = mockExpiredElec
+    useSelectorSpy.mockReturnValue({
+      currentTimeStep: TimeStep.WEEK,
+      loading: true,
+      fluidStatus: updatedStatus,
+      releaseNotes: mockInitialEcolyoState.global.releaseNotes,
+    })
+    useDispatchSpy.mockReturnValue(jest.fn())
+    mockUpdateProfile.mockResolvedValue(mockTestProfile1)
+    const wrapper = mount(
+      <Provider store={store}>
+        <ConsumptionView fluidType={FluidType.ELECTRICITY} />
+      </Provider>
+    )
+    expect(wrapper.find('mock-custompopup').exists()).toBeTruthy()
+  })
   it('should show expired modal when a fluid oauth is expired', () => {
     const updatedStatus: FluidStatus[] =
       mockInitialEcolyoState.global.fluidStatus
@@ -214,7 +230,6 @@ describe('ConsumptionView component', () => {
       loading: true,
       fluidStatus: updatedStatus,
       releaseNotes: mockInitialEcolyoState.global.releaseNotes,
-      openPartnersIssueModal: false,
     })
     useDispatchSpy.mockReturnValue(jest.fn())
     const wrapper = mount(
diff --git a/src/components/Home/ConsumptionView.tsx b/src/components/Home/ConsumptionView.tsx
index f5a76f6c10db82b91a59591b26b3389dee8a5b8d..fc398862ab245bea80a494caa8d70fb49140a8ff 100644
--- a/src/components/Home/ConsumptionView.tsx
+++ b/src/components/Home/ConsumptionView.tsx
@@ -17,14 +17,23 @@ import FluidButtons from 'components/Home/FluidButtons'
 import KonnectorViewerCard from 'components/Konnector/KonnectorViewerCard'
 import KonnectorViewerList from 'components/Konnector/KonnectorViewerList'
 import classNames from 'classnames'
-import { getKonnectorUpdateError, isKonnectorActive } from 'utils/utils'
+import {
+  getKonnectorUpdateError,
+  getTodayDate,
+  isKonnectorActive,
+} from 'utils/utils'
 import ReleaseNotesModal from './releaseNotesModal'
-import { setPartnersIssue, showReleaseNotes } from 'store/global/global.actions'
+import {
+  setCustomPopup,
+  setPartnersIssue,
+  showReleaseNotes,
+} from 'store/global/global.actions'
 import PartnersIssueModal from 'components/PartnersIssue/PartnersIssueModal'
 import ProfileService from 'services/profile.service'
 import { useClient } from 'cozy-client'
 import { DateTime } from 'luxon'
 import ExpiredConsentModal from 'components/Connection/ExpiredConsentModal'
+import CustomPopupModal from 'components/CustomPopup/CustomPopupModal'
 
 interface ConsumptionViewProps {
   fluidType: FluidType
@@ -38,9 +47,12 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
   const { currentTimeStep, loading } = useSelector(
     (state: AppStore) => state.ecolyo.chart
   )
-  const { fluidStatus, releaseNotes, openPartnersIssueModal } = useSelector(
-    (state: AppStore) => state.ecolyo.global
-  )
+  const {
+    fluidStatus,
+    releaseNotes,
+    customPopupModal,
+    openPartnersIssueModal,
+  } = useSelector((state: AppStore) => state.ecolyo.global)
 
   const [isFluidKonnected, setIsFluidKonnected] = useState<boolean>(false)
   const [openReleaseNoteModal, setOpenReleaseNoteModal] = useState<boolean>(
@@ -78,17 +90,28 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
   const handleCloseModal = useCallback(async () => {
     const profileService = new ProfileService(client)
     const updatedProfile = await profileService.updateProfile({
-      partnersIssueDate: DateTime.local()
-        .setZone('utc', {
-          keepLocalTime: true,
-        })
-        .startOf('day'),
+      partnersIssueDate: getTodayDate(),
     })
     if (updatedProfile) {
       dispatch(setPartnersIssue(false))
     }
   }, [client, dispatch])
 
+  const handleCloseCustomPopupModal = async () => {
+    const profileService = new ProfileService(client)
+    const updatedProfile = await profileService.updateProfile({
+      customPopupDate: getTodayDate(),
+    })
+    if (updatedProfile) {
+      dispatch(
+        setCustomPopup({
+          ...customPopupModal,
+          popupEnabled: false,
+        })
+      )
+    }
+  }
+
   useEffect(() => {
     setIsFluidKonnected(isKonnectorActive(fluidStatus, fluidType))
     if (
@@ -193,6 +216,10 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
         fluidStatus={fluidStatus}
         handleCloseClick={handleCloseModal}
       />
+      <CustomPopupModal
+        customPopup={customPopupModal}
+        handleCloseClick={handleCloseCustomPopupModal}
+      />
       {consentExpiredFluids.length &&
         consentExpiredFluids.map(fluid => {
           return (
diff --git a/src/components/PartnersIssue/PartnersIssueModal.spec.tsx b/src/components/PartnersIssue/PartnersIssueModal.spec.tsx
index ec3e9bd9884670f2df2830a6d0289208e6d35cbd..8d04d89bd6f5524332a6623d6d7c1f0ae6e9e02a 100644
--- a/src/components/PartnersIssue/PartnersIssueModal.spec.tsx
+++ b/src/components/PartnersIssue/PartnersIssueModal.spec.tsx
@@ -20,10 +20,10 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
 const mockStore = configureStore([])
 const mockHandleClose = jest.fn()
 describe('PartnersIssueModal component', () => {
+  const store = mockStore({
+    ecolyo: mockInitialEcolyoState,
+  })
   it('should render correctly', () => {
-    const store = mockStore({
-      ecolyo: mockInitialEcolyoState,
-    })
     const wrapper = mount(
       <Provider store={store}>
         <PartnersIssueModal
@@ -35,10 +35,7 @@ describe('PartnersIssueModal component', () => {
     )
     expect(toJson(wrapper)).toMatchSnapshot()
   })
-  it('should close modal correctly', () => {
-    const store = mockStore({
-      ecolyo: mockInitialEcolyoState,
-    })
+  it('should close modal', () => {
     const wrapper = mount(
       <Provider store={store}>
         <PartnersIssueModal
@@ -51,4 +48,17 @@ describe('PartnersIssueModal component', () => {
     wrapper.find(Button).simulate('click')
     expect(mockHandleClose).toHaveBeenCalled()
   })
+
+  it('should not be rendered', () => {
+    const wrapper = mount(
+      <Provider store={store}>
+        <PartnersIssueModal
+          open={false}
+          handleCloseClick={mockHandleClose}
+          fluidStatus={mockInitialEcolyoState.global.fluidStatus}
+        />
+      </Provider>
+    )
+    expect(wrapper.find('div.partnersIssueModal').exists()).toBeFalsy()
+  })
 })
diff --git a/src/components/PartnersIssue/PartnersIssueModal.tsx b/src/components/PartnersIssue/PartnersIssueModal.tsx
index e29c89b237f9032dea5b87be941e523c11cf53f2..d79afb180370335afd8d90884454f3377203edd9 100644
--- a/src/components/PartnersIssue/PartnersIssueModal.tsx
+++ b/src/components/PartnersIssue/PartnersIssueModal.tsx
@@ -1,15 +1,15 @@
-import React, { useEffect, useState } from 'react'
-import './partnersIssueModal.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
+import IconButton from '@material-ui/core/IconButton'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import OrangeWarn from 'assets/icons/ico/warn-orange.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import { FluidState } from 'enum/fluid.enum'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import OrangeWarn from 'assets/icons/ico/warn-orange.svg'
 import { FluidStatus } from 'models'
-import IconButton from '@material-ui/core/IconButton'
-import CloseIcon from 'assets/icons/ico/close.svg'
+import React, { useEffect, useState } from 'react'
+import './partnersIssueModal.scss'
 
 interface PartnersIssueModalProps {
   open: boolean
@@ -43,6 +43,7 @@ const PartnersIssueModal: React.FC<PartnersIssueModalProps> = ({
         root: 'modal-root',
         paper: 'modal-paper',
       }}
+      style={{ zIndex: 1500 }}
     >
       <div id={'accessibility-title'}>
         {t('feedback.accessibility.window_title')}
diff --git a/src/components/PartnersIssue/__snapshots__/PartnersIssueModal.spec.tsx.snap b/src/components/PartnersIssue/__snapshots__/PartnersIssueModal.spec.tsx.snap
index 34b0a12811a6dd85b4f9704552f139c334371c06..78f3938af3847753a705996f3986ebf8e17bc63c 100644
--- a/src/components/PartnersIssue/__snapshots__/PartnersIssueModal.spec.tsx.snap
+++ b/src/components/PartnersIssue/__snapshots__/PartnersIssueModal.spec.tsx.snap
@@ -95,6 +95,11 @@ exports[`PartnersIssueModal component should render correctly 1`] = `
       disableEscapeKeyDown={true}
       onClose={[Function]}
       open={true}
+      style={
+        Object {
+          "zIndex": 1500,
+        }
+      }
     >
       <ForwardRef(Dialog)
         aria-labelledby="accessibility-title"
@@ -120,6 +125,11 @@ exports[`PartnersIssueModal component should render correctly 1`] = `
         disableEscapeKeyDown={true}
         onClose={[Function]}
         open={true}
+        style={
+          Object {
+            "zIndex": 1500,
+          }
+        }
       >
         <ForwardRef(Modal)
           BackdropComponent={
@@ -450,6 +460,11 @@ exports[`PartnersIssueModal component should render correctly 1`] = `
           disableEscapeKeyDown={true}
           onClose={[Function]}
           open={true}
+          style={
+            Object {
+              "zIndex": 1500,
+            }
+          }
         >
           <ForwardRef(Portal)
             disablePortal={false}
@@ -462,7 +477,7 @@ exports[`PartnersIssueModal component should render correctly 1`] = `
                   <div
                     class="MuiDialog-root modal-root"
                     role="presentation"
-                    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+                    style="position: fixed; z-index: 1500; right: 0px; bottom: 0px; top: 0px; left: 0px;"
                   >
                     <div
                       aria-hidden="true"
@@ -577,7 +592,7 @@ exports[`PartnersIssueModal component should render correctly 1`] = `
                     "position": "fixed",
                     "right": 0,
                     "top": 0,
-                    "zIndex": 1300,
+                    "zIndex": 1500,
                   }
                 }
               >
diff --git a/src/components/Splash/SplashRoot.tsx b/src/components/Splash/SplashRoot.tsx
index b15bc34157d07f919829e5f6c4529df0fc5cee88..3ea8034eead93d39dd94aff726fd9149ab4e0f6b 100644
--- a/src/components/Splash/SplashRoot.tsx
+++ b/src/components/Splash/SplashRoot.tsx
@@ -14,6 +14,7 @@ import {
   updateTermValidation,
   showReleaseNotes,
   setPartnersIssue,
+  setCustomPopup,
 } from 'store/global/global.actions'
 import {
   ProfileActionTypes,
@@ -60,6 +61,8 @@ import { InitSteps, InitStepsErrors } from 'models/initialisationSteps.model'
 import log from 'utils/logger'
 import SplashScreen from './SplashScreen'
 import SplashScreenError from './SplashScreenError'
+import CustomPupopService from 'services/customPopup.service'
+import { getTodayDate } from 'utils/utils'
 
 interface SplashRootProps {
   fadeTimer?: number
@@ -111,6 +114,7 @@ const SplashRoot = ({ fadeTimer = 1000, children }: SplashRootProps) => {
         setinitStepErrors
       )
       const partnersInfoService = new PartnersInfoService(client)
+      const customPopupService = new CustomPupopService(client)
       const ms = new MigrationService(client, setinitStepErrors)
       try {
         const migrationsResult: ReleaseNotes = await ms.runMigrations(
@@ -255,18 +259,18 @@ const SplashRoot = ({ fadeTimer = 1000, children }: SplashRootProps) => {
           })
         }
 
+        const today = getTodayDate().toISO()
+
+        // Check customPopup from backoffice
+        const customModalInfo = await customPopupService.getCustomPopup()
+        if (customModalInfo && today !== profile?.customPopupDate.toISO()) {
+          dispatch(setCustomPopup(customModalInfo))
+        }
+
         // Check partnersInfo from backoffice
         const partnersInfo: PartnersInfo | undefined =
           await partnersInfoService.getPartnersInfo()
 
-        // Get last partnersIssueDate
-        const today = DateTime.local()
-          .setZone('utc', {
-            keepLocalTime: true,
-          })
-          .startOf('day')
-          .toISO()
-
         // If notification is activated and konnector is connected, set FluidStatus to PARTNER_ISSUE
         if (partnersInfo && partnersInfo.notification_activated) {
           const fluidService = new FluidService(client)
diff --git a/src/locales/fr.json b/src/locales/fr.json
index d12000478ec823eb95a12a3ab1736ea1755ad54e..31547f031554ef1269cce5266eeb7c11607b4d8c 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -281,7 +281,8 @@
       "title": "Un problème dans la récupération de vos données",
       "text_1": "Ces partenaires nous indiquent qu’ils subissent en ce moment un soucis technique\u00a0:",
       "text_2": "La visualisation de vos consommations peut s’en trouver affectée.",
-      "button_validate": "J'ai compris"
+      "button_validate": "J'ai compris",
+      "ok": "Ok"
     }
   },
   "consumption_details": {
diff --git a/src/models/customPopup.model.ts b/src/models/customPopup.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2d9784562a9fd1764a50290693e0ce2026bbe51d
--- /dev/null
+++ b/src/models/customPopup.model.ts
@@ -0,0 +1,5 @@
+export interface CustomPopup {
+  popupEnabled: boolean
+  description: string
+  title: string
+}
diff --git a/src/models/global.model.ts b/src/models/global.model.ts
index 71d5bb8dd1935886b3083824457374b47ffbaa61..4fef5e1e9e6743aa2650c297b0da25ce1d6e47ca 100644
--- a/src/models/global.model.ts
+++ b/src/models/global.model.ts
@@ -1,6 +1,7 @@
 import { FluidType } from 'enum/fluid.enum'
 import { ScreenType } from 'enum/screen.enum'
 import { TermsStatus } from 'models'
+import { CustomPopup } from './customPopup.model'
 import { FluidStatus } from './fluid.model'
 import { ReleaseNotes } from './releaseNotes.model'
 import { SgeStore } from './sgeStore.model'
@@ -15,6 +16,7 @@ export interface GlobalState {
   termsStatus: TermsStatus
   fluidStatus: FluidStatus[]
   fluidTypes: FluidType[]
+  customPopupModal: CustomPopup
   openPartnersIssueModal: boolean
   shouldRefreshConsent: boolean
   sgeConnect: SgeStore
diff --git a/src/models/profile.model.ts b/src/models/profile.model.ts
index 0a4b3e71219df3f233a5c2e7402a63e7e9f94d7f..8478e1b66d91beaa0375949e09b4deb3e277445a 100644
--- a/src/models/profile.model.ts
+++ b/src/models/profile.model.ts
@@ -25,6 +25,7 @@ export interface ProfileEntity {
   partnersIssueDate: string
   haveSeenEcogestureModal: boolean
   activateHalfHourDate: string
+  customPopupDate: string
   _id?: string
   _rev?: string
 }
@@ -36,9 +37,11 @@ export interface Profile
     | 'monthlyAnalysisDate'
     | 'partnersIssueDate'
     | 'activateHalfHourDate'
+    | 'customPopupDate'
   > {
   lastConnectionDate: DateTime
   monthlyAnalysisDate: DateTime
   partnersIssueDate: DateTime
+  customPopupDate: DateTime
   activateHalfHourDate: DateTime
 }
diff --git a/src/services/customPopup.service.test.ts b/src/services/customPopup.service.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1c15f8f3b4fa180a4638254b571bf2ca4b7c0ad4
--- /dev/null
+++ b/src/services/customPopup.service.test.ts
@@ -0,0 +1,31 @@
+import mockClient from '../../tests/__mocks__/client'
+import { mockCustomPopup } from '../../tests/__mocks__/customPopup.mock'
+import CustomPupopService from './customPopup.service'
+
+jest.mock('services/environment.service', () => {
+  return jest.fn(() => {
+    return {
+      isProduction: () => true,
+    }
+  })
+})
+
+describe('PartnersInfo service', () => {
+  const customPupopService = new CustomPupopService(mockClient)
+
+  it('should return customPopup data', async () => {
+    mockClient.getStackClient().fetchJSON.mockResolvedValueOnce(mockCustomPopup)
+    const result = await customPupopService.getCustomPopup()
+    expect(result).toBe(mockCustomPopup)
+  })
+
+  it('should return an error', async () => {
+    mockClient.getStackClient().fetchJSON.mockRejectedValue(new Error())
+    try {
+      await customPupopService.getCustomPopup()
+      expect(true).toBe(false)
+    } catch (error) {
+      expect(error).toEqual(new Error('Error while getting customPopup'))
+    }
+  })
+})
diff --git a/src/services/customPopup.service.ts b/src/services/customPopup.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ef6fcb4976db6bd7ffbb353983360278e27e1fd1
--- /dev/null
+++ b/src/services/customPopup.service.ts
@@ -0,0 +1,31 @@
+import { Client } from 'cozy-client'
+import { CustomPopup } from 'models/customPopup.model'
+import EnvironmentService from './environment.service'
+
+export default class CustomPupopService {
+  private readonly _client: Client
+  constructor(_client: Client) {
+    this._client = _client
+  }
+
+  /*
+   * Get information from backoffice about the status of custom popup
+   * On success, respond the customPopup
+   * Else, throw an error
+   */
+  public async getCustomPopup(): Promise<CustomPopup | undefined> {
+    const env = new EnvironmentService()
+    const remoteUrl = env.isProduction()
+      ? `/remote/org.ecolyo.backoffice.custom.popup`
+      : `/remote/org.ecolyo.backoffice.custom.popup.rec`
+    try {
+      const result = await this._client
+        .getStackClient()
+        .fetchJSON('GET', remoteUrl)
+      return result as CustomPopup
+    } catch (error) {
+      console.error(`getCustomPopup: Failed to get custom popup:${error}`)
+      throw new Error('Error while getting customPopup')
+    }
+  }
+}
diff --git a/src/services/fluid.service.ts b/src/services/fluid.service.ts
index 69800a4d508587701fbd9927f6843ff5a6dfcd72..36d865381cf38a3d9897295b67b38217c476c85a 100644
--- a/src/services/fluid.service.ts
+++ b/src/services/fluid.service.ts
@@ -108,7 +108,6 @@ export default class FluidService {
         konnectorService.getKonnector(
           fluidConfig[FluidType.ELECTRICITY].konnectorConfig.slug
         ),
-
         konnectorService.getKonnector(
           fluidConfig[FluidType.WATER].konnectorConfig.slug
         ),
diff --git a/src/services/partnersInfo.service.spec.ts b/src/services/partnersInfo.service.spec.ts
index 07f198a26194f7349aac3c43233fe84a3febb10f..ace20739b7a76826075f81dd905a56f96504bcac 100644
--- a/src/services/partnersInfo.service.spec.ts
+++ b/src/services/partnersInfo.service.spec.ts
@@ -10,20 +10,33 @@ jest.mock('services/environment.service', () => {
   })
 })
 
+/* eslint-disable camelcase */
+const mockPartnersInfo: PartnersInfo = {
+  egl_failure: true,
+  enedis_failure: true,
+  grdf_failure: true,
+  notification_activated: true,
+}
+
 describe('PartnersInfo service', () => {
   const partnersInfoService = new PartnersInfoService(mockClient)
 
-  it('should return partnersInfo', async () => {
+  it('should return partnersInfoData', async () => {
+    mockClient
+      .getStackClient()
+      .fetchJSON.mockResolvedValueOnce(mockPartnersInfo)
     const result: PartnersInfo | undefined =
       await partnersInfoService.getPartnersInfo()
-    expect(result).toEqual(undefined)
+    expect(result).toEqual(mockPartnersInfo)
   })
+
   it('should return an error', async () => {
-    mockClient.query.mockRejectedValue(new Error())
+    mockClient.getStackClient().fetchJSON.mockRejectedValue(new Error())
     try {
       await partnersInfoService.getPartnersInfo()
+      expect(true).toBe(false)
     } catch (error) {
-      expect(error).rejects.toThrow(new Error())
+      expect(error).toEqual(new Error('Error while getting partnersInfo'))
     }
   })
 })
diff --git a/src/services/partnersInfo.service.ts b/src/services/partnersInfo.service.ts
index 52d4642637e56e75a579b4408eec0ee94aaebf19..da6a98738a286409c2b8429548be8c74e2e23605 100644
--- a/src/services/partnersInfo.service.ts
+++ b/src/services/partnersInfo.service.ts
@@ -25,6 +25,7 @@ export default class PartnersInfoService {
       return result as PartnersInfo
     } catch (error) {
       console.error(`getPartnersInfo: Failed to get partners info:${error}`)
+      throw new Error('Error while getting partnersInfo')
     }
   }
 }
diff --git a/src/services/profile.service.spec.ts b/src/services/profile.service.spec.ts
index 5cb4f6d59de94024c224a8e096a3f6b67afb4501..e5b97cc26c71c7ea3c098b85ec0ab83e8d596838 100644
--- a/src/services/profile.service.spec.ts
+++ b/src/services/profile.service.spec.ts
@@ -63,6 +63,7 @@ describe('UserProfile service', () => {
         ...profileData,
         monthlyAnalysisDate: '2020-11-03T00:00:00.000Z',
         partnersIssueDate: '2020-11-03T00:00:00.000Z',
+        customPopupDate: '2020-11-03T00:00:00.000Z',
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const mockQueryResult: QueryResult<any[]> = {
@@ -92,6 +93,9 @@ describe('UserProfile service', () => {
         partnersIssueDate: DateTime.fromISO('2020-11-03T00:00:00.000Z', {
           zone: 'utc',
         }),
+        customPopupDate: DateTime.fromISO('2020-11-03T00:00:00.000Z', {
+          zone: 'utc',
+        }),
         haveSeenLastAnalysis: false,
       }
       const result = await profileService.updateProfile({
diff --git a/src/services/profile.service.ts b/src/services/profile.service.ts
index cee6ea3843d0e000a08e6d42315e1bd4f8c524df..5bd07d1d7969ed05694177b5fe06fa3da8778366 100644
--- a/src/services/profile.service.ts
+++ b/src/services/profile.service.ts
@@ -9,6 +9,13 @@ export default class ProfileService {
   constructor(_client: Client) {
     this._client = _client
   }
+
+  private getDate(date: string): DateTime {
+    return DateTime.fromISO(date, {
+      zone: 'utc',
+    })
+  }
+
   /**
    * Retrieve Profile from the ProfileEntity
    * @param {ProfileEntity} profileEntity
@@ -19,22 +26,12 @@ export default class ProfileService {
       ...profileEntity,
       monthlyAnalysisDate:
         typeof profileEntity.monthlyAnalysisDate === 'string'
-          ? DateTime.fromISO(profileEntity.monthlyAnalysisDate, {
-              zone: 'utc',
-            })
+          ? this.getDate(profileEntity.monthlyAnalysisDate)
           : profileEntity.monthlyAnalysisDate,
-      lastConnectionDate: DateTime.fromISO(profileEntity.lastConnectionDate, {
-        zone: 'utc',
-      }),
-      partnersIssueDate: DateTime.fromISO(profileEntity.partnersIssueDate, {
-        zone: 'utc',
-      }),
-      activateHalfHourDate: DateTime.fromISO(
-        profileEntity.activateHalfHourDate,
-        {
-          zone: 'utc',
-        }
-      ),
+      lastConnectionDate: this.getDate(profileEntity.lastConnectionDate),
+      partnersIssueDate: this.getDate(profileEntity.partnersIssueDate),
+      activateHalfHourDate: this.getDate(profileEntity.activateHalfHourDate),
+      customPopupDate: this.getDate(profileEntity.customPopupDate),
     }
     return profile
   }
diff --git a/src/store/global/global.action.spec.ts b/src/store/global/global.action.spec.ts
index 1695a6e0ca852ac3840304c2144e4bcc20d8373f..a06bc8a6698db1b24ef6e3958f8d64e02aaccd9b 100644
--- a/src/store/global/global.action.spec.ts
+++ b/src/store/global/global.action.spec.ts
@@ -1,4 +1,5 @@
 import { ScreenType } from 'enum/screen.enum'
+import { mockCustomPopup } from '../../../tests/__mocks__/customPopup.mock'
 import { mockInitialGlobalState } from '../../../tests/__mocks__/store'
 import {
   CHANGE_SCREEN_TYPE,
@@ -13,6 +14,8 @@ import {
   toggleChallengeDuelNotification,
   toggleAnalysisNotification,
   setFluidStatus,
+  SET_CUSTOM_POPUP,
+  setCustomPopup,
 } from './global.actions'
 
 describe('global actions', () => {
@@ -75,4 +78,13 @@ describe('global actions', () => {
     }
     expect(setFluidStatus(fluidStatus)).toEqual(expectedAction)
   })
+
+  it('should set customPopup', () => {
+    const payload = mockCustomPopup
+    const expectedAction = {
+      type: SET_CUSTOM_POPUP,
+      payload,
+    }
+    expect(setCustomPopup(payload)).toEqual(expectedAction)
+  })
 })
diff --git a/src/store/global/global.actions.ts b/src/store/global/global.actions.ts
index 838a477930a5ea6ad08b7b29749b96cb9a46e87b..4e78d9a100e925d61b929d49f3c9495c4609afaa 100644
--- a/src/store/global/global.actions.ts
+++ b/src/store/global/global.actions.ts
@@ -1,6 +1,7 @@
 import { FluidType } from 'enum/fluid.enum'
 import { ScreenType } from 'enum/screen.enum'
 import { FluidConnection, FluidStatus, TermsStatus } from 'models'
+import { CustomPopup } from 'models/customPopup.model'
 import { Notes } from 'models/releaseNotes.model'
 import { SgeStore } from 'models/sgeStore.model'
 
@@ -17,6 +18,7 @@ export const SET_FLUID_STATUS = 'SET_FLUID_STATUS'
 export const UPDATE_FLUID_CONNECTION = 'UPDATE_FLUID_CONNECTION'
 export const UPDATE_TERMS_VALIDATION = 'UPDATE_TERMS_VALIDATION'
 export const SET_PARTNERS_ISSUE = 'SET_PARTNERS_ISSUE'
+export const SET_CUSTOM_POPUP = 'SET_CUSTOM_POPUP'
 export const SET_SHOULD_REFRESH_CONSENT = 'SET_SHOULD_REFRESH_CONSENT'
 export const UPDATE_SGE_CONNECT = 'UPDATE_SGE_CONNECT'
 interface ChangeScreenType {
@@ -69,6 +71,11 @@ interface SetPartnersIssue {
   payload?: boolean
 }
 
+interface SetCustomPopup {
+  type: typeof SET_CUSTOM_POPUP
+  payload: CustomPopup
+}
+
 interface SetShouldRefreshConsent {
   type: typeof SET_SHOULD_REFRESH_CONSENT
   payload?: boolean
@@ -89,6 +96,7 @@ export type GlobalActionTypes =
   | UpdateTermValidation
   | ShowReleaseNotes
   | SetPartnersIssue
+  | SetCustomPopup
   | SetShouldRefreshConsent
   | UpdateSGEConnect
 
@@ -176,6 +184,16 @@ export function setPartnersIssue(
     payload: openPartnersIssueModal,
   }
 }
+
+export function setCustomPopup(
+  customPopupModal: CustomPopup
+): GlobalActionTypes {
+  return {
+    type: SET_CUSTOM_POPUP,
+    payload: customPopupModal,
+  }
+}
+
 export function setShouldRefreshConsent(
   shouldRefreshConsent: boolean
 ): GlobalActionTypes {
diff --git a/src/store/global/global.reducer.spec.ts b/src/store/global/global.reducer.spec.ts
index 03b3919361f0927ecb5b6d82bcdd148bed325d98..3a6399f2e2b10b22aeec1b7a9fed02a9155e19cc 100644
--- a/src/store/global/global.reducer.spec.ts
+++ b/src/store/global/global.reducer.spec.ts
@@ -6,6 +6,7 @@ import {
   TOGGLE_CHALLENGE_DUEL_NOTIFICATION,
   TOGGLE_ANALYSIS_NOTIFICATION,
   SET_FLUID_STATUS,
+  SET_CUSTOM_POPUP,
 } from './global.actions'
 import { ScreenType } from 'enum/screen.enum'
 import { FluidStatus } from 'models'
@@ -15,6 +16,7 @@ import { konnectorsData } from '../../../tests/__mocks__/konnectorsData.mock'
 import { accountsData } from '../../../tests/__mocks__/accountsData.mock'
 import { triggersData } from '../../../tests/__mocks__/triggersData.mock'
 import { mockInitialGlobalState } from '../../../tests/__mocks__/store'
+import { mockCustomPopup } from '../../../tests/__mocks__/customPopup.mock'
 
 const mockDataDates: (DateTime | null)[] = [
   DateTime.local().setZone('utc', {
@@ -208,4 +210,17 @@ describe('global reducer', () => {
     })
     expect(result).toEqual(mockInitialGlobalState)
   })
+
+  it('should handle SET_CUSTOM_POPUP with payload', () => {
+    const result = {
+      ...mockInitialGlobalState,
+      customPopupModal: mockCustomPopup,
+    }
+    expect(
+      globalReducer(mockInitialGlobalState, {
+        type: SET_CUSTOM_POPUP,
+        payload: mockCustomPopup,
+      }).customPopupModal
+    ).toBe(result.customPopupModal)
+  })
 })
diff --git a/src/store/global/global.reducer.ts b/src/store/global/global.reducer.ts
index 8f897c2380eede3d1c162ed551cdc301f1bfb854..561a14768071fc8273d0aac898a10fc17a868add 100644
--- a/src/store/global/global.reducer.ts
+++ b/src/store/global/global.reducer.ts
@@ -13,6 +13,7 @@ import {
   SET_PARTNERS_ISSUE,
   SET_SHOULD_REFRESH_CONSENT,
   UPDATE_SGE_CONNECT,
+  SET_CUSTOM_POPUP,
 } from 'store/global/global.actions'
 import { FluidStatus, GlobalState } from 'models'
 import { ScreenType } from 'enum/screen.enum'
@@ -104,6 +105,11 @@ const initialState: GlobalState = {
     },
   ],
   fluidTypes: [],
+  customPopupModal: {
+    popupEnabled: false,
+    title: '',
+    description: '',
+  },
   openPartnersIssueModal: false,
   shouldRefreshConsent: false,
   sgeConnect: {
@@ -206,6 +212,11 @@ export const globalReducer: Reducer<GlobalState> = (
             openPartnersIssueModal: action.payload,
           }
         : state
+    case SET_CUSTOM_POPUP:
+      return {
+        ...state,
+        customPopupModal: action.payload,
+      }
     case SET_SHOULD_REFRESH_CONSENT:
       return action.payload != undefined
         ? {
diff --git a/src/store/profile/profile.reducer.ts b/src/store/profile/profile.reducer.ts
index 29f92540519b2612bae94dde63e2d4f5e6411e05..d0c26e31f1d335be1e9326fb50fefe6c16593a2b 100644
--- a/src/store/profile/profile.reducer.ts
+++ b/src/store/profile/profile.reducer.ts
@@ -16,6 +16,7 @@ const initialState: Profile = {
   isFirstConnection: false,
   partnersIssueDate: DateTime.fromISO('0000-01-01T00:00:00.000Z'),
   lastConnectionDate: DateTime.fromISO('0000-01-01T00:00:00.000Z'),
+  customPopupDate: DateTime.fromISO('0000-01-01T00:00:00.000Z'),
   haveSeenLastAnalysis: true,
   sendAnalysisNotification: true,
   sendConsumptionAlert: false,
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index fe01a13177d5fd7037a3e6b45ec37eaccb634cdc..f26e1776661809f1d0811bcd5ed9d199ae1a0aa9 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -237,3 +237,14 @@ export const getChallengeTitleWithLineReturn = (userChallengeId: string) => {
     }
   }
 }
+
+/**
+ * Returns today's date, example: 2022-09-28T00:00:00.000Z
+ * @returns DateTime
+ */
+export const getTodayDate = () =>
+  DateTime.local()
+    .setZone('utc', {
+      keepLocalTime: true,
+    })
+    .startOf('day')
diff --git a/tests/__mocks__/client.ts b/tests/__mocks__/client.ts
index 3118714bde4d0e47cbbd4358e1feb0094b10d814..f2b7101ee47a8d7a424ac76549ec3a75e3f2b27c 100644
--- a/tests/__mocks__/client.ts
+++ b/tests/__mocks__/client.ts
@@ -1,6 +1,6 @@
 import { Client } from 'cozy-client'
 
-const mockClient = ({
+const mockClient = {
   query: jest.fn(),
   create: jest.fn(),
   save: jest.fn().mockReturnValue({
@@ -20,6 +20,6 @@ const mockClient = ({
   options: {
     uri: 'http://cozy.tools:8080', // NOSONAR
   },
-} as unknown) as jest.Mocked<Client>
+} as unknown as jest.Mocked<Client>
 
 export default mockClient
diff --git a/tests/__mocks__/customPopup.mock.ts b/tests/__mocks__/customPopup.mock.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c72db4dce6cfbf34bf24c8aeadb9f72ece020c13
--- /dev/null
+++ b/tests/__mocks__/customPopup.mock.ts
@@ -0,0 +1,13 @@
+import { CustomPopup } from 'models/customPopup.model'
+
+export const mockCustomPopup: CustomPopup = {
+  popupEnabled: true,
+  title: 'Bold title',
+  description: 'Interesting description',
+}
+
+export const mockCustomPopupOff: CustomPopup = {
+  popupEnabled: false,
+  title: '',
+  description: '',
+}
diff --git a/tests/__mocks__/profile.mock.ts b/tests/__mocks__/profile.mock.ts
index f235a0c213b5d3552e433a20347b92d7b6358152..27df89d8f7ed281b3d3ec8b029e5626f4e41af79 100644
--- a/tests/__mocks__/profile.mock.ts
+++ b/tests/__mocks__/profile.mock.ts
@@ -34,4 +34,7 @@ export const profileData: Profile = {
   activateHalfHourDate: DateTime.fromISO('2020-11-03T00:00:00.000Z', {
     zone: 'utc',
   }),
+  customPopupDate: DateTime.fromISO('2020-11-03T00:00:00.000Z', {
+    zone: 'utc',
+  }),
 }
diff --git a/tests/__mocks__/store.ts b/tests/__mocks__/store.ts
index 305a23ab8216bba6fd846de2e22422e48bf342d3..57c37166b8bdb94ce7f8191986f15d4677a46ea4 100644
--- a/tests/__mocks__/store.ts
+++ b/tests/__mocks__/store.ts
@@ -38,6 +38,11 @@ export const mockInitialGlobalState: GlobalState = {
     accepted: false,
     versionType: 'init',
   },
+  customPopupModal: {
+    popupEnabled: false,
+    title: '',
+    description: '',
+  },
   openPartnersIssueModal: false,
   releaseNotes: { show: false, notes: [{ description: '', title: '' }] },
   fluidStatus: [
@@ -173,6 +178,7 @@ export const mockInitialProfileState: Profile = {
   },
   haveSeenEcogestureModal: false,
   activateHalfHourDate: DateTime.fromISO('0000-01-01T00:00:00.000Z'),
+  customPopupDate: DateTime.fromISO('0000-01-01T00:00:00.000Z'),
 }
 
 export const mockInitialProfileTypeState: ProfileType = {