diff --git a/canon-docs/src/app/(docs)/page.mdx b/canon-docs/src/app/(docs)/page.mdx
index e92aba2aff..862127ec7b 100644
--- a/canon-docs/src/app/(docs)/page.mdx
+++ b/canon-docs/src/app/(docs)/page.mdx
@@ -40,6 +40,10 @@ import { Flex, Button, Text } from '@backstage/canon';
 </Flex>;
 ```
 
+## Roadmap
+
+You can check our roadmap [on GitHub](https://github.com/orgs/backstage/projects/10). We'll do our best to keep you updated on the progress.
+
 ## Next steps
 
 Now that you have the basics down, you can start building your plugin using the new design system.
diff --git a/canon-docs/src/components/CustomTheme/customTheme.tsx b/canon-docs/src/components/CustomTheme/customTheme.tsx
index fce8ba050b..66b4afc47c 100644
--- a/canon-docs/src/components/CustomTheme/customTheme.tsx
+++ b/canon-docs/src/components/CustomTheme/customTheme.tsx
@@ -6,7 +6,7 @@ import { sass } from '@codemirror/lang-sass';
 import styles from './styles.module.css';
 import { usePlayground } from '@/utils/playground-context';
 import { AnimatePresence, motion } from 'motion/react';
-import { Icon } from '@backstage/canon';
+import { Icon } from '../../../../packages/canon';
 import { createTheme } from '@uiw/codemirror-themes';
 import { tags as t } from '@lezer/highlight';
 
diff --git a/canon-docs/src/components/HeadlessBanners/BaseUI.tsx b/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
index 08831df3bf..86a0e1ecbd 100644
--- a/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
+++ b/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Icon, Text } from '@backstage/canon';
+import { Icon, Text } from '../../../../packages/canon';
 import styles from './styles.module.css';
 
 interface BaseUIProps {
diff --git a/canon-docs/src/components/IconLibrary/IconLibrary.tsx b/canon-docs/src/components/IconLibrary/IconLibrary.tsx
index c3fff7e66d..331dd3f5d0 100644
--- a/canon-docs/src/components/IconLibrary/IconLibrary.tsx
+++ b/canon-docs/src/components/IconLibrary/IconLibrary.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { Text, Icon, icons } from '@backstage/canon';
-import type { IconNames } from '@backstage/canon';
+import { Text, Icon, icons } from '../../../../packages/canon';
+import type { IconNames } from '../../../../packages/canon';
 import styles from './styles.module.css';
 
 export const IconLibrary = () => {
diff --git a/canon-docs/src/components/PropsTable/PropsTable.tsx b/canon-docs/src/components/PropsTable/PropsTable.tsx
index f5bf9ac5f6..a017dc557c 100644
--- a/canon-docs/src/components/PropsTable/PropsTable.tsx
+++ b/canon-docs/src/components/PropsTable/PropsTable.tsx
@@ -2,7 +2,7 @@
 
 import * as Table from '../Table';
 import { Chip } from '../Chip';
-import { icons } from '@backstage/canon';
+import { icons } from '../../../../packages/canon';
 
 // Define a more specific type for the data object
 type PropData = {
diff --git a/canon-docs/src/components/Tabs/parts.tsx b/canon-docs/src/components/Tabs/parts.tsx
index b5b8872a00..3d02683cef 100644
--- a/canon-docs/src/components/Tabs/parts.tsx
+++ b/canon-docs/src/components/Tabs/parts.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
-import { Text } from '@backstage/canon';
+import { Text } from '../../../../packages/canon';
 import styles from './styles.module.css';
 
 export const Root = ({