diff --git a/.changeset/angry-jobs-serve.md b/.changeset/angry-jobs-serve.md
new file mode 100644
index 0000000000..ec2976dccd
--- /dev/null
+++ b/.changeset/angry-jobs-serve.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-cost-insights': patch
+---
+
+In the README, a old path of the `sidebar` was updated to the current path.
diff --git a/plugins/cost-insights/README.md b/plugins/cost-insights/README.md
index 295cfcccd2..824cf6f9fe 100644
--- a/plugins/cost-insights/README.md
+++ b/plugins/cost-insights/README.md
@@ -72,37 +72,50 @@ import { CostInsightsPage } from '@backstage/plugin-cost-insights';
 To expose the plugin to your users, you can integrate the `cost-insights` route anyway that suits your application, but most commonly it is added to the Sidebar.
 
 ```diff
-// packages/app/src/sidebar.tsx
+// packages/app/src/components/Root/Root.tsx
 + import MoneyIcon from '@material-ui/icons/MonetizationOn';
 
  ...
 
- export const AppSidebar = () => (
-   <Sidebar>
-     <SidebarLogo />
-     <SidebarGroup icon={<SearchIcon />} to="/search">
-       <SidebarSearch />
-     </SidebarGroup>
-     <SidebarDivider />
-     {/* Global nav, not org-specific */}
-     <SidebarGroup label="Menu" icon={<MenuIcon />}>
-       <SidebarItem icon={HomeIcon} to="./" text="Home" />
-       <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
-       <SidebarItem icon={LibraryBooks} to="/docs" text="Docs" />
-       <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
-       <SidebarDivider />
-       <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
-+      <SidebarItem icon={MoneyIcon} to="cost-insights" text="Cost Insights" />
-     </SidebarGroup>
-     {/* End global nav */}
-     <SidebarDivider />
-     <SidebarSpace />
-     <SidebarDivider />
-     <SidebarGroup icon={<UserSettingsSignInAvatar />} to="/settings">
-       <SidebarSettings />
-     </SidebarGroup>
-   </Sidebar>
- );
+ export const Root = ({ children }: PropsWithChildren<{}>) => (
+  <SidebarPage>
+    <Sidebar>
+      <SidebarLogo />
+      <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
+        <SidebarSearchModal>
+          {({ toggleModal }) => <SearchModal toggleModal={toggleModal} />}
+        </SidebarSearchModal>
+      </SidebarGroup>
+      <SidebarDivider />
+        <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
+        <SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
+        <SidebarItem icon={LayersIcon} to="explore" text="Explore" />
+        <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
+        {/* End global nav */}
+        <SidebarDivider />
+        <SidebarScrollWrapper>
++          <SidebarItem
++            icon={MoneyIcon}
++            to="cost-insights"
++            text="Cost Insights"
++          />
+        </SidebarScrollWrapper>
+        <SidebarDivider />
+        <Shortcuts />
+      </SidebarGroup>
+      <SidebarSpace />
+      <SidebarDivider />
+      <SidebarGroup
+        label="Settings"
+        icon={<UserSettingsSignInAvatar />}
+        to="/settings"
+      >
+        <SidebarSettings />
+      </SidebarGroup>
+    </Sidebar>
+    {children}
+  </SidebarPage>
+);
 ```
 
 ## Configuration
@@ -157,7 +170,7 @@ costInsights:
 
 ### Currencies (Optional)
 
-In the `Cost Overview` panel, users can choose from a dropdown of currencies to see costs in, such as Engineers or USD. Currencies must be defined as keys on the `currencies` field. A user-friendly label and unit are **required**. If not set, the `defaultCurrencies` in `currenc.ts` will be used.
+In the `Cost Overview` panel, users can choose from a dropdown of currencies to see costs in, such as Engineers or USD. Currencies must be defined as keys on the `currencies` field. A user-friendly label and unit are **required**. If not set, the `defaultCurrencies` in `currency.ts` will be used.
 
 A currency without `kind` is reserved to calculate cost for `engineers`. There should only be one currency without `kind`.