diff --git a/.amanuensis/next/src/components/PageLayout.tsx b/.amanuensis/next/src/components/PageLayout.tsx
new file mode 100644
index 0000000..466b794
--- /dev/null
+++ b/.amanuensis/next/src/components/PageLayout.tsx
@@ -0,0 +1,11 @@
+import { Preamble, Props, Playground } from '@/components/Amanuensis';
+
+export const PageLayout = () => {
+	return (
+		<>
+			<Preamble />
+			<Props />
+			<Playground />
+		</>
+	)
+};
diff --git a/categories/web/action/react/src/components/ActionButton/ActionButton.mdx b/categories/web/action/react/src/components/ActionButton/ActionButton.mdx
index 344a0e8..3246047 100644
--- a/categories/web/action/react/src/components/ActionButton/ActionButton.mdx
+++ b/categories/web/action/react/src/components/ActionButton/ActionButton.mdx
@@ -1,5 +1,7 @@
 import { ActionButton } from '@tesseract-design/web-action-react';
 
+# ActionButton
+
 The `<ActionButton>` component is a wrapper around the `<Button>` component that adds a few extra props to make it
 easier to create action buttons.
 
diff --git a/packages/amanuensis/src/commands/refresh.ts b/packages/amanuensis/src/commands/refresh.ts
index 8f7289d..e9734ad 100644
--- a/packages/amanuensis/src/commands/refresh.ts
+++ b/packages/amanuensis/src/commands/refresh.ts
@@ -41,6 +41,13 @@ const linkComponents = async (cwd: string) => {
 		// noop
 	}
 
+	try {
+		await rm(resolve(destCwd, 'pages'), { recursive: true });
+		await cp(resolve(defaultCwd, 'pages'), resolve(destCwd, 'pages'), { recursive: true });
+	} catch {
+		// noop
+	}
+
 	await Promise.all(componentsList.map(async (componentPath) => {
 		const destPath = resolve(destCwd, componentPath);
 		let baseCwd = projectCwd;
@@ -72,8 +79,12 @@ const linkComponents = async (cwd: string) => {
 				const packageDir = await useBasePath(pkg.basePath);
 				const packageLinkDir = await useInternalPath('.amanuensis', 'next', 'node_modules', pkg.name);
 				await mkdirp(dirname(packageLinkDir));
-				console.log(packageDir, packageLinkDir);
-				await symlink(packageDir, packageLinkDir);
+
+				try {
+					await symlink(packageDir, packageLinkDir);
+				} catch {
+					// noop
+				}
 
 				await mkdirp(resolve(destCwd, 'content', pkg.basePath));
 				await mkdirp(resolve(destCwd, 'pages', pkg.basePath));
@@ -84,22 +95,30 @@ const linkComponents = async (cwd: string) => {
 						await cp(srcPath, destPath);
 
 						const pageDestPath = resolve(destCwd, 'pages', pkg.basePath, `${basename(m.name, extname(m.name))}.tsx`);
+						const preambleImport = `@/${join('content', pkg.basePath, m.name)}`;
+
 						await writeFile(
 							pageDestPath,
 							`import {NextPage} from 'next';
 import {Wrapper} from '@/components/Wrapper';
-import Content from '@/${join('content', pkg.basePath, m.name)}';
+import {ComponentContext} from '@/contexts/Component';
+import {PreambleContext} from '@/contexts/Preamble';
+import Preamble from '${preambleImport}';
+import {PageLayout} from '@/components/PageLayout';
 
 const IndexPage: NextPage = () => {
   return (
-    <Wrapper>
-      <Content />
-    </Wrapper>
+		<PreambleContext.Provider value={Preamble}>
+			<Wrapper>
+				<PageLayout />
+			</Wrapper>
+    </PreambleContext.Provider>
   );
 };
 
 export default IndexPage;
 `,
+							// todo fetch components for display to props and preamble
 							// todo fix problem when building with import aliases
 							// todo find a way to build with tailwind
 							// todo link components to next project (done)
diff --git a/packages/amanuensis/src/next/components/Amanuensis.tsx b/packages/amanuensis/src/next/components/Amanuensis.tsx
new file mode 100644
index 0000000..a6095e8
--- /dev/null
+++ b/packages/amanuensis/src/next/components/Amanuensis.tsx
@@ -0,0 +1,30 @@
+import {useContext} from 'react';
+import {ComponentContext} from '@/contexts/Component';
+import {PreambleContext} from '@/contexts/Preamble';
+
+export const Preamble = () => {
+	const Component = useContext(PreambleContext);
+	return (
+		<>
+			<Component />
+		</>
+	);
+}
+
+export const Props = () => {
+	const Component = useContext(ComponentContext);
+	return (
+		<>
+			Props
+		</>
+	);
+}
+
+export const Playground = () => {
+	const Component = useContext(ComponentContext);
+	return (
+		<>
+			Playground
+		</>
+	);
+}
diff --git a/packages/amanuensis/src/next/components/PageLayout.tsx b/packages/amanuensis/src/next/components/PageLayout.tsx
new file mode 100644
index 0000000..466b794
--- /dev/null
+++ b/packages/amanuensis/src/next/components/PageLayout.tsx
@@ -0,0 +1,11 @@
+import { Preamble, Props, Playground } from '@/components/Amanuensis';
+
+export const PageLayout = () => {
+	return (
+		<>
+			<Preamble />
+			<Props />
+			<Playground />
+		</>
+	)
+};
diff --git a/packages/amanuensis/src/next/contexts/Component.ts b/packages/amanuensis/src/next/contexts/Component.ts
new file mode 100644
index 0000000..dd4fc35
--- /dev/null
+++ b/packages/amanuensis/src/next/contexts/Component.ts
@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const ComponentContext = createContext(null as any);
diff --git a/packages/amanuensis/src/next/contexts/Preamble.ts b/packages/amanuensis/src/next/contexts/Preamble.ts
new file mode 100644
index 0000000..84da531
--- /dev/null
+++ b/packages/amanuensis/src/next/contexts/Preamble.ts
@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const PreambleContext = createContext(null as any);