diff --git a/src/components/report-pages.tsx b/src/components/report-pages.tsx
new file mode 100644
index 000000000..17d5d6a97
--- /dev/null
+++ b/src/components/report-pages.tsx
@@ -0,0 +1,66 @@
+import { useJWT } from '@/jwt'
+import Card from './card'
+import Page from './page'
+import { ReportViewer } from './report-viewer'
+import { OfflineReport, Report } from '@/api/report'
+import { css } from '@linaria/core'
+import { ReportEditor } from './report-editor'
+
+const reportPageStyle = css`
+  display: flex;
+  padding: 2rem;
+  justify-content: center;
+`
+
+const reportViewerCardStyle = css`
+  padding: 2rem;
+  display: grid;
+  justify-items: center;
+  grid-gap: 1rem;
+  max-width: 30rem;
+`
+
+export const ReportPage = ({ report }: { report: Report }) => {
+  const { jwt } = useJWT()
+  const canEdit =
+    jwt &&
+    (report.reporterId === Number.parseInt(jwt.sub) ||
+      (jwt.peregrineRoles.isAdmin && report.realmId === jwt.peregrineRealm) ||
+      jwt.peregrineRoles.isSuperAdmin)
+  return (
+    <Page name="Report" class={reportPageStyle}>
+      {/* shows the report */}
+      <Card class={reportViewerCardStyle}>
+        <ReportViewer
+          report={report}
+          reportEditorLink={
+            canEdit ? `/saved-reports/${report.key}/edit` : undefined
+          }
+        />
+      </Card>
+    </Page>
+  )
+}
+
+export const ReportEditPage = ({
+  report,
+  onSaveSuccess,
+  onSaveLocally,
+  onDelete,
+}: {
+  report: Report
+  onSaveSuccess: (report: Report) => void
+  onSaveLocally: (report: OfflineReport) => void
+  onDelete: () => void
+}) => {
+  return (
+    <Page name="Edit Report" class={reportPageStyle}>
+      <ReportEditor
+        initialReport={report}
+        onSaveSuccess={onSaveSuccess}
+        onSaveLocally={onSaveLocally}
+        onDelete={onDelete}
+      />
+    </Page>
+  )
+}
diff --git a/src/components/report-viewer.tsx b/src/components/report-viewer.tsx
index ed1ac1f82..9904b5f7b 100644
--- a/src/components/report-viewer.tsx
+++ b/src/components/report-viewer.tsx
@@ -62,10 +62,7 @@ const fieldValuesStyle = css`
 `
 
 // viewing a report on the report page
-export const ReportViewer = ({
-  report,
-  reportEditorLink: onEditClick,
-}: Props) => {
+export const ReportViewer = ({ report, reportEditorLink }: Props) => {
   const reporterId = report.reporterId
   const eventInfo = useEventInfo(report.eventKey)
   const matchInfo = useMatchInfo(report.eventKey, report.matchKey)
@@ -133,7 +130,7 @@ export const ReportViewer = ({
 
       {/* links to the author of the report */}
       <ProfileLink reporterId={reporterId} />
-      {onEditClick && <Button href={onEditClick}>Edit</Button>}
+      {reportEditorLink && <Button href={reportEditorLink}>Edit</Button>}
     </>
   )
 }
diff --git a/src/routes/report-edit.tsx b/src/routes/report-edit.tsx
index 70be063f8..e26f1460d 100644
--- a/src/routes/report-edit.tsx
+++ b/src/routes/report-edit.tsx
@@ -1,46 +1,11 @@
-import { Report, OfflineReport } from '@/api/report'
+import { Report } from '@/api/report'
 import { getReport } from '@/api/report/get-report'
 import { AlertType } from '@/components/alert'
 import Loader from '@/components/loader'
-import Page from '@/components/page'
-import { ReportEditor } from '@/components/report-editor'
+import { ReportEditPage } from '@/components/report-pages'
 import { route } from '@/router'
-import { css } from '@linaria/core'
 import { useEffect, useState } from 'preact/hooks'
 
-const reportPageStyle = css`
-  display: flex;
-  padding: 2rem;
-  justify-content: center;
-`
-
-const ReportEditPage = ({
-  report,
-  onSaveSuccess,
-  onSaveLocally,
-  onDelete,
-}: {
-  report: Report
-  onSaveSuccess: (report: Report) => void
-  onSaveLocally: (report: OfflineReport) => void
-  onDelete: () => void
-}) => {
-  return (
-    <Page name="Edit Report" class={reportPageStyle}>
-      <ReportEditor
-        initialReport={report}
-        onSaveSuccess={(report) => {
-          onSaveSuccess(report)
-        }}
-        onSaveLocally={(report) => {
-          onSaveLocally(report)
-        }}
-        onDelete={onDelete}
-      />
-    </Page>
-  )
-}
-
 const ReportEditorRoute = ({ reportId }: { reportId: number }) => {
   const [report, setReport] = useState<Report | undefined>(undefined)
 
diff --git a/src/routes/report.tsx b/src/routes/report.tsx
index 63ad09294..170d9bd00 100644
--- a/src/routes/report.tsx
+++ b/src/routes/report.tsx
@@ -1,45 +1,8 @@
-import Page from '@/components/page'
-import { ReportViewer } from '@/components/report-viewer'
-import Card from '@/components/card'
-import { css } from '@linaria/core'
 import { getReport } from '@/api/report/get-report'
 import Loader from '@/components/loader'
 import { useState, useEffect } from 'preact/hooks'
-import { useJWT } from '@/jwt'
 import { Report } from '@/api/report'
-
-const reportPageStyle = css`
-  display: flex;
-  padding: 2rem;
-  justify-content: center;
-`
-
-const reportViewerCardStyle = css`
-  padding: 2rem;
-  display: grid;
-  justify-items: center;
-  grid-gap: 1rem;
-  max-width: 30rem;
-`
-
-const ReportPage = ({ report }: { report: Report }) => {
-  const { jwt } = useJWT()
-  const canEdit =
-    jwt &&
-    (report.reporterId === Number.parseInt(jwt.sub) ||
-      (jwt.peregrineRoles.isAdmin && report.realmId === jwt.peregrineRealm) ||
-      jwt.peregrineRoles.isSuperAdmin)
-  return (
-    <Page name="Report" class={reportPageStyle}>
-      <Card class={reportViewerCardStyle}>
-        <ReportViewer
-          report={report}
-          reportEditorLink={canEdit ? `/reports/${report.id}/edit` : undefined}
-        />
-      </Card>
-    </Page>
-  )
-}
+import { ReportPage } from '@/components/report-pages'
 
 const ReportRoute = ({ reportId }: { reportId: number }) => {
   const [report, setReport] = useState<Report | undefined>(undefined)
diff --git a/src/routes/saved-report-edit.tsx b/src/routes/saved-report-edit.tsx
index 2ba37a29c..4a7bdae42 100644
--- a/src/routes/saved-report-edit.tsx
+++ b/src/routes/saved-report-edit.tsx
@@ -1,43 +1,12 @@
-import { Report, OfflineReport } from '@/api/report'
+import { Report } from '@/api/report'
 import { getSavedReports } from '@/api/report/submit-report'
 import { AlertType } from '@/components/alert'
 import Loader from '@/components/loader'
-import Page from '@/components/page'
-import { ReportEditor } from '@/components/report-editor'
+import { ReportEditPage } from '@/components/report-pages'
 import { route } from '@/router'
-import { css } from '@linaria/core'
 import { useEffect, useState } from 'preact/hooks'
 
-const reportPageStyle = css`
-  display: flex;
-  padding: 2rem;
-  justify-content: center;
-`
-
-const ReportEditPage = ({
-  report,
-  onSaveSuccess,
-  onSaveLocally,
-  onDelete,
-}: {
-  report: Report
-  onSaveSuccess: (report: Report) => void
-  onSaveLocally: (report: OfflineReport) => void
-  onDelete: () => void
-}) => {
-  return (
-    <Page name="Edit Report" class={reportPageStyle}>
-      <ReportEditor
-        initialReport={report}
-        onSaveSuccess={onSaveSuccess}
-        onSaveLocally={onSaveLocally}
-        onDelete={onDelete}
-      />
-    </Page>
-  )
-}
-
-const LocalReportEditorRoute = ({ reportKey }: { reportKey: string }) => {
+const SavedReportEditorRoute = ({ reportKey }: { reportKey: string }) => {
   const [report, setReport] = useState<Report | undefined>(undefined)
 
   useEffect(() => {
@@ -74,4 +43,4 @@ const LocalReportEditorRoute = ({ reportKey }: { reportKey: string }) => {
   )
 }
 
-export default LocalReportEditorRoute
+export default SavedReportEditorRoute
diff --git a/src/routes/saved-report.tsx b/src/routes/saved-report.tsx
index 1f5363255..23ecabd26 100644
--- a/src/routes/saved-report.tsx
+++ b/src/routes/saved-report.tsx
@@ -3,52 +3,14 @@ import Page from '@/components/page'
 import { css } from '@linaria/core'
 import { useState, useEffect } from 'preact/hooks'
 import { Report } from '@/api/report'
-import Card from '@/components/card'
-import { ReportViewer } from '@/components/report-viewer'
-import { useJWT } from '@/jwt'
+import { ReportPage } from '@/components/report-pages'
 
 const missingReportStyle = css`
   padding: 2rem;
   text-align: center;
 `
 
-const reportPageStyle = css`
-  display: flex;
-  padding: 2rem;
-  justify-content: center;
-`
-
-const reportViewerCardStyle = css`
-  padding: 2rem;
-  display: grid;
-  justify-items: center;
-  grid-gap: 1rem;
-  max-width: 30rem;
-`
-
-const ReportPage = ({ report }: { report: Report }) => {
-  const { jwt } = useJWT()
-  const canEdit =
-    jwt &&
-    (report.reporterId === Number.parseInt(jwt.sub) ||
-      (jwt.peregrineRoles.isAdmin && report.realmId === jwt.peregrineRealm) ||
-      jwt.peregrineRoles.isSuperAdmin)
-  return (
-    <Page name="Report" class={reportPageStyle}>
-      {/* shows the report */}
-      <Card class={reportViewerCardStyle}>
-        <ReportViewer
-          report={report}
-          reportEditorLink={
-            canEdit ? `/saved-reports/${report.key}/edit` : undefined
-          }
-        />
-      </Card>
-    </Page>
-  )
-}
-
-const SavedReportsPage = ({ reportKey }: { reportKey: string }) => {
+const SavedReportsRoute = ({ reportKey }: { reportKey: string }) => {
   const [report, setReport] = useState<undefined | Report>(undefined)
 
   useEffect(() => {
@@ -64,4 +26,4 @@ const SavedReportsPage = ({ reportKey }: { reportKey: string }) => {
   )
 }
 
-export default SavedReportsPage
+export default SavedReportsRoute