diff --git a/packages/pharos/src/pages/reports/react/ReportExample.tsx b/packages/pharos/src/pages/reports/react/ReportExample.tsx
new file mode 100644
index 000000000..0e7024cfd
--- /dev/null
+++ b/packages/pharos/src/pages/reports/react/ReportExample.tsx
@@ -0,0 +1,106 @@
+import { useEffect, type FC, useState } from 'react';
+import { Sidenav } from './Sidenav';
+import { CreateReportModal } from './CreateReportModal';
+import { ReportsTable } from './ReportsTable';
+import { historyTable, scheduledTable } from '../mocks';
+import logo from '@config/assets/images/reports/jstor-horizontal.svg';
+
+import {
+  PharosHeading,
+  PharosLink,
+  PharosButton,
+  PharosTabs,
+  PharosTab,
+  PharosTabPanel,
+  PharosToaster,
+  PharosLayout,
+} from '../../../react-components';
+
+export const ReportExample: FC = () => {
+  const [isMobile, setIsMobile] = useState<boolean>(window.innerWidth < 1000);
+  const [isSidenavDisplayed, setIsSidenavDisplayed] = useState<boolean>(!isMobile);
+
+  useEffect(() => {
+    const handleResize = () => {
+      const windowWidth = window.innerWidth;
+      setIsSidenavDisplayed(windowWidth >= 1000);
+      setIsMobile(windowWidth < 1000);
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return (
+    <>
+      <div className="reports-page__container">
+        <Sidenav open={isSidenavDisplayed} showCloseButton={isMobile} />
+        <main id="main-content">
+          <PharosLayout preset="1-col--sidenav" className="reports-page__container--main-content">
+            <div className="reports-page__container--top" slot="top">
+              <div className="reports-page__container--nav-header">
+                <PharosButton
+                  variant="subtle"
+                  icon="menu"
+                  data-sidenav-id="report-sidenav"
+                  a11yLabel="Open side navigation"
+                />
+                <img src={logo} alt="logo" width="96" height="24" />
+                <span className="reports-page__separator">/</span>
+                <PharosHeading level={1} preset="4" noMargin>
+                  Admin
+                </PharosHeading>
+              </div>
+              <PharosButton
+                variant="subtle"
+                iconRight="chevron-down"
+                className="reports-page__button--user"
+              >
+                Gerry Larry Burla
+              </PharosButton>
+            </div>
+            <div className="reports-page__container--disclaimer">
+              <PharosHeading level={2} preset="5--bold">
+                COUNTER 5 Usage Reports
+              </PharosHeading>
+              <p>
+                Welcome to the COUNTER 5 reporting service for participating institutions. JSTOR
+                offers COUNTER 5 compliant reports for usage beginning January 2019. COUNTER 4
+                reports are still available for usage from January 2017 - April 2019 from the{' '}
+                <PharosLink href="#">COUNTER 4 reporting service</PharosLink>. Please visit our
+                COUNTER 5 <PharosLink href="#">support page</PharosLink> for more information on
+                JSTOR usage reports.
+              </p>
+            </div>
+            <div className="reports-page__container--table">
+              <PharosButton
+                className="reports-page__button--create"
+                data-modal-id="create-report-modal"
+              >
+                Create Report
+              </PharosButton>
+              <PharosTabs>
+                <PharosTab id="tab-1" data-panel-id="panel-1">
+                  Report History
+                </PharosTab>
+                <PharosTab id="tab-2" data-panel-id="panel-2">
+                  Scheduled Reports
+                </PharosTab>
+                <PharosTabPanel id="panel-1" slot="panel" style={{ overflow: 'visible' }}>
+                  {ReportsTable(historyTable)}
+                </PharosTabPanel>
+                <PharosTabPanel id="panel-2" slot="panel">
+                  {ReportsTable(scheduledTable)}
+                </PharosTabPanel>
+              </PharosTabs>
+            </div>
+          </PharosLayout>
+        </main>
+      </div>
+      <PharosToaster></PharosToaster>
+      <CreateReportModal />
+    </>
+  );
+};
diff --git a/packages/pharos/src/pages/reports/react/Sidenav.tsx b/packages/pharos/src/pages/reports/react/Sidenav.tsx
index 0eab03263..af2ba6588 100644
--- a/packages/pharos/src/pages/reports/react/Sidenav.tsx
+++ b/packages/pharos/src/pages/reports/react/Sidenav.tsx
@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import { type FC } from 'react';
 
 import { PharosSidenav } from '../../../react-components/sidenav/pharos-sidenav';
 import { PharosLink } from '../../../react-components/link/pharos-link';
@@ -6,9 +6,19 @@ import { PharosSidenavSection } from '../../../react-components/sidenav/pharos-s
 import { PharosSidenavLink } from '../../../react-components/sidenav/pharos-sidenav-link';
 import { PharosSidenavMenu } from '../../../react-components/sidenav/pharos-sidenav-menu';
 import logo from '@config/assets/images/jstor-logo-inverse.svg';
+export interface SideNavProps {
+  open: boolean;
+  showCloseButton: boolean;
+}
 
-export const Sidenav: FC = () => (
-  <PharosSidenav className="reports-page__sidenav" mainContentId="main-content">
+export const Sidenav: FC<SideNavProps> = ({ open, showCloseButton }) => (
+  <PharosSidenav
+    className="reports-page__sidenav"
+    mainContentId="main-content"
+    id="report-sidenav"
+    open={open}
+    hasCloseButton={showCloseButton}
+  >
     <PharosLink slot="top" href="/" id="jstor-logo">
       <img src={logo} alt="Pharos Home" width="72" height="100" />
     </PharosLink>
diff --git a/packages/pharos/src/pages/reports/react/reports.pages.stories.tsx b/packages/pharos/src/pages/reports/react/reports.pages.stories.tsx
index 597f8344d..11d07d4d7 100644
--- a/packages/pharos/src/pages/reports/react/reports.pages.stories.tsx
+++ b/packages/pharos/src/pages/reports/react/reports.pages.stories.tsx
@@ -2,23 +2,8 @@ import type { Meta } from '@storybook/react';
 
 import '../reports.scss';
 import { viewports } from '../../shared/viewports';
-import { Sidenav } from './Sidenav';
-import { CreateReportModal } from './CreateReportModal';
-import { ReportsTable } from './ReportsTable';
-import { historyTable, scheduledTable } from '../mocks';
-import logo from '@config/assets/images/reports/jstor-horizontal.svg';
-
-import {
-  PharosHeading,
-  PharosLink,
-  PharosButton,
-  PharosTabs,
-  PharosTab,
-  PharosTabPanel,
-  PharosToaster,
-  PharosLayout,
-} from '../../../react-components';
 import { PharosContext } from '../../../utils/PharosContext';
+import { ReportExample } from './ReportExample';
 
 export default {
   title: 'Pages/Reports',
@@ -40,66 +25,7 @@ export default {
 export const Reports = {
   render: () => (
     <>
-      <div className="reports-page__container">
-        <Sidenav />
-        <main id="main-content">
-          <PharosLayout preset="1-col--sidenav" className="reports-page__container--main-content">
-            <div className="reports-page__container--top" slot="top">
-              <div className="reports-page__container--nav-header">
-                <img src={logo} alt="logo" width="96" height="24" />
-                <span className="reports-page__separator">/</span>
-                <PharosHeading level={1} preset="4" noMargin>
-                  Admin
-                </PharosHeading>
-              </div>
-              <PharosButton
-                variant="subtle"
-                iconRight="chevron-down"
-                className="reports-page__button--user"
-              >
-                Gerry Larry Burla
-              </PharosButton>
-            </div>
-            <div className="reports-page__container--disclaimer">
-              <PharosHeading level={2} preset="5--bold">
-                COUNTER 5 Usage Reports
-              </PharosHeading>
-              <p>
-                Welcome to the COUNTER 5 reporting service for participating institutions. JSTOR
-                offers COUNTER 5 compliant reports for usage beginning January 2019. COUNTER 4
-                reports are still available for usage from January 2017 - April 2019 from the{' '}
-                <PharosLink href="#">COUNTER 4 reporting service</PharosLink>. Please visit our
-                COUNTER 5 <PharosLink href="#">support page</PharosLink> for more information on
-                JSTOR usage reports.
-              </p>
-            </div>
-            <div className="reports-page__container--table">
-              <PharosButton
-                className="reports-page__button--create"
-                data-modal-id="create-report-modal"
-              >
-                Create Report
-              </PharosButton>
-              <PharosTabs>
-                <PharosTab id="tab-1" data-panel-id="panel-1">
-                  Report History
-                </PharosTab>
-                <PharosTab id="tab-2" data-panel-id="panel-2">
-                  Scheduled Reports
-                </PharosTab>
-                <PharosTabPanel id="panel-1" slot="panel" style={{ overflow: 'visible' }}>
-                  {ReportsTable(historyTable)}
-                </PharosTabPanel>
-                <PharosTabPanel id="panel-2" slot="panel">
-                  {ReportsTable(scheduledTable)}
-                </PharosTabPanel>
-              </PharosTabs>
-            </div>
-          </PharosLayout>
-        </main>
-      </div>
-      <PharosToaster></PharosToaster>
-      <CreateReportModal />
+      <ReportExample />
     </>
   ),
 };