diff --git a/pages/concave-corners/index.tsx b/pages/concave-corners/index.tsx
index 0e9c23b..46f4fd3 100644
--- a/pages/concave-corners/index.tsx
+++ b/pages/concave-corners/index.tsx
@@ -11,8 +11,6 @@ import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
-import './concave-corners.css';
-
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.ConcaveCorners}>
diff --git a/pages/drop-cap/index.tsx b/pages/drop-cap/index.tsx
index cce9dfc..6373792 100644
--- a/pages/drop-cap/index.tsx
+++ b/pages/drop-cap/index.tsx
@@ -6,8 +6,6 @@
 import * as React from 'react';
 import { Helmet } from 'react-helmet';
 
-import './dropcap.css';
-
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Pattern from '../../constants/Pattern';
diff --git a/pages/dropdown/index.tsx b/pages/dropdown/index.tsx
index 9521a25..5b8ae12 100644
--- a/pages/dropdown/index.tsx
+++ b/pages/dropdown/index.tsx
@@ -6,8 +6,6 @@
 import * as React from 'react';
 import { Helmet } from 'react-helmet';
 
-import './dropdown.css';
-
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
diff --git a/styles/index.scss b/styles/index.scss
index 806e5c8..6d1b231 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -7,4 +7,24 @@
 @import 'blocks/layout';
 
 // Pages
-@import 'pages/home';
\ No newline at end of file
+@import 'pages/home';
+
+// Patterns
+@import 'patterns/concave-corners';
+@import 'patterns/dropcap';
+@import 'patterns/dropdown';
+@import 'patterns/floating-label';
+@import 'patterns/folder-structure';
+@import 'patterns/inverted-corners';
+@import 'patterns/layered-card';
+@import 'patterns/masonry-grid';
+@import 'patterns/mega-menu';
+@import 'patterns/menu';
+@import 'patterns/nested-dropdowns';
+@import 'patterns/price-tag';
+@import 'patterns/radio-button-group';
+@import 'patterns/star';
+@import 'patterns/three-dimensions-card';
+@import 'patterns/tooltip';
+@import 'patterns/tree-diagram';
+@import 'patterns/zigzag-timeline';
\ No newline at end of file
diff --git a/pages/concave-corners/concave-corners.css b/styles/patterns/_concave-corners.scss
similarity index 100%
rename from pages/concave-corners/concave-corners.css
rename to styles/patterns/_concave-corners.scss
diff --git a/pages/drop-cap/dropcap.css b/styles/patterns/_dropcap.scss
similarity index 100%
rename from pages/drop-cap/dropcap.css
rename to styles/patterns/_dropcap.scss
diff --git a/pages/dropdown/dropdown.css b/styles/patterns/_dropdown.scss
similarity index 100%
rename from pages/dropdown/dropdown.css
rename to styles/patterns/_dropdown.scss
diff --git a/pages/floating-label/floating-label.css b/styles/patterns/_floating-label.scss
similarity index 100%
rename from pages/floating-label/floating-label.css
rename to styles/patterns/_floating-label.scss
diff --git a/pages/folder-structure/folder-structure.css b/styles/patterns/_folder-structure.scss
similarity index 100%
rename from pages/folder-structure/folder-structure.css
rename to styles/patterns/_folder-structure.scss
diff --git a/pages/inverted-corners/inverted-corners.css b/styles/patterns/_inverted-corners.scss
similarity index 100%
rename from pages/inverted-corners/inverted-corners.css
rename to styles/patterns/_inverted-corners.scss
diff --git a/pages/layered-card/styles.css b/styles/patterns/_layered-card.scss
similarity index 100%
rename from pages/layered-card/styles.css
rename to styles/patterns/_layered-card.scss
diff --git a/pages/masonry-grid/masonry-grid.css b/styles/patterns/_masonry-grid.scss
similarity index 100%
rename from pages/masonry-grid/masonry-grid.css
rename to styles/patterns/_masonry-grid.scss
diff --git a/pages/mega-menu/mega-menu.css b/styles/patterns/_mega-menu.scss
similarity index 100%
rename from pages/mega-menu/mega-menu.css
rename to styles/patterns/_mega-menu.scss
diff --git a/pages/menu/menu.css b/styles/patterns/_menu.scss
similarity index 100%
rename from pages/menu/menu.css
rename to styles/patterns/_menu.scss
diff --git a/pages/nested-dropdowns/nested-dropdowns.css b/styles/patterns/_nested-dropdowns.scss
similarity index 100%
rename from pages/nested-dropdowns/nested-dropdowns.css
rename to styles/patterns/_nested-dropdowns.scss
diff --git a/pages/price-tag/price-tag.css b/styles/patterns/_price-tag.scss
similarity index 100%
rename from pages/price-tag/price-tag.css
rename to styles/patterns/_price-tag.scss
diff --git a/pages/radio-button-group/radio-button-group.css b/styles/patterns/_radio-button-group.scss
similarity index 100%
rename from pages/radio-button-group/radio-button-group.css
rename to styles/patterns/_radio-button-group.scss
diff --git a/pages/rating/star.css b/styles/patterns/_star.scss
similarity index 100%
rename from pages/rating/star.css
rename to styles/patterns/_star.scss
diff --git a/pages/three-dimensions-card/styles.css b/styles/patterns/_three-dimensions-card.scss
similarity index 100%
rename from pages/three-dimensions-card/styles.css
rename to styles/patterns/_three-dimensions-card.scss
diff --git a/pages/tooltip/tooltip.css b/styles/patterns/_tooltip.scss
similarity index 100%
rename from pages/tooltip/tooltip.css
rename to styles/patterns/_tooltip.scss
diff --git a/pages/tree-diagram/tree-diagram.css b/styles/patterns/_tree-diagram.scss
similarity index 100%
rename from pages/tree-diagram/tree-diagram.css
rename to styles/patterns/_tree-diagram.scss
diff --git a/pages/zigzag-timeline/zigzag-timeline.css b/styles/patterns/_zigzag-timeline.scss
similarity index 100%
rename from pages/zigzag-timeline/zigzag-timeline.css
rename to styles/patterns/_zigzag-timeline.scss