diff --git a/packages/create-app/templates/next-app/packages/app/package.json.hbs b/packages/create-app/templates/next-app/packages/app/package.json.hbs
index 161ca3010d..b31bafb8d1 100644
--- a/packages/create-app/templates/next-app/packages/app/package.json.hbs
+++ b/packages/create-app/templates/next-app/packages/app/package.json.hbs
@@ -15,7 +15,6 @@
   },
   "dependencies": {
     "@backstage/cli": "^{{ version '@backstage/cli'}}",
-    "@backstage/core-compat-api": "^{{ version '@backstage/core-compat-api'}}",
     "@backstage/core-components": "^{{ version '@backstage/core-components'}}",
     "@backstage/core-plugin-api": "^{{ version '@backstage/core-plugin-api'}}",
     "@backstage/frontend-defaults": "^{{ version '@backstage/frontend-defaults'}}",
diff --git a/packages/create-app/templates/next-app/packages/app/src/modules/nav/Sidebar.tsx b/packages/create-app/templates/next-app/packages/app/src/modules/nav/Sidebar.tsx
index 3af741bfbc..e1087188d5 100644
--- a/packages/create-app/templates/next-app/packages/app/src/modules/nav/Sidebar.tsx
+++ b/packages/create-app/templates/next-app/packages/app/src/modules/nav/Sidebar.tsx
@@ -6,7 +6,6 @@ import {
   SidebarScrollWrapper,
   SidebarSpace,
 } from '@backstage/core-components';
-import { compatWrapper } from '@backstage/core-compat-api';
 import { NavContentBlueprint } from '@backstage/plugin-app-react';
 import { SidebarLogo } from './SidebarLogo';
 import MenuIcon from '@material-ui/icons/Menu';
@@ -21,9 +20,11 @@ export const SidebarContent = NavContentBlueprint.make({
       const nav = navItems.withComponent(item => (
         <SidebarItem icon={() => item.icon} to={item.href} text={item.title} />
       ));
+
       // Skipped items
-      nav.take('page:search');
-      return compatWrapper(
+      nav.take('page:search'); // Using search modal instead
+
+      return (
         <Sidebar>
           <SidebarLogo />
           <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
@@ -49,7 +50,7 @@ export const SidebarContent = NavContentBlueprint.make({
           >
             {nav.take('page:user-settings')}
           </SidebarGroup>
-        </Sidebar>,
+        </Sidebar>
       );
     },
   },