diff --git a/src/component/app.tsx b/src/component/app.tsx
index dfcc63a7e..b2259fa87 100644
--- a/src/component/app.tsx
+++ b/src/component/app.tsx
@@ -1,6 +1,6 @@
 import { Chrome } from './container/chrome';
-import { colors } from '../lsg/patterns/colors';
 import { WebviewTag } from 'electron';
+import ElementPane from '../lsg/patterns/panes/element-pane';
 import { ElementList } from './container/element_list';
 import globalStyles from '../lsg/patterns/global-styles';
 import { IconName, IconRegistry } from '../lsg/patterns/icons';
@@ -12,44 +12,18 @@ import { observer } from 'mobx-react';
 import DevTools from 'mobx-react-devtools';
 import { Page } from '../store/page';
 import { PatternList } from './container/pattern_list';
+import PatternsPane from '../lsg/patterns/panes/patterns-pane';
+import PreviewPane from '../lsg/patterns/panes/preview-pane';
+import ProjectPane from '../lsg/patterns/panes/project-pane';
 import { ProjectList } from './container/project_list';
+import PropertyPane from '../lsg/patterns/panes/property-pane';
 import { PropertyList } from './container/property_list';
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { Store } from '../store';
-import styledComponents from 'styled-components';
 
 globalStyles();
 
-const ElementPane = styledComponents.div`
-	flex: 3 0 60%;
-    overflow: scroll;
-`;
-
-const PropertyPane = styledComponents.div`
-	flex: 2 0 0px;
-`;
-
-const PatternsPane = styledComponents.div`
-	flex: 2 0 40%;
-    overflow: scroll;
-    border-top: 2px solid ${colors.grey70.toString()};
-    box-sizing: border-box;
-    padding: 18px 0;
-`;
-
-const ProjectPane = styledComponents.div`
-	flex: 3 0 0px;
-`;
-
-const PreviewPane = styledComponents.div`
-	flex: 2 0 0px;
-	background-color: #ffffff;
-	border-radius: 6px 6px 0 0;
-	box-shadow: 0 3px 9px 0 rgba(0,0,0,.15);
-	overflow: hidden;
-`;
-
 interface AppProps {
 	store: Store;
 }
@@ -103,12 +77,7 @@ class App extends React.Component<AppProps> {
 						</PatternsPane>
 					</SideBar>
 
-					<PreviewPane
-						dangerouslySetInnerHTML={{
-							__html:
-								'<webview id="preview" style="height: 100%;" src="./preview.html" partition="electron" nodeintegration />'
-						}}
-					/>
+					<PreviewPane />
 					<SideBar directionVertical hasPaddings>
 						<PropertyPane>
 							<PropertyList store={this.props.store} />
diff --git a/src/lsg/patterns/panes/element-pane/index.tsx b/src/lsg/patterns/panes/element-pane/index.tsx
new file mode 100644
index 000000000..e090172f4
--- /dev/null
+++ b/src/lsg/patterns/panes/element-pane/index.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+const StyledElementPane = styled.div`
+	position: relative;
+	flex-grow: 3;
+	flex-shrink: 0;
+	flex-basis: 60%;
+	overflow: scroll;
+
+	/*FadeOut*/
+	&::after {
+		content: '';
+		position: sticky;
+		bottom: 0;
+		display: block;
+		width: 100%;
+		height: 40px;
+		background: linear-gradient(to bottom, rgba(247,247,247,0) 0%, rgba(247,247,247,0.5) 15%, rgba(247,247,247,1) 100%);
+	}
+`;
+
+const ElementPane: React.StatelessComponent<{}> = props => <StyledElementPane>{props.children}</StyledElementPane>;
+
+export default ElementPane;
diff --git a/src/lsg/patterns/panes/element-pane/pattern.json b/src/lsg/patterns/panes/element-pane/pattern.json
new file mode 100644
index 000000000..8f5850849
--- /dev/null
+++ b/src/lsg/patterns/panes/element-pane/pattern.json
@@ -0,0 +1,9 @@
+{
+	"name": "element-pane",
+	"displayName": "Element Pane",
+	"flag": "alpha",
+	"version": "1.0.0",
+	"tags": ["atom", "element-pane"],
+	"patterns": {
+	}
+ }
diff --git a/src/lsg/patterns/panes/patterns-pane/index.tsx b/src/lsg/patterns/panes/patterns-pane/index.tsx
new file mode 100644
index 000000000..f5bc96cf6
--- /dev/null
+++ b/src/lsg/patterns/panes/patterns-pane/index.tsx
@@ -0,0 +1,16 @@
+import { colors } from '../../colors';
+import * as React from 'react';
+import styled from 'styled-components';
+
+const StyledPatternsPane = styled.div`
+	box-sizing: border-box;
+	flex-grow: 2;
+	flex-shrink: 0;
+	flex-basis: 40%;
+	border-top: 2px solid ${colors.grey70.toString()};
+	overflow: scroll;
+`;
+
+const PatternsPane: React.StatelessComponent<{}> = props => <StyledPatternsPane>{props.children}</StyledPatternsPane>;
+
+export default PatternsPane;
diff --git a/src/lsg/patterns/panes/patterns-pane/pattern.json b/src/lsg/patterns/panes/patterns-pane/pattern.json
new file mode 100644
index 000000000..d4d70a67b
--- /dev/null
+++ b/src/lsg/patterns/panes/patterns-pane/pattern.json
@@ -0,0 +1,10 @@
+{
+	"name": "patterns-pane",
+	"displayName": "Patterns Pane",
+	"flag": "alpha",
+	"version": "1.0.0",
+	"tags": ["atom", "patterns-pane"],
+	"patterns": {
+		"color": "color"
+	}
+ }
diff --git a/src/lsg/patterns/panes/preview-pane/index.tsx b/src/lsg/patterns/panes/preview-pane/index.tsx
new file mode 100644
index 000000000..3cd24f08d
--- /dev/null
+++ b/src/lsg/patterns/panes/preview-pane/index.tsx
@@ -0,0 +1,19 @@
+import { colors } from '../../colors';
+import * as React from 'react';
+import styled from 'styled-components';
+
+const StyledPreviewPane = styled.div`
+	flex-grow: 1;
+	flex-shrink: 0;
+	background: ${colors.white.toString()};
+	border-radius: 6px 6px 0 0;
+	box-shadow: 0 3px 9px 0 ${colors.black.toRGBString(0.15)};
+	overflow: hidden;
+`;
+
+const PreviewPane: React.StatelessComponent<{}> = props => <StyledPreviewPane dangerouslySetInnerHTML={{
+	__html:
+		'<webview id="preview" style="height: 100%;" src="./preview.html" partition="electron" nodeintegration />'
+}} />;
+
+export default PreviewPane;
diff --git a/src/lsg/patterns/panes/preview-pane/pattern.json b/src/lsg/patterns/panes/preview-pane/pattern.json
new file mode 100644
index 000000000..0ee2a040d
--- /dev/null
+++ b/src/lsg/patterns/panes/preview-pane/pattern.json
@@ -0,0 +1,10 @@
+{
+	"name": "preview-pane",
+	"displayName": "Preview Pane",
+	"flag": "alpha",
+	"version": "1.0.0",
+	"tags": ["atom", "preview-pane"],
+	"patterns": {
+		"colors": "colors"
+	}
+ }
diff --git a/src/lsg/patterns/panes/project-pane/index.tsx b/src/lsg/patterns/panes/project-pane/index.tsx
new file mode 100644
index 000000000..73dcf93a3
--- /dev/null
+++ b/src/lsg/patterns/panes/project-pane/index.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+const StyledProjectPane = styled.div`
+	flex-grow: 1;
+	flex-shrink: 0;
+	flex-basis: 60%;
+`;
+
+const ProjectPane: React.StatelessComponent<{}> = props => <StyledProjectPane>{props.children}</StyledProjectPane>;
+
+export default ProjectPane;
diff --git a/src/lsg/patterns/panes/project-pane/pattern.json b/src/lsg/patterns/panes/project-pane/pattern.json
new file mode 100644
index 000000000..bd368e0b1
--- /dev/null
+++ b/src/lsg/patterns/panes/project-pane/pattern.json
@@ -0,0 +1,9 @@
+{
+	"name": "project-pane",
+	"displayName": "Project Pane",
+	"flag": "alpha",
+	"version": "1.0.0",
+	"tags": ["atom", "project-pane"],
+	"patterns": {
+	}
+ }
diff --git a/src/lsg/patterns/panes/property-pane/index.tsx b/src/lsg/patterns/panes/property-pane/index.tsx
new file mode 100644
index 000000000..d0a49bbf4
--- /dev/null
+++ b/src/lsg/patterns/panes/property-pane/index.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+const StyledPropertyPane = styled.div`
+	flex-grow: 1;
+	flex-shrink: 0;
+	flex-basis: 40%;
+`;
+
+const PropertyPane: React.StatelessComponent<{}> = props => <StyledPropertyPane>{props.children}</StyledPropertyPane>;
+
+export default PropertyPane;
diff --git a/src/lsg/patterns/panes/property-pane/pattern.json b/src/lsg/patterns/panes/property-pane/pattern.json
new file mode 100644
index 000000000..fc5eeac2d
--- /dev/null
+++ b/src/lsg/patterns/panes/property-pane/pattern.json
@@ -0,0 +1,9 @@
+{
+	"name": "property-pane",
+	"displayName": "Property Pane",
+	"flag": "alpha",
+	"version": "1.0.0",
+	"tags": ["atom", "property-pane"],
+	"patterns": {
+	}
+ }