diff --git a/docs/_layouts/pattern.njk b/docs/_layouts/pattern.njk
new file mode 100644
index 000000000..090efc8b3
--- /dev/null
+++ b/docs/_layouts/pattern.njk
@@ -0,0 +1,4 @@
+{% set hasSidebar = true %}
+{% set hasOutline = true %}
+
+{% extends "../_includes/base.njk" %}
diff --git a/docs/docs/patterns/app.md b/docs/docs/patterns/app.md
index 6962c3c6d..161bf795b 100644
--- a/docs/docs/patterns/app.md
+++ b/docs/docs/patterns/app.md
@@ -1,7 +1,7 @@
 ---
 title: App
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
@@ -285,7 +285,7 @@ TODO Page Description
       Showing 1 to 10 of 50 Results
       <span>
         <wa-button><wa-icon slot="prefix" name="gear" variant="solid"></wa-icon> Prev</wa-button>
-        <wa-button>Next <wa-icon slot="suffix" name="gear" variant="solid"></wa-icon></wa-button>  
+        <wa-button>Next <wa-icon slot="suffix" name="gear" variant="solid"></wa-icon></wa-button>
       </span>
     </div>
   </wa-card>
@@ -349,7 +349,7 @@ TODO Page Description
     wa-card {
       width: 100%;
     }
-  
+
 
     div.comment-footer {
       display: flex;
@@ -401,7 +401,7 @@ TODO Page Description
       grid-column: span 2/ span 2;
       margin: 0;
     }
-   
+
   }
 </style>
 ```
@@ -446,7 +446,7 @@ TODO Page Description
         align-items: center;
       }
 
-    
+
     }
   </style>
 ```
@@ -459,13 +459,13 @@ TODO Page Description
     <wa-icon name="database" style="font-size: 64px; margin: var(--wa-flow-spacing) 0 calc(var(--wa-flow-spacing)/ 2);"></wa-icon>
     <h4>No DBs</h4>
     <p>Get started by creating a database.</p>
-  
+
 </div>
   </a>
   <style>
     .empty-state {
       text-decoration: none;
-      
+
 
       &.dashed .border {
         margin: 0 auto;
@@ -605,10 +605,10 @@ TODO Page Description
         </div>
       </wa-card>
     </dl>
-    
-    
+
+
   </div>
-  
+
 </div>
 <style>
   .with-icon {
@@ -619,7 +619,7 @@ TODO Page Description
       margin-bottom: 0;
 
       wa-card::part(body) {
-        
+
       }
 
       wa-card::part(footer) {
@@ -701,14 +701,14 @@ TODO Page Description
     width: 100%;
     dl {
       display: grid;
-      grid-template-columns: repeat(2, 1fr);  
+      grid-template-columns: repeat(2, 1fr);
       margin: 0;
-      
+
       dt {
         color: #8991A6;
         font-size: 14px;
       }
-     
+
 
       div {
         border-right-style: solid;
@@ -739,8 +739,8 @@ TODO Page Description
         border: none;
       }
     }
-      
-  
+
+
   }
 
    wa-card.with-shared-borders::part(body) {
@@ -758,7 +758,7 @@ TODO Page Description
 ```html{.example}
 <div class="leaderboard">
   <h3 style="grid-column: 1/-1">Collective Activity for Yesterday</h3>
-  
+
     <wa-card class="activity-card" style="--wa-color-surface-default: tomato; --wa-color-text-normal: white; grid-column: 1/5;">
       <span>
         <wa-icon name="book"></wa-icon>
@@ -780,7 +780,7 @@ TODO Page Description
       </span>
       <div class="leaderboard-number">97,303</div>
     </wa-card>
-  
+
   <wa-card class="card-header" with-header style="grid-column: 2/12">
     <div slot="header">
       <div class="leaderboard-badge">
@@ -802,7 +802,7 @@ TODO Page Description
       </li>
       <li>
         <div>
-          
+
         <span>
           <h5 style="--wa-space-xl: 0">Title</h5>
           <span style="font-size: x-large;font-weight: 700;">4,500</span>
@@ -1045,4 +1045,4 @@ TODO Page Description
 ```
 ### With templates
 
-### With recommendations grid
+### With recommendations grid
\ No newline at end of file
diff --git a/docs/docs/patterns/blog.md b/docs/docs/patterns/blog.md
index 9b9334c32..c46d582a8 100644
--- a/docs/docs/patterns/blog.md
+++ b/docs/docs/patterns/blog.md
@@ -1,7 +1,7 @@
 ---
 title: Blog
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
@@ -14,7 +14,7 @@ TODO Page Description
   <wa-carousel-item>
     <a href="#" class="hero-link">
       <div style="background: #fe53a0;">
-       
+
       </div>
       <div style="background: gray;">
         <img
@@ -28,7 +28,7 @@ TODO Page Description
   <wa-carousel-item>
     <a href="#" class="hero-link">
       <div style="background: #5a90f3;">
-       
+
       </div>
       <div style="background: gray;">
         <img
@@ -42,7 +42,7 @@ TODO Page Description
   <wa-carousel-item>
     <a href="#" class="hero-link">
       <div style="background: #8c431e;">
-       
+
       </div>
       <div style="background: gray;">
         <img
@@ -56,7 +56,7 @@ TODO Page Description
   <wa-carousel-item>
     <a href="#" class="hero-link">
       <div style="background: #37b3e6;">
-       
+
       </div>
       <div style="background: gray;">
         <img
@@ -70,7 +70,7 @@ TODO Page Description
   <wa-carousel-item>
     <a href="#" class="hero-link">
       <div style="background: #f993d6;">
-       
+
       </div>
       <div style="background: gray;">
         <img
@@ -81,7 +81,7 @@ TODO Page Description
       <h2><span>Article Title</span></h2>
     </a>
   </wa-carousel-item>
-  
+
 </wa-carousel>
 <style>
   .hero-link {
@@ -202,10 +202,10 @@ TODO Page Description
 
       img {
         margin-right: 1rem;
-        object-fit: cover; 
+        object-fit: cover;
         min-width: 50px;
-        min-height: 50px; 
-        width: 100px; 
+        min-height: 50px;
+        width: 100px;
         height: 100px;
         border-radius: var(--wa-border-radius-circle);
       }
@@ -333,7 +333,7 @@ TODO Page Description
          <wa-input value="https://fontawesome.com"></wa-input>
     <wa-button variant="brand"> <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>Copy</wa-button>
       </div>
-   
+
   </div>
 </wa-card>
 <style>
@@ -350,13 +350,13 @@ TODO Page Description
       background: var(--background);
     }
     wa-icon-button::part(base) {
-      
+
       color: var(--color);
     }
 
     .share-input {
     display: flex;
-    
+
     wa-input {
           --border-radius: var(--wa-form-control-border-radius) 0 0 var(--wa-form-control-border-radius);
     }
@@ -365,6 +365,6 @@ TODO Page Description
     }
   }
   }
-  
+
 </style>
 ```
\ No newline at end of file
diff --git a/docs/docs/patterns/business.md b/docs/docs/patterns/business.md
index d8448f00f..99f893c27 100644
--- a/docs/docs/patterns/business.md
+++ b/docs/docs/patterns/business.md
@@ -1,7 +1,7 @@
 ---
 title: Business
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
diff --git a/docs/docs/patterns/ecommerce-category-filter.md b/docs/docs/patterns/ecommerce-category-filter.md
index c886e4d9c..40cba3200 100644
--- a/docs/docs/patterns/ecommerce-category-filter.md
+++ b/docs/docs/patterns/ecommerce-category-filter.md
@@ -1,12 +1,12 @@
 ---
 title: E-commerce - Category Filter
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
 
 ## With inline actions and expandable sidebar filters
 ```html{.example}
- 
+
 ```
\ No newline at end of file
diff --git a/docs/docs/patterns/ecommerce-category-preview.md b/docs/docs/patterns/ecommerce-category-preview.md
index db3342252..6c1475eee 100644
--- a/docs/docs/patterns/ecommerce-category-preview.md
+++ b/docs/docs/patterns/ecommerce-category-preview.md
@@ -1,7 +1,7 @@
 ---
 title: E-commerce - Category Preview
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
diff --git a/docs/docs/patterns/ecommerce-order-history.md b/docs/docs/patterns/ecommerce-order-history.md
index 1cda559e7..dea912586 100644
--- a/docs/docs/patterns/ecommerce-order-history.md
+++ b/docs/docs/patterns/ecommerce-order-history.md
@@ -1,7 +1,7 @@
 ---
 title: E-commerce - Order History
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
@@ -9,5 +9,5 @@ TODO Page Description
 ## Invoice panels
 
 ```html{.example}
-  
+
 ```
\ No newline at end of file
diff --git a/docs/docs/patterns/ecommerce-order-summary.md b/docs/docs/patterns/ecommerce-order-summary.md
index b506bc866..6ce2a81ea 100644
--- a/docs/docs/patterns/ecommerce-order-summary.md
+++ b/docs/docs/patterns/ecommerce-order-summary.md
@@ -1,7 +1,7 @@
 ---
 title: E-commerce - Product List
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
diff --git a/docs/docs/patterns/ecommerce-product-detail.md b/docs/docs/patterns/ecommerce-product-detail.md
index 3d55f40c6..820bdbbc5 100644
--- a/docs/docs/patterns/ecommerce-product-detail.md
+++ b/docs/docs/patterns/ecommerce-product-detail.md
@@ -1,7 +1,7 @@
 ---
 title: E-commerce - Product Detail
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
@@ -35,7 +35,7 @@ TODO Page Description
    </wa-card>
   </div>
   <style>
-    .with-inline-price { 
+    .with-inline-price {
       wa-card {
         width: 100%;
         .card-header {
diff --git a/docs/docs/patterns/ecommerce-product-list.md b/docs/docs/patterns/ecommerce-product-list.md
index 9979e9117..047477728 100644
--- a/docs/docs/patterns/ecommerce-product-list.md
+++ b/docs/docs/patterns/ecommerce-product-list.md
@@ -1,7 +1,7 @@
 ---
 title: E-commerce - Product Lists
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
@@ -52,7 +52,7 @@ TODO Page Description
         align-items: center;
       }
       .grid-item:nth-of-type(odd) {
-       
+
         border-right: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
       }
       .grid-item:not(:nth-last-child(-n + 2)) {
@@ -156,11 +156,10 @@ TODO Page Description
         font-weight: var(--wa-font-weight-action);
       }
     }
-    
+
   </style>
 ```
 ## With color swatches (WIP)
 ```html{.example}
 
 ```
-
diff --git a/docs/docs/patterns/ecommerce-product-review.md b/docs/docs/patterns/ecommerce-product-review.md
index 68ed364aa..b53805c03 100644
--- a/docs/docs/patterns/ecommerce-product-review.md
+++ b/docs/docs/patterns/ecommerce-product-review.md
@@ -1,7 +1,7 @@
 ---
 title: E-commerce - Product Reviews
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
@@ -132,7 +132,7 @@ TODO Page Description
       <wa-icon family="solid" name="earth-americas"></wa-icon>
       <h3>International delivery</h3>
       <p>Get your order in 2 years</p>
-  
+
     </wa-card>
   </div>
 </div>
@@ -263,11 +263,11 @@ TODO Page Description
   wa-radio-button #shadow-root div .button--medium {
     padding: var(--wa-space-xs) var(--wa-space-xs);
   }
-  
+
   .color-circle {
     --background: #000;
     background: var(--background);
- 
+
     width: 50px;
     height: 100%;
   }
@@ -372,12 +372,12 @@ TODO Page Description
     <h2>Everyday Ruck Snack</h2>
     <span>
       <span>$220</span> |
-      <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating> 
+      <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
       <span>1624 reviews</span>
     </span>
     <p>Don't compromise on snack-carrying capacity with this lightweight and spacious bag. The drawstring top keeps all your favorite chips, crisps, fries, biscuits, crackers, and cookies secure.</p>
     <span><wa-icon family="solid" name="check"></wa-icon> In stock and ready to ship</span>
-   
+
 
   </div>
   <div class="div-2">
@@ -398,7 +398,7 @@ TODO Page Description
     /* height: 1000px; */
     /* gap: 1rem; */
     .div-1 {
-   
+
     }
     .div-2 {
       /* background-color: black;
@@ -406,7 +406,7 @@ TODO Page Description
       grid-row: span 2 / span 2; */
     }
     .div-3 {
-   
+
     }
   }
 </style>
@@ -461,4 +461,4 @@ TODO Page Description
 
 </div>
 
-```
+```
\ No newline at end of file
diff --git a/docs/docs/patterns/ecommerce-shopping-cart.md b/docs/docs/patterns/ecommerce-shopping-cart.md
index 73725143b..0414ce928 100644
--- a/docs/docs/patterns/ecommerce-shopping-cart.md
+++ b/docs/docs/patterns/ecommerce-shopping-cart.md
@@ -1,7 +1,7 @@
 ---
 title: E-commerce - Shopping Cart
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
diff --git a/docs/docs/patterns/education.md b/docs/docs/patterns/education.md
index d8448f00f..99f893c27 100644
--- a/docs/docs/patterns/education.md
+++ b/docs/docs/patterns/education.md
@@ -1,7 +1,7 @@
 ---
 title: Business
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
diff --git a/docs/docs/patterns/entertainement.md b/docs/docs/patterns/entertainement.md
index 12a4789e6..744fe650f 100644
--- a/docs/docs/patterns/entertainement.md
+++ b/docs/docs/patterns/entertainement.md
@@ -1,7 +1,7 @@
 ---
 title: Entertainment
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
diff --git a/docs/docs/patterns/membership.md b/docs/docs/patterns/membership.md
index ce4362f33..c7c466c46 100644
--- a/docs/docs/patterns/membership.md
+++ b/docs/docs/patterns/membership.md
@@ -1,7 +1,7 @@
 ---
 title: Membership
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
diff --git a/docs/docs/patterns/news.md b/docs/docs/patterns/news.md
index ec7ed3504..f2218ef0f 100644
--- a/docs/docs/patterns/news.md
+++ b/docs/docs/patterns/news.md
@@ -1,7 +1,7 @@
 ---
 title: News
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
diff --git a/docs/docs/patterns/non-profit.md b/docs/docs/patterns/non-profit.md
index 499c9af15..b0a3c3987 100644
--- a/docs/docs/patterns/non-profit.md
+++ b/docs/docs/patterns/non-profit.md
@@ -1,7 +1,7 @@
 ---
 title: Non-profit
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
diff --git a/docs/docs/patterns/portfilio.md b/docs/docs/patterns/portfilio.md
index d8448f00f..99f893c27 100644
--- a/docs/docs/patterns/portfilio.md
+++ b/docs/docs/patterns/portfilio.md
@@ -1,7 +1,7 @@
 ---
 title: Business
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
diff --git a/docs/docs/patterns/portfolio.md b/docs/docs/patterns/portfolio.md
index fd366aff2..5c2f82012 100644
--- a/docs/docs/patterns/portfolio.md
+++ b/docs/docs/patterns/portfolio.md
@@ -1,7 +1,7 @@
 ---
 title: Portfolio
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
diff --git a/docs/docs/patterns/product-landing.md b/docs/docs/patterns/product-landing.md
index 07e24f70c..07fe5885f 100644
--- a/docs/docs/patterns/product-landing.md
+++ b/docs/docs/patterns/product-landing.md
@@ -1,7 +1,7 @@
 ---
 title: Product Landing
 description: TODO
-layout: page.njk
+layout: pattern.njk
 ---
 
 TODO Page Description
diff --git a/docs/index.md b/docs/index.md
index 274a67ab3..94f81dd5d 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -4,6 +4,8 @@ description: Build better with Web Awesome, the open source library of web compo
 layout: page
 ---
 
+
+
 <style>
   .title,
   .anchor-heading a,