diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx
index 451f8ce4c7..f6f1cc1f93 100644
--- a/packages/apps/src/Apps.tsx
+++ b/packages/apps/src/Apps.tsx
@@ -11,7 +11,7 @@ import { BareProps as Props } from '@polkadot/react-components/types';
 import React from 'react';
 import store from 'store';
 import styled from 'styled-components';
-import { media } from '@polkadot/react-components';
+import GlobalStyle from '@polkadot/react-components/styles';
 import Signer from '@polkadot/react-signer';
 
 import ConnectingOverlay from './overlays/Connecting';
@@ -59,21 +59,24 @@ class Apps extends React.Component<Props, State> {
     const { isCollapsed, isMenu, menuOpen } = this.state;
 
     return (
-      <div className={`apps-Wrapper ${isCollapsed ? 'collapsed' : 'expanded'} ${isMenu && 'fixed'} ${menuOpen && 'menu-open'} theme--default ${className}`}>
-        {this.renderMenuBg()}
-        <SideBar
-          collapse={this.collapse}
-          handleResize={this.handleResize}
-          menuOpen={menuOpen}
-          isCollapsed={isCollapsed}
-          toggleMenu={this.toggleMenu}
-        />
-        <Signer>
-          <Content />
-        </Signer>
-        <ConnectingOverlay />
-        <AccountsOverlay />
-      </div>
+      <>
+        <GlobalStyle />
+        <div className={`apps-Wrapper ${isCollapsed ? 'collapsed' : 'expanded'} ${isMenu && 'fixed'} ${menuOpen && 'menu-open'} theme--default ${className}`}>
+          {this.renderMenuBg()}
+          <SideBar
+            collapse={this.collapse}
+            handleResize={this.handleResize}
+            menuOpen={menuOpen}
+            isCollapsed={isCollapsed}
+            toggleMenu={this.toggleMenu}
+          />
+          <Signer>
+            <Content />
+          </Signer>
+          <ConnectingOverlay />
+          <AccountsOverlay />
+        </div>
+      </>
     );
   }
 
@@ -179,13 +182,4 @@ export default styled(Apps)`
   box-sizing: border-box;
   display: flex;
   min-height: 100vh;
-
-  header {
-    margin-bottom: 1.4rem;
-    text-align: center;
-
-    ${media.TABLET`
-      margin-bottom: 2rem;
-   `}
-  }
 `;
diff --git a/packages/apps/src/index.tsx b/packages/apps/src/index.tsx
index e554994714..6bd01b728e 100644
--- a/packages/apps/src/index.tsx
+++ b/packages/apps/src/index.tsx
@@ -5,8 +5,8 @@
 // import first, get the load done
 import settings from '@polkadot/ui-settings';
 
+import 'semantic-ui-css/semantic.min.css';
 import '@polkadot/react-components/i18n';
-import '@polkadot/react-components/styles';
 
 import queryString from 'query-string';
 import React, { Suspense } from 'react';
diff --git a/packages/react-components/src/media.ts b/packages/react-components/src/media.ts
index 7d6167dfe5..d6692b53eb 100644
--- a/packages/react-components/src/media.ts
+++ b/packages/react-components/src/media.ts
@@ -12,7 +12,7 @@ type MediaCss = {
 
 const media = Object
   .keys(ScreenSizes)
-  .reduce((acc, label: any): MediaCss => {
+  .reduce((acc: MediaCss, label: any): MediaCss => {
     const size: number = ScreenSizes[label] as any;
 
     acc[label] = (values: TemplateStringsArray): unknown =>
diff --git a/packages/react-components/src/styles.ts b/packages/react-components/src/styles.ts
deleted file mode 100644
index 883c8b3d9e..0000000000
--- a/packages/react-components/src/styles.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-components authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import 'semantic-ui-css/semantic.min.css';
-
-import './styles/semantic.css';
-import './styles/theme/default.css';
-
-import './styles/app.css';
-import './styles/form.css';
-import './styles/media.css';
-import './styles/rx.css';
-import './styles/components.css';
diff --git a/packages/react-components/src/styles/app.css b/packages/react-components/src/styles/app.css
deleted file mode 100644
index ccdb5db857..0000000000
--- a/packages/react-components/src/styles/app.css
+++ /dev/null
@@ -1,145 +0,0 @@
-/* Copyright 2017-2019 @polkadot/react-components authors & contributors
-/* This software may be modified and distributed under the terms
-/* of the Apache-2.0 license. See the LICENSE file for details. */
-
-html {
-  height: 100%;
-}
-
-body {
-  height: 100%;
-  margin: 0;
-}
-
-#root {
-  color: #4e4e4e;
-  font-family: sans-serif;
-  height: 100%;
-}
-
-a {
-  cursor: pointer;
-}
-
-h1, h2, h3, h4, h5 {
-  color: rgba(0, 0, 0, .6);
-  font-family: sans-serif;
-  font-weight: 100;
-}
-
-h1 {
-  text-transform: lowercase;
-
-  em {
-    font-style: normal;
-    text-transform: none;
-  }
-}
-
-h3, h4, h5 {
-  margin-bottom: 0.25rem;
-}
-
-label {
-  box-sizing: border-box;
-  color: rgba(78,78,78,.85);
-  display: block;
-  font-family: sans-serif;
-  font-size: 1rem;
-  font-weight: 100;
-  /* margin: 0.25rem; */
-}
-
-/*
-a:hover {
-  color: #D75EA1;
-}
-*/
-
-br {
-  line-height: 1.5rem;
-}
-
-main {
-  min-height: 100vh;
-}
-
-main > section {
-  margin-bottom: 2em;
-}
-
-header > article {
-  background: transparent;
-}
-
-article {
-  background: white;
-  border: 1px solid #f2f2f2;
-  border-radius: 0.25rem;
-  box-sizing: border-box;
-  margin: 0.25rem;
-  padding: 1.25rem;
-  position: relative;
-  text-align: left;
-
-  &:hover {
-    /* box-shadow: 0 4px 8px rgba(0,0,0,0.1); */
-    /* box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-    border-color: transparent; */
-  }
-
-  &.padded {
-    padding: 0.75rem 1rem;
-
-    > div {
-      margin: 0.25rem;
-    }
-  }
-
-  &.error {
-    background: #fff6f6;
-    border-color: #e0b4b4;
-    color: #9f3a38;
-  }
-
-  &.warning {
-    background: #ffffe0;
-    border-color: #eeeeae;
-  }
-
-  > ul {
-    margin: 0;
-    padding: 0;
-  }
-
-  &:not(:hover) {
-    .ui.button:not(.disabled) {
-      background: #eee !important;
-      color: #555 !important;
-    }
-
-    .ui.toggle.checkbox input:checked~.box:before,
-    .ui.toggle.checkbox input:checked~label:before {
-      background-color: #eee !important;
-    }
-
-    .ui.button.mini {
-      visibility: hidden;
-    }
-  }
-}
-
-details {
-  cursor: pointer;
-
-  &[open] > summary {
-    white-space: normal;
-  }
-
-  > summary {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    outline: none;
-  }
-}
diff --git a/packages/react-components/src/styles/components.css b/packages/react-components/src/styles/components.css
deleted file mode 100644
index eacd6c146a..0000000000
--- a/packages/react-components/src/styles/components.css
+++ /dev/null
@@ -1,108 +0,0 @@
-/* Copyright 2017-2019 @polkadot/react-components authors & contributors
-/* This software may be modified and distributed under the terms
-/* of the Apache-2.0 license. See the LICENSE file for details. */
-
-@import './partials/_variables.css';
-
-.ui--output {
-  background: #fefefe;
-  border-radius: 4px;
-  border: 1px dashed #eee;
-  box-sizing: border-box;
-  line-height: 1rem;
-  margin: 0.25rem;
-  padding: .75rem 1rem;
-  position: relative;
-  word-wrap: break-word;
-
-  &.error {
-    background: #fff6f6;
-    border-color: #e0b4b4;
-  }
-
-  &.monospace {
-    font-family: monospace;
-  }
-
-  .ui--output-button {
-    position: absolute;
-    top: 0.25rem;
-    right: 0.25rem;
-  }
-}
-
-.ui--Button-Group .button {
-  border-radius: $small-corner !important;
-}
-
-header .ui--Button-Group {
-  text-align: center;
-}
-
-.ui.input .ui--Button-Group {
-  margin: 0;
-}
-
-button.ui.icon.iconButton {
-  padding: 0em 0em .3em .3em !important;
-  color: #2e86ab  !important;
-  background: none  !important;
-}
-
-.editable {
-  cursor: pointer;
-}
-
-.ui--DropdownLinked.ui--row {
-  .small .ui.selection.dropdown {
-    border-right: none;
-    border-bottom-right-radius: 0;
-    border-top-right-radius: 0;
-    min-width: 5rem;
-  }
-
-  .large .ui.selection.dropdown {
-    border-left: none;
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-  }
-}
-
-.ui--Input {
-  &.disabled {
-    overflow: hidden;
-
-    input {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  .ui--SiDropdown {
-    width: 6rem;
-    text-align: center;
-  }
-
-  .ui--MaxButton {
-    position: absolute;
-    right: 6.5rem;
-    top: 20%;
-    height: 60%;
-    text-transform: uppercase;
-    padding: 0 0.5rem !important;
-    border-radius: 0.3rem !important;
-  }
-}
-
-.ui--Static {
-  min-width: 2rem; /* adjust width from normal dropdown sizing */
-  overflow: hidden;
-  word-break: break-all;
-}
-
-.ui--Tooltip {
-  text-align: center;
-  z-index: 1002;
-  max-width: 300px;
-}
diff --git a/packages/react-components/src/styles/components.ts b/packages/react-components/src/styles/components.ts
new file mode 100644
index 0000000000..6d72e96c41
--- /dev/null
+++ b/packages/react-components/src/styles/components.ts
@@ -0,0 +1,110 @@
+// Copyright 2017-2019 @polkadot/react-components authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { css } from 'styled-components';
+
+export default css`
+  .ui--output {
+    background: #fefefe;
+    border-radius: 4px;
+    border: 1px dashed #eee;
+    box-sizing: border-box;
+    line-height: 1rem;
+    margin: 0.25rem;
+    padding: .75rem 1rem;
+    position: relative;
+    word-wrap: break-word;
+
+    &.error {
+      background: #fff6f6;
+      border-color: #e0b4b4;
+    }
+
+    &.monospace {
+      font-family: monospace;
+    }
+
+    .ui--output-button {
+      position: absolute;
+      top: 0.25rem;
+      right: 0.25rem;
+    }
+  }
+
+  .ui--Button-Group .button {
+    border-radius: .28571429rem !important;
+  }
+
+  header .ui--Button-Group {
+    text-align: center;
+  }
+
+  .ui.input .ui--Button-Group {
+    margin: 0;
+  }
+
+  button.ui.icon.iconButton {
+    padding: 0em 0em .3em .3em !important;
+    color: #2e86ab  !important;
+    background: none  !important;
+  }
+
+  .editable {
+    cursor: pointer;
+  }
+
+  .ui--DropdownLinked.ui--row {
+    .small .ui.selection.dropdown {
+      border-right: none;
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      min-width: 5rem;
+    }
+
+    .large .ui.selection.dropdown {
+      border-left: none;
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
+
+  .ui--Input {
+    &.disabled {
+      overflow: hidden;
+
+      input {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    .ui--SiDropdown {
+      width: 6rem;
+      text-align: center;
+    }
+
+    .ui--MaxButton {
+      position: absolute;
+      right: 6.5rem;
+      top: 20%;
+      height: 60%;
+      text-transform: uppercase;
+      padding: 0 0.5rem !important;
+      border-radius: 0.3rem !important;
+    }
+  }
+
+  .ui--Static {
+    min-width: 2rem; /* adjust width from normal dropdown sizing */
+    overflow: hidden;
+    word-break: break-all;
+  }
+
+  .ui--Tooltip {
+    text-align: center;
+    z-index: 1002;
+    max-width: 300px;
+  }
+`;
diff --git a/packages/react-components/src/styles/form.css b/packages/react-components/src/styles/form.css
deleted file mode 100644
index 7803e682ee..0000000000
--- a/packages/react-components/src/styles/form.css
+++ /dev/null
@@ -1,71 +0,0 @@
-/* Copyright 2017-2019 @polkadot/react-components authors & contributors
-/* This software may be modified and distributed under the terms
-/* of the Apache-2.0 license. See the LICENSE file for details. */
-
-.ui--grid,
-.ui--row {
-  width: 100%;
-}
-
-.ui--grid,
-.ui--row {
-  align-items: stretch;
-  display: flex;
-  flex-wrap: nowrap;
-  flex-direction: row;
-  justify-content: flex-start;
-  text-align: left;
-  min-width: 0;
-}
-
-.ui--grid > div,
-.ui--row > div {
-  box-sizing: border-box;
-  min-width: 0;
-}
-
-.ui--grid > div:not(.grow):not(.shrink),
-.ui--row > div:not(.grow):not(.shrink) {
-  width: 100%;
-}
-
-.ui--grid > div:not(.shrink),
-.ui--grid > div.full,
-.ui--row > div.full {
-  flex: 0 100%;
-}
-
-.ui--grid > div.shrink,
-.ui--row > div.shrink {
-  flex: 0 1 auto;
-}
-
-.ui--grid > div.grow,
-.ui--row > div.grow {
-  flex: 1 1 auto;
-}
-
-.ui--grid > div.large,
-.ui--row > div.large {
-  flex: 0 75%;
-}
-
-.ui--grid > div.medium,
-.ui--row > div.medium {
-  flex: 0 50%;
-}
-
-.ui--grid > div.small,
-.ui--row > div.small {
-  flex: 0 25%;
-}
-
-.ui--grid > div.sixty6,
-.ui--row > div.sixty6 {
-  flex: 0 66.66%;
-}
-
-.ui--grid > div.thirty3,
-.ui--row > div.thirty3 {
-  flex: 0 33.33%;
-}
diff --git a/packages/react-components/src/styles/form.ts b/packages/react-components/src/styles/form.ts
new file mode 100644
index 0000000000..998d62cee9
--- /dev/null
+++ b/packages/react-components/src/styles/form.ts
@@ -0,0 +1,75 @@
+// Copyright 2017-2019 @polkadot/react-components authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { css } from 'styled-components';
+
+export default css`
+  .ui--grid,
+  .ui--row {
+    width: 100%;
+  }
+
+  .ui--grid,
+  .ui--row {
+    align-items: stretch;
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    justify-content: flex-start;
+    text-align: left;
+    min-width: 0;
+  }
+
+  .ui--grid > div,
+  .ui--row > div {
+    box-sizing: border-box;
+    min-width: 0;
+  }
+
+  .ui--grid > div:not(.grow):not(.shrink),
+  .ui--row > div:not(.grow):not(.shrink) {
+    width: 100%;
+  }
+
+  .ui--grid > div:not(.shrink),
+  .ui--grid > div.full,
+  .ui--row > div.full {
+    flex: 0 100%;
+  }
+
+  .ui--grid > div.shrink,
+  .ui--row > div.shrink {
+    flex: 0 1 auto;
+  }
+
+  .ui--grid > div.grow,
+  .ui--row > div.grow {
+    flex: 1 1 auto;
+  }
+
+  .ui--grid > div.large,
+  .ui--row > div.large {
+    flex: 0 75%;
+  }
+
+  .ui--grid > div.medium,
+  .ui--row > div.medium {
+    flex: 0 50%;
+  }
+
+  .ui--grid > div.small,
+  .ui--row > div.small {
+    flex: 0 25%;
+  }
+
+  .ui--grid > div.sixty6,
+  .ui--row > div.sixty6 {
+    flex: 0 66.66%;
+  }
+
+  .ui--grid > div.thirty3,
+  .ui--row > div.thirty3 {
+    flex: 0 33.33%;
+  }
+`;
diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts
new file mode 100644
index 0000000000..1387cc53d5
--- /dev/null
+++ b/packages/react-components/src/styles/index.ts
@@ -0,0 +1,167 @@
+// Copyright 2017-2019 @polkadot/react-components authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { createGlobalStyle } from 'styled-components';
+
+import media from '../media';
+import cssComponents from './components';
+import cssForm from './form';
+import cssMedia from './media';
+import cssRx from './rx';
+import cssSemantic from './semantic';
+import cssTheme from './theme';
+
+export default createGlobalStyle`
+  #root {
+    color: #4e4e4e;
+    font-family: sans-serif;
+    height: 100%;
+  }
+
+  a {
+    cursor: pointer;
+  }
+
+  article {
+    background: white;
+    border: 1px solid #f2f2f2;
+    border-radius: 0.25rem;
+    box-sizing: border-box;
+    margin: 0.25rem;
+    padding: 1.25rem;
+    position: relative;
+    text-align: left;
+
+    &:hover {
+      /* box-shadow: 0 4px 8px rgba(0,0,0,0.1); */
+      /* box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+      border-color: transparent; */
+    }
+
+    &:not(:hover) {
+      .ui.button:not(.disabled) {
+        background: #eee !important;
+        color: #555 !important;
+      }
+
+      .ui.toggle.checkbox input:checked~.box:before,
+      .ui.toggle.checkbox input:checked~label:before {
+        background-color: #eee !important;
+      }
+
+      .ui.button.mini {
+        visibility: hidden;
+      }
+    }
+
+    > ul {
+      margin: 0;
+      padding: 0;
+    }
+
+    &.error {
+      background: #fff6f6;
+      border-color: #e0b4b4;
+      color: #9f3a38;
+    }
+
+    &.padded {
+      padding: 0.75rem 1rem;
+
+      > div {
+        margin: 0.25rem;
+      }
+    }
+
+    &.warning {
+      background: #ffffe0;
+      border-color: #eeeeae;
+    }
+  }
+
+  body {
+    height: 100%;
+    margin: 0;
+  }
+
+  br {
+    line-height: 1.5rem;
+  }
+
+  details {
+    cursor: pointer;
+
+    &[open] > summary {
+      white-space: normal;
+    }
+
+    > summary {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      outline: none;
+    }
+  }
+
+  h1, h2, h3, h4, h5 {
+    color: rgba(0, 0, 0, .6);
+    font-family: sans-serif;
+    font-weight: 100;
+  }
+
+  h1 {
+    text-transform: lowercase;
+
+    em {
+      font-style: normal;
+      text-transform: none;
+    }
+  }
+
+  h3, h4, h5 {
+    margin-bottom: 0.25rem;
+  }
+
+  header {
+    margin-bottom: 1.4rem;
+    text-align: center;
+
+    ${media.TABLET`
+      margin-bottom: 2rem;
+   `}
+
+    > article {
+      background: transparent;
+    }
+  }
+
+  html {
+    height: 100%;
+  }
+
+  label {
+    box-sizing: border-box;
+    color: rgba(78,78,78,.85);
+    display: block;
+    font-family: sans-serif;
+    font-size: 1rem;
+    font-weight: 100;
+  }
+
+  main {
+    min-height: 100vh;
+
+    > section {
+      margin-bottom: 2em;
+    }
+  }
+
+  /* Add our overrides */
+  ${cssSemantic}
+  ${cssTheme}
+  ${cssForm}
+  ${cssMedia}
+  ${cssRx}
+  ${cssComponents}
+`;
diff --git a/packages/react-components/src/styles/media.css b/packages/react-components/src/styles/media.css
deleted file mode 100644
index bbf9053977..0000000000
--- a/packages/react-components/src/styles/media.css
+++ /dev/null
@@ -1,90 +0,0 @@
-/* Copyright 2017-2019 @polkadot/react-components authors & contributors
-/* This software may be modified and distributed under the terms
-/* of the Apache-2.0 license. See the LICENSE file for details. */
-
-/* block by default, flex as per media queries below */
-.ui--flex-large,
-.ui--flex-medium,
-.ui--flex-small {
-  display: block;
-}
-
-/* hide all by default, add as per media queries below */
-.ui--media-large,
-.ui--media-medium,
-.ui--media-small {
-  height: 0;
-  visibility: hidden;
-  width: 0;
-}
-
-td.ui--media-large,
-td.ui--media-medium,
-td.ui--media-small,
-th.ui--media-large,
-th.ui--media-medium,
-th.ui--media-small {
-  display: none;
-}
-
-@media (min-width: 1281px) {
-  .ui--flex-large {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .ui--media-large {
-    height: auto;
-    visibility: visible;
-    width: auto;
-  }
-
-  td.ui--media-large,
-  th.ui--media-large {
-    display: table-cell;
-  }
-}
-
-@media (min-width: 1025px) {
-  .ui--flex-medium {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .ui--media-medium {
-    height: auto;
-    visibility: visible;
-    width: auto;
-  }
-
-  td.ui--media-medium,
-  th.ui--media-medium {
-    display: table-cell;
-  }
-}
-
-@media (min-width: 768px) {
-  .ui--flex-small {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .ui--media-small {
-    height: auto;
-    visibility: visible;
-    width: auto;
-
-  }
-
-  td.ui--media-small,
-  th.ui--media-small {
-    display: table-cell;
-  }
-}
-
-/* tabs */
-@media (max-width: 991px) {
-  .ui.menu.tabular {
-    padding-left: 5.2rem !important;
-  }
-}
diff --git a/packages/react-components/src/styles/media.ts b/packages/react-components/src/styles/media.ts
new file mode 100644
index 0000000000..5082471d31
--- /dev/null
+++ b/packages/react-components/src/styles/media.ts
@@ -0,0 +1,94 @@
+// Copyright 2017-2019 @polkadot/react-components authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { css } from 'styled-components';
+
+export default css`
+  /* block by default, flex as per media queries below */
+  .ui--flex-large,
+  .ui--flex-medium,
+  .ui--flex-small {
+    display: block;
+  }
+
+  /* hide all by default, add as per media queries below */
+  .ui--media-large,
+  .ui--media-medium,
+  .ui--media-small {
+    height: 0;
+    visibility: hidden;
+    width: 0;
+  }
+
+  td.ui--media-large,
+  td.ui--media-medium,
+  td.ui--media-small,
+  th.ui--media-large,
+  th.ui--media-medium,
+  th.ui--media-small {
+    display: none;
+  }
+
+  @media (min-width: 1281px) {
+    .ui--flex-large {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .ui--media-large {
+      height: auto;
+      visibility: visible;
+      width: auto;
+    }
+
+    td.ui--media-large,
+    th.ui--media-large {
+      display: table-cell;
+    }
+  }
+
+  @media (min-width: 1025px) {
+    .ui--flex-medium {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .ui--media-medium {
+      height: auto;
+      visibility: visible;
+      width: auto;
+    }
+
+    td.ui--media-medium,
+    th.ui--media-medium {
+      display: table-cell;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .ui--flex-small {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .ui--media-small {
+      height: auto;
+      visibility: visible;
+      width: auto;
+
+    }
+
+    td.ui--media-small,
+    th.ui--media-small {
+      display: table-cell;
+    }
+  }
+
+  /* tabs */
+  @media (max-width: 991px) {
+    .ui.menu.tabular {
+      padding-left: 5.2rem !important;
+    }
+  }
+`;
diff --git a/packages/react-components/src/styles/partials/_variables.css b/packages/react-components/src/styles/old-theme.ts-unused
similarity index 56%
rename from packages/react-components/src/styles/partials/_variables.css
rename to packages/react-components/src/styles/old-theme.ts-unused
index 18cfc94a5d..98c4d8a7b8 100644
--- a/packages/react-components/src/styles/partials/_variables.css
+++ b/packages/react-components/src/styles/old-theme.ts-unused
@@ -2,4 +2,10 @@
 /* This software may be modified and distributed under the terms
 /* of the Apache-2.0 license. See the LICENSE file for details. */
 
-$small-corner: .28571429rem;
+import theme from 'styled-theming';
+
+export const primaryColor = theme('theme', {
+  substrate: '#DB2828',
+  polkadot: '#E6007A',
+  default: 'darkorange'
+});
diff --git a/packages/react-components/src/styles/rx.css b/packages/react-components/src/styles/rx.css
deleted file mode 100644
index da73f032f5..0000000000
--- a/packages/react-components/src/styles/rx.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/* Copyright 2017-2019 @polkadot/react-components authors & contributors
-/* This software may be modified and distributed under the terms
-/* of the Apache-2.0 license. See the LICENSE file for details. */
-
-.rx--updated {
-  background: #ffffe0 !important;
-  transition: all 0.7s ease-out;
-}
diff --git a/packages/react-components/src/styles/rx.ts b/packages/react-components/src/styles/rx.ts
new file mode 100644
index 0000000000..6bced3114b
--- /dev/null
+++ b/packages/react-components/src/styles/rx.ts
@@ -0,0 +1,12 @@
+// Copyright 2017-2019 @polkadot/react-components authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { css } from 'styled-components';
+
+export default css`
+  .rx--updated {
+    background: #ffffe0 !important;
+    transition: all 0.7s ease-out;
+  }
+`;
diff --git a/packages/react-components/src/styles/semantic.css b/packages/react-components/src/styles/semantic.css
deleted file mode 100644
index ffbed10fab..0000000000
--- a/packages/react-components/src/styles/semantic.css
+++ /dev/null
@@ -1,204 +0,0 @@
-/* Copyright 2017-2019 @polkadot/react-components authors & contributors
-/* This software may be modified and distributed under the terms
-/* of the Apache-2.0 license. See the LICENSE file for details. */
-
-@import 'partials/_variables.css';
-
-.ui.hidden.divider {
-  margin: 0.5rem 0;
-}
-
-.ui.dropdown {
-  display: block;
-  min-width: 0;
-  width: 100%;
-}
-
-.ui.dropdown,
-.ui.input {
-  margin: 0.25rem 0;
-}
-
-.ui.selection.dropdown,
-.ui.input > input {
-  color: inherit;
-}
-
-.ui.dropdown {
-  &.disabled {
-    background: transparent;
-    border-color: #eee;
-    border-style: dashed;
-    opacity: 1;
-
-    .dropdown.icon {
-      opacity: 0;
-    }
-  }
-
-  > .text {
-    min-height: 1em;
-  }
-}
-
-.ui.dropdown .menu > .item.header.disabled {
-  margin: 1em 0 0 0;
-  opacity: 1;
-}
-
-.ui.dropdown .menu > .item.header.disabled:hover,
-.ui.dropdown .menu > .item.header.disabled.selected {
-  background: white;
-}
-
-.ui.input {
-  width: 100%;
-
-  &.disabled {
-    opacity: 1;
-
-    input {
-      background: #fefefe;
-      border-color: #eee;
-      /* border-color: transparent; */
-      border-style: dashed;
-    }
-
-    .ui.primary.buttons .ui.button {
-      background: #eee;
-      border-color: transparent;
-      border-left-color: transparent;
-      color: #4e4e4e;
-
-      .dropdown.icon {
-        opacity: 0;
-      }
-    }
-  }
-
-  > input {
-    /* from .ui.fluid.input > input */
-    width: 0;
-  }
-}
-
-.ui.inverted.dimmer {
-  background-color: rgba(255, 255, 255, 0.75);
-  padding: 0 1rem 1rem;
-}
-
-.ui.label:not(.ui--Bubble) {
-  background: transparent;
-  font-weight: normal;
-  position: relative;
-  z-index: 1;
-}
-
-.ui.modal {
-  background: #fafafa /* #fff */;
-  color: #4e4e4e;
-  font-family: sans-serif;
-
-  > .actions,
-  > .content {
-    background: transparent;
-  }
-
-  > .actions {
-    border-top: none;
-    text-align: right;
-    padding: 1rem !important;
-  }
-
-  > .header:not(.ui) {
-    background: #f5f5f5;
-    font-size: 1.25rem !important;
-    font-weight: normal;
-    line-height: 1.25rem;
-    padding: 1rem 1.5rem;
-
-    > label {
-      margin-top: 0.5rem;
-    }
-  }
-
-  > :first-child:not(.icon) {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-
-  .description {
-    margin: 1.5em 0;
-    font-weight: 700;
-  }
-}
-
-.ui.page.modals.transition.visible {
-  display: flex !important;
-}
-
-.ui.progress {
-  &.tiny {
-    font-size: .5rem;
-  }
-
-  .bar {
-    min-width: 0 !important;
-  }
-}
-
-.ui.secondary.vertical.menu > .item {
-  margin: 0;
-}
-
-.ui[class*="left icon"].input.left.icon > input {
-  padding-left: 4rem !important;
-}
-
-.ui[class*="left icon"].input.left.icon > i.icon.big {
-  left: -7px;
-  opacity: 1;
-}
-
-.ui.button:disabled,
-.ui.buttons .disabled.button,
-.ui.disabled.active.button,
-.ui.disabled.button,
-.ui.disabled.button:hover {
-  opacity: 0.2 !important;
-}
-
-/* modals aligned to top, not center */
-.ui.dimmer {
-  justify-content: flex-start;
-}
-
-.ui.menu.tabular {
-  border-color: #e6e6e6;
-  /* break out of the wrapping main padding */
-  margin: -1em -2em 0;
-  overflow-x: scroll;
-  padding: 2em 2em 0 2em;
-  transition: padding-left 0.2s linear 0.4s;
-
-  &::-webkit-scrollbar {
-    display: none;
-    width: 0px;
-  }
-
-  .item {
-    border-bottom: 2px solid rgba(0, 0, 0, 0);
-    border: none;
-    top: -1px;
-
-    &.active {
-      background: none; /* #fafafa */;
-      border-bottom: 2px solid #db2828;
-    }
-  }
-}
-
-/* remove the default white background, settigns app has it as part of Tab */
-.ui.segment {
-  background: transparent;
-}
diff --git a/packages/react-components/src/styles/semantic.ts b/packages/react-components/src/styles/semantic.ts
new file mode 100644
index 0000000000..85fb78dc0b
--- /dev/null
+++ b/packages/react-components/src/styles/semantic.ts
@@ -0,0 +1,204 @@
+// Copyright 2017-2019 @polkadot/react-components authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { css } from 'styled-components';
+
+export default css`
+  .ui.hidden.divider {
+    margin: 0.5rem 0;
+  }
+
+  .ui.dropdown {
+    display: block;
+    min-width: 0;
+    width: 100%;
+  }
+
+  .ui.dropdown,
+  .ui.input {
+    margin: 0.25rem 0;
+  }
+
+  .ui.selection.dropdown,
+  .ui.input > input {
+    color: inherit;
+  }
+
+  .ui.dropdown {
+    &.disabled {
+      background: transparent;
+      border-color: #eee;
+      border-style: dashed;
+      opacity: 1;
+
+      .dropdown.icon {
+        opacity: 0;
+      }
+    }
+
+    > .text {
+      min-height: 1em;
+    }
+  }
+
+  .ui.dropdown .menu > .item.header.disabled {
+    margin: 1em 0 0 0;
+    opacity: 1;
+  }
+
+  .ui.dropdown .menu > .item.header.disabled:hover,
+  .ui.dropdown .menu > .item.header.disabled.selected {
+    background: white;
+  }
+
+  .ui.input {
+    width: 100%;
+
+    &.disabled {
+      opacity: 1;
+
+      input {
+        background: #fefefe;
+        border-color: #eee;
+        border-style: dashed;
+      }
+
+      .ui.primary.buttons .ui.button {
+        background: #eee;
+        border-color: transparent;
+        border-left-color: transparent;
+        color: #4e4e4e;
+
+        .dropdown.icon {
+          opacity: 0;
+        }
+      }
+    }
+
+    > input {
+      width: 0;
+    }
+  }
+
+  .ui.inverted.dimmer {
+    background-color: rgba(255, 255, 255, 0.75);
+    padding: 0 1rem 1rem;
+  }
+
+  .ui.label:not(.ui--Bubble) {
+    background: transparent;
+    font-weight: normal;
+    position: relative;
+    z-index: 1;
+  }
+
+  .ui.modal {
+    background: #fafafa;
+    color: #4e4e4e;
+    font-family: sans-serif;
+
+    > .actions,
+    > .content {
+      background: transparent;
+    }
+
+    > .actions {
+      border-top: none;
+      text-align: right;
+      padding: 1rem !important;
+    }
+
+    > .header:not(.ui) {
+      background: #f5f5f5;
+      font-size: 1.25rem !important;
+      font-weight: normal;
+      line-height: 1.25rem;
+      padding: 1rem 1.5rem;
+
+      > label {
+        margin-top: 0.5rem;
+      }
+    }
+
+    > :first-child:not(.icon) {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    .description {
+      margin: 1.5em 0;
+      font-weight: 700;
+    }
+  }
+
+  .ui.page.modals.transition.visible {
+    display: flex !important;
+  }
+
+  .ui.progress {
+    &.tiny {
+      font-size: .5rem;
+    }
+
+    .bar {
+      min-width: 0 !important;
+    }
+  }
+
+  .ui.secondary.vertical.menu > .item {
+    margin: 0;
+  }
+
+  .ui[class*="left icon"].input.left.icon > input {
+    padding-left: 4rem !important;
+  }
+
+  .ui[class*="left icon"].input.left.icon > i.icon.big {
+    left: -7px;
+    opacity: 1;
+  }
+
+  .ui.button:disabled,
+  .ui.buttons .disabled.button,
+  .ui.disabled.active.button,
+  .ui.disabled.button,
+  .ui.disabled.button:hover {
+    opacity: 0.2 !important;
+  }
+
+  /* modals aligned to top, not center */
+  .ui.dimmer {
+    justify-content: flex-start;
+  }
+
+  .ui.menu.tabular {
+    border-color: #e6e6e6;
+    /* break out of the wrapping main padding */
+    margin: -1em -2em 0;
+    overflow-x: scroll;
+    padding: 2em 2em 0 2em;
+    transition: padding-left 0.2s linear 0.4s;
+
+    &::-webkit-scrollbar {
+      display: none;
+      width: 0px;
+    }
+
+    .item {
+      border-bottom: 2px solid rgba(0, 0, 0, 0);
+      border: none;
+      top: -1px;
+
+      &.active {
+        background: none;;
+        border-bottom: 2px solid #db2828;
+      }
+    }
+  }
+
+  /* remove the default white background, settings app has it as part of Tab */
+  .ui.segment {
+    background: transparent;
+  }
+`;
diff --git a/packages/react-components/src/styles/theme.ts b/packages/react-components/src/styles/theme.ts
index 98c4d8a7b8..0a03b63747 100644
--- a/packages/react-components/src/styles/theme.ts
+++ b/packages/react-components/src/styles/theme.ts
@@ -1,11 +1,107 @@
-/* Copyright 2017-2019 @polkadot/react-components authors & contributors
-/* This software may be modified and distributed under the terms
-/* of the Apache-2.0 license. See the LICENSE file for details. */
+// Copyright 2017-2019 @polkadot/react-components authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
 
-import theme from 'styled-theming';
+import { css } from 'styled-components';
 
-export const primaryColor = theme('theme', {
-  substrate: '#DB2828',
-  polkadot: '#E6007A',
-  default: 'darkorange'
-});
+/* default buttons, dark gray */
+const colorBtnDefault = '#666';
+
+/* highlighted buttons, orange */
+const colorBtnHighlight = '#f19135';
+
+/* primary buttons, blue */
+const colorBtnPrimary = '#2e86ab';
+
+/* button text color */
+const colorBtnText = '#f9f9f9';
+
+export default css`
+  .theme--default {
+    a {
+      color: ${colorBtnPrimary};
+
+      &:hover,
+      a:visited {
+        color: ${colorBtnPrimary};
+      }
+    }
+
+    .ui.button,
+    .ui.buttons .button {
+      background-color: ${colorBtnDefault};
+      color: ${colorBtnText};
+
+      &.active,
+      &:active,
+      &:focus,
+      &:hover {
+        background-color: ${colorBtnDefault};
+        color: ${colorBtnText};
+      }
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+
+    .ui.basic.negative.button {
+      box-shadow: 0 0 0 1px ${colorBtnHighlight} inset !important;
+      color: ${colorBtnHighlight} !important;
+    }
+
+    .ui.negative.button,
+    .ui.buttons .negative.button {
+      background-color: ${colorBtnHighlight};
+
+      &.active,
+      &:active,
+      &:focus,
+      &:hover {
+        background-color: ${colorBtnHighlight};
+      }
+    }
+
+    .ui.primary.button,
+    .ui.buttons .primary.button
+    /*, .ui.primary.buttons .button (for dropdowns) */ {
+      background-color: ${colorBtnPrimary};
+
+      &.active,
+      &:active,
+      &:focus,
+      &:hover {
+        background-color: ${colorBtnPrimary};
+      }
+    }
+
+    .ui.blue.progress .bar {
+      background-color: ${colorBtnHighlight};
+    }
+
+    .ui.modal > .header:not(.ui) {
+      border-bottom-color: ${colorBtnHighlight};
+    }
+
+    .ui.menu.tabular .item.active {
+      border-bottom-color: ${colorBtnHighlight};
+    }
+
+    /* this is for dropdown buttons */
+    .ui.buttons .ui.button.selection.visible.dropdown {
+      &:hover {
+        /* reset opacity, this is now open */
+        opacity: 1;
+      }
+
+      > .text:not(.default) {
+        color: ${colorBtnText};
+      }
+    }
+
+    .ui.toggle.checkbox input:checked~.box:before,
+    .ui.toggle.checkbox input:checked~label:before {
+      background-color: ${colorBtnHighlight} !important;
+    }
+  }
+`;
diff --git a/packages/react-components/src/styles/theme/_colors-polkadot.css b/packages/react-components/src/styles/theme/_colors-polkadot.css
deleted file mode 100644
index 869d28add2..0000000000
--- a/packages/react-components/src/styles/theme/_colors-polkadot.css
+++ /dev/null
@@ -1,52 +0,0 @@
-/* Copyright 2017-2019 @polkadot/react-components authors & contributors
-/* This software may be modified and distributed under the terms
-/* of the Apache-2.0 license. See the LICENSE file for details. */
-
-$green: #77c689;
-$orange: #f6a46e;
-$red: #e97f7f;
-
-$pewter-blue: #89acb4;
-$dark-sky-blue: #96bdc6;
-
-$silver-chalice: #a1b1b5;
-$cadet-grey: #98aaae;
-
-$wild-orchid: #d75ea1;
-$wild-orchid-hl: #df7eb3;
-
-$middle-purple: #e189ba;
-
-$light-slate-gray: #718d94;
-
-$moonstone-blue: #64bebe;
-$verdigris: #5badad;
-
-$primary-color: #2e86ab;
-$primary-color-hl: #579ebb;
-/*$primary-color: #d75ea1;
-$primary-color-hl: #d24a95;*/
-$secondary-color: #2e86ab;
-$secondary-color-hl: #579ebb;
-
-/*
-$anchor-color: #d75ea1;
-$anchor-color-hover: #d24a95;
-*/
-$anchor-color: $secondary-color;
-$anchor-color-hover: $secondary-color-hl;
-
-$button-primary-color: $primary-color;
-$button-primary-color-hover: $primary-color-hl;
-
-$button-color: $secondary-color;
-$button-color-hover: $secondary-color-hl;
-
-$button-positive-color: $moonstone-blue;
-$button-positive-color-hover: $verdigris;
-
-$button-negative-color: $wild-orchid;
-$button-negative-color-hover: $middle-purple;
-
-$progress-bar-color: $wild-orchid;
-$nav-link: $wild-orchid;
diff --git a/packages/react-components/src/styles/theme/default.css b/packages/react-components/src/styles/theme/default.css
deleted file mode 100644
index a1b5245230..0000000000
--- a/packages/react-components/src/styles/theme/default.css
+++ /dev/null
@@ -1,100 +0,0 @@
-/* Copyright 2017-2019 @polkadot/react-components authors & contributors
-/* This software may be modified and distributed under the terms
-/* of the Apache-2.0 license. See the LICENSE file for details. */
-
-/* default buttons, dark gray */
-$default: #666;
-
-/* highlighted buttons, orange */
-$highlight: #f19135;
-
-/* primary buttons, blue */
-$primary: #2e86ab;
-
-.theme--default {
-  a {
-    color: $primary;
-
-    &:hover,
-    a:visited {
-      color: $primary;
-    }
-  }
-
-  .ui.button,
-  .ui.buttons .button {
-    background-color: $default;
-    color: #f9f9f9;
-
-    &.active,
-    &:active,
-    &:focus,
-    &:hover {
-      background-color: $default;
-      color: #f9f9f9;
-    }
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-
-  .ui.basic.negative.button {
-    box-shadow: 0 0 0 1px $highlight inset !important;
-    color: $highlight !important;
-  }
-
-  .ui.negative.button,
-  .ui.buttons .negative.button {
-    background-color: $highlight;
-
-    &.active,
-    &:active,
-    &:focus,
-    &:hover {
-      background-color: $highlight;
-    }
-  }
-
-  .ui.primary.button,
-  .ui.buttons .primary.button
-  /*, .ui.primary.buttons .button (for dropdowns) */ {
-    background-color: $primary;
-
-    &.active,
-    &:active,
-    &:focus,
-    &:hover {
-      background-color: $primary;
-    }
-  }
-
-  .ui.blue.progress .bar {
-    background-color: $highlight;
-  }
-
-  .ui.modal > .header:not(.ui) {
-    border-bottom-color: $highlight;
-  }
-
-  .ui.menu.tabular .item.active {
-    border-bottom-color: $highlight;
-  }
-
-  /* this is for dropdown buttons */
-  .ui.buttons .ui.button.selection.visible.dropdown {
-    &:hover {
-      /* reset opacity, this is now open */
-      opacity: 1;
-    }
-
-    > .text:not(.default) {
-      color: #eee;
-    }
-  }
-
-  .ui.toggle.checkbox input:checked~.box:before,
-  .ui.toggle.checkbox input:checked~label:before {
-    background-color: $highlight !important;
-  }
-}
diff --git a/packages/react-components/src/styles/theme/polkadot.css b/packages/react-components/src/styles/theme/polkadot.css
deleted file mode 100644
index abc6c024cf..0000000000
--- a/packages/react-components/src/styles/theme/polkadot.css
+++ /dev/null
@@ -1,116 +0,0 @@
-/* Copyright 2017-2019 @polkadot/react-components authors & contributors
-/* This software may be modified and distributed under the terms
-/* of the Apache-2.0 license. See the LICENSE file for details. */
-
-@import './_colors-polkadot.css';
-
-.theme--polkadot {
-  .ui.primary.button,
-  .ui.buttons .primary.button,
-  .ui.primary.button:active,
-  .ui.buttons .primary.button:active,
-  .ui.primary.button:focus,
-  .ui.buttons .primary.button:focus {
-    background-color: $button-primary-color;
-  }
-
-  .ui.primary.button:hover,
-  .ui.buttons .primary.button:hover {
-    background-color: $button-primary-color-hover;
-  }
-
-  .ui.toggle.checkbox input:checked~.box:before,
-  .ui.toggle.checkbox input:checked~label:before {
-    background-color: $button-primary-color !important;
-  }
-
-  .ui.basic.negative.button {
-    box-shadow: 0 0 0 1px rgba(215, 94, 161, 1) inset !important;
-    color: rgba(215, 94, 161, 1) !important;
-  }
-
-  .ui.button,
-  .ui.buttons .button,
-  .ui.button:active,
-  .ui.buttons .button:active,
-  .ui.button:focus,
-  .ui.buttons .button:focus{
-    background-color: $button-color;
-    color: white;
-  }
-
-  .ui.positive.button,
-  .ui.buttons .positive.button,
-  .ui.positive.button:active,
-  .ui.buttons .positive.button:active,
-  .ui.positive.button:focus,
-  .ui.buttons .positive.button:focus {
-    background-color: $button-positive-color;
-    color: white;
-  }
-
-  .ui.positive.button:hover,
-  .ui.buttons .positive.button:hover {
-    background-color: $button-positive-color-hover;
-    color: white;
-  }
-
-  .ui.button:hover,
-  .ui.buttons .button:hover {
-    background-color: $button-color-hover;
-    color: white;
-  }
-
-  .ui.negative.button,
-  .ui.buttons .negative.button,
-  .ui.negative.button:focus,
-  .ui.buttons .negative.button:focus,
-  .ui.negative.button:active,
-  .ui.buttons .negative.button:active {
-    background-color: $button-negative-color;
-  }
-
-  .ui.negative.button:hover,
-  .ui.buttons .negative.button:hover {
-    background-color: $button-negative-color-hover;
-  }
-
-  .ui.blue.progress .bar {
-    background-color: $progress-bar-color;
-  }
-
-  .ui.modal > .header:not(.ui) {
-    border-bottom-color: $progress-bar-color;
-  }
-
-  a {
-    color: $anchor-color;
-  }
-
-  a:hover {
-    color: $anchor-color-hover;
-  }
-
-  .ui.green.progress .bar {
-    background-color: $green;
-  }
-
-  .ui.orange.progress .bar {
-    background-color: $orange;
-  }
-
-  .ui.red.progress .bar {
-    background-color: $red;
-  }
-
-  a.apps--SideBar-Item-NavLink-active {
-    color: $nav-link;
-    &:hover {
-      color: $nav-link;
-    }
-  }
-
-  .ui.menu.tabular .item.active {
-    border-bottom: 2px solid rgba(215, 94, 161, 1);
-  }
-}
diff --git a/packages/react-components/src/styles/theme/substrate.css b/packages/react-components/src/styles/theme/substrate.css
deleted file mode 100644
index e3b03f8017..0000000000
--- a/packages/react-components/src/styles/theme/substrate.css
+++ /dev/null
@@ -1,6 +0,0 @@
-/* Copyright 2017-2019 @polkadot/react-components authors & contributors
-/* This software may be modified and distributed under the terms
-/* of the Apache-2.0 license. See the LICENSE file for details. */
-
-.theme--substrate {
-}
diff --git a/packages/react-signer/src/index.css b/packages/react-signer/src/index.css
index f02c5910eb..286496c32c 100644
--- a/packages/react-signer/src/index.css
+++ b/packages/react-signer/src/index.css
@@ -2,8 +2,6 @@
 /* This software may be modified and distributed under the terms
 /* of the Apache-2.0 license. See the LICENSE file for details. */
 
-@import '../../react-components/src/styles/partials/_variables.css';
-
 .ui--signer-Signer-Decoded {
   align-content: center;
   display: flex;