diff --git a/.eslintrc.json b/.eslintrc.json
index 30d2014..5e257a7 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -70,6 +70,7 @@
         "import/no-extraneous-dependencies": "off",
         "import/newline-after-import": "off",
         "import/prefer-default-export": "off",
+        "indent": ["error", 2],
         "jsx-a11y/anchor-is-valid": "off",
         "jsx-a11y/alt-text": "off",
         "jsx-a11y/click-events-have-key-events": "off",
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index e27784f..f2a7ea1 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -1,56 +1,68 @@
 stages:
     - setup
-    - qa
+    - lint
+    - build
     - test
     - publish
     - deploy
 
-cache:
-    paths:
-        - node_modules/
-        - dist/
-
-setup:
+install:
     image: node:12
     stage: setup
     script:
         - npm ci
+    artifacts:
+        paths:
+            - node_modules
+        expire_in: 1 week
+
 
 es:lint:
     image: node:12
-    stage: qa
+    needs: ["install"]
+    stage: lint
     script:
         - npm run lint:es
 
 sass:lint:
     image: node:12
-    stage: qa
+    needs: ["install"]
+    stage: lint
     script:
         - npm run lint:sass
 
-build:
-    image: node:12
-    stage: qa
-    script:
-        - API_URL=http://web.sik.party:8000/api npm run build
-
 # test:unit:
 #     image: node:12
 #     stage: test
 #     script:
 #         - npm run test:unit
 
+build:
+    image: node:12
+    needs: ["install"]
+    stage: build
+    script:
+        - API_URL=http://web.sik.party:8000/api npm run build
+    dependencies:
+        - install
+    artifacts:
+        paths:
+            - dist
+        expire_in: 1 week
+
 test:e2e:
     image: circleci/node:12-browsers
+    needs: ["install", "build"]
     stage: test
     only:
         - master
     script:
-        - API_URL=http://web.sik.party:8000/api npm run test:e2e
+        - npm run test:e2e
 
 publish:dev:
     stage: publish
     image: docker:stable
+    needs: ["build", "test:e2e", "es:lint", "sass:lint"]
     services:
         - docker:stable-dind
     only:
diff --git a/configs/webpack/dev.js b/configs/webpack/dev.js
index 293701f..60be060 100644
--- a/configs/webpack/dev.js
+++ b/configs/webpack/dev.js
@@ -58,7 +58,13 @@ module.exports = function (env, argv) {
       "style-loader",
       {loader: "css-loader", options: {importLoaders: 1}},
       "postcss-loader",
-      "sass-loader"
+      {
+        loader: 'sass-loader',
+        options: {
+          // Prefer `dart-sass`
+          implementation: require('sass'),
+        },
+      },
     ]
   });
 
diff --git a/configs/webpack/prod.js b/configs/webpack/prod.js
index 8e23bab..5095581 100644
--- a/configs/webpack/prod.js
+++ b/configs/webpack/prod.js
@@ -53,7 +53,13 @@ module.exports = function (env, argv) {
         MiniCssExtractPlugin.loader,
         {loader: "css-loader", options: {importLoaders: 1}},
         "postcss-loader",
-        "sass-loader"
+        {
+          loader: 'sass-loader',
+          options: {
+            // Prefer `dart-sass`
+            implementation: require('sass'),
+          },
+        },
       ]
     });
   }
@@ -78,7 +84,13 @@ module.exports = function (env, argv) {
         MiniCssExtractPlugin.loader,
         {loader: "css-loader", options: {importLoaders: 1}},
         "postcss-loader",
-        "sass-loader"
+        {
+          loader: 'sass-loader',
+          options: {
+            // Prefer `dart-sass`
+            implementation: require('sass'),
+          },
+        },
       ]
     });
 
diff --git a/package-lock.json b/package-lock.json
index 662c93a..32e409f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -724,6 +724,12 @@
       "integrity": "sha512-yALhelO3i0hqZwhjtcr6dYyaLoCHbAMshwtj6cGxTvHZAKXHsYGdff6E8EPw3xLKY0ELUTQ69Q1rQiJENnccMA==",
       "dev": true
     },
+    "@types/js-cookie": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.4.tgz",
+      "integrity": "sha512-WTfSE1Eauak/Nrg6cA9FgPTFvVawejsai6zXoq0QYTQ3mxONeRtGhKxa7wMlUzWWmzrmTeV+rwLjHgsCntdrsA==",
+      "dev": true
+    },
     "@types/json-schema": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.3.tgz",
@@ -1201,12 +1207,6 @@
       "integrity": "sha512-uUrgZ8AxS+Lio0fZKAipJjAh415JyrOZowliZAzmnJSsf7piVL5w+G0+gFJ0KSu3QRhvui/7zuvpLz03YjXAhg==",
       "dev": true
     },
-    "abbrev": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
-      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
-      "dev": true
-    },
     "accepts": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
@@ -1729,12 +1729,6 @@
       "integrity": "sha1-gJXXXkiMKazuBVH+hyUhadeJz7o=",
       "dev": true
     },
-    "async-foreach": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
-      "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=",
-      "dev": true
-    },
     "async-limiter": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
@@ -3479,15 +3473,6 @@
         "safe-buffer": "^5.1.1"
       }
     },
-    "block-stream": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
-      "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
-      "dev": true,
-      "requires": {
-        "inherits": "~2.0.0"
-      }
-    },
     "bluebird": {
       "version": "3.5.4",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.4.tgz",
@@ -4157,13 +4142,15 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
       "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "camelcase-keys": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
       "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
       "dev": true,
+      "optional": true,
       "requires": {
         "camelcase": "^2.0.0",
         "map-obj": "^1.0.0"
@@ -8828,18 +8815,6 @@
         }
       }
     },
-    "fstream": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
-      "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.1.2",
-        "inherits": "~2.0.0",
-        "mkdirp": ">=0.5 0",
-        "rimraf": "2"
-      }
-    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -8890,15 +8865,6 @@
         }
       }
     },
-    "gaze": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
-      "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
-      "dev": true,
-      "requires": {
-        "globule": "^1.0.0"
-      }
-    },
     "get-caller-file": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.2.tgz",
@@ -9084,17 +9050,6 @@
       "integrity": "sha1-L0SUrIkZ43Z8XLtpHp9GMyQoXUM=",
       "dev": true
     },
-    "globule": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.1.tgz",
-      "integrity": "sha512-g7QtgWF4uYSL5/dn71WxubOrS7JVGCnFPEnoeChJmBnyR9Mw8nGoEwOgJL/RC2Te0WhbsEUCejfH8SZNJ+adYQ==",
-      "dev": true,
-      "requires": {
-        "glob": "~7.1.1",
-        "lodash": "~4.17.10",
-        "minimatch": "~3.0.2"
-      }
-    },
     "gonzales-pe": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-4.2.4.tgz",
@@ -10348,17 +10303,12 @@
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
       "dev": true
     },
-    "in-publish": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
-      "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
-      "dev": true
-    },
     "indent-string": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
       "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
       "dev": true,
+      "optional": true,
       "requires": {
         "repeating": "^2.0.0"
       }
@@ -10498,12 +10448,6 @@
         "loose-envify": "^1.0.0"
       }
     },
-    "invert-kv": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
-      "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
-      "dev": true
-    },
     "ip": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
@@ -11145,12 +11089,6 @@
       "integrity": "sha512-MUj2XlMB8kpe+8DJUGH/3UJm4XpI8XEgZQ+CiHDeyrGoKPdW/8FJv6ku+3UiYm5Fz3CWaL+iXmD8Q4Ap6aC1Jw==",
       "dev": true
     },
-    "js-base64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
-      "integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==",
-      "dev": true
-    },
     "js-cookie": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.0.tgz",
@@ -11562,15 +11500,6 @@
         "package-json": "^4.0.0"
       }
     },
-    "lcid": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
-      "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
-      "dev": true,
-      "requires": {
-        "invert-kv": "^1.0.0"
-      }
-    },
     "leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -12045,6 +11974,7 @@
       "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
       "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
       "dev": true,
+      "optional": true,
       "requires": {
         "camelcase-keys": "^2.0.0",
         "decamelize": "^1.1.2",
@@ -12062,7 +11992,8 @@
           "version": "1.2.0",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -12571,34 +12502,6 @@
       "integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==",
       "dev": true
     },
-    "node-gyp": {
-      "version": "3.8.0",
-      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.8.0.tgz",
-      "integrity": "sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA==",
-      "dev": true,
-      "requires": {
-        "fstream": "^1.0.0",
-        "glob": "^7.0.3",
-        "graceful-fs": "^4.1.2",
-        "mkdirp": "^0.5.0",
-        "nopt": "2 || 3",
-        "npmlog": "0 || 1 || 2 || 3 || 4",
-        "osenv": "0",
-        "request": "^2.87.0",
-        "rimraf": "2",
-        "semver": "~5.3.0",
-        "tar": "^2.0.0",
-        "which": "1"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "5.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
-          "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
-          "dev": true
-        }
-      }
-    },
     "node-libs-browser": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.1.tgz",
@@ -12723,179 +12626,6 @@
         }
       }
     },
-    "node-sass": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.0.tgz",
-      "integrity": "sha512-W1XBrvoJ1dy7VsvTAS5q1V45lREbTlZQqFbiHb3R3OTTCma0XBtuG6xZ6Z4506nR4lmHPTqVRwxT6KgtWC97CA==",
-      "dev": true,
-      "requires": {
-        "async-foreach": "^0.1.3",
-        "chalk": "^1.1.1",
-        "cross-spawn": "^3.0.0",
-        "gaze": "^1.0.0",
-        "get-stdin": "^4.0.1",
-        "glob": "^7.0.3",
-        "in-publish": "^2.0.0",
-        "lodash": "^4.17.15",
-        "meow": "^3.7.0",
-        "mkdirp": "^0.5.1",
-        "nan": "^2.13.2",
-        "node-gyp": "^3.8.0",
-        "npmlog": "^4.0.0",
-        "request": "^2.88.0",
-        "sass-graph": "^2.2.4",
-        "stdout-stream": "^1.4.0",
-        "true-case-path": "^1.0.2"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "6.10.2",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz",
-          "integrity": "sha512-TXtUUEYHuaTEbLZWIKUr5pmBuhDLy+8KYtPYdcV8qC+pOZL+NKqYwvWSRrVXHn+ZmRRAu8vJTAznH7Oag6RVRw==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^2.0.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "ansi-styles": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
-          "dev": true
-        },
-        "aws4": {
-          "version": "1.8.0",
-          "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
-          "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
-          "dev": true
-        },
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^2.2.1",
-            "escape-string-regexp": "^1.0.2",
-            "has-ansi": "^2.0.0",
-            "strip-ansi": "^3.0.0",
-            "supports-color": "^2.0.0"
-          }
-        },
-        "cross-spawn": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
-          "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^4.0.1",
-            "which": "^1.2.9"
-          }
-        },
-        "get-stdin": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-          "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
-          "dev": true
-        },
-        "har-validator": {
-          "version": "5.1.3",
-          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
-          "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
-          "dev": true,
-          "requires": {
-            "ajv": "^6.5.5",
-            "har-schema": "^2.0.0"
-          }
-        },
-        "mime-db": {
-          "version": "1.40.0",
-          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz",
-          "integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==",
-          "dev": true
-        },
-        "mime-types": {
-          "version": "2.1.24",
-          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz",
-          "integrity": "sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==",
-          "dev": true,
-          "requires": {
-            "mime-db": "1.40.0"
-          }
-        },
-        "oauth-sign": {
-          "version": "0.9.0",
-          "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
-          "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
-          "dev": true
-        },
-        "punycode": {
-          "version": "1.4.1",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
-          "dev": true
-        },
-        "qs": {
-          "version": "6.5.2",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
-          "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
-          "dev": true
-        },
-        "request": {
-          "version": "2.88.0",
-          "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
-          "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
-          "dev": true,
-          "requires": {
-            "aws-sign2": "~0.7.0",
-            "aws4": "^1.8.0",
-            "caseless": "~0.12.0",
-            "combined-stream": "~1.0.6",
-            "extend": "~3.0.2",
-            "forever-agent": "~0.6.1",
-            "form-data": "~2.3.2",
-            "har-validator": "~5.1.0",
-            "http-signature": "~1.2.0",
-            "is-typedarray": "~1.0.0",
-            "isstream": "~0.1.2",
-            "json-stringify-safe": "~5.0.1",
-            "mime-types": "~2.1.19",
-            "oauth-sign": "~0.9.0",
-            "performance-now": "^2.1.0",
-            "qs": "~6.5.2",
-            "safe-buffer": "^5.1.2",
-            "tough-cookie": "~2.4.3",
-            "tunnel-agent": "^0.6.0",
-            "uuid": "^3.3.2"
-          }
-        },
-        "supports-color": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
-          "dev": true
-        },
-        "tough-cookie": {
-          "version": "2.4.3",
-          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
-          "integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==",
-          "dev": true,
-          "requires": {
-            "psl": "^1.1.24",
-            "punycode": "^1.4.1"
-          }
-        },
-        "uuid": {
-          "version": "3.3.3",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.3.tgz",
-          "integrity": "sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==",
-          "dev": true
-        }
-      }
-    },
     "node-version": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/node-version/-/node-version-1.2.0.tgz",
@@ -12908,15 +12638,6 @@
       "integrity": "sha1-lKKxYzxPExdVMAfYlm/Q6EG2pMI=",
       "dev": true
     },
-    "nopt": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
-      "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
-      "dev": true,
-      "requires": {
-        "abbrev": "1"
-      }
-    },
     "normalize-package-data": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
@@ -13536,31 +13257,12 @@
       "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
       "dev": true
     },
-    "os-locale": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
-      "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
-      "dev": true,
-      "requires": {
-        "lcid": "^1.0.0"
-      }
-    },
     "os-tmpdir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
       "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
       "dev": true
     },
-    "osenv": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
-      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
-      "dev": true,
-      "requires": {
-        "os-homedir": "^1.0.0",
-        "os-tmpdir": "^1.0.0"
-      }
-    },
     "output-file-sync": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/output-file-sync/-/output-file-sync-1.1.2.tgz",
@@ -15163,6 +14865,7 @@
       "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
       "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
       "dev": true,
+      "optional": true,
       "requires": {
         "find-up": "^1.0.0",
         "read-pkg": "^1.0.0"
@@ -15173,6 +14876,7 @@
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
           "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
           "dev": true,
+          "optional": true,
           "requires": {
             "path-exists": "^2.0.0",
             "pinkie-promise": "^2.0.0"
@@ -15183,6 +14887,7 @@
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
           "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
           "dev": true,
+          "optional": true,
           "requires": {
             "graceful-fs": "^4.1.2",
             "parse-json": "^2.2.0",
@@ -15196,6 +14901,7 @@
           "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
           "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
           "dev": true,
+          "optional": true,
           "requires": {
             "error-ex": "^1.2.0"
           }
@@ -15205,6 +14911,7 @@
           "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
           "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
           "dev": true,
+          "optional": true,
           "requires": {
             "pinkie-promise": "^2.0.0"
           }
@@ -15214,6 +14921,7 @@
           "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
           "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
           "dev": true,
+          "optional": true,
           "requires": {
             "graceful-fs": "^4.1.2",
             "pify": "^2.0.0",
@@ -15224,13 +14932,15 @@
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "read-pkg": {
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
           "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
           "dev": true,
+          "optional": true,
           "requires": {
             "load-json-file": "^1.0.0",
             "normalize-package-data": "^2.3.2",
@@ -15242,6 +14952,7 @@
           "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
           "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
           "dev": true,
+          "optional": true,
           "requires": {
             "is-utf8": "^0.2.0"
           }
@@ -15290,6 +15001,7 @@
       "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
       "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=",
       "dev": true,
+      "optional": true,
       "requires": {
         "indent-string": "^2.1.0",
         "strip-indent": "^1.0.1"
@@ -15877,89 +15589,133 @@
         "truncate-utf8-bytes": "^1.0.0"
       }
     },
-    "sass-graph": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
-      "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
+    "sass": {
+      "version": "1.25.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.25.0.tgz",
+      "integrity": "sha512-uQMjye0Y70SEDGO56n0j91tauqS9E1BmpKHtiYNQScXDHeaE9uHwNEqQNFf4Bes/3DHMNinB6u79JsG10XWNyw==",
       "dev": true,
       "requires": {
-        "glob": "^7.0.0",
-        "lodash": "^4.0.0",
-        "scss-tokenizer": "^0.2.3",
-        "yargs": "^7.0.0"
+        "chokidar": ">=2.0.0 <4.0.0"
       },
       "dependencies": {
-        "camelcase": {
+        "anymatch": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
+          "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
+          "dev": true,
+          "requires": {
+            "normalize-path": "^3.0.0",
+            "picomatch": "^2.0.4"
+          }
+        },
+        "binary-extensions": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",
+          "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
+          "dev": true
+        },
+        "braces": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+          "dev": true,
+          "requires": {
+            "fill-range": "^7.0.1"
+          }
+        },
+        "chokidar": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.3.1.tgz",
+          "integrity": "sha512-4QYCEWOcK3OJrxwvyyAOxFuhpvOVCYkr33LPfFNBjAD/w3sEzWsp2BUOkI4l9bHvWioAd0rc6NlHUOEaWkTeqg==",
+          "dev": true,
+          "requires": {
+            "anymatch": "~3.1.1",
+            "braces": "~3.0.2",
+            "fsevents": "~2.1.2",
+            "glob-parent": "~5.1.0",
+            "is-binary-path": "~2.1.0",
+            "is-glob": "~4.0.1",
+            "normalize-path": "~3.0.0",
+            "readdirp": "~3.3.0"
+          }
+        },
+        "fill-range": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+          "dev": true,
+          "requires": {
+            "to-regex-range": "^5.0.1"
+          }
+        },
+        "fsevents": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.2.tgz",
+          "integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==",
+          "dev": true,
+          "optional": true
+        },
+        "glob-parent": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.0.tgz",
+          "integrity": "sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        },
+        "is-binary-path": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+          "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+          "dev": true,
+          "requires": {
+            "binary-extensions": "^2.0.0"
+          }
+        },
+        "is-extglob": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+          "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+          "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^2.1.1"
+          }
+        },
+        "is-number": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+          "dev": true
+        },
+        "normalize-path": {
           "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
-          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
+          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+          "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
           "dev": true
         },
-        "cliui": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
-          "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
+        "readdirp": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.3.0.tgz",
+          "integrity": "sha512-zz0pAkSPOXXm1viEwygWIPSPkcBYjW1xU5j/JBh5t9bGCJwa6f9+BJa6VaB2g+b55yVrmXzqkyLf4xaWYM0IkQ==",
           "dev": true,
           "requires": {
-            "string-width": "^1.0.1",
-            "strip-ansi": "^3.0.1",
-            "wrap-ansi": "^2.0.0"
+            "picomatch": "^2.0.7"
           }
         },
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+        "to-regex-range": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
           "dev": true,
           "requires": {
-            "number-is-nan": "^1.0.0"
-          }
-        },
-        "string-width": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-          "dev": true,
-          "requires": {
-            "code-point-at": "^1.0.0",
-            "is-fullwidth-code-point": "^1.0.0",
-            "strip-ansi": "^3.0.0"
-          }
-        },
-        "which-module": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
-          "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=",
-          "dev": true
-        },
-        "yargs": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz",
-          "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=",
-          "dev": true,
-          "requires": {
-            "camelcase": "^3.0.0",
-            "cliui": "^3.2.0",
-            "decamelize": "^1.1.1",
-            "get-caller-file": "^1.0.1",
-            "os-locale": "^1.4.0",
-            "read-pkg-up": "^1.0.1",
-            "require-directory": "^2.1.1",
-            "require-main-filename": "^1.0.1",
-            "set-blocking": "^2.0.0",
-            "string-width": "^1.0.2",
-            "which-module": "^1.0.0",
-            "y18n": "^3.2.1",
-            "yargs-parser": "^5.0.0"
-          }
-        },
-        "yargs-parser": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
-          "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
-          "dev": true,
-          "requires": {
-            "camelcase": "^3.0.0"
+            "is-number": "^7.0.0"
           }
         }
       }
@@ -16004,27 +15760,6 @@
         "ajv-keywords": "^3.1.0"
       }
     },
-    "scss-tokenizer": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
-      "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
-      "dev": true,
-      "requires": {
-        "js-base64": "^2.1.8",
-        "source-map": "^0.4.2"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.4.4",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
-          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
-          "dev": true,
-          "requires": {
-            "amdefine": ">=0.0.4"
-          }
-        }
-      }
-    },
     "seek-bzip": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/seek-bzip/-/seek-bzip-1.0.5.tgz",
@@ -17020,15 +16755,6 @@
       "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==",
       "dev": true
     },
-    "stdout-stream": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz",
-      "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==",
-      "dev": true,
-      "requires": {
-        "readable-stream": "^2.0.1"
-      }
-    },
     "steno": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/steno/-/steno-0.4.4.tgz",
@@ -17308,6 +17034,7 @@
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
       "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
       "dev": true,
+      "optional": true,
       "requires": {
         "get-stdin": "^4.0.1"
       },
@@ -17316,7 +17043,8 @@
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
           "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -18050,17 +17778,6 @@
       "integrity": "sha512-dQRhbNQkRnaqauC7WqSJ21EEksgT0fYZX2lqXzGkpo8JNig9zGZTYoMGvyI2nWmXlE2VSVXVDu7wLVGu/mQEsg==",
       "dev": true
     },
-    "tar": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
-      "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
-      "dev": true,
-      "requires": {
-        "block-stream": "*",
-        "fstream": "^1.0.12",
-        "inherits": "2"
-      }
-    },
     "tar-fs": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.0.0.tgz",
@@ -19385,7 +19102,8 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
       "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "trim-repeated": {
       "version": "1.0.0",
@@ -19415,15 +19133,6 @@
       "integrity": "sha512-tdzBRDGWcI1OpPVmChbdSKhvSVurznZ8X36AYURAcl+0o2ldlCY2XPzyXNNxwJwwyIU+rIglTCG4kxtNKBQH7Q==",
       "dev": true
     },
-    "true-case-path": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz",
-      "integrity": "sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==",
-      "dev": true,
-      "requires": {
-        "glob": "^7.1.2"
-      }
-    },
     "truncate-utf8-bytes": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz",
diff --git a/package.json b/package.json
index e3c8c79..22c9ebd 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
   },
   "devDependencies": {
     "@types/jest": "24.0.22",
+    "@types/js-cookie": "2.2.4",
     "@types/node": "10.14.7",
     "@types/react": "16.8.18",
     "@types/react-dom": "16.8.4",
@@ -82,7 +83,6 @@
     "mini-css-extract-plugin": "0.4.5",
     "module-to-cdn": "3.1.2",
     "morgan": "1.9.1",
-    "node-sass": "4.13.0",
     "npm-run-all": "4.1.5",
     "plop": "2.3.0",
     "postcss-loader": "2.1.6",
@@ -90,6 +90,7 @@
     "react-addons-test-utils": "15.6.2",
     "react-dom": "16.8.6",
     "react-hot-loader": "4.8.8",
+    "sass": "^1.25.0",
     "sass-loader": "7.1.0",
     "serve": "11.2.0",
     "style-loader": "0.21.0",
diff --git a/src/assets/scss/_globals.scss b/src/assets/scss/_globals.scss
index 4a6bcc8..3b39593 100644
--- a/src/assets/scss/_globals.scss
+++ b/src/assets/scss/_globals.scss
@@ -4,15 +4,15 @@ $colors: (
   // Name Color ?Hover?
   dark-blue: 'dark-blue'               #002d3a,
   light-blue: 'light-blue'             #bfdbd9,
-  white: 'white'                       #fff,
-  black: 'black'                       #000,
+  white1: 'white1'                     #fff,
+  black1: 'black1'                     #000,
   grey1: 'grey1'                       #d4d0c7,
   grey2: 'grey2'                       #efece4,
   orange1: 'orange1'                   #d57a2d,
   orange2: 'orange2'                   #dd934e,
-  blue: 'blue'                         #57b2df,
+  blue1: 'blue1'                       #57b2df,
   light-turquoise: 'light-turquoise'   #beddeb,
-  green: 'green'                       #c0dcd9,
+  green1: 'green1'                     #c0dcd9,
   sand: 'sand'                         #fdf9d7
 );
 
diff --git a/src/auth.ts b/src/auth.ts
index ec37361..6662530 100644
--- a/src/auth.ts
+++ b/src/auth.ts
@@ -25,7 +25,7 @@ export function getTokenCookie(): string {
   return Cookies.get("jwt");
 }
 
-export function deleteTokenCookie(): string {
+export function deleteTokenCookie(): void {
   return Cookies.remove("jwt");
 }
 
diff --git a/src/components/Accordion/Accordion.scss b/src/components/Accordion/Accordion.scss
index ebe9233..f2e9e51 100644
--- a/src/components/Accordion/Accordion.scss
+++ b/src/components/Accordion/Accordion.scss
@@ -39,7 +39,7 @@
   button {
     display: flex;
     flex-flow: row nowrap;
-    background-color: color(white);
+    background-color: color(white1);
     width: 100%;
     margin: 0;
     padding: 0;
@@ -52,7 +52,7 @@
     flex: 1;
     text-align: center;
     padding-left: 1em;
-    color: color(blue);
+    color: color(blue1);
     font-size: 1.125rem;
     margin: auto;
   }
diff --git a/src/components/AccordionIcon/AccordionIcon.scss b/src/components/AccordionIcon/AccordionIcon.scss
index 35c0a6b..7933042 100644
--- a/src/components/AccordionIcon/AccordionIcon.scss
+++ b/src/components/AccordionIcon/AccordionIcon.scss
@@ -3,8 +3,8 @@
 
 .accordion-icon {
   display: flex;
-  background-color: color(blue);
-  color: color(white);
+  background-color: color(blue1);
+  color: color(white1);
   align-items: center;
   justify-content: center;
   min-width: 40px;
diff --git a/src/components/AdminSidebar/AdminSidebar.tsx b/src/components/AdminSidebar/AdminSidebar.tsx
index 0386314..658af6f 100644
--- a/src/components/AdminSidebar/AdminSidebar.tsx
+++ b/src/components/AdminSidebar/AdminSidebar.tsx
@@ -16,6 +16,7 @@ class AdminSidebar extends React.Component<AdminSidebarProps, AdminSidebarState>
         <AdminSidebarLink to="/admin/events" path={path}>Events</AdminSidebarLink>
         <AdminSidebarLink to="/admin/feed" path={path}>Feed</AdminSidebarLink>
         <AdminSidebarLink to="/admin/signups" path={path}>Signup forms</AdminSidebarLink>
+        <AdminSidebarLink to="https://static.sika.sik.party/admin" path={path}>Files</AdminSidebarLink>
         <AdminSidebarLink id="admin-sidebar-logout" to="/admin/logout" path={path}>Logout</AdminSidebarLink>
       </div>
     );
diff --git a/src/components/AdminSidebarLink/AdminSidebarLink.scss b/src/components/AdminSidebarLink/AdminSidebarLink.scss
index 95fd309..27028ec 100644
--- a/src/components/AdminSidebarLink/AdminSidebarLink.scss
+++ b/src/components/AdminSidebarLink/AdminSidebarLink.scss
@@ -3,12 +3,12 @@
 
 .admin-sidebar-link {
   padding: 1rem 3rem 1rem 1rem;
-  background-color: color(blue);
+  background-color: color(blue1);
   letter-spacing: 3px;
   text-transform: uppercase;
   line-height: 20px;
   font-weight: bold;
-  border-left: 4px solid color(blue);
+  border-left: 4px solid color(blue1);
   white-space: nowrap;
 
   @media screen and (max-width: 800px - 1px) {
@@ -17,7 +17,7 @@
 
   &:hover,
   &.active {
-    border-left: 4px solid color(white);
+    border-left: 4px solid color(white1);
   }
 
   &::after {
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index 503875f..6d61063 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -16,7 +16,7 @@
 
   &.hero {
     background-color: color(dark-blue);
-    color: color(blue);
+    color: color(blue1);
     font-weight: 800;
     letter-spacing: 1.5px;
     border: 1px solid color(light-turquoise);
@@ -24,8 +24,8 @@
 
   &.filled {
     justify-content: center;
-    background-color: color(blue);
-    color: color(white);
+    background-color: color(blue1);
+    color: color(white1);
     font-weight: 800;
     letter-spacing: 1.5px;
     border: none;
diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss
index 7b224c2..ef6d16e 100644
--- a/src/components/Card/Card.scss
+++ b/src/components/Card/Card.scss
@@ -2,7 +2,7 @@
 
 
 .card {
-  background-color: color(white);
+  background-color: color(white1);
   color: color(dark-blue);
   white-space: wrap;
   margin: 1rem 1rem;
@@ -31,7 +31,7 @@
     font-size: 1.5rem;
     text-align: center;
     font-weight: 300;
-    color: color(black);
+    color: color(black1);
   }
 
   &__image {
@@ -69,7 +69,7 @@
     margin: 0 0 0.5rem;
     font-weight: 200;
     line-height: 22px;
-    color: color(black);
+    color: color(black1);
 
     @media screen and (max-width: 1200px - 1px) {
       margin: 0.5rem 0;
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index d64f578..fa33154 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-import Button, { ButtonType } from "../Button/Button";
 import "./Card.scss";
 import Anchor from "../Anchor";
 
@@ -25,7 +24,7 @@ class Card extends React.Component<CardProps, CardState> {
     };
     const datetime = new Date(this.props.start_time).toLocaleString("fi-FI", options);
 
-    const imageElem = !!image ? (
+    const imageElem = image ? (
       <div style={{ backgroundImage: `url(${image})`, }} className="card__image" />
     ) : null;
     if (link) {
diff --git a/src/components/ColorDiv/ColorDiv.scss b/src/components/ColorDiv/ColorDiv.scss
index ea7b98b..4b4ee2d 100644
--- a/src/components/ColorDiv/ColorDiv.scss
+++ b/src/components/ColorDiv/ColorDiv.scss
@@ -34,15 +34,15 @@
 
   @include backgroundAndHoverableColor(dark-blue);
   @include backgroundAndHoverableColor(light-blue);
-  @include backgroundAndHoverableColor(white);
-  @include backgroundAndHoverableColor(black);
+  @include backgroundAndHoverableColor(white1);
+  @include backgroundAndHoverableColor(black1);
   @include backgroundAndHoverableColor(grey1);
   @include backgroundAndHoverableColor(grey2);
   @include backgroundAndHoverableColor(orange1);
   @include backgroundAndHoverableColor(orange2);
-  @include backgroundAndHoverableColor(blue);
+  @include backgroundAndHoverableColor(blue1);
   @include backgroundAndHoverableColor(light-turquoise);
-  @include backgroundAndHoverableColor(green);
+  @include backgroundAndHoverableColor(green1);
   @include backgroundAndHoverableColor(sand);
 
   &__inherit {
diff --git a/src/components/ColorDiv/ColorDiv.tsx b/src/components/ColorDiv/ColorDiv.tsx
index c7209aa..f519935 100644
--- a/src/components/ColorDiv/ColorDiv.tsx
+++ b/src/components/ColorDiv/ColorDiv.tsx
@@ -21,15 +21,15 @@ export enum ColorEnum {
 const colors = new Map<ColorEnum, string>([
   [ColorEnum.DarkBlue, "dark-blue"],
   [ColorEnum.LightBlue, "light-blue"],
-  [ColorEnum.White, "white"],
-  [ColorEnum.Black, "black"],
+  [ColorEnum.White, "white1"],
+  [ColorEnum.Black, "black1"],
   [ColorEnum.Grey1, "grey1"],
   [ColorEnum.Grey2, "grey2"],
   [ColorEnum.Orange1, "orange1"],
   [ColorEnum.Orange2, "orange2"],
-  [ColorEnum.Blue, "blue"],
+  [ColorEnum.Blue, "blue1"],
   [ColorEnum.LightTurquoise, "light-turquoise"],
-  [ColorEnum.Green, "green"],
+  [ColorEnum.Green, "green1"],
   [ColorEnum.Sand, "sand"],
   [ColorEnum.Transparent, "transparent"],
   [ColorEnum.Inherit, "inherit"]
diff --git a/src/components/DropDownBox/DropDownBox.scss b/src/components/DropDownBox/DropDownBox.scss
index a8c3b83..fa14622 100644
--- a/src/components/DropDownBox/DropDownBox.scss
+++ b/src/components/DropDownBox/DropDownBox.scss
@@ -2,7 +2,7 @@
 
 
 .drop-down-box {
-  background-color: color(white);
+  background-color: color(white1);
   margin-top: 0.8rem;
   position: absolute;
   left: 0;
diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
index 41624b7..2def50a 100644
--- a/src/components/Footer/Footer.scss
+++ b/src/components/Footer/Footer.scss
@@ -16,14 +16,14 @@
   }
 
   & a {
-    color: color(white);
+    color: color(white1);
     text-decoration: underline;
     padding: 0.4rem 0;
     font-size: 14px;
   }
 
   & p {
-    color: color(white);
+    color: color(white1);
     margin: 0;
     padding: 0.4rem 0;
     font-size: 14px;
@@ -73,7 +73,7 @@
   &__copyright {
     display: flex;
     flex-flow: row nowrap;
-    background-color: color(black);
+    background-color: color(black1);
     text-align: center;
     justify-content: center;
     font-size: 12px;
diff --git a/src/components/HeroAsideItem/HeroAsideItem.scss b/src/components/HeroAsideItem/HeroAsideItem.scss
index f2f18b7..2024f6a 100644
--- a/src/components/HeroAsideItem/HeroAsideItem.scss
+++ b/src/components/HeroAsideItem/HeroAsideItem.scss
@@ -26,11 +26,11 @@
   }
 
   h6 {
-    color: color(blue);
+    color: color(blue1);
     font-weight: 600;
   }
 
   h6:hover {
-    color: color(white);
+    color: color(white1);
   }
 }
diff --git a/src/components/HeroAsideSection/HeroAsideSection.scss b/src/components/HeroAsideSection/HeroAsideSection.scss
index 827a189..4679ba4 100644
--- a/src/components/HeroAsideSection/HeroAsideSection.scss
+++ b/src/components/HeroAsideSection/HeroAsideSection.scss
@@ -24,7 +24,7 @@
 
     p {
       font-weight: 100;
-      color: color(white);
+      color: color(white1);
     }
   }
 
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index 59e3ebb..cce105f 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -5,7 +5,9 @@ export enum IconType {
   Facebook,
   Instagram,
   LinkedIn,
-  HamburgerMenu
+  HamburgerMenu,
+  FinlandFlag,
+  GBFlag,
 }
 
 export interface IconProps {
@@ -15,7 +17,7 @@ export interface IconProps {
 }
 export interface IconState { }
 
-const nameToIcon = (name: IconType): JSX.Element => {
+const nameToIcon = (name: IconType): JSX.Element | string => {
   if (name === IconType.Facebook) {
     return (
       <svg role="img"
@@ -57,6 +59,13 @@ const nameToIcon = (name: IconType): JSX.Element => {
       </svg>
     );
   }
+  if (name == IconType.FinlandFlag) {
+    return "🇫🇮";
+  }
+  if (name == IconType.GBFlag) {
+    return "🇬🇧";
+  }
+  return null;
 };
 
 class Icon extends React.Component<IconProps, IconState> {
@@ -75,7 +84,7 @@ class Icon extends React.Component<IconProps, IconState> {
       );
     }
     return (
-      <span onClick={onClick}>
+      <span className="icon" onClick={onClick}>
         {elem}
       </span>
     );
diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss
index 9650f76..f9b7cc9 100644
--- a/src/components/Navigation/Navigation.scss
+++ b/src/components/Navigation/Navigation.scss
@@ -43,8 +43,8 @@ $border-width: 2px;
 
     a,
     a:-webkit-any-link {
-      fill: color(white);
-      color: color(white);
+      fill: color(white1);
+      color: color(white1);
     }
   }
 
@@ -68,8 +68,8 @@ $border-width: 2px;
     svg {
       width: 26px;
       height: 26px;
-      fill: color(white);
-      color: color(white);
+      fill: color(white1);
+      color: color(white1);
     }
   }
 }
diff --git a/src/components/PageLink/PageLink.scss b/src/components/PageLink/PageLink.scss
index 1b69b08..f8f1ba5 100644
--- a/src/components/PageLink/PageLink.scss
+++ b/src/components/PageLink/PageLink.scss
@@ -2,7 +2,7 @@
 
 
 .page-link {
-  border-left-color: color(blue);
+  border-left-color: color(blue1);
   border-left-width: 0.8rem;
   border-left-style: solid;
   margin: 0 1rem 1rem 0;
diff --git a/src/components/PageSection/PageSection.scss b/src/components/PageSection/PageSection.scss
index 14943ac..99752d3 100644
--- a/src/components/PageSection/PageSection.scss
+++ b/src/components/PageSection/PageSection.scss
@@ -34,7 +34,7 @@
       bottom: 0;
       width: 98%;
       left: 1%;
-      border-bottom: 1px solid rgba(color(blue), 0.4);
+      border-bottom: 1px solid rgba(color(blue1), 0.4);
     }
   }
 }
diff --git a/src/components/SectionDividerWidget/SectionDividerWidget.scss b/src/components/SectionDividerWidget/SectionDividerWidget.scss
new file mode 100644
index 0000000..ec018ab
--- /dev/null
+++ b/src/components/SectionDividerWidget/SectionDividerWidget.scss
@@ -0,0 +1,8 @@
+.section-divider-widget {
+  display: flex;
+  margin-top: 12px;
+
+  > span.icon {
+    margin-top: 4px;
+  }
+}
diff --git a/src/components/SectionDividerWidget/SectionDividerWidget.tsx b/src/components/SectionDividerWidget/SectionDividerWidget.tsx
new file mode 100644
index 0000000..2780b45
--- /dev/null
+++ b/src/components/SectionDividerWidget/SectionDividerWidget.tsx
@@ -0,0 +1,34 @@
+import * as React from "react";
+import "./SectionDividerWidget.scss";
+import Icon from "../Icon";
+import { IconType } from "../Icon/Icon";
+
+export interface SectionDividerWidgetProps {
+  label: string;
+}
+export interface SectionDividerWidgetState { }
+
+const getIconByLabel = (label: string) => {
+  if (label === "Finnish") {
+    return <Icon name={IconType.FinlandFlag} />
+  }
+  if (label === "English") {
+    return <Icon name={IconType.GBFlag} />
+  }
+  console.error(`No icon found for label: ${label}`);
+  return null;
+}
+
+class SectionDividerWidget extends React.Component<SectionDividerWidgetProps, SectionDividerWidgetState> {
+  render() {
+    const { label } = this.props;
+
+    return (
+      <h3 className="section-divider-widget">
+        {label}&nbsp;{getIconByLabel(label)}
+      </h3>
+    );
+  }
+}
+
+export default SectionDividerWidget;
diff --git a/src/components/SectionDividerWidget/index.ts b/src/components/SectionDividerWidget/index.ts
new file mode 100644
index 0000000..27d7f9c
--- /dev/null
+++ b/src/components/SectionDividerWidget/index.ts
@@ -0,0 +1,2 @@
+import SectionDividerWidget from "./SectionDividerWidget";
+export default SectionDividerWidget;
diff --git a/src/components/SponsorReel/SponsorReel.scss b/src/components/SponsorReel/SponsorReel.scss
index 579ec14..6652cef 100644
--- a/src/components/SponsorReel/SponsorReel.scss
+++ b/src/components/SponsorReel/SponsorReel.scss
@@ -18,7 +18,7 @@
   }
 
   a {
-    color: color(blue);
+    color: color(blue1);
     text-decoration: underline;
   }
 
diff --git a/src/index.scss b/src/index.scss
index e35a3cd..3843cb3 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -11,7 +11,7 @@ body {
   background-color: color(dark-blue);
   height: 100%;
   font-family: $font;
-  color: color(white);
+  color: color(white1);
   overflow: auto;
 }
 
@@ -112,5 +112,5 @@ p {
 a,
 a:hover {
   text-decoration: none;
-  color: color(white);
+  color: color(white1);
 }
diff --git a/src/models/Event.ts b/src/models/Event.ts
index 1fd65b0..63579e2 100644
--- a/src/models/Event.ts
+++ b/src/models/Event.ts
@@ -1,18 +1,25 @@
 import axios from "axios";
 import { getAuthHeader } from "../auth";
+import { Tag } from "./Tag";
 import * as qs from "query-string";
+import { SignupForm } from "./SignupForm";
 const url = `${process.env.API_URL}/events/`;
 
 export interface Event {
   id: number;
-  title: string;
-  description: string;
-  content: string;
+  title_fi: string;
+  title_en: string;
+  description_fi: string;
+  description_en: string;
+  content_fi: string;
+  content_en: string;
   start_time: string;
   end_time: string;
-  tags: number[];
-  tag_id: number[];
+  tags: Tag[];
+  tag_id?: number[];
   visible: boolean;
+  signup_id: number[];
+  signupForm: SignupForm[];
 }
 
 export async function getEvents(options: any = {}): Promise<Event[]> {
diff --git a/src/models/Feed.ts b/src/models/Feed.ts
index 6d7dac8..1d51829 100644
--- a/src/models/Feed.ts
+++ b/src/models/Feed.ts
@@ -5,9 +5,12 @@ const url = `${process.env.API_URL}/feed/`;
 
 export interface Post {
   id: number;
-  title: string;
-  description: string;
-  content: string;
+  title_fi: string;
+  title_en: string;
+  description_fi: string;
+  description_en: string;
+  content_fi: string;
+  content_en: string;
   publish_time: string;
   autohide: string;
   tag_id: number[];
diff --git a/src/models/SignupForm.ts b/src/models/SignupForm.ts
index 681b7ee..7f8eb3b 100644
--- a/src/models/SignupForm.ts
+++ b/src/models/SignupForm.ts
@@ -10,7 +10,6 @@ export interface SignupForm {
   start_time: string;
   end_time: string;
   questions: string;
-  visible: boolean;
 }
 
 export async function getForms(): Promise<SignupForm[]> {
diff --git a/src/models/Tag.ts b/src/models/Tag.ts
index 8eb36f3..c5159f5 100644
--- a/src/models/Tag.ts
+++ b/src/models/Tag.ts
@@ -4,7 +4,8 @@ const url = `${process.env.API_URL}/tags/`;
 
 export interface Tag {
   id: number;
-  name: string;
+  name_fi: string;
+  name_en: string;
   slug: string;
   icon: string;
 }
diff --git a/src/pages/AdminCommonPage/AdminCommonPage.scss b/src/pages/AdminCommonPage/AdminCommonPage.scss
index 9fd679c..7bd080a 100644
--- a/src/pages/AdminCommonPage/AdminCommonPage.scss
+++ b/src/pages/AdminCommonPage/AdminCommonPage.scss
@@ -36,7 +36,7 @@
     outline: none;
     background-color: color(orange2);
     padding: 0.5rem 1rem;
-    color: color(white);
+    color: color(white1);
   }
 
   h1 {
@@ -53,9 +53,9 @@
 
   .success {
     margin-bottom: 0.5rem;
-    border: 1px solid color(green);
+    border: 1px solid color(green1);
     padding: 8px 16px;
-    color: color(green);
+    color: color(green1);
     display: inline-block;
   }
 
diff --git a/src/pages/AdminEventPage/AdminEventPage.scss b/src/pages/AdminEventPage/AdminEventPage.scss
index a9e96b2..adaa320 100644
--- a/src/pages/AdminEventPage/AdminEventPage.scss
+++ b/src/pages/AdminEventPage/AdminEventPage.scss
@@ -9,7 +9,7 @@
   table,
   th,
   td {
-    border: 1px solid color(white);
+    border: 1px solid color(white1);
     padding: 0.5rem;
 
     a {
diff --git a/src/pages/AdminEventPage/AdminEventPage.tsx b/src/pages/AdminEventPage/AdminEventPage.tsx
index 60ee59a..fb7a23f 100644
--- a/src/pages/AdminEventPage/AdminEventPage.tsx
+++ b/src/pages/AdminEventPage/AdminEventPage.tsx
@@ -91,7 +91,7 @@ class AdminEventPage extends React.Component<AdminEventPageProps, AdminEventPage
         <tbody>
           {events.map(event => (
             <tr key={event.id}>
-              <td><Anchor to={`/admin/events/${event.id}`}>{event.title}</Anchor></td>
+              <td><Anchor to={`/admin/events/${event.id}`}>{event.title_fi}</Anchor></td>
               <td>{formatRelative(new Date(event.start_time), new Date())}</td>
               <td>{formatRelative(new Date(event.end_time), new Date())}</td>
             </tr>
diff --git a/src/pages/AdminFeedPage/AdminFeedPage.scss b/src/pages/AdminFeedPage/AdminFeedPage.scss
index 600b4ca..9d04a29 100644
--- a/src/pages/AdminFeedPage/AdminFeedPage.scss
+++ b/src/pages/AdminFeedPage/AdminFeedPage.scss
@@ -9,7 +9,7 @@
   table,
   th,
   td {
-    border: 1px solid color(white);
+    border: 1px solid color(white1);
     padding: 0.5rem;
 
     a {
diff --git a/src/pages/AdminFeedPage/AdminFeedPage.tsx b/src/pages/AdminFeedPage/AdminFeedPage.tsx
index 23fea7f..a0b6d09 100644
--- a/src/pages/AdminFeedPage/AdminFeedPage.tsx
+++ b/src/pages/AdminFeedPage/AdminFeedPage.tsx
@@ -91,8 +91,8 @@ class AdminFeedPage extends React.Component<AdminFeedPageProps, AdminFeedPageSta
         <tbody>
           {feed.map(post => (
             <tr key={post.id}>
-              <td><Anchor to={`/admin/feed/${post.id}`}>{post.title}</Anchor></td>
-              <td>{post.description}</td>
+              <td><Anchor to={`/admin/feed/${post.id}`}>{post.title_fi}</Anchor></td>
+              <td>{post.description_fi}</td>
               <td>{formatRelative(new Date(post.publish_time), new Date())}</td>
             </tr>
           ))}
diff --git a/src/pages/AdminFrontPage/AdminFrontPage.tsx b/src/pages/AdminFrontPage/AdminFrontPage.tsx
index 606629a..0d3aac1 100644
--- a/src/pages/AdminFrontPage/AdminFrontPage.tsx
+++ b/src/pages/AdminFrontPage/AdminFrontPage.tsx
@@ -16,6 +16,7 @@ class AdminFrontPage extends React.Component<AdminFrontPageProps, AdminFrontPage
         <h1>SIK Admin</h1>
         <Anchor to="/admin/events">Events</Anchor>
         <Anchor to="/admin/feed">Feed</Anchor>
+        <Anchor to="https://static.sika.sik.party/admin">Files</Anchor>
       </div>
     );
   }
diff --git a/src/pages/AdminSignupPage/AdminSignupPage.scss b/src/pages/AdminSignupPage/AdminSignupPage.scss
index 26d2705..ddf5c3a 100644
--- a/src/pages/AdminSignupPage/AdminSignupPage.scss
+++ b/src/pages/AdminSignupPage/AdminSignupPage.scss
@@ -15,7 +15,7 @@
   table,
   th,
   td {
-    border: 1px solid color(white);
+    border: 1px solid color(white1);
     padding: 0.5rem;
 
     a {
diff --git a/src/pages/ContactsPage/ContactsPage.tsx b/src/pages/ContactsPage/ContactsPage.tsx
index e344645..673504e 100644
--- a/src/pages/ContactsPage/ContactsPage.tsx
+++ b/src/pages/ContactsPage/ContactsPage.tsx
@@ -96,7 +96,7 @@ class ContactsPage extends React.Component<ContactsPageProps, ContactsPageState>
                 className={`${getColor(ColorEnum.Blue)} ${getHoverColor(ColorEnum.LightBlue)}`}
                 to="mailto:sik-hallitus@list.ayy.fi">
                 sik-hallitus@list.ayy.fi
-            </Anchor>
+              </Anchor>
             </p>
           </div>
         </PageSection>
diff --git a/src/pages/EventCreatePage/EventCreatePage.scss b/src/pages/EventCreatePage/EventCreatePage.scss
index b9bd11b..6766a0c 100644
--- a/src/pages/EventCreatePage/EventCreatePage.scss
+++ b/src/pages/EventCreatePage/EventCreatePage.scss
@@ -26,7 +26,7 @@
   input[type="text"],
   textarea,
   select {
-    width: 100%;
+    width: 100% !important;
   }
 
   legend {
@@ -35,8 +35,8 @@
   }
 
   button {
-    background-color: color(blue);
-    color: color(white);
+    background-color: color(blue1);
+    color: color(white1);
     padding: 0.5rem 1rem;
     border: none;
     outline: none;
diff --git a/src/pages/EventCreatePage/EventCreatePage.tsx b/src/pages/EventCreatePage/EventCreatePage.tsx
index cea705c..5a714a2 100644
--- a/src/pages/EventCreatePage/EventCreatePage.tsx
+++ b/src/pages/EventCreatePage/EventCreatePage.tsx
@@ -4,11 +4,15 @@ import "./EventCreatePage.scss";
 import { isAuthenticated } from "../../auth";
 import Form from "react-jsonschema-form";
 import { Tag, getTags } from "../../models/Tag";
-import { createEvent, getEvent, updateEvent } from "../../models/Event";
+import { createEvent, getEvent, updateEvent, Event } from "../../models/Event";
 import DatetimeWidget from "../../components/DatetimeWidget";
+import SectionDividerWidget from "../../components/SectionDividerWidget";
+import Icon from "../../components/Icon";
+import { IconType } from "../../components/Icon/Icon";
 
 const widgets = {
   datetime: DatetimeWidget,
+  section_divider: SectionDividerWidget,
 };
 
 export interface EventCreatePageProps {
@@ -47,7 +51,7 @@ class EventCreatePage extends React.Component<EventCreatePageProps, EventCreateP
   fetchInitialFormData = async (id) => {
     try {
       const data = await getEvent(id);
-      data.tags = data.tag_id;
+      data.tags = data.tag_id as any;
       this.setState({
         formData: data,
       });
@@ -85,14 +89,14 @@ class EventCreatePage extends React.Component<EventCreatePageProps, EventCreateP
       payload.tag_id = payload.tags;
       if (payload.id === undefined) {
         const resp = await createEvent(payload);
-        resp.tags = resp.tag_id;
+        resp.tags = resp.tag_id as any;
         this.setState({
           formData: resp,
           statusMessage: "Event created successfully",
         });
       } else {
         const resp = await updateEvent(payload);
-        resp.tags = resp.tag_id;
+        resp.tags = resp.tag_id as any;
         this.setState({
           formData: resp,
           statusMessage: "Event updated successfully.",
@@ -123,7 +127,9 @@ class EventCreatePage extends React.Component<EventCreatePageProps, EventCreateP
   }
 
   buildSchema = () => {
-    const { tags, error, formData } = this.state;
+    const { tags, error } = this.state;
+
+    const formData = this.state.formData as Event;
 
     const date = new Date();
     const currentDatetime = date.toISOString();
@@ -132,39 +138,29 @@ class EventCreatePage extends React.Component<EventCreatePageProps, EventCreateP
     const tomorrowDatetime = tomorrowDate.toISOString();
 
     const schema = {
-      title: formData.id ? formData.title : "New Event",
+      title: formData.id ? formData.title_fi : "New Event",
       type: "object",
-      required: ["title", "location", "description", "content"],
+      required: ["title_fi", "title_en", "location", "description_fi", "description_en", "content_fi", "content_en"],
       properties: {
-        title: {
-          type: "string",
-          title: "Title",
-          default: ""
-        },
-        location: {
-          type: "string",
-          title: "Location",
-          default: "",
-        },
         tags: {
           type: "array",
           title: "Event tags",
           items: {
             type: "number",
             enum: tags.map(t => t.id),
-            enumNames: tags.map(t => t.name),
+            enumNames: tags.map(t => t.name_fi),
           },
           uniqueItems: true,
           default: [],
         },
-        description: {
-          type: "string",
-          title: "Description",
-          default: "",
+        visible: {
+          type: "boolean",
+          title: "Visible",
+          default: true,
         },
-        content: {
+        location: {
           type: "string",
-          title: "Content",
+          title: "Location",
           default: "",
         },
         start_time: {
@@ -177,11 +173,44 @@ class EventCreatePage extends React.Component<EventCreatePageProps, EventCreateP
           title: "End time",
           default: tomorrowDatetime,
         },
-        visible: {
-          type: "boolean",
-          title: "Visible",
-          default: true,
-        }
+        finnish_section_divider: {
+          title: "Finnish",
+          type: "string",
+        },
+        title_fi: {
+          type: "string",
+          title: "Title",
+          default: ""
+        },
+        description_fi: {
+          type: "string",
+          title: "Description",
+          default: "",
+        },
+        content_fi: {
+          type: "string",
+          title: "Content",
+          default: "",
+        },
+        english_section_divider: {
+          title: "English",
+          type: "string",
+        },
+        title_en: {
+          type: "string",
+          title: "Title",
+          default: ""
+        },
+        description_en: {
+          type: "string",
+          title: "Description",
+          default: "",
+        },
+        content_en: {
+          type: "string",
+          title: "Content",
+          default: "",
+        },
       }
     };
     return schema;
@@ -189,7 +218,10 @@ class EventCreatePage extends React.Component<EventCreatePageProps, EventCreateP
 
   buildUISchema = () => {
     const uiSchema = {
-      content: {
+      content_fi: {
+        "ui:widget": "textarea",
+      },
+      content_en: {
         "ui:widget": "textarea",
       },
       start_time: {
@@ -198,17 +230,30 @@ class EventCreatePage extends React.Component<EventCreatePageProps, EventCreateP
       end_time: {
         "ui:widget": "datetime",
       },
+      finnish_section_divider: {
+        "ui:widget": "section_divider",
+        "ui:options": {
+          label: false
+        },
+      },
+      english_section_divider: {
+        "ui:widget": "section_divider",
+        "ui:options": {
+          label: false
+        },
+      },
     };
     return uiSchema;
   }
 
   render() {
-    const { error, formData, statusMessage } = this.state;
+    const { error, statusMessage } = this.state;
+    const formData = this.state.formData as Event;
     const schema = this.buildSchema();
     const uiSchema = this.buildUISchema();
 
     const title = formData.id
-      ? `Edit Event "${formData.title}"`
+      ? `Edit Event "${formData.title_fi}"`
       : "Create Event";
 
     return (
diff --git a/src/pages/EventPage/EventPage.scss b/src/pages/EventPage/EventPage.scss
new file mode 100644
index 0000000..81f4c0e
--- /dev/null
+++ b/src/pages/EventPage/EventPage.scss
@@ -0,0 +1,18 @@
+.event-page {
+  display: block;
+}
+
+.event-banner {
+  width: 300px;
+  height: auto;
+}
+
+.event-title {
+  text-align: center;
+}
+
+.event-signup-buttons {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+}
\ No newline at end of file
diff --git a/src/pages/EventPage/EventPage.tsx b/src/pages/EventPage/EventPage.tsx
new file mode 100644
index 0000000..16b6c8b
--- /dev/null
+++ b/src/pages/EventPage/EventPage.tsx
@@ -0,0 +1,85 @@
+import * as React from "react";
+import Helmet from "react-helmet";
+import "./EventPage.scss";
+import { Event, getEvent } from "../../models/Event";
+import { RouteComponentProps } from "react-router-dom";
+import Button, { ButtonType } from "../../components/Button";
+import Anchor from "../../components/Anchor";
+import PageSection from "../../components/PageSection";
+import { ColorEnum } from "../../components/ColorDiv/ColorDiv";
+import MainSection from "../../components/MainSection";
+import AsideSection from "../../components/AsideSection/AsideSection";
+
+interface MatchParams {
+  id: string;
+}
+
+export interface EventPageOwnProps {}
+
+export interface EventPageState {
+  event?: Event;
+}
+
+type EventPageProps = EventPageOwnProps & RouteComponentProps<MatchParams>
+
+class EventPage extends React.Component<EventPageProps, EventPageState> {
+  constructor(props: EventPageProps) {
+    super(props);
+    const { id } = this.props.match.params;
+    this.state = {
+      event: null
+    }
+    this.fetchEvent(Number(id));
+  }
+
+
+  fetchEvent(id: number) {
+    const eventPromise = getEvent(id);
+    eventPromise.then(event => {
+      this.setState({
+        event,
+      });
+    });
+    return eventPromise;
+  }
+
+  render() {
+    const { event } = this.state;
+    if (!event) return <div>Loading</div>
+
+    return (
+      <div className="event-page">
+        <Helmet>
+          <link rel="canonical" href="https://sik.ayy.fi/INSERT_PATH_HERE!" />
+        </Helmet>
+        <PageSection backgroundColor={ColorEnum.White}>
+          <AsideSection textColor={ColorEnum.Black} />
+          <MainSection textColor={ColorEnum.Black}>
+            <img className="event-banner" src={event.tags[0].icon} alt={event.title_fi} ></img>
+            <h1 className="event-title">{event.title_fi}</h1>
+            <p>
+              {event.description_fi}
+            </p>
+            <p>
+              {event.content_fi}
+            </p>
+            {/* We may have multiple signup forms. Generate own Button for each one */}
+            <div className="event-signup-buttons">
+              {event.signupForm.map(sf => (
+                <Anchor key={sf.id} to={`/signup/${sf.id}`}>
+                  <Button type={ButtonType.Filled} onClick={() => {}}>
+                    {sf.title}
+                  </Button>
+                </Anchor>
+              )
+              )}
+            </div>
+          </MainSection>
+          <AsideSection backgroundColor={ColorEnum.White} textColor={ColorEnum.Black} />
+        </PageSection>
+      </div>
+    );
+  }
+}
+
+export default EventPage;
diff --git a/src/pages/EventPage/index.ts b/src/pages/EventPage/index.ts
new file mode 100644
index 0000000..effa600
--- /dev/null
+++ b/src/pages/EventPage/index.ts
@@ -0,0 +1,2 @@
+import EventPage from "./EventPage";
+export default EventPage;
diff --git a/src/pages/FeedCreatePage/FeedCreatePage.scss b/src/pages/FeedCreatePage/FeedCreatePage.scss
index 20e40a7..cfd6b3b 100644
--- a/src/pages/FeedCreatePage/FeedCreatePage.scss
+++ b/src/pages/FeedCreatePage/FeedCreatePage.scss
@@ -35,8 +35,8 @@
   }
 
   button {
-    background-color: color(blue);
-    color: color(white);
+    background-color: color(blue1);
+    color: color(white1);
     padding: 0.5rem 1rem;
     border: none;
     outline: none;
diff --git a/src/pages/FeedCreatePage/FeedCreatePage.tsx b/src/pages/FeedCreatePage/FeedCreatePage.tsx
index 7863d50..3fd29a3 100644
--- a/src/pages/FeedCreatePage/FeedCreatePage.tsx
+++ b/src/pages/FeedCreatePage/FeedCreatePage.tsx
@@ -38,7 +38,7 @@ class FeedCreatePage extends React.Component<FeedCreatePageProps, FeedCreatePage
 
     this.fetchTags();
 
-    const id = props.match.params.id;
+    const {id} = props.match.params;
     if (id !== undefined) {
       this.fetchInitialFormData(id);
     }
@@ -143,7 +143,7 @@ class FeedCreatePage extends React.Component<FeedCreatePageProps, FeedCreatePage
           items: {
             type: "number",
             enum: tags.map(t => t.id),
-            enumNames: tags.map(t => t.name),
+            enumNames: tags.map(t => t.name_fi),
           },
           uniqueItems: true,
           default: [],
diff --git a/src/pages/FrontPage/FrontPage.tsx b/src/pages/FrontPage/FrontPage.tsx
index 32d541a..3e58329 100644
--- a/src/pages/FrontPage/FrontPage.tsx
+++ b/src/pages/FrontPage/FrontPage.tsx
@@ -6,7 +6,6 @@ import { Event, getEvents } from "../../models/Event";
 import { Post, getFeed } from "../../models/Feed";
 import { StaticContext } from "../../server/StaticContext";
 
-import * as BeerImage from "../../assets/img/beer.jpeg";
 import PageSection from "../../components/PageSection";
 import { ColorEnum } from "../../components/ColorDiv/ColorDiv";
 
@@ -139,11 +138,11 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
           {events.map(event => (
             <Card
               key={event.id}
-              title={event.title}
+              title={event.title_fi}
               start_time={event.start_time}
-              text={event.description}
+              text={event.description_fi}
               link={`/events/${event.id}`}
-              image={BeerImage}
+              image={event.tags[0].icon}
               button={
                 <Button type={ButtonType.Filled} onClick={() => { }}>
                   <h6>Lue lisää&nbsp;›</h6>
@@ -173,9 +172,9 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
           {feed.map(inst => (
             <Card
               key={inst.id}
-              title={inst.title}
+              title={inst.title_fi}
               start_time={inst.publish_time}
-              text={inst.description}
+              text={inst.description_fi}
               link={`/feed/${inst.id}`}
               button={
                 <Button type={ButtonType.Filled} onClick={() => { }}>
diff --git a/src/pages/SignupCreatePage/SignupCreatePage.scss b/src/pages/SignupCreatePage/SignupCreatePage.scss
index 998ef7f..e22bd08 100644
--- a/src/pages/SignupCreatePage/SignupCreatePage.scss
+++ b/src/pages/SignupCreatePage/SignupCreatePage.scss
@@ -35,8 +35,8 @@
   }
 
   button {
-    background-color: color(blue);
-    color: color(white);
+    background-color: color(blue1);
+    color: color(white1);
     padding: 0.5rem 1rem;
     border: none;
     outline: none;
diff --git a/src/routes.tsx b/src/routes.tsx
index 9cb3d21..3e36dcf 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -24,6 +24,7 @@ import FreshmenPage from "./pages/FreshmenPage";
 import StudiesPage from "./pages/StudiesPage";
 import CorporatePage from "./pages/CorporatePage";
 import InEnglishPage from "./pages/InEnglishPage";
+import EventPage from "./pages/EventPage";
 
 const renderPage = (Page) => (props): JSX.Element => {
   return <CommonPage page={Page} {...props} />;
@@ -40,6 +41,7 @@ const renderAdminPage = (Page) => (props): JSX.Element => {
 const commonRoutes = [
   { path: "/", page: FrontPage },
   { path: "/signup/:id", page: SignUpPage },
+  { path: "/events/:id", page: EventPage },
   { path: "/kilta", page: GuildPage },
   { path: "/kilta/toiminta", page: ActualPage },
   { path: "/kilta/fuksi", page: FreshmenPage },