diff --git a/src/components/PatternPreview.tsx b/src/components/PatternPreview.tsx
new file mode 100644
index 0000000..03d0f24
--- /dev/null
+++ b/src/components/PatternPreview.tsx
@@ -0,0 +1,11 @@
+import { FC } from 'react';
+
+const PatternPreview: FC = () => {
+  return (
+    <div>
+      <canvas />
+    </div>
+  );
+};
+
+export default PatternPreview;
diff --git a/src/pages/PatternEditor.module.css b/src/pages/PatternEditor.module.css
new file mode 100644
index 0000000..7a15b36
--- /dev/null
+++ b/src/pages/PatternEditor.module.css
@@ -0,0 +1,10 @@
+@layer pages {
+  .pattern_editor_layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    min-width: 0;
+    align-items: stretch;
+    gap: calc(var(--spacing) * 4);
+  }
+}
diff --git a/src/pages/PatternEditor.tsx b/src/pages/PatternEditor.tsx
index 3a953aa..3a79c18 100644
--- a/src/pages/PatternEditor.tsx
+++ b/src/pages/PatternEditor.tsx
@@ -1,7 +1,12 @@
 import { FC } from 'react';
+import styles from './PatternEditor.module.css';
 
 const PatternEditor: FC = () => {
-  return <div className="workspace"></div>;
+  return (
+    <div className="workspace vertical">
+      <div className={styles.pattern_editor_layout}></div>
+    </div>
+  );
 };
 
 export default PatternEditor;