diff --git a/client/src/components/Header.js b/client/src/components/Header.js
index 36acf24766..db68cf480d 100644
--- a/client/src/components/Header.js
+++ b/client/src/components/Header.js
@@ -26,7 +26,7 @@ const Header = ({ minimalHeader, onHomeClick, toggleMenuAction }) => (
             </span>
           ) : (
             <Link
-              className="logo d-xs-none d-sm-block"
+              className="logo d-none d-sm-block"
               to="/"
               onClick={onHomeClick}
             >
diff --git a/client/src/components/Nav.js b/client/src/components/Nav.js
index ee581578db..4eae3adbbd 100644
--- a/client/src/components/Nav.js
+++ b/client/src/components/Nav.js
@@ -1,4 +1,3 @@
-import { Collapse } from "@blueprintjs/core"
 import { clearSearchQuery, resetPages } from "actions"
 import AppContext from "components/AppContext"
 import ResponsiveLayoutContext from "components/ResponsiveLayoutContext"
@@ -7,7 +6,7 @@ import { INSIGHTS, INSIGHT_DETAILS } from "pages/insights/Show"
 import pluralize from "pluralize"
 import PropTypes from "prop-types"
 import React, { useContext, useEffect, useMemo, useState } from "react"
-import { Badge, Nav, NavDropdown } from "react-bootstrap"
+import { Badge, Collapse, Nav, NavDropdown } from "react-bootstrap"
 import { connect } from "react-redux"
 import {
   IndexLinkContainer as Link,
@@ -20,7 +19,7 @@ import Settings from "settings"
 import utils from "utils"
 
 export const AnchorNavItem = ({ to, disabled, children }) => {
-  const ScrollLinkNavItem = ScrollLink(Nav.Item)
+  const ScrollLinkNavItem = ScrollLink(Nav.Link)
   return (
     <ResponsiveLayoutContext.Consumer>
       {context => (
@@ -58,22 +57,25 @@ const SidebarLink = ({
   id,
   setIsMenuLinksOpened
 }) => (
-  <Link
-    to={linkTo}
+  <Nav.Item
     onClick={() => {
       handleOnClick()
       setIsMenuLinksOpened && setIsMenuLinksOpened()
     }}
   >
-    <Nav.Item id={id}>{children}</Nav.Item>
-  </Link>
+    <Link to={linkTo}>
+      <Nav.Link eventKey={id}>
+        <span>{children}</span>
+      </Nav.Link>
+    </Link>
+  </Nav.Item>
 )
 SidebarLink.propTypes = {
   linkTo: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   children: PropTypes.node,
   handleOnClick: PropTypes.func,
   setIsMenuLinksOpened: PropTypes.func,
-  id: PropTypes.string
+  id: PropTypes.string.isRequired
 }
 
 const Navigation = ({
@@ -125,6 +127,7 @@ const Navigation = ({
   return (
     <Nav variant="pills" id="leftNav" className="flex-column hide-for-print">
       <SidebarLink
+        id="nav-home-button"
         linkTo="/"
         handleOnClick={resetPages}
         setIsMenuLinksOpened={() => setIsMenuLinksOpened(false)}
@@ -135,76 +138,85 @@ const Navigation = ({
       <Nav id="search-nav" />
 
       <Nav.Item
+        id={isMenuLinksOpened ? "nav-links-opened" : ""}
         active={isMenuLinksOpened ? 1 : 0}
-        id="nav-links-button"
         style={{ paddingTop: "2px" }}
         onClick={() => setIsMenuLinksOpened(!isMenuLinksOpened)}
       >
-        {Settings?.menuOptions?.menuLinksDropdownTitle ?? "My Work"}
-        <span
-          className={isMenuLinksOpened ? "caret caret-rotate" : "caret"}
-          style={{ marginLeft: "0.5rem" }}
-        >
-        </span>
+        <Nav.Link>
+          {Settings?.menuOptions?.menuLinksDropdownTitle ?? "My Work"}
+          <span
+            className={
+              isMenuLinksOpened
+                ? "dropdown-toggle dropdown-toggle-rotate"
+                : "dropdown-toggle"
+            }
+            style={{ marginLeft: "0.255em" }}
+          >
+          </span>
+        </Nav.Link>
       </Nav.Item>
 
-      <Collapse isOpen={isMenuLinksOpened}>
-        <Nav
-          variant="pills"
-          className="flex-column"
-          style={{ paddingLeft: "1rem", paddingTop: "2px" }}
-        >
-          {currentUser.uuid && (
-            <SidebarLink
-              linkTo={{ pathname: "/reports/mine" }}
-              handleOnClick={resetPages}
-            >
-              My Reports
-            </SidebarLink>
-          )}
-
-          <Nav id="reports-nav" />
-
-          {isAdvisor && currentUser.position?.uuid && (
-            <>
+      <Collapse in={isMenuLinksOpened}>
+        <div>
+          <Nav
+            variant="pills"
+            className="flex-column"
+            style={{ paddingLeft: "1rem", paddingTop: "2px" }}
+          >
+            {currentUser.uuid && (
               <SidebarLink
-                linkTo={{ pathname: "/tasks/mine" }}
+                id="my-reports-nav"
+                linkTo={{ pathname: "/reports/mine" }}
                 handleOnClick={resetPages}
-                id="my-tasks-nav"
               >
-                {`My ${pluralize(taskShortLabel)}`}
-                {notifications?.tasksWithPendingAssessments?.length ? (
-                  <NotificationBadge>
-                    {notifications.tasksWithPendingAssessments.length}
-                  </NotificationBadge>
-                ) : null}
+                My Reports
               </SidebarLink>
+            )}
+
+            <Nav id="reports-nav" />
+
+            {isAdvisor && currentUser.position?.uuid && (
+              <>
+                <SidebarLink
+                  id="my-tasks-nav"
+                  linkTo={{ pathname: "/tasks/mine" }}
+                  handleOnClick={resetPages}
+                >
+                  {`My ${pluralize(taskShortLabel)}`}
+                  {notifications?.tasksWithPendingAssessments?.length ? (
+                    <NotificationBadge>
+                      {notifications.tasksWithPendingAssessments.length}
+                    </NotificationBadge>
+                  ) : null}
+                </SidebarLink>
+                <SidebarLink
+                  id="my-counterparts-nav"
+                  linkTo={{ pathname: "/positions/counterparts" }}
+                  handleOnClick={resetPages}
+                >
+                  My Counterparts
+                  {notifications?.counterpartsWithPendingAssessments?.length ? (
+                    <NotificationBadge>
+                      {notifications.counterpartsWithPendingAssessments.length}
+                    </NotificationBadge>
+                  ) : null}
+                </SidebarLink>
+              </>
+            )}
+
+            {myOrg && (
               <SidebarLink
-                linkTo={{ pathname: "/positions/counterparts" }}
+                id="my-organization-nav"
+                linkTo={Organization.pathFor(myOrg)}
                 handleOnClick={resetPages}
-                id="my-counterparts-nav"
               >
-                My Counterparts
-                {notifications?.counterpartsWithPendingAssessments?.length ? (
-                  <NotificationBadge>
-                    {notifications.counterpartsWithPendingAssessments.length}
-                  </NotificationBadge>
-                ) : null}
+                My Organization <br />
+                <small>{myOrg.shortName}</small>
               </SidebarLink>
-            </>
-          )}
-
-          {myOrg && (
-            <SidebarLink
-              linkTo={Organization.pathFor(myOrg)}
-              handleOnClick={resetPages}
-              id="my-organization"
-            >
-              My Organization <br />
-              <small>{myOrg.shortName}</small>
-            </SidebarLink>
-          )}
-        </Nav>
+            )}
+          </Nav>
+        </div>
       </Collapse>
 
       <NavDropdown
@@ -252,6 +264,7 @@ const Navigation = ({
       <Nav id="principal-org-nav" />
 
       <SidebarLink
+        id="daily-rollup-nav"
         linkTo="/rollup"
         handleOnClick={resetPages}
         setIsMenuLinksOpened={() => setIsMenuLinksOpened(false)}
@@ -260,34 +273,53 @@ const Navigation = ({
       </SidebarLink>
 
       {currentUser.isAdmin() && (
-        <LinkContainer
-          to="/admin"
-          onClick={() => {
-            clearSearchQuery()
-            setIsMenuLinksOpened(false)
-          }}
-        >
-          <Nav.Item>Admin</Nav.Item>
-        </LinkContainer>
+        <Nav.Item>
+          <LinkContainer
+            to="/admin"
+            onClick={() => {
+              clearSearchQuery()
+              setIsMenuLinksOpened(false)
+            }}
+          >
+            <Nav.Link>Admin</Nav.Link>
+          </LinkContainer>
+        </Nav.Item>
       )}
 
       {inAdmin && (
-        <Nav>
-          <LinkContainer to="/admin/mergePeople" onClick={resetPages}>
-            <Nav.Item>Merge people</Nav.Item>
-          </LinkContainer>
-          <LinkContainer to="/admin/mergePositions" onClick={resetPages}>
-            <Nav.Item>Merge positions</Nav.Item>
-          </LinkContainer>
-          <LinkContainer to="/admin/mergeLocations" onClick={resetPages}>
-            <Nav.Item>Merge locations</Nav.Item>
-          </LinkContainer>
-          <LinkContainer to="/admin/authorizationGroups" onClick={resetPages}>
-            <Nav.Item>Authorization groups</Nav.Item>
-          </LinkContainer>
-          <SidebarLink linkTo="/admin/graphiql" handleOnClick={resetPages}>
-            GraphQL
-          </SidebarLink>
+        <Nav className="flex-column">
+          <span id="style-nav">
+            <Nav.Item>
+              <LinkContainer to="/admin/mergePeople" onClick={resetPages}>
+                <Nav.Link>Merge people</Nav.Link>
+              </LinkContainer>
+            </Nav.Item>
+            <Nav.Item>
+              <LinkContainer to="/admin/mergePositions" onClick={resetPages}>
+                <Nav.Link>Merge positions</Nav.Link>
+              </LinkContainer>
+            </Nav.Item>
+            <Nav.Item>
+              <LinkContainer to="/admin/mergeLocations" onClick={resetPages}>
+                <Nav.Link>Merge locations</Nav.Link>
+              </LinkContainer>
+            </Nav.Item>
+            <Nav.Item>
+              <LinkContainer
+                to="/admin/authorizationGroups"
+                onClick={resetPages}
+              >
+                <Nav.Link>Authorization groups</Nav.Link>
+              </LinkContainer>
+            </Nav.Item>
+            <SidebarLink
+              id="grapgQL-nav"
+              linkTo="/admin/graphiql"
+              handleOnClick={resetPages}
+            >
+              GraphQL
+            </SidebarLink>
+          </span>
         </Nav>
       )}
 
@@ -298,6 +330,7 @@ const Navigation = ({
       )}
 
       <SidebarLink
+        id="help-nav"
         linkTo="/help"
         handleOnClick={resetPages}
         setIsMenuLinksOpened={() => setIsMenuLinksOpened(false)}
diff --git a/client/src/index.css b/client/src/index.css
index 9765a836c2..36ec41c8be 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -204,9 +204,38 @@ fieldset.danger {
   background-color: #e0e0e0;
 }
 
-.nav > li > a:hover,
-.nav .open > a:focus {
+.nav-pills .nav-link:hover {
   background-color: #e0e0e0;
+  text-decoration: none;
+  color: #337ab7;
+}
+
+.nav #style-nav .nav-item .nav-link {
+  margin: 2px 0 2px 1rem;
+}
+
+.nav #style-nav .nav-item .nav-link.active {
+  margin-left: 1rem;
+  background-color: transparent;
+  color: #337ab7;
+  border-left: 5px solid #337ab7;
+  border-radius: 0;
+  padding-left: 10px;
+}
+
+.nav #style-nav .nav-item .nav-link.active:hover {
+  background-color: #e0e0e0;
+  border-top-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+}
+
+.dropdown-item {
+  white-space: normal;
+  word-break: normal;
+}
+
+.dropdown-item:hover {
+  text-decoration: none;
 }
 
 .header .logo img,
@@ -324,11 +353,11 @@ button.home-tile.btn {
   text-align: center;
 }
 
-.caret {
+.dropdown-toggle::after {
   transition: 0.3s ease;
 }
 
-.caret-rotate {
+.dropdown-toggle-rotate::after {
   transform: rotate(180deg);
   transition: transform 0.3s ease;
 }
@@ -338,17 +367,18 @@ button.home-tile.btn {
   margin-right: 6px;
 }
 
-.nav-pills li.active > #nav-links-button {
+#nav-links-opened {
   background-color: #e0e0e0;
   color: #337ab7;
+  border-radius: 0.25rem;
 }
 
 .nav > .nav > li > a {
-  border-left: 4px solid rgba(0, 0, 0, 0);
+  border-left: 4px solid rgba(155, 145, 145, 0);
   padding: 4px 4px 4px 38px;
 }
 
-.nav .nav > li.active > a {
+.nav .nav-link > .active > a {
   border-left: 4px solid #1772b8;
 }
 
@@ -888,21 +918,21 @@ header.searchPagination {
 }
 
 .advanced-select-popover .bp3-popover2-content-sizing {
-	width: 100% !important;
+  width: 100% !important;
 }
 
 .advanced-select-popover span.bp3-popover2-target {
-	display: block;
-	width: 100%;
+  display: block;
+  width: 100%;
 }
 
 .advanced-select-popover .bp3-popover2-transition-container {
-	top: 50px !important;
+  top: 50px !important;
 }
 
 .advanced-select-popover .bp3-popover2-content {
-	min-width: 400px;
-	max-width: 90vw !important;
+  min-width: 400px;
+  max-width: 90vw !important;
 }
 
 .advanced-search {
diff --git a/client/src/pages/Search.js b/client/src/pages/Search.js
index 21bd0a6f02..ec25ac14db 100644
--- a/client/src/pages/Search.js
+++ b/client/src/pages/Search.js
@@ -49,9 +49,11 @@ import {
   Alert,
   Badge,
   Button,
+  Container,
   Dropdown,
   Modal,
   Nav,
+  Row,
   Table
 } from "react-bootstrap"
 import { connect } from "react-redux"
@@ -656,47 +658,76 @@ const Search = ({
   return (
     <div>
       <SubNav subnavElemId="search-nav">
-        <div>
-          <Button onClick={history.goBack} variant="link">
-            &lt; Return to previous page
-          </Button>
-        </div>
-        <Nav variant="pills" className="flex-column">
-          <AnchorNavItem to="organizations" disabled={!hasOrganizationsResults}>
-            <img src={ORGANIZATIONS_ICON} alt="" /> Organizations
-            {hasOrganizationsResults && <Badge>{numOrganizations}</Badge>}
-          </AnchorNavItem>
-
-          <AnchorNavItem to="people" disabled={!hasPeopleResults}>
-            <img src={PEOPLE_ICON} alt="" />{" "}
-            {SEARCH_OBJECT_LABELS[SEARCH_OBJECT_TYPES.PEOPLE]}
-            {hasPeopleResults && <Badge>{numPeople}</Badge>}
-          </AnchorNavItem>
-
-          <AnchorNavItem to="positions" disabled={!hasPositionsResults}>
-            <img src={POSITIONS_ICON} alt="" />{" "}
-            {SEARCH_OBJECT_LABELS[SEARCH_OBJECT_TYPES.POSITIONS]}
-            {hasPositionsResults && <Badge>{numPositions}</Badge>}
-          </AnchorNavItem>
-
-          <AnchorNavItem to="tasks" disabled={!hasTasksResults}>
-            <img src={TASKS_ICON} alt="" />{" "}
-            {SEARCH_OBJECT_LABELS[SEARCH_OBJECT_TYPES.TASKS]}
-            {hasTasksResults && <Badge>{numTasks}</Badge>}
-          </AnchorNavItem>
-
-          <AnchorNavItem to="locations" disabled={!hasLocationsResults}>
-            <img src={LOCATIONS_ICON} alt="" />{" "}
-            {SEARCH_OBJECT_LABELS[SEARCH_OBJECT_TYPES.LOCATIONS]}
-            {hasLocationsResults && <Badge>{numLocations}</Badge>}
-          </AnchorNavItem>
-
-          <AnchorNavItem to="reports" disabled={!hasReportsResults}>
-            <img src={REPORTS_ICON} alt="" />{" "}
-            {SEARCH_OBJECT_LABELS[SEARCH_OBJECT_TYPES.REPORTS]}
-            {hasReportsResults && <Badge>{numReports}</Badge>}
-          </AnchorNavItem>
-        </Nav>
+        <Container>
+          <Row style={{ paddingLeft: 0 }}>
+            <div>
+              <Button onClick={history.goBack} variant="link" size="sm">
+                &lt; Return to previous page
+              </Button>
+            </div>
+          </Row>
+          <Row style={{ paddingLeft: "2rem", marginBottom: "5px" }}>
+            <Nav variant="pills" className="flex-column">
+              <AnchorNavItem
+                to="organizations"
+                disabled={!hasOrganizationsResults}
+              >
+                <img src={ORGANIZATIONS_ICON} alt="" /> Organizations{" "}
+                {hasOrganizationsResults && (
+                  // TODO: convert className="bg-secondary" to bg="secondary when react-bootstrap is updated to v2.x"
+                  <Badge className="bg-secondary">{numOrganizations}</Badge>
+                )}
+              </AnchorNavItem>
+
+              <AnchorNavItem to="people" disabled={!hasPeopleResults}>
+                <img src={PEOPLE_ICON} alt="" />{" "}
+                {SEARCH_OBJECT_LABELS[SEARCH_OBJECT_TYPES.PEOPLE]}{" "}
+                {hasPeopleResults && (
+                  // TODO: convert className="bg-secondary" to bg="secondary when react-bootstrap is updated to v2.x"
+                  <Badge className="bg-secondary">{numPeople}</Badge>
+                )}
+              </AnchorNavItem>
+
+              <AnchorNavItem to="positions" disabled={!hasPositionsResults}>
+                <img src={POSITIONS_ICON} alt="" />{" "}
+                {SEARCH_OBJECT_LABELS[SEARCH_OBJECT_TYPES.POSITIONS]}{" "}
+                {hasPositionsResults && (
+                  // TODO: convert className="bg-secondary" to bg="secondary when react-bootstrap is updated to v2.x"
+                  <Badge className="bg-secondary">{numPositions}</Badge>
+                )}
+              </AnchorNavItem>
+
+              <AnchorNavItem to="tasks" disabled={!hasTasksResults}>
+                <img src={TASKS_ICON} alt="" />{" "}
+                {SEARCH_OBJECT_LABELS[SEARCH_OBJECT_TYPES.TASKS]}{" "}
+                {hasTasksResults && (
+                  // TODO: convert className="bg-secondary" to bg="secondary when react-bootstrap is updated to v2.x"
+                  <Badge className="bg-secondary">{numTasks}</Badge>
+                )}
+              </AnchorNavItem>
+
+              <AnchorNavItem to="locations" disabled={!hasLocationsResults}>
+                <img src={LOCATIONS_ICON} alt="" />{" "}
+                {SEARCH_OBJECT_LABELS[SEARCH_OBJECT_TYPES.LOCATIONS]}{" "}
+                {hasLocationsResults && (
+                  // TODO: convert className="bg-secondary" to bg="secondary when react-bootstrap is updated to v2.x"
+                  <Badge className="bg-secondary">{numLocations}</Badge>
+                )}
+              </AnchorNavItem>
+
+              <AnchorNavItem to="reports" disabled={!hasReportsResults}>
+                <img src={REPORTS_ICON} alt="" />{" "}
+                {SEARCH_OBJECT_LABELS[SEARCH_OBJECT_TYPES.REPORTS]}{" "}
+                {hasReportsResults && (
+                  // TODO: convert className="bg-secondary" to bg="secondary when react-bootstrap is updated to v2.x"
+                  <Badge pill className="bg-secondary">
+                    {numReports}
+                  </Badge>
+                )}
+              </AnchorNavItem>
+            </Nav>
+          </Row>
+        </Container>
       </SubNav>
       <div className="pull-right">
         {numResults > 0 && (
diff --git a/client/src/pages/insights/Show.js b/client/src/pages/insights/Show.js
index 1f34f5c628..0eaed8df4e 100644
--- a/client/src/pages/insights/Show.js
+++ b/client/src/pages/insights/Show.js
@@ -12,8 +12,8 @@ import Fieldset from "components/Fieldset"
 import FutureEngagementsByLocation from "components/FutureEngagementsByLocation"
 import Messages from "components/Messages"
 import {
-  PageDispatchersPropType,
   mapPageDispatchersToProps,
+  PageDispatchersPropType,
   useBoilerplate
 } from "components/Page"
 import PendingApprovalReports from "components/PendingApprovalReports"
diff --git a/client/src/pages/organizations/Show.js b/client/src/pages/organizations/Show.js
index 7d6fb2c74f..e46589840b 100644
--- a/client/src/pages/organizations/Show.js
+++ b/client/src/pages/organizations/Show.js
@@ -184,19 +184,35 @@ const OrganizationShow = ({ pageDispatchers }) => {
       : null
   const isMyOrg = myOrg && organization.uuid === myOrg.uuid
   const orgSubNav = (
-    <Nav>
-      <AnchorNavItem to="info">Info</AnchorNavItem>
-      <AnchorNavItem to="supportedPositions">Supported positions</AnchorNavItem>
-      <AnchorNavItem to="vacantPositions">Vacant positions</AnchorNavItem>
-      {!isPrincipalOrg && (
-        <AnchorNavItem to="approvals">Approvals</AnchorNavItem>
-      )}
-      {organization.isTaskEnabled() && (
-        <AnchorNavItem to="tasks">
-          {pluralize(Settings.fields.task.shortLabel)}
-        </AnchorNavItem>
-      )}
-      <AnchorNavItem to="reports">Reports</AnchorNavItem>
+    <Nav className="flex-column">
+      <span id="style-nav">
+        <Nav.Item>
+          <AnchorNavItem to="info">Info</AnchorNavItem>
+        </Nav.Item>
+        <Nav.Item>
+          <AnchorNavItem to="supportedPositions">
+            Supported positions
+          </AnchorNavItem>
+        </Nav.Item>
+        <Nav.Item>
+          <AnchorNavItem to="vacantPositions">Vacant positions</AnchorNavItem>
+        </Nav.Item>
+        {!isPrincipalOrg && (
+          <Nav.Item>
+            <AnchorNavItem to="approvals">Approvals</AnchorNavItem>
+          </Nav.Item>
+        )}
+        {organization.isTaskEnabled() && (
+          <Nav.Item>
+            <AnchorNavItem to="tasks">
+              {pluralize(Settings.fields.task.shortLabel)}
+            </AnchorNavItem>
+          </Nav.Item>
+        )}
+        <Nav.Item>
+          <AnchorNavItem to="reports">Reports</AnchorNavItem>
+        </Nav.Item>
+      </span>
     </Nav>
   )
   const reportQueryParams = {
diff --git a/client/src/pages/reports/MyReports.js b/client/src/pages/reports/MyReports.js
index 454e782167..cf8b8b6caf 100644
--- a/client/src/pages/reports/MyReports.js
+++ b/client/src/pages/reports/MyReports.js
@@ -55,20 +55,36 @@ const MyReports = ({ pageDispatchers, searchQuery }) => {
   return (
     <div>
       <SubNav subnavElemId="reports-nav">
-        <Nav>
-          <AnchorNavItem to="draft-reports">Draft reports</AnchorNavItem>
-          <AnchorNavItem to="planned-engagements">
-            Planned Engagements
-          </AnchorNavItem>
-          <AnchorNavItem to="pending-approval">Pending approval</AnchorNavItem>
-          <AnchorNavItem to="approved">Approved reports</AnchorNavItem>
-          <AnchorNavItem to="published-reports">
-            Published reports
-          </AnchorNavItem>
-          <AnchorNavItem to="cancelled-reports">
-            Cancelled reports
-          </AnchorNavItem>
-        </Nav>
+        <span id="style-nav">
+          <Nav className="flex-column">
+            <Nav.Item>
+              <AnchorNavItem to="draft-reports">Draft reports</AnchorNavItem>
+            </Nav.Item>
+            <Nav.Item>
+              <AnchorNavItem to="planned-engagements">
+                Planned Engagements
+              </AnchorNavItem>
+            </Nav.Item>
+            <Nav.Item>
+              <AnchorNavItem to="pending-approval">
+                Pending approval
+              </AnchorNavItem>
+            </Nav.Item>
+            <Nav.Item>
+              <AnchorNavItem to="approved">Approved reports</AnchorNavItem>
+            </Nav.Item>
+            <Nav.Item>
+              <AnchorNavItem to="published-reports">
+                Published reports
+              </AnchorNavItem>
+            </Nav.Item>
+            <Nav.Item>
+              <AnchorNavItem to="cancelled-reports">
+                Cancelled reports
+              </AnchorNavItem>
+            </Nav.Item>
+          </Nav>
+        </span>
       </SubNav>
 
       {renderSection("Draft Reports", "draft-reports", "draft")}