diff --git a/.changeset/hungry-walls-pump.md b/.changeset/hungry-walls-pump.md
new file mode 100644
index 0000000000..67e8e27b42
--- /dev/null
+++ b/.changeset/hungry-walls-pump.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Fixed a bug in the SidebarSubmenuItem within the core-components package that caused the dropdown button to be misaligned in the sidebar and the button text to appear in uppercase due to the default <Button> behavior. Also added an example dropdown menu to the app for reference.
diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx
index b74c6459d8..818dd100a5 100644
--- a/packages/app/src/components/Root/Root.tsx
+++ b/packages/app/src/components/Root/Root.tsx
@@ -132,6 +132,25 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
               to="catalog?filters[kind]=user"
               icon={useApp().getSystemIcon('kind:user')}
             />
+            <SidebarDivider />
+            <SidebarSubmenuItem
+              title="Templates"
+              icon={useApp().getSystemIcon('kind:template')}
+              dropdownItems={[
+                {
+                  title: 'Documentation',
+                  to: 'catalog?filters[kind]=template&filters[type]=documentation',
+                },
+                {
+                  title: 'Service',
+                  to: 'catalog?filters[kind]=template&filters[type]=service',
+                },
+                {
+                  title: 'Website',
+                  to: 'catalog?filters[kind]=template&filters[type]=website',
+                },
+              ]}
+            />
           </SidebarSubmenu>
         </SidebarItem>
         <MyGroupsSidebarItem
diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx
index 0ed8aedcaf..647c4b22fe 100644
--- a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx
+++ b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx
@@ -185,6 +185,10 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => {
               classes.item,
               isActive ? classes.selected : undefined,
             )}
+            style={{
+              textTransform: 'none',
+              justifyContent: 'flex-start',
+            }}
           >
             {Icon && <Icon fontSize="small" />}
             <Typography