diff --git a/modules/tribes/client/components/JoinButton.js b/modules/tribes/client/components/JoinButton.js
index 0ed1b375a6..a51a04175a 100644
--- a/modules/tribes/client/components/JoinButton.js
+++ b/modules/tribes/client/components/JoinButton.js
@@ -59,7 +59,7 @@ export default function JoinButton({ tribe, user, onUpdated, ...rest }) {
 
   const [isUpdating, setIsUpdating] = useState(false);
 
-  const isMemberInitial = user && user.memberIds && user.memberIds.indexOf(tribe._id) > -1;
+  const isMemberInitial = (user?.memberIds || []).includes(tribe._id);
   const [isMember, setIsMember] = useState(isMemberInitial);
 
   /**
diff --git a/modules/tribes/client/components/SuggestTribe.component.js b/modules/tribes/client/components/SuggestTribe.js
similarity index 100%
rename from modules/tribes/client/components/SuggestTribe.component.js
rename to modules/tribes/client/components/SuggestTribe.js
diff --git a/modules/tribes/client/components/TribeItem.component.js b/modules/tribes/client/components/Tribe.js
similarity index 68%
rename from modules/tribes/client/components/TribeItem.component.js
rename to modules/tribes/client/components/Tribe.js
index 9880ad9d96..a9b85995a1 100644
--- a/modules/tribes/client/components/TribeItem.component.js
+++ b/modules/tribes/client/components/Tribe.js
@@ -2,25 +2,31 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
 
 import JoinButton from './JoinButton';
 
 import getTribeBackgroundStyle from './helpers/getTribeBackgroundStyle';
 
-/**
- * @TODO maybe rename to Tribe
- */
-export default function TribeItem({ tribe, user, onMembershipUpdated }) {
+const Container = styled.div.attrs({
+  className: 'panel tribe tribe-image',
+})`
+  // the following styles should have high specificity
+  // https://www.styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity
+  &&& {
+    position: relative;
+    ${({ tribe }) => getTribeBackgroundStyle(tribe, { isProgressive: true, dimensions: '742x496' })}
+  }
+`;
+
+export default function Tribe({ tribe, user, onMembershipUpdated }) {
   const { t } = useTranslation('tribes');
 
   const countInfo = (tribe.count === 0)
     ? t('No members yet')
     : t('{{count, number}} members', { count: tribe.count });
 
-  return <div
-    className="panel tribe tribe-image"
-    style={getTribeBackgroundStyle(tribe, { isProgressive: true, dimensions: '742x496' })}
-  >
+  return <Container tribe={tribe}>
     <a href={`/tribes/${tribe.slug}`} className="tribe-link">
       {tribe.new && <span className="tribe-new" aria-hidden={true}>
         <span className="label label-primary">
@@ -40,10 +46,10 @@ export default function TribeItem({ tribe, user, onMembershipUpdated }) {
         onUpdated={onMembershipUpdated}
       />}
     </div>
-  </div>;
+  </Container>;
 }
 
-TribeItem.propTypes = {
+Tribe.propTypes = {
   tribe: PropTypes.object.isRequired,
   user: PropTypes.object,
   onMembershipUpdated: PropTypes.func.isRequired,
diff --git a/modules/tribes/client/components/TribesList.component.js b/modules/tribes/client/components/TribesList.component.js
new file mode 100644
index 0000000000..650d8c7916
--- /dev/null
+++ b/modules/tribes/client/components/TribesList.component.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import styled from 'styled-components';
+
+import Tribe from './Tribe';
+import SuggestTribe from './SuggestTribe';
+
+const List = styled.ul.attrs({ className: 'list-unstyled tribes-grid' })`
+  margin: -5px -5px 15px -5px;
+`;
+
+const Item = styled.li`
+  padding: 5px;
+  display: inline-block;
+  vertical-align: bottom;
+
+  // on small screens there is just one column of tribes
+  width: 100%;
+
+  @media (min-width: 616px) {
+    // two columns of tribes
+    width: 50%;
+  }
+
+  @media (min-width: 992px) {
+    // three columns of tribes
+    width: 33.3333%;
+  }
+`;
+
+export default function TribesList({ tribes, user, onMembershipUpdated }) {
+  return (
+    <List>
+      {tribes.map(tribe => (
+        <Item key={tribe._id}>
+          <Tribe
+            tribe={tribe}
+            user={user}
+            onMembershipUpdated={onMembershipUpdated}
+          />
+        </Item>
+      ))}
+      <Item>
+        <SuggestTribe />
+      </Item>
+    </List>
+  );
+}
+
+TribesList.propTypes = {
+  tribes: PropTypes.array.isRequired,
+  user: PropTypes.object,
+  onMembershipUpdated: PropTypes.func.isRequired,
+};
diff --git a/modules/tribes/client/views/tribes-list.client.view.html b/modules/tribes/client/views/tribes-list.client.view.html
index dd213b3987..048b2c2f8d 100644
--- a/modules/tribes/client/views/tribes-list.client.view.html
+++ b/modules/tribes/client/views/tribes-list.client.view.html
@@ -8,23 +8,12 @@
 
   <div class="row">
     <div class="col-xs-12">
-
-      <ul class="list-unstyled tribes-grid"
-          angular-grid="tribesList.tribes"
-          ag-grid-width="288"
-          ag-gutter-size="10"
-          ag-refresh-on-img-load="false">
-        <li ng-repeat="tribe in tribesList.tribes track by tribe._id">
-          <tribe-item
-            tribe="tribe"
-            user="app.user"
-            onMembershipUpdated="tribesList.broadcastChange"
-          ></tribe-item>
-        </li>
-        <li>
-          <suggest-tribe></suggest-tribe>
-        </li>
-      </ul>
+      <tribes-list
+        tribes="tribesList.tribes"
+        user="app.user"
+        onMembershipUpdated="tribesList.broadcastChange"
+      ></tribes-list>
+    </div>
   </div>
 
   <tribes-join-trustroots ng-if="!app.user">
diff --git a/package-lock.json b/package-lock.json
index f1d97be3e7..e4bd3157be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -174,7 +174,6 @@
       "version": "7.6.4",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.6.4.tgz",
       "integrity": "sha512-jsBuXkFoZxk0yWLyGI9llT9oiQ2FeTASmRFE32U+aaDTfoE92t78eroO7PTpU/OrYq38hlcDM6vbfLDaOLy+7w==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.6.3",
         "jsesc": "^2.5.1",
@@ -183,19 +182,17 @@
       }
     },
     "@babel/helper-annotate-as-pure": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.7.4.tgz",
-      "integrity": "sha512-2BQmQgECKzYKFPpiycoF9tlb5HA4lrVyAmLLVK177EcQAqjVLciUb2/R+n1boQ9y5ENV3uz2ZqiNw7QMBBw1Og==",
-      "dev": true,
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.7.0.tgz",
+      "integrity": "sha512-k50CQxMlYTYo+GGyUGFwpxKVtxVJi9yh61sXZji3zYHccK9RYliZGSTOgci85T+r+0VFN2nWbGM04PIqwfrpMg==",
       "requires": {
-        "@babel/types": "^7.7.4"
+        "@babel/types": "^7.7.0"
       },
       "dependencies": {
         "@babel/types": {
           "version": "7.7.4",
           "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.7.4.tgz",
           "integrity": "sha512-cz5Ji23KCi4T+YIE/BolWosrJuSmoZeN1EFnRtBwF+KKLi8GG/Z2c2hOJJeCXPk4mwk4QFvTmwIodJowXgttRA==",
-          "dev": true,
           "requires": {
             "esutils": "^2.0.2",
             "lodash": "^4.17.13",
@@ -558,7 +555,6 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz",
       "integrity": "sha512-A95XEoCpb3TO+KZzJ4S/5uW5fNe26DjBGqf1o9ucyLyCmi1dXq/B3c8iaWTfBk3VvetUxl16e8tIrd5teOCfGw==",
-      "dev": true,
       "requires": {
         "@babel/helper-get-function-arity": "^7.0.0",
         "@babel/template": "^7.1.0",
@@ -569,7 +565,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz",
       "integrity": "sha512-r2DbJeg4svYvt3HOS74U4eWKsUAMRH01Z1ds1zx8KNTPtpTL5JAsdFv8BNyOpVqdFhHkkRDIg5B4AsxmkjAlmQ==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.0.0"
       }
@@ -619,19 +614,17 @@
       }
     },
     "@babel/helper-module-imports": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.7.4.tgz",
-      "integrity": "sha512-dGcrX6K9l8258WFjyDLJwuVKxR4XZfU0/vTUgOQYWEnRD8mgr+p4d6fCUMq/ys0h4CCt/S5JhbvtyErjWouAUQ==",
-      "dev": true,
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.7.0.tgz",
+      "integrity": "sha512-Dv3hLKIC1jyfTkClvyEkYP2OlkzNvWs5+Q8WgPbxM5LMeorons7iPP91JM+DU7tRbhqA1ZeooPaMFvQrn23RHw==",
       "requires": {
-        "@babel/types": "^7.7.4"
+        "@babel/types": "^7.7.0"
       },
       "dependencies": {
         "@babel/types": {
           "version": "7.7.4",
           "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.7.4.tgz",
           "integrity": "sha512-cz5Ji23KCi4T+YIE/BolWosrJuSmoZeN1EFnRtBwF+KKLi8GG/Z2c2hOJJeCXPk4mwk4QFvTmwIodJowXgttRA==",
-          "dev": true,
           "requires": {
             "esutils": "^2.0.2",
             "lodash": "^4.17.13",
@@ -654,6 +647,15 @@
         "lodash": "^4.17.13"
       },
       "dependencies": {
+        "@babel/helper-module-imports": {
+          "version": "7.7.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.7.4.tgz",
+          "integrity": "sha512-dGcrX6K9l8258WFjyDLJwuVKxR4XZfU0/vTUgOQYWEnRD8mgr+p4d6fCUMq/ys0h4CCt/S5JhbvtyErjWouAUQ==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.7.4"
+          }
+        },
         "@babel/helper-split-export-declaration": {
           "version": "7.7.4",
           "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.4.tgz",
@@ -755,6 +757,15 @@
             "source-map": "^0.5.0"
           }
         },
+        "@babel/helper-annotate-as-pure": {
+          "version": "7.7.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.7.4.tgz",
+          "integrity": "sha512-2BQmQgECKzYKFPpiycoF9tlb5HA4lrVyAmLLVK177EcQAqjVLciUb2/R+n1boQ9y5ENV3uz2ZqiNw7QMBBw1Og==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.7.4"
+          }
+        },
         "@babel/helper-function-name": {
           "version": "7.7.4",
           "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.7.4.tgz",
@@ -1013,7 +1024,6 @@
       "version": "7.4.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz",
       "integrity": "sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.4.4"
       }
@@ -1305,8 +1315,7 @@
     "@babel/parser": {
       "version": "7.6.4",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.6.4.tgz",
-      "integrity": "sha512-D8RHPW5qd0Vbyo3qb+YjO5nvUVRTXFLQ/FsDxJU2Nqz4uB5EnUN0ZQSEYpvTIbRuttig1XbHWU5oMeQwQSAA+A==",
-      "dev": true
+      "integrity": "sha512-D8RHPW5qd0Vbyo3qb+YjO5nvUVRTXFLQ/FsDxJU2Nqz4uB5EnUN0ZQSEYpvTIbRuttig1XbHWU5oMeQwQSAA+A=="
     },
     "@babel/plugin-proposal-async-generator-functions": {
       "version": "7.7.4",
@@ -1488,6 +1497,28 @@
         "@babel/helper-module-imports": "^7.7.4",
         "@babel/helper-plugin-utils": "^7.0.0",
         "@babel/helper-remap-async-to-generator": "^7.7.4"
+      },
+      "dependencies": {
+        "@babel/helper-module-imports": {
+          "version": "7.7.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.7.4.tgz",
+          "integrity": "sha512-dGcrX6K9l8258WFjyDLJwuVKxR4XZfU0/vTUgOQYWEnRD8mgr+p4d6fCUMq/ys0h4CCt/S5JhbvtyErjWouAUQ==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.7.4"
+          }
+        },
+        "@babel/types": {
+          "version": "7.7.4",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.7.4.tgz",
+          "integrity": "sha512-cz5Ji23KCi4T+YIE/BolWosrJuSmoZeN1EFnRtBwF+KKLi8GG/Z2c2hOJJeCXPk4mwk4QFvTmwIodJowXgttRA==",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/plugin-transform-block-scoped-functions": {
@@ -1525,6 +1556,15 @@
         "globals": "^11.1.0"
       },
       "dependencies": {
+        "@babel/helper-annotate-as-pure": {
+          "version": "7.7.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.7.4.tgz",
+          "integrity": "sha512-2BQmQgECKzYKFPpiycoF9tlb5HA4lrVyAmLLVK177EcQAqjVLciUb2/R+n1boQ9y5ENV3uz2ZqiNw7QMBBw1Og==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.7.4"
+          }
+        },
         "@babel/helper-function-name": {
           "version": "7.7.4",
           "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.7.4.tgz",
@@ -1926,6 +1966,28 @@
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.7.4",
         "@babel/helper-plugin-utils": "^7.0.0"
+      },
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": {
+          "version": "7.7.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.7.4.tgz",
+          "integrity": "sha512-2BQmQgECKzYKFPpiycoF9tlb5HA4lrVyAmLLVK177EcQAqjVLciUb2/R+n1boQ9y5ENV3uz2ZqiNw7QMBBw1Og==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.7.4"
+          }
+        },
+        "@babel/types": {
+          "version": "7.7.4",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.7.4.tgz",
+          "integrity": "sha512-cz5Ji23KCi4T+YIE/BolWosrJuSmoZeN1EFnRtBwF+KKLi8GG/Z2c2hOJJeCXPk4mwk4QFvTmwIodJowXgttRA==",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/plugin-transform-typeof-symbol": {
@@ -2006,6 +2068,15 @@
         "semver": "^5.5.0"
       },
       "dependencies": {
+        "@babel/helper-module-imports": {
+          "version": "7.7.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.7.4.tgz",
+          "integrity": "sha512-dGcrX6K9l8258WFjyDLJwuVKxR4XZfU0/vTUgOQYWEnRD8mgr+p4d6fCUMq/ys0h4CCt/S5JhbvtyErjWouAUQ==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.7.4"
+          }
+        },
         "@babel/types": {
           "version": "7.7.4",
           "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.7.4.tgz",
@@ -2078,7 +2149,6 @@
       "version": "7.6.0",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.6.0.tgz",
       "integrity": "sha512-5AEH2EXD8euCk446b7edmgFdub/qfH1SN6Nii3+fyXP807QRx9Q73A2N5hNwRRslC2H9sNzaFhsPubkS4L8oNQ==",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
         "@babel/parser": "^7.6.0",
@@ -2089,7 +2159,6 @@
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.6.3.tgz",
       "integrity": "sha512-unn7P4LGsijIxaAJo/wpoU11zN+2IaClkQAxcJWBNCMS6cmVh802IyLHNkAjQ0iYnRS3nnxk5O3fuXW28IMxTw==",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.5.5",
         "@babel/generator": "^7.6.3",
@@ -2106,7 +2175,6 @@
           "version": "7.5.5",
           "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz",
           "integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==",
-          "dev": true,
           "requires": {
             "@babel/highlight": "^7.0.0"
           }
@@ -2115,7 +2183,6 @@
           "version": "4.1.1",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
           "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-          "dev": true,
           "requires": {
             "ms": "^2.1.1"
           }
@@ -2126,7 +2193,6 @@
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.6.3.tgz",
       "integrity": "sha512-CqbcpTxMcpuQTMhjI37ZHVgjBkysg5icREQIEZ0eG1yCNwg3oy+5AaLiOKmjsCj6nqOsa6Hf0ObjRVwokb7srA==",
-      "dev": true,
       "requires": {
         "esutils": "^2.0.2",
         "lodash": "^4.17.13",
@@ -2151,6 +2217,24 @@
         }
       }
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.5.tgz",
+      "integrity": "sha512-6ZODuZSFofbxSbcxwsFz+6ioPjb0ISJRRPLZ+WIbjcU2IMU0Io+RGQjjaTgOvNQl007KICBm7zXQaYQEC1r6Bg==",
+      "requires": {
+        "@emotion/memoize": "0.7.3"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.3.tgz",
+      "integrity": "sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.4.tgz",
+      "integrity": "sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ=="
+    },
     "@gulp-sourcemaps/identity-map": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@gulp-sourcemaps/identity-map/-/identity-map-1.0.2.tgz",
@@ -4959,6 +5043,22 @@
         "@types/babel__traverse": "^7.0.6"
       }
     },
+    "babel-plugin-styled-components": {
+      "version": "1.10.6",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz",
+      "integrity": "sha512-gyQj/Zf1kQti66100PhrCRjI5ldjaze9O0M3emXRPAN80Zsf8+e1thpTpaXJXVHXtaM4/+dJEgZHyS9Its+8SA==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.0.0",
+        "@babel/helper-module-imports": "^7.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11"
+      }
+    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
     "babel-preset-jest": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz",
@@ -7008,6 +7108,11 @@
         }
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+    },
     "css-loader": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.3.2.tgz",
@@ -7173,6 +7278,23 @@
         "nth-check": "~1.0.1"
       }
     },
+    "css-to-react-native": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz",
+      "integrity": "sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^3.3.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        }
+      }
+    },
     "css-what": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
@@ -9668,13 +9790,30 @@
             "supports-color": "^2.0.0"
           },
           "dependencies": {
-            "escape-string-regexp": {
-              "version": "1.0.5",
-              "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-              "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+            "ecdsa-sig-formatter": {
+              "version": "1.0.11",
+              "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+              "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+              "requires": {
+                "safe-buffer": "^5.0.1"
+              }
+            },
+            "jwa": {
+              "version": "1.4.1",
+              "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
+              "integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==",
+              "requires": {
+                "ecdsa-sig-formatter": "1.0.11",
+                "safe-buffer": "^5.0.1"
+              }
             }
           }
         },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+        },
         "supports-color": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
@@ -11953,8 +12092,7 @@
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
     },
     "globby": {
       "version": "8.0.2",
@@ -15777,6 +15915,11 @@
       "resolved": "https://registry.npmjs.org/is-valid-glob/-/is-valid-glob-1.0.0.tgz",
       "integrity": "sha1-Kb8+/3Ab4tTTFdusw5vDn+j2Aao="
     },
+    "is-what": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.4.0.tgz",
+      "integrity": "sha512-oFdBRuSY9PocqPoUUseDXek4I+A1kWGigZGhuG+7GEkp0tRkek11adc0HbTEVsNvtojV7rp0uhf5LWtGvHzoOQ=="
+    },
     "is-windows": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
@@ -17410,8 +17553,7 @@
         "camelcase": {
           "version": "5.3.1",
           "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-          "dev": true
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
         },
         "chalk": {
           "version": "2.4.2",
@@ -17555,16 +17697,6 @@
             "y18n": "^4.0.0",
             "yargs-parser": "^13.1.1"
           }
-        },
-        "yargs-parser": {
-          "version": "13.1.1",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.1.tgz",
-          "integrity": "sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==",
-          "dev": true,
-          "requires": {
-            "camelcase": "^5.0.0",
-            "decamelize": "^1.2.0"
-          }
         }
       }
     },
@@ -18141,8 +18273,7 @@
     "jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "dev": true
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
     },
     "json-parse-better-errors": {
       "version": "1.0.2",
@@ -20211,6 +20342,11 @@
         "p-is-promise": "^2.0.0"
       }
     },
+    "memoize-one": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
+      "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
+    },
     "memoizee": {
       "version": "0.4.14",
       "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.14.tgz",
@@ -20264,6 +20400,14 @@
       "resolved": "https://registry.npmjs.org/merge/-/merge-1.2.1.tgz",
       "integrity": "sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ=="
     },
+    "merge-anything": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-2.4.4.tgz",
+      "integrity": "sha512-l5XlriUDJKQT12bH+rVhAHjwIuXWdAIecGwsYjv2LJo+dA1AeRTmeQS+3QBpO6lEthBMDi2IUMpLC1yyRvGlwQ==",
+      "requires": {
+        "is-what": "^3.3.1"
+      }
+    },
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -26847,6 +26991,51 @@
         }
       }
     },
+    "styled-components": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.4.1.tgz",
+      "integrity": "sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.0.0",
+        "@emotion/is-prop-valid": "^0.8.1",
+        "@emotion/unitless": "^0.7.0",
+        "babel-plugin-styled-components": ">= 1",
+        "css-to-react-native": "^2.2.2",
+        "memoize-one": "^5.0.0",
+        "merge-anything": "^2.2.4",
+        "prop-types": "^15.5.4",
+        "react-is": "^16.6.0",
+        "stylis": "^3.5.0",
+        "stylis-rule-sheet": "^0.0.10",
+        "supports-color": "^5.5.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "stylis": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
+      "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
+    },
+    "stylis-rule-sheet": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
+      "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
+    },
     "superagent": {
       "version": "3.8.3",
       "resolved": "https://registry.npmjs.org/superagent/-/superagent-3.8.3.tgz",
@@ -27378,8 +27567,7 @@
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-      "dev": true
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
     },
     "to-object-path": {
       "version": "0.3.0",
diff --git a/package.json b/package.json
index e658cc3c2b..d807b660b2 100644
--- a/package.json
+++ b/package.json
@@ -167,6 +167,7 @@
     "serve-favicon": "~2.5.0",
     "speakingurl": "~14.0.1",
     "stathat": "0.0.8",
+    "styled-components": "~4.4.1",
     "ui-leaflet": "~2.0.0",
     "uuid": "~3.3.3",
     "validator": "~12.1.0",