diff --git a/src/page-components/pattern-library/PatternDetail.module.css b/src/page-components/pattern-library/PatternDetail.module.css
new file mode 100644
index 0000000..cfa6b72
--- /dev/null
+++ b/src/page-components/pattern-library/PatternDetail.module.css
@@ -0,0 +1,7 @@
+@layer pages {
+  .pattern_detail {
+    flex: 2;
+    border-radius: calc(var(--border-radius) * 2);
+    background-color: var(--color-dark-surface-container);
+  }
+}
diff --git a/src/page-components/pattern-library/PatternDetail.tsx b/src/page-components/pattern-library/PatternDetail.tsx
new file mode 100644
index 0000000..81bb3ee
--- /dev/null
+++ b/src/page-components/pattern-library/PatternDetail.tsx
@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import styles from './PatternDetail.module.css';
+
+const PatternDetail: FC = () => {
+  return <div className={styles.pattern_detail}></div>;
+};
+
+export default PatternDetail;
diff --git a/src/page-components/pattern-library/Patterns.module.css b/src/page-components/pattern-library/Patterns.module.css
new file mode 100644
index 0000000..b4a9c6d
--- /dev/null
+++ b/src/page-components/pattern-library/Patterns.module.css
@@ -0,0 +1,10 @@
+@layer pages {
+  .pattern_list {
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    flex: 1;
+    border-radius: calc(var(--border-radius) * 2);
+    background-color: var(--color-dark-surface-container);
+  }
+}
diff --git a/src/page-components/pattern-library/Patterns.tsx b/src/page-components/pattern-library/Patterns.tsx
new file mode 100644
index 0000000..7b78a33
--- /dev/null
+++ b/src/page-components/pattern-library/Patterns.tsx
@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { ScrollArea } from '../../components/ScrollArea';
+import styles from './Patterns.module.css';
+
+const Patterns: FC = () => {
+  return (
+    <div className={styles.pattern_list}>
+      <ScrollArea enableY></ScrollArea>
+    </div>
+  );
+};
+
+export default Patterns;
diff --git a/src/pages/PatternLibrary.tsx b/src/pages/PatternLibrary.tsx
index a7fdb34..50bfba2 100644
--- a/src/pages/PatternLibrary.tsx
+++ b/src/pages/PatternLibrary.tsx
@@ -1,7 +1,14 @@
 import { FC } from 'react';
+import PatternDetail from '../page-components/pattern-library/PatternDetail';
+import Patterns from '../page-components/pattern-library/Patterns';
 
 const PatternLibrary: FC = () => {
-  return <div className="workspace"></div>;
+  return (
+    <div className="workspace horizontal">
+      <Patterns />
+      <PatternDetail />
+    </div>
+  );
 };
 
 export default PatternLibrary;