diff --git a/client/package-lock.json b/client/package-lock.json
index 76ab3adfe..01e8e63e4 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -184,6 +184,12 @@
         }
       }
     },
+    "@types/async": {
+      "version": "2.0.50",
+      "resolved": "https://registry.npmjs.org/@types/async/-/async-2.0.50.tgz",
+      "integrity": "sha512-VMhZMMQgV1zsR+lX/0IBfAk+8Eb7dPVMWiQGFAt3qjo5x7Ml6b77jUo0e1C3ToD+XRDXqtrfw+6AB0uUsPEr3Q==",
+      "optional": true
+    },
     "@types/jss": {
       "version": "9.5.7",
       "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.7.tgz",
@@ -215,6 +221,11 @@
         "@types/react": "*"
       }
     },
+    "@types/zen-observable": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@types/zen-observable/-/zen-observable-0.8.0.tgz",
+      "integrity": "sha512-te5lMAWii1uEJ4FwLjzdlbw3+n0FZNOvFXHxQDKeT0dilh7HOzdMzV2TrJVUzq8ep7J4Na8OUYPRLSQkJHAlrg=="
+    },
     "acorn": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.0.2.tgz",
@@ -266,6 +277,54 @@
         "color-convert": "^1.9.0"
       }
     },
+    "apollo-cache": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/apollo-cache/-/apollo-cache-1.1.19.tgz",
+      "integrity": "sha512-p163+GVne1Gyw2v9L5kHEQhUhih7btWvyUFOl4uKf7brieqd4tHZt8ZA3vT1SaXbCeQZNSp/tFI3yFyi8RPKzw==",
+      "requires": {
+        "apollo-utilities": "^1.0.24"
+      }
+    },
+    "apollo-client": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/apollo-client/-/apollo-client-2.4.4.tgz",
+      "integrity": "sha512-i29w/+aa9O4fe8NxzJNOViHdsjpN2723Q2mNl0HiOJFwG+VjA4RXdTpyZHPZqcO8FwgK1k43l8nULD4Cdlx/Ww==",
+      "requires": {
+        "@types/async": "2.0.50",
+        "@types/zen-observable": "^0.8.0",
+        "apollo-cache": "1.1.19",
+        "apollo-link": "^1.0.0",
+        "apollo-link-dedup": "^1.0.0",
+        "apollo-utilities": "1.0.24",
+        "symbol-observable": "^1.0.2",
+        "zen-observable": "^0.8.0"
+      }
+    },
+    "apollo-link": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/apollo-link/-/apollo-link-1.2.3.tgz",
+      "integrity": "sha512-iL9yS2OfxYhigme5bpTbmRyC+Htt6tyo2fRMHT3K1XRL/C5IQDDz37OjpPy4ndx7WInSvfSZaaOTKFja9VWqSw==",
+      "requires": {
+        "apollo-utilities": "^1.0.0",
+        "zen-observable-ts": "^0.8.10"
+      }
+    },
+    "apollo-link-dedup": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/apollo-link-dedup/-/apollo-link-dedup-1.0.10.tgz",
+      "integrity": "sha512-tpUI9lMZsidxdNygSY1FxflXEkUZnvKRkMUsXXuQUNoSLeNtEvUX7QtKRAl4k9ubLl8JKKc9X3L3onAFeGTK8w==",
+      "requires": {
+        "apollo-link": "^1.2.3"
+      }
+    },
+    "apollo-utilities": {
+      "version": "1.0.24",
+      "resolved": "https://registry.npmjs.org/apollo-utilities/-/apollo-utilities-1.0.24.tgz",
+      "integrity": "sha512-cOXtrkio3wKfggp/zKCzQYxSZZRND/njNVmUksM1cckoJF3g/2o3bhh6z0HPhNhee8qzJzVXtl+3vmwXYGh0Gg==",
+      "requires": {
+        "fast-json-stable-stringify": "^2.0.0"
+      }
+    },
     "argparse": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
@@ -983,8 +1042,7 @@
     "fast-json-stable-stringify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
-      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
-      "dev": true
+      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
     },
     "fast-levenshtein": {
       "version": "2.0.6",
@@ -1132,6 +1190,14 @@
       "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
       "dev": true
     },
+    "graphql": {
+      "version": "14.0.2",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-14.0.2.tgz",
+      "integrity": "sha512-gUC4YYsaiSJT1h40krG3J+USGlwhzNTXSb4IOZljn9ag5Tj+RkoXrWp+Kh7WyE3t1NCfab5kzCuxBIvOMERMXw==",
+      "requires": {
+        "iterall": "^1.2.2"
+      }
+    },
     "graphql-tag": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.10.0.tgz",
@@ -1408,6 +1474,11 @@
         "whatwg-fetch": ">=0.10.0"
       }
     },
+    "iterall": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/iterall/-/iterall-1.2.2.tgz",
+      "integrity": "sha512-yynBb1g+RFUPY64fTrFv7nsjRrENBQJaX2UL+2Szc9REFrSNm1rpSXHGzhmAy7a9uv3vlvgBlXnf9RqmPH1/DA=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2025,15 +2096,26 @@
           }
         },
         "hoist-non-react-statics": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.0.1.tgz",
-          "integrity": "sha512-1kXwPsOi0OGQIZNVMPvgWJ9tSnGMiMfJdihqEzrPEXlHOBh9AAHXX/QYmAJTXztnz/K+PQ8ryCb4eGaN6HlGbQ==",
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.1.0.tgz",
+          "integrity": "sha512-MYcYuROh7SBM69xHGqXEwQqDux34s9tz+sCnxJmN18kgWh6JFdTw/5YdZtqsOdZJXddE/wUpCzfEdDrJj8p0Iw==",
           "requires": {
             "react-is": "^16.3.2"
           }
         }
       }
     },
+    "react-dom": {
+      "version": "16.6.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.6.0.tgz",
+      "integrity": "sha512-Stm2D9dXEUUAQdvpvhvFj/DEXwC2PAL/RwEMhoN4dvvD2ikTlJegEXf97xryg88VIAU22ZAP7n842l+9BTz6+w==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.10.0"
+      }
+    },
     "react-event-listener": {
       "version": "0.6.4",
       "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.4.tgz",
@@ -2600,6 +2682,19 @@
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
       "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=",
       "dev": true
+    },
+    "zen-observable": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.10.tgz",
+      "integrity": "sha512-UXEh0ekA/QWYI2NkLHc5IH0V1FstIN4qGVlVvq0DQAS3oR72mofYHkjJ2f4ysMKRAziwnACzg3c0ZuG+SMDu8w=="
+    },
+    "zen-observable-ts": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-0.8.10.tgz",
+      "integrity": "sha512-5vqMtRggU/2GhePC9OU4sYEWOdvmayp2k3gjPf4F0mXwB3CSbbNznfDUvDJx9O2ZTa1EIXdJhPchQveFKwNXPQ==",
+      "requires": {
+        "zen-observable": "^0.8.0"
+      }
     }
   }
 }
diff --git a/client/package.json b/client/package.json
index 44309081a..9d800caa2 100644
--- a/client/package.json
+++ b/client/package.json
@@ -19,12 +19,15 @@
   "dependencies": {
     "@material-ui/core": "^3.2.0",
     "@material-ui/icons": "^3.0.1",
+    "apollo-client": "^2.4.4",
     "classnames": "^2.2.6",
+    "graphql": "^14.0.2",
     "graphql-tag": "^2.10.0",
     "luxon": "^1.4.4",
     "material-ui-pickers": "^1.0.1",
     "react": "^16.5.2",
     "react-apollo": "^2.2.4",
+    "react-dom": "^16.6.0",
     "react-router-dom": "^4.3.1"
   }
 }
diff --git a/client/src/Components/TopBar/index.js b/client/src/Components/TopBar/index.js
index 768485f37..06fe761f6 100644
--- a/client/src/Components/TopBar/index.js
+++ b/client/src/Components/TopBar/index.js
@@ -2,10 +2,7 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import classNames from 'classnames'
 
-import AppBar from '@material-ui/core/AppBar'
-import Toolbar from '@material-ui/core/Toolbar'
-import Typography from '@material-ui/core/Typography'
-import Button from '@material-ui/core/Button'
+import { AppBar, Toolbar, Typography, Button } from '@material-ui/core'
 import { withStyles } from '@material-ui/core/styles'
 
 import datas from './data'