diff --git a/packages/roleypoly-design/src/__test__/__snapshots__/storyshots.test.ts.snap b/packages/roleypoly-design/src/__test__/__snapshots__/storyshots.test.ts.snap
index c52a7ab..8b5d313 100644
--- a/packages/roleypoly-design/src/__test__/__snapshots__/storyshots.test.ts.snap
+++ b/packages/roleypoly-design/src/__test__/__snapshots__/storyshots.test.ts.snap
@@ -1,51 +1,291 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Button Default 1`] = `
-<button
-  className="sc-bdVaJa hPnBtV"
+<styled.button
   disabled={false}
+  loadingPct={0}
   onClick={[Function]}
+  primary={false}
+  secondary={false}
+  theme={
+    Object {
+      "actions": Object {
+        "primary": "#46b646",
+        "primaryText": "#efefef",
+        "secondary": "#e95353",
+        "secondaryText": "#efefef",
+      },
+    }
+  }
 >
   Example
-</button>
+</styled.button>
 `;
 
 exports[`Storyshots Button Disabled 1`] = `
-<button
-  className="sc-bdVaJa hPnBtV"
+<styled.button
   disabled={true}
+  loadingPct={0}
   onClick={[Function]}
+  primary={false}
+  secondary={false}
+  theme={
+    Object {
+      "actions": Object {
+        "primary": "#46b646",
+        "primaryText": "#efefef",
+        "secondary": "#e95353",
+        "secondaryText": "#efefef",
+      },
+    }
+  }
 >
   Example
-</button>
+</styled.button>
 `;
 
 exports[`Storyshots Button Loading 1`] = `
-<button
-  className="sc-bdVaJa hPnBtV"
+<styled.button
   disabled={false}
+  loadingPct={0}
   onClick={[Function]}
+  primary={false}
+  secondary={false}
+  theme={
+    Object {
+      "actions": Object {
+        "primary": "#46b646",
+        "primaryText": "#efefef",
+        "secondary": "#e95353",
+        "secondaryText": "#efefef",
+      },
+    }
+  }
 >
   Example
-</button>
+</styled.button>
 `;
 
 exports[`Storyshots Button Primary 1`] = `
-<button
-  className="sc-bdVaJa hPnBtV"
+<Button
   disabled={false}
-  onClick={[Function]}
+  loading={false}
+  loadingPct={0}
+  onButtonPress={[Function]}
+  overrides={
+    Object {
+      "BaseButton": Object {
+        "component": Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "sc-bwzfXH",
+            "isStatic": false,
+            "rules": Array [
+              "
+  /* reset some styles */
+  box-shadow: none;
+  appearance: none;
+  outline: none;
+  cursor: pointer;
+  background-color: rgba(0,0,0,0.1);
+
+  /* real styles */
+  position: relative;
+  transition: all 0.05s ease-in-out;
+  padding: 1em 1.4em;
+  font-weight: bold;
+  border: 1px solid rgba(0,0,0,0.1);
+
+  &::after {
+    content: \\"\\";
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+
+    /* transparent by default */
+    background-color: transparent;
+
+    transition: background-color 0.05s ease-in-out;
+
+    /* put the overlay behind the text */
+    z-index: -1;
+  }
+
+  /* on hover, raise, brighten and shadow */
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+
+    &::after {
+      background-color: rgba(255, 255, 255, 0.3);
+    }
+  }
+
+  /* on click, lower and darken */
+  &:active {
+    outline: none;
+    box-shadow: none;
+    border-color: rgba(0,0,0,0.2);
+
+    transform: translateY(0);
+
+    &::after {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+  }
+",
+              "
+  background-color: ",
+              [Function],
+              ";
+  color: ",
+              [Function],
+              ";
+",
+            ],
+          },
+          "defaultProps": Object {
+            "theme": Object {
+              "actions": Object {
+                "primary": "#46b646",
+                "primaryText": "#efefef",
+                "secondary": "#e95353",
+                "secondaryText": "#efefef",
+              },
+            },
+          },
+          "displayName": "Styled(styled.button)",
+          "foldedComponentIds": Array [
+            "sc-bdVaJa",
+          ],
+          "render": [Function],
+          "styledComponentId": "sc-bwzfXH",
+          "target": "button",
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        },
+      },
+    }
+  }
+  primary={false}
+  secondary={false}
 >
   Example
-</button>
+</Button>
 `;
 
 exports[`Storyshots Button Secondary 1`] = `
-<button
-  className="sc-bdVaJa hPnBtV"
+<Button
   disabled={false}
-  onClick={[Function]}
+  loading={false}
+  loadingPct={0}
+  onButtonPress={[Function]}
+  overrides={
+    Object {
+      "BaseButton": Object {
+        "component": Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "sc-htpNat",
+            "isStatic": false,
+            "rules": Array [
+              "
+  /* reset some styles */
+  box-shadow: none;
+  appearance: none;
+  outline: none;
+  cursor: pointer;
+  background-color: rgba(0,0,0,0.1);
+
+  /* real styles */
+  position: relative;
+  transition: all 0.05s ease-in-out;
+  padding: 1em 1.4em;
+  font-weight: bold;
+  border: 1px solid rgba(0,0,0,0.1);
+
+  &::after {
+    content: \\"\\";
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+
+    /* transparent by default */
+    background-color: transparent;
+
+    transition: background-color 0.05s ease-in-out;
+
+    /* put the overlay behind the text */
+    z-index: -1;
+  }
+
+  /* on hover, raise, brighten and shadow */
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+
+    &::after {
+      background-color: rgba(255, 255, 255, 0.3);
+    }
+  }
+
+  /* on click, lower and darken */
+  &:active {
+    outline: none;
+    box-shadow: none;
+    border-color: rgba(0,0,0,0.2);
+
+    transform: translateY(0);
+
+    &::after {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+  }
+",
+              "
+  background-color: ",
+              [Function],
+              ";
+  color: ",
+              [Function],
+              ";
+",
+            ],
+          },
+          "defaultProps": Object {
+            "theme": Object {
+              "actions": Object {
+                "primary": "#46b646",
+                "primaryText": "#efefef",
+                "secondary": "#e95353",
+                "secondaryText": "#efefef",
+              },
+            },
+          },
+          "displayName": "Styled(styled.button)",
+          "foldedComponentIds": Array [
+            "sc-bdVaJa",
+          ],
+          "render": [Function],
+          "styledComponentId": "sc-htpNat",
+          "target": "button",
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        },
+      },
+    }
+  }
+  primary={false}
+  secondary={false}
 >
   Example
-</button>
+</Button>
 `;
diff --git a/packages/roleypoly-design/src/__test__/storyshots.test.ts b/packages/roleypoly-design/src/__test__/storyshots.test.ts
index c56bd56..db65899 100644
--- a/packages/roleypoly-design/src/__test__/storyshots.test.ts
+++ b/packages/roleypoly-design/src/__test__/storyshots.test.ts
@@ -1,9 +1,12 @@
+/* jest-env jsdom */
 import * as path from 'path'
 import initStoryshots from '@storybook/addon-storyshots'
+import { shallow } from 'enzyme'
 // import Adapter from 'enzyme-adapter-react-16'
 
-// enzyme.configure({ adapter: new Adapter() })
+// configure({ adapter: new Adapter() })
 
 initStoryshots({
+  renderer: shallow,
   configPath: path.resolve(__dirname, '../../.storybook')
-})
\ No newline at end of file
+})