diff --git a/.changeset/fix-sidebar-settings-nav.md b/.changeset/fix-sidebar-settings-nav.md
new file mode 100644
index 0000000000..ee8223e5f4
--- /dev/null
+++ b/.changeset/fix-sidebar-settings-nav.md
@@ -0,0 +1,5 @@
+---
+'@backstage/create-app': patch
+---
+
+Various fixes for the `create-app` template: reorganizing sidebar items, removing redundant config and code, and adding a documentation example.
diff --git a/.patches/pr-33451.txt b/.patches/pr-33451.txt
new file mode 100644
index 0000000000..c713be256a
--- /dev/null
+++ b/.patches/pr-33451.txt
@@ -0,0 +1 @@
+Various fixes and improvements for the `@backstage/create-app` template.
diff --git a/packages/create-app/templates/next-app/app-config.yaml.hbs b/packages/create-app/templates/next-app/app-config.yaml.hbs
index c8814a9e96..b26d412a93 100644
--- a/packages/create-app/templates/next-app/app-config.yaml.hbs
+++ b/packages/create-app/templates/next-app/app-config.yaml.hbs
@@ -6,12 +6,6 @@ app:
   packages: all
 
   extensions:
-    # Disable the nav items that we're manually rendering in packages/app/src/modules/nav/Sidebar.tsx
-    - nav-item:search: false
-    - nav-item:user-settings: false
-    - nav-item:catalog: false
-    - nav-item:scaffolder: false
-
     # Configure the catalog index page to be the root page, this is normally mounted on /catalog
     - page:catalog:
         config:
diff --git a/packages/create-app/templates/next-app/examples/entities.yaml b/packages/create-app/templates/next-app/examples/entities.yaml
index 447e8b1f34..cc57de8b7a 100644
--- a/packages/create-app/templates/next-app/examples/entities.yaml
+++ b/packages/create-app/templates/next-app/examples/entities.yaml
@@ -12,6 +12,8 @@ apiVersion: backstage.io/v1alpha1
 kind: Component
 metadata:
   name: example-website
+  annotations:
+    backstage.io/techdocs-ref: dir:./example-docs
 spec:
   type: website
   lifecycle: experimental
diff --git a/packages/create-app/templates/next-app/examples/example-docs/docs/index.md b/packages/create-app/templates/next-app/examples/example-docs/docs/index.md
new file mode 100644
index 0000000000..ecd4dbd529
--- /dev/null
+++ b/packages/create-app/templates/next-app/examples/example-docs/docs/index.md
@@ -0,0 +1,5 @@
+# Example TechDocs page
+
+This is an example TechDocs page!
+
+The source of this documentation for the `example-website` component is found in the `examples/example-docs` directory, which is referenced from `examples/entities.yaml`. Typically the `docs` directory would live alongside the `catalog-info.yaml` file of a component instead, but in this case it is separated out to avoid cluttering the examples directory.
diff --git a/packages/create-app/templates/next-app/examples/example-docs/mkdocs.yml b/packages/create-app/templates/next-app/examples/example-docs/mkdocs.yml
new file mode 100644
index 0000000000..b482f45a27
--- /dev/null
+++ b/packages/create-app/templates/next-app/examples/example-docs/mkdocs.yml
@@ -0,0 +1,4 @@
+site_name: example-website
+docs_dir: docs
+plugins:
+  - techdocs-core
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 52d96151cb..e0bb425d56 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,16 +6,12 @@ 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';
 import SearchIcon from '@material-ui/icons/Search';
 import { SidebarSearchModal } from '@backstage/plugin-search';
-import {
-  UserSettingsSignInAvatar,
-  Settings as SidebarSettings,
-} from '@backstage/plugin-user-settings';
+import { UserSettingsSignInAvatar } from '@backstage/plugin-user-settings';
 import { NotificationsSidebarItem } from '@backstage/plugin-notifications';
 
 export const SidebarContent = NavContentBlueprint.make({
@@ -24,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">
@@ -50,9 +48,10 @@ export const SidebarContent = NavContentBlueprint.make({
             icon={<UserSettingsSignInAvatar />}
             to="/settings"
           >
-            <SidebarSettings />
+            {nav.take('page:app-visualizer')}
+            {nav.take('page:user-settings')}
           </SidebarGroup>
-        </Sidebar>,
+        </Sidebar>
       );
     },
   },