diff --git a/.browserslistrc b/.browserslistrc
new file mode 100644
index 000000000..a0b80b79b
--- /dev/null
+++ b/.browserslistrc
@@ -0,0 +1,5 @@
+> 0.5%
+last 2 versions
+Firefox ESR
+not ie 11
+not dead
\ No newline at end of file
diff --git a/cypress/assets/backends/sierraLeone_236.js b/cypress/assets/backends/sierraLeone_236.js
index 7531cdbae..977a5c0f9 100644
--- a/cypress/assets/backends/sierraLeone_236.js
+++ b/cypress/assets/backends/sierraLeone_236.js
@@ -1,6 +1,14 @@
 export const dashboards = {
     'Antenatal Care': {
         route: '#/nghVC4wtyzi',
+        items: {
+            text: {
+                itemUid: 'ILRTXgXvurM',
+            },
+            chart: {
+                itemUid: 'azz0KRlHgLs',
+            },
+        },
     },
     Delivery: {
         route: '#/iMnYyBfSxmM',
diff --git a/cypress/integration/ui/fullscreen.feature b/cypress/integration/ui/fullscreen.feature
new file mode 100644
index 000000000..ad499715c
--- /dev/null
+++ b/cypress/integration/ui/fullscreen.feature
@@ -0,0 +1,15 @@
+Feature: Item context menu fullscreen
+
+    Background:
+        Given I open the "Antenatal Care" dashboard
+        And the "Antenatal Care" dashboard displays in view mode
+
+    @nonmutating
+    Scenario: Text item does not have a context menu
+        Then the text item does not have a context menu
+
+    @nonmutating
+    Scenario: Chart item has a fullscreen option
+        Then the chart item has a fullscreen option in the context menu
+
+
diff --git a/cypress/integration/ui/fullscreen/fullscreen.js b/cypress/integration/ui/fullscreen/fullscreen.js
new file mode 100644
index 000000000..bdb5566f9
--- /dev/null
+++ b/cypress/integration/ui/fullscreen/fullscreen.js
@@ -0,0 +1,18 @@
+import { Then } from 'cypress-cucumber-preprocessor/steps'
+import {
+    getDashboardItem,
+    itemMenuButton,
+    clickMenuButton,
+} from '../../../selectors/dashboardItem'
+import { dashboards } from '../../../assets/backends'
+
+Then('the text item does not have a context menu', () => {
+    getDashboardItem(dashboards['Antenatal Care'].items.text.itemUid)
+        .find(itemMenuButton)
+        .should('not.exist')
+})
+
+Then('the chart item has a fullscreen option in the context menu', () => {
+    clickMenuButton(dashboards['Antenatal Care'].items.chart.itemUid)
+    cy.contains('View fullscreen').should('be.visible')
+})
diff --git a/cypress/selectors/dashboardItem.js b/cypress/selectors/dashboardItem.js
index ed19f5299..0681fec0c 100644
--- a/cypress/selectors/dashboardItem.js
+++ b/cypress/selectors/dashboardItem.js
@@ -6,11 +6,10 @@ export const tableSel = '.pivot-table-container'
 export const gridItemSel = '.react-grid-item'
 
 export const itemDetailsSel = '[data-test="dashboarditem-footer"]'
+export const itemMenuButton = '[data-test="dashboarditem-menu-button"]'
 
 export const getDashboardItem = itemUid =>
     cy.get(`[data-test="dashboarditem-${itemUid}"]`)
 
 export const clickMenuButton = itemUid =>
-    getDashboardItem(itemUid)
-        .find('[data-test="dashboarditem-menu-button"]')
-        .click()
+    getDashboardItem(itemUid).find(itemMenuButton).click()
diff --git a/i18n/en.pot b/i18n/en.pot
index 852d282eb..0f32be4f6 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2020-12-09T13:38:15.043Z\n"
-"PO-Revision-Date: 2020-12-09T13:38:15.043Z\n"
+"POT-Creation-Date: 2020-12-10T12:16:21.390Z\n"
+"PO-Revision-Date: 2020-12-10T12:16:21.391Z\n"
 
 msgid "Untitled dashboard"
 msgstr ""
@@ -153,6 +153,9 @@ msgstr ""
 msgid "Open in {{appName}} app"
 msgstr ""
 
+msgid "View fullscreen"
+msgstr ""
+
 msgid "Unable to load the plugin for this item"
 msgstr ""
 
diff --git a/src/components/App.css b/src/components/App.css
index cecfe7266..17c6ef986 100644
--- a/src/components/App.css
+++ b/src/components/App.css
@@ -29,6 +29,35 @@ table.pivot * {
     background-color: #48a999;
 }
 
+div:fullscreen,
+div:-webkit-full-screen {
+    background-color: white;
+}
+
+div:-webkit-full-screen {
+    object-fit: contain;
+    position: fixed !important;
+    top: 0px !important;
+    right: 0px !important;
+    bottom: 0px !important;
+    left: 0px !important;
+    box-sizing: border-box !important;
+    min-width: 0px !important;
+    max-width: none !important;
+    min-height: 0px !important;
+    max-height: none !important;
+    width: 100% !important;
+    height: 100% !important;
+    transform: none !important;
+    margin: 0px !important;
+}
+
+div:fullscreen .dashboard-item-content,
+div:-webkit-full-screen .dashboard-item-content {
+    height: 95vh !important;
+    width: 100vw !important;
+}
+
 @media print {
     body {
         width: 100% !important;
diff --git a/src/components/Item/VisualizationItem/Item.js b/src/components/Item/VisualizationItem/Item.js
index ed4ef4ef5..293b2cc5f 100644
--- a/src/components/Item/VisualizationItem/Item.js
+++ b/src/components/Item/VisualizationItem/Item.js
@@ -21,6 +21,7 @@ import {
 import { sGatherAnalyticalObjectStatisticsInDashboardViews } from '../../../reducers/settings'
 import { acAddVisualization } from '../../../actions/visualizations'
 import { acSetSelectedItemActiveType } from '../../../actions/selected'
+import { pluginIsAvailable } from './Visualization/plugin'
 import { getDataStatisticsName } from '../../../modules/itemTypes'
 import { getVisualizationId, getVisualizationName } from '../../../modules/item'
 import memoizeOne from '../../../modules/memoizeOne'
@@ -36,6 +37,7 @@ export class Item extends Component {
     state = {
         showFooter: false,
         configLoaded: false,
+        isFullscreen: false,
     }
 
     constructor(props, context) {
@@ -45,6 +47,7 @@ export class Item extends Component {
 
         this.contentRef = React.createRef()
         this.headerRef = React.createRef()
+        this.itemDomElSelector = `.reactgriditem-${this.props.item.id}`
 
         this.memoizedGetContentHeight = memoizeOne(
             (calculatedHeight, measuredHeight, preferMeasured) =>
@@ -73,11 +76,59 @@ export class Item extends Component {
             console.log(e)
         }
 
+        this.setState({ configLoaded: true })
+
+        const el = document.querySelector(this.itemDomElSelector)
+        if (el?.requestFullscreen) {
+            el.onfullscreenchange = this.handleFullscreenChange
+        } else if (el?.webkitRequestFullscreen) {
+            el.onwebkitfullscreenchange = this.handleFullscreenChange
+        }
+    }
+
+    componentWillUnmount() {
+        const el = document.querySelector(this.itemDomElSelector)
+        if (el?.onfullscreenchange) {
+            el.removeEventListener(
+                'onfullscreenchange',
+                this.handleFullscreenChange
+            )
+        } else if (el?.onwebkitfullscreenchange) {
+            el.removeEventListener(
+                'onwebkitfullscreenchange',
+                this.handleFullscreenChange
+            )
+        }
+    }
+
+    isFullscreenSupported = () => {
+        const el = document.querySelector(this.itemDomElSelector)
+        return !!(el?.requestFullscreen || el?.webkitRequestFullscreen)
+    }
+
+    handleFullscreenChange = () => {
         this.setState({
-            configLoaded: true,
+            isFullscreen:
+                !!document.fullscreenElement ||
+                !!document.webkitFullscreenElement,
         })
     }
 
+    onToggleFullscreen = () => {
+        if (!this.state.isFullscreen) {
+            const el = document.querySelector(this.itemDomElSelector)
+            if (el?.requestFullscreen) {
+                el.requestFullscreen()
+            } else if (el?.webkitRequestFullscreen) {
+                el.webkitRequestFullscreen()
+            }
+        } else {
+            document.exitFullscreen
+                ? document.exitFullscreen()
+                : document.webkitExitFullscreen()
+        }
+    }
+
     getUniqueKey = memoizeOne(() => uniqueId())
 
     onToggleFooter = () => {
@@ -100,6 +151,10 @@ export class Item extends Component {
     }
 
     getAvailableHeight = () => {
+        if (this.state.isFullscreen) {
+            return '95vh'
+        }
+
         const calculatedHeight =
             this.props.item.originalHeight -
             this.headerRef.current.clientHeight -
@@ -119,16 +174,19 @@ export class Item extends Component {
         const { showFooter } = this.state
         const activeType = this.getActiveType()
 
-        const actionButtons = (
+        const actionButtons = pluginIsAvailable(activeType || item.type) ? (
             <ItemHeaderButtons
                 item={item}
                 visualization={this.props.visualization}
                 onSelectActiveType={this.setActiveType}
                 onToggleFooter={this.onToggleFooter}
+                onToggleFullscreen={this.onToggleFullscreen}
                 activeType={activeType}
                 activeFooter={showFooter}
+                isFullscreen={this.state.isFullscreen}
+                fullscreenSupported={this.isFullscreenSupported()}
             />
-        )
+        ) : null
 
         return (
             <>
diff --git a/src/components/Item/VisualizationItem/ItemHeaderButtons.js b/src/components/Item/VisualizationItem/ItemHeaderButtons.js
index 5eb1f24df..e03ed94cd 100644
--- a/src/components/Item/VisualizationItem/ItemHeaderButtons.js
+++ b/src/components/Item/VisualizationItem/ItemHeaderButtons.js
@@ -14,8 +14,13 @@ import ChartIcon from '@material-ui/icons/InsertChart'
 import MapIcon from '@material-ui/icons/Public'
 import LaunchIcon from '@material-ui/icons/Launch'
 
-import { ThreeDots, SpeechBubble } from './assets/icons'
-import { pluginIsAvailable, getLink } from './Visualization/plugin'
+import {
+    ThreeDots,
+    SpeechBubble,
+    Fullscreen,
+    ExitFullscreen,
+} from './assets/icons'
+import { getLink } from './Visualization/plugin'
 import {
     CHART,
     MAP,
@@ -31,7 +36,6 @@ const iconFill = { fill: colors.grey600 }
 
 const ItemHeaderButtons = (props, context) => {
     const [menuIsOpen, setMenuIsOpen] = useState(null)
-
     const { item, visualization, onSelectActiveType, activeType } = props
 
     const isTrackerType = isTrackerDomainType(item.type)
@@ -60,6 +64,11 @@ const ItemHeaderButtons = (props, context) => {
         }
     }
 
+    const handleToggleFullscreenClick = () => {
+        props.onToggleFullscreen()
+        closeMenu()
+    }
+
     const openMenu = () => setMenuIsOpen(true)
     const closeMenu = () => setMenuIsOpen(false)
 
@@ -105,7 +114,11 @@ const ItemHeaderButtons = (props, context) => {
 
     const buttonRef = createRef()
 
-    return pluginIsAvailable(activeType || item.type) ? (
+    return props.isFullscreen ? (
+        <Button small secondary onClick={props.onToggleFullscreen}>
+            <ExitFullscreen />
+        </Button>
+    ) : (
         <>
             <div ref={buttonRef}>
                 <Button
@@ -146,20 +159,31 @@ const ItemHeaderButtons = (props, context) => {
                             label={interpretationMenuLabel}
                             onClick={handleInterpretationClick}
                         />
+                        {props.fullscreenSupported && (
+                            <MenuItem
+                                dense
+                                icon={<Fullscreen />}
+                                label={i18n.t('View fullscreen')}
+                                onClick={handleToggleFullscreenClick}
+                            />
+                        )}
                     </Menu>
                 </Popover>
             )}
         </>
-    ) : null
+    )
 }
 
 ItemHeaderButtons.propTypes = {
     activeFooter: PropTypes.bool,
     activeType: PropTypes.string,
+    fullscreenSupported: PropTypes.bool,
+    isFullscreen: PropTypes.bool,
     item: PropTypes.object,
     visualization: PropTypes.object,
     onSelectActiveType: PropTypes.func,
     onToggleFooter: PropTypes.func,
+    onToggleFullscreen: PropTypes.func,
 }
 
 ItemHeaderButtons.contextTypes = {
diff --git a/src/components/Item/VisualizationItem/Visualization/Visualization.js b/src/components/Item/VisualizationItem/Visualization/Visualization.js
index b008aa5c6..aae1ea613 100644
--- a/src/components/Item/VisualizationItem/Visualization/Visualization.js
+++ b/src/components/Item/VisualizationItem/Visualization/Visualization.js
@@ -114,7 +114,7 @@ class Visualization extends React.Component {
 
 Visualization.propTypes = {
     activeType: PropTypes.string,
-    availableHeight: PropTypes.number,
+    availableHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     item: PropTypes.object,
     itemFilters: PropTypes.object,
     visualization: PropTypes.object,
diff --git a/src/components/Item/VisualizationItem/__tests__/ItemHeaderButtons.spec.js b/src/components/Item/VisualizationItem/__tests__/ItemHeaderButtons.spec.js
index 6918426a1..5b3d3b359 100644
--- a/src/components/Item/VisualizationItem/__tests__/ItemHeaderButtons.spec.js
+++ b/src/components/Item/VisualizationItem/__tests__/ItemHeaderButtons.spec.js
@@ -8,7 +8,7 @@ jest.mock('../Visualization/plugin', () => ({
     pluginIsAvailable: () => true,
 }))
 
-it('renders correctly', () => {
+it('renders correctly when not fullscreen', () => {
     const buttons = shallow(
         <ItemHeaderButtons
             item={{
@@ -27,3 +27,24 @@ it('renders correctly', () => {
     )
     expect(toJson(buttons)).toMatchSnapshot()
 })
+
+it('renders correctly when fullscreen', () => {
+    const buttons = shallow(
+        <ItemHeaderButtons
+            item={{
+                type: 'CHART',
+                chart: { type: 'NOT_YOY', domainType: 'AGGREGATE' },
+            }}
+            visualization={{
+                type: 'SINGLE_VALUE',
+            }}
+            onSelectActiveType={Function.prototype}
+            activeFooter={false}
+            activeType={'CHART'}
+            d2={{}}
+            onToggleFooter={Function.prototype}
+            isFullscreen={true}
+        />
+    )
+    expect(toJson(buttons)).toMatchSnapshot()
+})
diff --git a/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap b/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap
index 49de91dee..58f994f13 100644
--- a/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap
+++ b/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap
@@ -7,6 +7,8 @@ exports[`VisualizationItem/Item does not render Visualization if config not load
       <ItemHeaderButtons
         activeFooter={false}
         activeType="CHART"
+        fullscreenSupported={false}
+        isFullscreen={false}
         item={
           Object {
             "chart": Object {
@@ -18,6 +20,7 @@ exports[`VisualizationItem/Item does not render Visualization if config not load
         }
         onSelectActiveType={[Function]}
         onToggleFooter={[Function]}
+        onToggleFullscreen={[Function]}
         visualization={
           Object {
             "id": "vis id",
diff --git a/src/components/Item/VisualizationItem/__tests__/__snapshots__/ItemHeaderButtons.spec.js.snap b/src/components/Item/VisualizationItem/__tests__/__snapshots__/ItemHeaderButtons.spec.js.snap
index 12d89dee1..e8bd42db8 100644
--- a/src/components/Item/VisualizationItem/__tests__/__snapshots__/ItemHeaderButtons.spec.js.snap
+++ b/src/components/Item/VisualizationItem/__tests__/__snapshots__/ItemHeaderButtons.spec.js.snap
@@ -1,6 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders correctly 1`] = `
+exports[`renders correctly when fullscreen 1`] = `
+<Button
+  dataTest="dhis2-uicore-button"
+  secondary={true}
+  small={true}
+  type="button"
+>
+  <ExitFullscreen />
+</Button>
+`;
+
+exports[`renders correctly when not fullscreen 1`] = `
 <Fragment>
   <div>
     <Button
diff --git a/src/components/Item/VisualizationItem/assets/icons.js b/src/components/Item/VisualizationItem/assets/icons.js
index 150abb3e6..e5ce092f6 100644
--- a/src/components/Item/VisualizationItem/assets/icons.js
+++ b/src/components/Item/VisualizationItem/assets/icons.js
@@ -44,3 +44,31 @@ export const Warning = () => (
         <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
     </svg>
 )
+
+export const Fullscreen = () => (
+    <svg
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="m6.85355339 9.14644661c.17356635.17356635.1928515.44299075.05785545.63785889l-.05785545.06924789-4.14755339 4.14644661h2.794c.24545989 0 .44960837.1768752.49194433.4101244l.00805567.0898756c0 .2454599-.17687516.4496084-.41012437.4919443l-.08987563.0080557h-4c-.24545989 0-.44960837-.1768752-.49194433-.4101244l-.00805567-.0898756v-4c0-.2761424.22385763-.5.5-.5.24545989 0 .44960837.1768752.49194433.4101244l.00805567.0898756v2.792l4.14644661-4.14555339c.19526215-.19526215.51184463-.19526215.70710678 0zm6.14644661-2.14644661v6h-6v-1h5v-5zm-4-4v1h-5v5h-1v-6zm5.5-2c.2454599 0 .4496084.17687516.4919443.41012437l.0080557.08987563v4c0 .27614237-.2238576.5-.5.5-.2454599 0-.4496084-.17687516-.4919443-.41012437l-.0080557-.08987563v-2.794l-4.14644661 4.14755339c-.19526215.19526215-.51184463.19526215-.70710678 0-.17356635-.17356635-.1928515-.44299075-.05785545-.63785889l.05785545-.06924789 4.14655339-4.14744661-2.793.001c-.2454599 0-.4496084-.17687516-.4919443-.41012437l-.0080557-.08987563c0-.24545989.1768752-.44960837.4101244-.49194433l.0898756-.00805567z"
+            fill="inherit"
+        />
+    </svg>
+)
+
+export const ExitFullscreen = () => (
+    <svg
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="m6.5 9c.24545989 0 .44960837.17687516.49194433.41012437l.00805567.08987563v4c0 .2761424-.22385763.5-.5.5-.24545989 0-.44960837-.1768752-.49194433-.4101244l-.00805567-.0898756v-2.794l-3.64644661 3.6475534c-.19526215.1952621-.51184463.1952621-.70710678 0-.17356635-.1735664-.1928515-.4429908-.05785545-.6378589l.05785545-.0692479 3.64555339-3.6464466h-2.792c-.24545989 0-.44960837-.17687516-.49194433-.41012437l-.00805567-.08987563c0-.24545989.17687516-.44960837.41012437-.49194433l.08987563-.00805567zm7.5-.5v5.5h-5.5v-1h4.5v-4.5zm-6.5-6.5v1h-4.5v4.5h-1v-5.5zm6.8535534-.35355339c.1735663.17356635.1928515.44299075.0578554.63785889l-.0578554.06924789-3.6475534 3.64644661h2.794c.2454599 0 .4496084.17687516.4919443.41012437l.0080557.08987563c0 .24545989-.1768752.44960837-.4101244.49194433l-.0898756.00805567h-4c-.24545989 0-.44960837-.17687516-.49194433-.41012437l-.00805567-.08987563v-4c0-.27614237.22385763-.5.5-.5.24545989 0 .44960837.17687516.49194433.41012437l.00805567.08987563v2.792l3.6464466-3.64555339c.1952622-.19526215.5118446-.19526215.7071068 0z"
+            fill="inherit"
+        />
+    </svg>
+)
diff --git a/src/components/ItemGrid/ItemGrid.js b/src/components/ItemGrid/ItemGrid.js
index cc0f821c4..7d9c7cf48 100644
--- a/src/components/ItemGrid/ItemGrid.js
+++ b/src/components/ItemGrid/ItemGrid.js
@@ -100,6 +100,7 @@ export class ItemGrid extends Component {
         const itemClassNames = [
             item.type,
             this.props.edit ? 'edit' : 'view',
+            `reactgriditem-${item.id}`,
         ].join(' ')
 
         return (