diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000..ac16d553d
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,10 @@
+node_modules
+client/build
+client/node_modules
+client/package-lock.json
+client/package.json
+
+*.enc
+.all-contributorsrc
+package-lock.json
+package.json
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 000000000..420ef54b3
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,58 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": false,
+  "parser": "babel",
+  "overrides": [
+    {
+      "files": "*.json",
+      "options": {
+        "parser": "json"
+      }
+    },
+    {
+      "files": "*.css",
+      "options": {
+        "parser": "css"
+      }
+    },
+    {
+      "files": "*.scss",
+      "options": {
+        "parser": "scss"
+      }
+    },
+    {
+      "files": "*.md",
+      "options": {
+        "parser": "markdown"
+      }
+    },
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "html"
+      }
+    },
+    {
+      "files": ["*.yml", "*.yaml"],
+      "options": {
+        "parser": "yaml"
+      }
+    }
+  ]
+}
diff --git a/client/README.md b/client/README.md
index b8c0b74df..4e86ce084 100644
--- a/client/README.md
+++ b/client/README.md
@@ -99,8 +99,8 @@ You can find the most recent version of this guide [here](https://github.com/fac
 
 Create React App is divided into two packages:
 
-* `create-react-app` is a global command-line utility that you use to create new projects.
-* `react-scripts` is a development dependency in the generated projects (including this one).
+- `create-react-app` is a global command-line utility that you use to create new projects.
+- `react-scripts` is a development dependency in the generated projects (including this one).
 
 You almost never need to update `create-react-app` itself: it delegates all the setup to `react-scripts`.
 
@@ -139,8 +139,8 @@ my-app/
 
 For the project to build, **these files must exist with exact filenames**:
 
-* `public/index.html` is the page template;
-* `src/index.js` is the JavaScript entry point.
+- `public/index.html` is the page template;
+- `src/index.js` is the JavaScript entry point.
 
 You can delete or rename the other files.
 
@@ -195,12 +195,12 @@ You don’t have to ever use `eject`. The curated feature set is suitable for sm
 This project supports a superset of the latest JavaScript standard.<br>
 In addition to [ES6](https://github.com/lukehoban/es6features) syntax features, it also supports:
 
-* [Exponentiation Operator](https://github.com/rwaldron/exponentiation-operator) (ES2016).
-* [Async/await](https://github.com/tc39/ecmascript-asyncawait) (ES2017).
-* [Object Rest/Spread Properties](https://github.com/sebmarkbage/ecmascript-rest-spread) (stage 3 proposal).
-* [Dynamic import()](https://github.com/tc39/proposal-dynamic-import) (stage 3 proposal)
-* [Class Fields and Static Properties](https://github.com/tc39/proposal-class-public-fields) (part of stage 3 proposal).
-* [JSX](https://facebook.github.io/react/docs/introducing-jsx.html) and [Flow](https://flowtype.org/) syntax.
+- [Exponentiation Operator](https://github.com/rwaldron/exponentiation-operator) (ES2016).
+- [Async/await](https://github.com/tc39/ecmascript-asyncawait) (ES2017).
+- [Object Rest/Spread Properties](https://github.com/sebmarkbage/ecmascript-rest-spread) (stage 3 proposal).
+- [Dynamic import()](https://github.com/tc39/proposal-dynamic-import) (stage 3 proposal)
+- [Class Fields and Static Properties](https://github.com/tc39/proposal-class-public-fields) (part of stage 3 proposal).
+- [JSX](https://facebook.github.io/react/docs/introducing-jsx.html) and [Flow](https://flowtype.org/) syntax.
 
 Learn more about [different proposal stages](https://babeljs.io/docs/plugins/#presets-stage-x-experimental-presets-).
 
@@ -208,9 +208,9 @@ While we recommend using experimental proposals with some caution, Facebook heav
 
 Note that **the project only includes a few ES6 [polyfills](https://en.wikipedia.org/wiki/Polyfill)**:
 
-* [`Object.assign()`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) via [`object-assign`](https://github.com/sindresorhus/object-assign).
-* [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) via [`promise`](https://github.com/then/promise).
-* [`fetch()`](https://developer.mozilla.org/en/docs/Web/API/Fetch_API) via [`whatwg-fetch`](https://github.com/github/fetch).
+- [`Object.assign()`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) via [`object-assign`](https://github.com/sindresorhus/object-assign).
+- [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) via [`promise`](https://github.com/then/promise).
+- [`fetch()`](https://developer.mozilla.org/en/docs/Web/API/Fetch_API) via [`whatwg-fetch`](https://github.com/github/fetch).
 
 If you use any other ES6+ features that need **runtime support** (such as `Array.from()` or `Symbol`), make sure you are including the appropriate polyfills manually, or that the browsers you are targeting already support them.
 
@@ -220,8 +220,8 @@ To configure the syntax highlighting in your favorite text editor, head to the [
 
 ## Displaying Lint Output in the Editor
 
->Note: this feature is available with `react-scripts@0.2.0` and higher.<br>
->It also only works with npm 3 or higher.
+> Note: this feature is available with `react-scripts@0.2.0` and higher.<br>
+> It also only works with npm 3 or higher.
 
 Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint.
 
@@ -256,19 +256,22 @@ Then add the block below to your `launch.json` file and put it inside the `.vsco
 ```json
 {
   "version": "0.2.0",
-  "configurations": [{
-    "name": "Chrome",
-    "type": "chrome",
-    "request": "launch",
-    "url": "http://localhost:3000",
-    "webRoot": "${workspaceRoot}/src",
-    "sourceMapPathOverrides": {
-      "webpack:///src/*": "${webRoot}/*"
+  "configurations": [
+    {
+      "name": "Chrome",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceRoot}/src",
+      "sourceMapPathOverrides": {
+        "webpack:///src/*": "${webRoot}/*"
+      }
     }
-  }]
+  ]
 }
 ```
->Note: the URL may be different if you've made adjustments via the [HOST or PORT environment variables](#advanced-configuration).
+
+> Note: the URL may be different if you've made adjustments via the [HOST or PORT environment variables](#advanced-configuration).
 
 Start your app by running `npm start`, and start debugging in VS Code by pressing `F5` or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor.
 
@@ -280,11 +283,11 @@ You would need to have [WebStorm](https://www.jetbrains.com/webstorm/) and [JetB
 
 In the WebStorm menu `Run` select `Edit Configurations...`. Then click `+` and select `JavaScript Debug`. Paste `http://localhost:3000` into the URL field and save the configuration.
 
->Note: the URL may be different if you've made adjustments via the [HOST or PORT environment variables](#advanced-configuration).
+> Note: the URL may be different if you've made adjustments via the [HOST or PORT environment variables](#advanced-configuration).
 
 Start your app by running `npm start`, then press `^D` on macOS or `F9` on Windows and Linux or click the green debug icon to start debugging in WebStorm.
 
-The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine. 
+The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine.
 
 ## Formatting Code Automatically
 
@@ -302,9 +305,9 @@ Alternatively you may use `yarn`:
 yarn add husky lint-staged prettier
 ```
 
-* `husky` makes it easy to use githooks as if they are npm scripts.
-* `lint-staged` allows us to run scripts on staged files in git. See this [blog post about lint-staged to learn more about it](https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8).
-* `prettier` is the JavaScript formatter we will run before commits.
+- `husky` makes it easy to use githooks as if they are npm scripts.
+- `lint-staged` allows us to run scripts on staged files in git. See this [blog post about lint-staged to learn more about it](https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8).
+- `prettier` is the JavaScript formatter we will run before commits.
 
 Now we can make sure every file is formatted correctly by adding a few lines to the `package.json` in the project root.
 
@@ -372,7 +375,7 @@ For example:
 ### `Button.js`
 
 ```js
-import React, { Component } from 'react';
+import React, { Component } from "react";
 
 class Button extends Component {
   render() {
@@ -385,10 +388,9 @@ export default Button; // Don’t forget to use export default!
 
 ### `DangerButton.js`
 
-
 ```js
-import React, { Component } from 'react';
-import Button from './Button'; // Import a component from another file
+import React, { Component } from "react";
+import Button from "./Button"; // Import a component from another file
 
 class DangerButton extends Component {
   render() {
@@ -407,9 +409,9 @@ Named exports are useful for utility modules that export several functions. A mo
 
 Learn more about ES6 modules:
 
-* [When to use the curly braces?](http://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281)
-* [Exploring ES6: Modules](http://exploringjs.com/es6/ch_modules.html)
-* [Understanding ES6: Modules](https://leanpub.com/understandinges6/read#leanpub-auto-encapsulating-code-with-modules)
+- [When to use the curly braces?](http://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281)
+- [Exploring ES6: Modules](http://exploringjs.com/es6/ch_modules.html)
+- [Understanding ES6: Modules](https://leanpub.com/understandinges6/read#leanpub-auto-encapsulating-code-with-modules)
 
 ## Code Splitting
 
@@ -422,22 +424,23 @@ Here is an example:
 ### `moduleA.js`
 
 ```js
-const moduleA = 'Hello';
+const moduleA = "Hello";
 
 export { moduleA };
 ```
+
 ### `App.js`
 
 ```js
-import React, { Component } from 'react';
+import React, { Component } from "react";
 
 class App extends Component {
   handleClick = () => {
-    import('./moduleA')
+    import("./moduleA")
       .then(({ moduleA }) => {
         // Use moduleA
       })
-      .catch(err => {
+      .catch((err) => {
         // Handle failure
       });
   };
@@ -477,8 +480,8 @@ This project setup uses [Webpack](https://webpack.js.org/) for handling all asse
 ### `Button.js`
 
 ```js
-import React, { Component } from 'react';
-import './Button.css'; // Tell Webpack that Button.js uses these styles
+import React, { Component } from "react";
+import "./Button.css"; // Tell Webpack that Button.js uses these styles
 
 class Button extends Component {
   render() {
@@ -517,11 +520,11 @@ becomes this:
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 ```
 
@@ -556,13 +559,13 @@ Then in `package.json`, add the following lines to `scripts`:
      "test": "react-scripts test --env=jsdom",
 ```
 
->Note: To use a different preprocessor, replace `build-css` and `watch-css` commands according to your preprocessor’s documentation.
+> Note: To use a different preprocessor, replace `build-css` and `watch-css` commands according to your preprocessor’s documentation.
 
 Now you can rename `src/App.css` to `src/App.scss` and run `npm run watch-css`. The watcher will find every Sass file in `src` subdirectories, and create a corresponding CSS file next to it, in our case overwriting `src/App.css`. Since `src/App.js` still imports `src/App.css`, the styles become a part of your application. You can now edit `src/App.scss`, and `src/App.css` will be regenerated.
 
 To share variables between Sass files, you can use Sass imports. For example, `src/App.scss` and other component style files could include `@import "./shared.scss";` with variable definitions.
 
-To enable importing files without using relative paths, you can add the  `--include-path` option to the command in `package.json`.
+To enable importing files without using relative paths, you can add the `--include-path` option to the command in `package.json`.
 
 ```
 "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
@@ -572,8 +575,8 @@ To enable importing files without using relative paths, you can add the  `--incl
 This will allow you to do imports like
 
 ```scss
-@import 'styles/_colors.scss'; // assuming a styles directory under src/
-@import 'nprogress/nprogress'; // importing a css file from the nprogress node module
+@import "styles/_colors.scss"; // assuming a styles directory under src/
+@import "nprogress/nprogress"; // importing a css file from the nprogress node module
 ```
 
 At this point you might want to remove all CSS files from the source control, and add `src/**/*.css` to your `.gitignore` file. It is generally a good practice to keep the build products outside of the source control.
@@ -613,13 +616,13 @@ Now running `npm start` and `npm run build` also builds Sass files.
 
 `node-sass` has been reported as having the following issues:
 
-- `node-sass --watch` has been reported to have *performance issues* in certain conditions when used in a virtual machine or with docker.
+- `node-sass --watch` has been reported to have _performance issues_ in certain conditions when used in a virtual machine or with docker.
 
 - Infinite styles compiling [#1939](https://github.com/facebookincubator/create-react-app/issues/1939)
 
 - `node-sass` has been reported as having issues with detecting new files in a directory [#1891](https://github.com/sass/node-sass/issues/1891)
 
- `node-sass-chokidar` is used here as it addresses these issues.
+`node-sass-chokidar` is used here as it addresses these issues.
 
 ## Adding Images, Fonts, and Files
 
@@ -632,8 +635,8 @@ To reduce the number of requests to the server, importing images that are less t
 Here is an example:
 
 ```js
-import React from 'react';
-import logo from './logo.png'; // Tell Webpack this JS file uses this image
+import React from "react";
+import logo from "./logo.png"; // Tell Webpack this JS file uses this image
 
 console.log(logo); // /logo.84287d09.png
 
@@ -664,7 +667,7 @@ An alternative way of handling static assets is described in the next section.
 
 ## Using the `public` Folder
 
->Note: this feature is available with `react-scripts@0.5.0` and higher.
+> Note: this feature is available with `react-scripts@0.5.0` and higher.
 
 ### Changing the HTML
 
@@ -679,18 +682,18 @@ Note that we normally encourage you to `import` assets in JavaScript files inste
 For example, see the sections on [adding a stylesheet](#adding-a-stylesheet) and [adding images and fonts](#adding-images-fonts-and-files).
 This mechanism provides a number of benefits:
 
-* Scripts and stylesheets get minified and bundled together to avoid extra network requests.
-* Missing files cause compilation errors instead of 404 errors for your users.
-* Result filenames include content hashes so you don’t need to worry about browsers caching their old versions.
+- Scripts and stylesheets get minified and bundled together to avoid extra network requests.
+- Missing files cause compilation errors instead of 404 errors for your users.
+- Result filenames include content hashes so you don’t need to worry about browsers caching their old versions.
 
 However there is an **escape hatch** that you can use to add an asset outside of the module system.
 
-If you put a file into the `public` folder, it will **not** be processed by Webpack. Instead it will be copied into the build folder untouched.   To reference assets in the `public` folder, you need to use a special variable called `PUBLIC_URL`.
+If you put a file into the `public` folder, it will **not** be processed by Webpack. Instead it will be copied into the build folder untouched. To reference assets in the `public` folder, you need to use a special variable called `PUBLIC_URL`.
 
 Inside `index.html`, you can use it like this:
 
 ```html
-<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 ```
 
 Only files inside the `public` folder will be accessible by `%PUBLIC_URL%` prefix. If you need to use a file from `src` or `node_modules`, you’ll have to copy it there to explicitly specify your intention to make this file a part of the build.
@@ -710,19 +713,19 @@ render() {
 
 Keep in mind the downsides of this approach:
 
-* None of the files in `public` folder get post-processed or minified.
-* Missing files will not be called at compilation time, and will cause 404 errors for your users.
-* Result filenames won’t include content hashes so you’ll need to add query arguments or rename them every time they change.
+- None of the files in `public` folder get post-processed or minified.
+- Missing files will not be called at compilation time, and will cause 404 errors for your users.
+- Result filenames won’t include content hashes so you’ll need to add query arguments or rename them every time they change.
 
 ### When to Use the `public` Folder
 
 Normally we recommend importing [stylesheets](#adding-a-stylesheet), [images, and fonts](#adding-images-fonts-and-files) from JavaScript.
 The `public` folder is useful as a workaround for a number of less common cases:
 
-* You need a file with a specific name in the build output, such as [`manifest.webmanifest`](https://developer.mozilla.org/en-US/docs/Web/Manifest).
-* You have thousands of images and need to dynamically reference their paths.
-* You want to include a small script like [`pace.js`](http://github.hubspot.com/pace/docs/welcome/) outside of the bundled code.
-* Some library may be incompatible with Webpack and you have no other option but to include it as a `<script>` tag.
+- You need a file with a specific name in the build output, such as [`manifest.webmanifest`](https://developer.mozilla.org/en-US/docs/Web/Manifest).
+- You have thousands of images and need to dynamically reference their paths.
+- You want to include a small script like [`pace.js`](http://github.hubspot.com/pace/docs/welcome/) outside of the bundled code.
+- Some library may be incompatible with Webpack and you have no other option but to include it as a `<script>` tag.
 
 Note that if you add a `<script>` that declares global variables, you also need to read the next section on using them.
 
@@ -756,19 +759,19 @@ Alternatively you may use `yarn`:
 yarn add react-bootstrap bootstrap@3
 ```
 
-Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of your ```src/index.js``` file:
+Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of your `src/index.js` file:
 
 ```js
-import 'bootstrap/dist/css/bootstrap.css';
-import 'bootstrap/dist/css/bootstrap-theme.css';
+import "bootstrap/dist/css/bootstrap.css";
+import "bootstrap/dist/css/bootstrap-theme.css";
 // Put any other imports below so that CSS from your
 // components takes precedence over default styles.
 ```
 
-Import required React Bootstrap components within ```src/App.js``` file or your custom component files:
+Import required React Bootstrap components within `src/App.js` file or your custom component files:
 
 ```js
-import { Navbar, Jumbotron, Button } from 'react-bootstrap';
+import { Navbar, Jumbotron, Button } from "react-bootstrap";
 ```
 
 Now you are ready to use the imported React Bootstrap components within your component hierarchy defined in the render method. Here is an example [`App.js`](https://gist.githubusercontent.com/gaearon/85d8c067f6af1e56277c82d19fd4da7b/raw/6158dd991b67284e9fc8d70b9d973efe87659d72/App.js) redone using React Bootstrap.
@@ -778,9 +781,9 @@ Now you are ready to use the imported React Bootstrap components within your com
 Sometimes you might need to tweak the visual styles of Bootstrap (or equivalent package).<br>
 We suggest the following approach:
 
-* Create a new package that depends on the package you wish to customize, e.g. Bootstrap.
-* Add the necessary build steps to tweak the theme, and publish your package on npm.
-* Install your own theme npm package as a dependency of your app.
+- Create a new package that depends on the package you wish to customize, e.g. Bootstrap.
+- Add the necessary build steps to tweak the theme, and publish your package on npm.
+- Install your own theme npm package as a dependency of your app.
 
 Here is an example of adding a [customized Bootstrap](https://medium.com/@tacomanator/customizing-create-react-app-aa9ffb88165) that follows these steps.
 
@@ -805,7 +808,7 @@ To learn more about Flow, check out [its documentation](https://flowtype.org/).
 
 ## Adding Custom Environment Variables
 
->Note: this feature is available with `react-scripts@0.2.3` and higher.
+> Note: this feature is available with `react-scripts@0.2.3` and higher.
 
 Your project can consume variables declared in your environment as if they were declared locally in your JS files. By
 default you will have `NODE_ENV` defined for you, and any other environment variables starting with
@@ -813,7 +816,7 @@ default you will have `NODE_ENV` defined for you, and any other environment vari
 
 **The environment variables are embedded during the build time**. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime. To read them at runtime, you would need to load HTML into memory on the server and replace placeholders in runtime, just like [described here](#injecting-data-from-the-server-into-the-page). Alternatively you can rebuild the app on the server anytime you change them.
 
->Note: You must create custom environment variables beginning with `REACT_APP_`. Any other variables except `NODE_ENV` will be ignored to avoid accidentally [exposing a private key on the machine that could have the same name](https://github.com/facebookincubator/create-react-app/issues/865#issuecomment-252199527). Changing any environment variables will require you to restart the development server if it is running.
+> Note: You must create custom environment variables beginning with `REACT_APP_`. Any other variables except `NODE_ENV` will be ignored to avoid accidentally [exposing a private key on the machine that could have the same name](https://github.com/facebookincubator/create-react-app/issues/865#issuecomment-252199527). Changing any environment variables will require you to restart the development server if it is running.
 
 These environment variables will be defined for you on `process.env`. For example, having an environment
 variable named `REACT_APP_SECRET_CODE` will be exposed in your JS as `process.env.REACT_APP_SECRET_CODE`.
@@ -859,7 +862,7 @@ a `.env` file. Both of these ways are described in the next few sections.
 Having access to the `NODE_ENV` is also useful for performing actions conditionally:
 
 ```js
-if (process.env.NODE_ENV !== 'production') {
+if (process.env.NODE_ENV !== "production") {
   analytics.disable();
 }
 ```
@@ -868,7 +871,7 @@ When you compile the app with `npm run build`, the minification step will strip
 
 ### Referencing Environment Variables in the HTML
 
->Note: this feature is available with `react-scripts@0.9.0` and higher.
+> Note: this feature is available with `react-scripts@0.9.0` and higher.
 
 You can also access the environment variables starting with `REACT_APP_` in the `public/index.html`. For example:
 
@@ -878,8 +881,8 @@ You can also access the environment variables starting with `REACT_APP_` in the
 
 Note that the caveats from the above section apply:
 
-* Apart from a few built-in variables (`NODE_ENV` and `PUBLIC_URL`), variable names must start with `REACT_APP_` to work.
-* The environment variables are injected at build time. If you need to inject them at runtime, [follow this approach instead](#generating-dynamic-meta-tags-on-the-server).
+- Apart from a few built-in variables (`NODE_ENV` and `PUBLIC_URL`), variable names must start with `REACT_APP_` to work.
+- The environment variables are injected at build time. If you need to inject them at runtime, [follow this approach instead](#generating-dynamic-meta-tags-on-the-server).
 
 ### Adding Temporary Environment Variables In Your Shell
 
@@ -902,7 +905,7 @@ REACT_APP_SECRET_CODE=abcdef npm start
 
 ### Adding Development Environment Variables In `.env`
 
->Note: this feature is available with `react-scripts@0.5.0` and higher.
+> Note: this feature is available with `react-scripts@0.5.0` and higher.
 
 To define permanent environment variables, create a file called `.env` in the root of your project:
 
@@ -914,39 +917,39 @@ REACT_APP_SECRET_CODE=abcdef
 
 #### What other `.env` files can be used?
 
->Note: this feature is **available with `react-scripts@1.0.0` and higher**.
+> Note: this feature is **available with `react-scripts@1.0.0` and higher**.
 
-* `.env`: Default.
-* `.env.local`: Local overrides. **This file is loaded for all environments except test.**
-* `.env.development`, `.env.test`, `.env.production`: Environment-specific settings.
-* `.env.development.local`, `.env.test.local`, `.env.production.local`: Local overrides of environment-specific settings.
+- `.env`: Default.
+- `.env.local`: Local overrides. **This file is loaded for all environments except test.**
+- `.env.development`, `.env.test`, `.env.production`: Environment-specific settings.
+- `.env.development.local`, `.env.test.local`, `.env.production.local`: Local overrides of environment-specific settings.
 
 Files on the left have more priority than files on the right:
 
-* `npm start`: `.env.development.local`, `.env.development`, `.env.local`, `.env`
-* `npm run build`: `.env.production.local`, `.env.production`, `.env.local`, `.env`
-* `npm test`: `.env.test.local`, `.env.test`, `.env` (note `.env.local` is missing)
+- `npm start`: `.env.development.local`, `.env.development`, `.env.local`, `.env`
+- `npm run build`: `.env.production.local`, `.env.production`, `.env.local`, `.env`
+- `npm test`: `.env.test.local`, `.env.test`, `.env` (note `.env.local` is missing)
 
 These variables will act as the defaults if the machine does not explicitly set them.<br>
 Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) for more details.
 
->Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need
-these defined as well. Consult their documentation how to do this. For example, see the documentation for [Travis CI](https://docs.travis-ci.com/user/environment-variables/) or [Heroku](https://devcenter.heroku.com/articles/config-vars).
+> Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need
+> these defined as well. Consult their documentation how to do this. For example, see the documentation for [Travis CI](https://docs.travis-ci.com/user/environment-variables/) or [Heroku](https://devcenter.heroku.com/articles/config-vars).
 
 ## Can I Use Decorators?
 
 Many popular libraries use [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) in their documentation.<br>
 Create React App doesn’t support decorator syntax at the moment because:
 
-* It is an experimental proposal and is subject to change.
-* The current specification version is not officially supported by Babel.
-* If the specification changes, we won’t be able to write a codemod because we don’t use them internally at Facebook.
+- It is an experimental proposal and is subject to change.
+- The current specification version is not officially supported by Babel.
+- If the specification changes, we won’t be able to write a codemod because we don’t use them internally at Facebook.
 
 However in many cases you can rewrite decorator-based code without decorators just as fine.<br>
 Please refer to these two threads for reference:
 
-* [#214](https://github.com/facebookincubator/create-react-app/issues/214)
-* [#411](https://github.com/facebookincubator/create-react-app/issues/411)
+- [#214](https://github.com/facebookincubator/create-react-app/issues/214)
+- [#411](https://github.com/facebookincubator/create-react-app/issues/411)
 
 Create React App will add decorator support when the specification advances to a stable stage.
 
@@ -956,6 +959,7 @@ These tutorials will help you to integrate your app with an API backend running
 using `fetch()` to access it.
 
 ### Node
+
 Check out [this tutorial](https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/).
 You can find the companion GitHub repository [here](https://github.com/fullstackreact/food-lookup-demo).
 
@@ -966,7 +970,7 @@ You can find the companion GitHub repository [here](https://github.com/fullstack
 
 ## Proxying API Requests in Development
 
->Note: this feature is available with `react-scripts@0.2.3` and higher.
+> Note: this feature is available with `react-scripts@0.2.3` and higher.
 
 People often serve the front-end React app from the same host and port as their backend implementation.<br>
 For example, a production setup might look like this after the app is deployed:
@@ -998,9 +1002,9 @@ Keep in mind that `proxy` only has effect in development (with `npm start`), and
 The `proxy` option supports HTTP, HTTPS and WebSocket connections.<br>
 If the `proxy` option is **not** flexible enough for you, alternatively you can:
 
-* [Configure the proxy yourself](#configuring-the-proxy-manually)
-* Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)).
-* Use [environment variables](#adding-custom-environment-variables) to inject the right server host and port into your app.
+- [Configure the proxy yourself](#configuring-the-proxy-manually)
+- Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)).
+- Use [environment variables](#adding-custom-environment-variables) to inject the right server host and port into your app.
 
 ### "Invalid Host Header" Errors After Configuring Proxy
 
@@ -1008,7 +1012,7 @@ When you enable the `proxy` option, you opt into a more strict set of host check
 
 This shouldn’t affect you when developing on `localhost`, but if you develop remotely like [described here](https://github.com/facebookincubator/create-react-app/issues/2271), you will see this error in the browser after enabling the `proxy` option:
 
->Invalid Host header
+> Invalid Host header
 
 To work around it, you can specify your public development host in a file called `.env.development` in the root of your project:
 
@@ -1030,10 +1034,11 @@ We don’t recommend this approach.
 
 ### Configuring the Proxy Manually
 
->Note: this feature is available with `react-scripts@1.0.0` and higher.
+> Note: this feature is available with `react-scripts@1.0.0` and higher.
 
 If the `proxy` option is **not** flexible enough for you, you can specify an object in the following form (in `package.json`).<br>
 You may also specify any configuration value [`http-proxy-middleware`](https://github.com/chimurai/http-proxy-middleware#options) or [`http-proxy`](https://github.com/nodejitsu/node-http-proxy#options) supports.
+
 ```js
 {
   // ...
@@ -1052,6 +1057,7 @@ All requests matching this path will be proxies, no exceptions. This includes re
 
 If you need to specify multiple proxies, you may do so by specifying additional entries.
 Matches are regular expressions, so that you can use a regexp to match multiple paths.
+
 ```js
 {
   // ...
@@ -1118,7 +1124,7 @@ Either way, you can proxy WebSocket requests manually in `package.json`:
 
 ## Using HTTPS in Development
 
->Note: this feature is available with `react-scripts@0.4.0` and higher.
+> Note: this feature is available with `react-scripts@0.4.0` and higher.
 
 You may require the dev server to serve pages over HTTPS. One particular case where this could be useful is when using [the "proxy" feature](#proxying-api-requests-in-development) to proxy requests to an API server when that API server is itself serving HTTPS.
 
@@ -1145,11 +1151,13 @@ Note that the server will use a self-signed certificate, so your web browser wil
 Since Create React App doesn’t support server rendering, you might be wondering how to make `<meta>` tags dynamic and reflect the current URL. To solve this, we recommend to add placeholders into the HTML, like this:
 
 ```html
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta property="og:title" content="__OG_TITLE__">
-    <meta property="og:description" content="__OG_DESCRIPTION__">
+    <meta property="og:title" content="__OG_TITLE__" />
+    <meta property="og:description" content="__OG_DESCRIPTION__" />
+  </head>
+</html>
 ```
 
 Then, on the server, regardless of the backend you use, you can read `index.html` into memory and replace `__OG_TITLE__`, `__OG_DESCRIPTION__`, and any other placeholders with values depending on the current URL. Just make sure to sanitize and escape the interpolated values so that they are safe to embed into HTML!
@@ -1183,8 +1191,7 @@ Then, on the server, you can replace `__SERVER_DATA__` with a JSON of real data
 
 ## Running Tests
 
->Note: this feature is available with `react-scripts@0.3.0` and higher.<br>
->[Read the migration guide to learn how to enable it in older projects!](https://github.com/facebookincubator/create-react-app/blob/master/CHANGELOG.md#migrating-from-023-to-030)
+> Note: this feature is available with `react-scripts@0.3.0` and higher.<br> >[Read the migration guide to learn how to enable it in older projects!](https://github.com/facebookincubator/create-react-app/blob/master/CHANGELOG.md#migrating-from-023-to-030)
 
 Create React App uses [Jest](https://facebook.github.io/jest/) as its test runner. To prepare for this integration, we did a [major revamp](https://facebook.github.io/jest/blog/2016/09/01/jest-15.html) of Jest so if you heard bad things about it years ago, give it another try.
 
@@ -1198,9 +1205,9 @@ We recommend that you use a separate tool for browser end-to-end tests if you ne
 
 Jest will look for test files with any of the following popular naming conventions:
 
-* Files with `.js` suffix in `__tests__` folders.
-* Files with `.test.js` suffix.
-* Files with `.spec.js` suffix.
+- Files with `.js` suffix in `__tests__` folders.
+- Files with `.test.js` suffix.
+- Files with `.spec.js` suffix.
 
 The `.test.js` / `.spec.js` files (or the `__tests__` folders) can be located at any depth under the `src` top level folder.
 
@@ -1229,9 +1236,9 @@ To create tests, add `it()` (or `test()`) blocks with the name of the test and i
 Jest provides a built-in `expect()` global function for making assertions. A basic test could look like this:
 
 ```js
-import sum from './sum';
+import sum from "./sum";
 
-it('sums numbers', () => {
+it("sums numbers", () => {
   expect(sum(1, 2)).toEqual(3);
   expect(sum(2, 2)).toEqual(4);
 });
@@ -1247,12 +1254,12 @@ There is a broad spectrum of component testing techniques. They range from a “
 Different projects choose different testing tradeoffs based on how often components change, and how much logic they contain. If you haven’t decided on a testing strategy yet, we recommend that you start with creating simple smoke tests for your components:
 
 ```js
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
 
-it('renders without crashing', () => {
-  const div = document.createElement('div');
+it("renders without crashing", () => {
+  const div = document.createElement("div");
   ReactDOM.render(<App />, div);
 });
 ```
@@ -1278,9 +1285,10 @@ As of Enzyme 3, you will need to install Enzyme along with an Adapter correspond
 The adapter will also need to be configured in your [global setup file](#initializing-test-environment):
 
 #### `src/setupTests.js`
+
 ```js
-import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import { configure } from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
 
 configure({ adapter: new Adapter() });
 ```
@@ -1288,11 +1296,11 @@ configure({ adapter: new Adapter() });
 Now you can write a smoke test with it:
 
 ```js
-import React from 'react';
-import { shallow } from 'enzyme';
-import App from './App';
+import React from "react";
+import { shallow } from "enzyme";
+import App from "./App";
 
-it('renders without crashing', () => {
+it("renders without crashing", () => {
   shallow(<App />);
 });
 ```
@@ -1304,11 +1312,11 @@ You can read the [Enzyme documentation](http://airbnb.io/enzyme/) for more testi
 Here is an example from Enzyme documentation that asserts specific output, rewritten to use Jest matchers:
 
 ```js
-import React from 'react';
-import { shallow } from 'enzyme';
-import App from './App';
+import React from "react";
+import { shallow } from "enzyme";
+import App from "./App";
 
-it('renders welcome message', () => {
+it("renders welcome message", () => {
   const wrapper = shallow(<App />);
   const welcome = <h2>Welcome to React</h2>;
   // expect(wrapper.contains(welcome)).to.equal(true);
@@ -1322,7 +1330,7 @@ Nevertheless you can use a third-party assertion library like [Chai](http://chai
 Additionally, you might find [jest-enzyme](https://github.com/blainekasten/enzyme-matchers) helpful to simplify your tests with readable matchers. The above `contains` code can be written simpler with jest-enzyme.
 
 ```js
-expect(wrapper).toContainReact(welcome)
+expect(wrapper).toContainReact(welcome);
 ```
 
 To enable this, install `jest-enzyme`:
@@ -1340,7 +1348,7 @@ yarn add jest-enzyme
 Import it in [`src/setupTests.js`](#initializing-test-environment) to make its matchers available in every test:
 
 ```js
-import 'jest-enzyme';
+import "jest-enzyme";
 ```
 
 ### Using Third Party Assertion Libraries
@@ -1350,28 +1358,29 @@ We recommend that you use `expect()` for assertions and `jest.fn()` for spies. I
 However, if you are used to other libraries, such as [Chai](http://chaijs.com/) and [Sinon](http://sinonjs.org/), or if you have existing code using them that you’d like to port over, you can import them normally like this:
 
 ```js
-import sinon from 'sinon';
-import { expect } from 'chai';
+import sinon from "sinon";
+import { expect } from "chai";
 ```
 
 and then use them in your tests like you normally do.
 
 ### Initializing Test Environment
 
->Note: this feature is available with `react-scripts@0.4.0` and higher.
+> Note: this feature is available with `react-scripts@0.4.0` and higher.
 
 If your app uses a browser API that you need to mock in your tests or if you just need a global setup before running your tests, add a `src/setupTests.js` to your project. It will be automatically executed before running your tests.
 
 For example:
 
 #### `src/setupTests.js`
+
 ```js
 const localStorageMock = {
   getItem: jest.fn(),
   setItem: jest.fn(),
-  clear: jest.fn()
+  clear: jest.fn(),
 };
-global.localStorage = localStorageMock
+global.localStorage = localStorageMock;
 ```
 
 ### Focusing and Excluding Tests
@@ -1393,10 +1402,11 @@ Note that tests run much slower with coverage so it is recommended to run it sep
 The default Jest coverage configuration can be overriden by adding any of the following supported keys to a Jest config in your package.json.
 
 Supported overrides:
- - [`collectCoverageFrom`](https://facebook.github.io/jest/docs/en/configuration.html#collectcoveragefrom-array)
- - [`coverageReporters`](https://facebook.github.io/jest/docs/en/configuration.html#coveragereporters-array-string)
- - [`coverageThreshold`](https://facebook.github.io/jest/docs/en/configuration.html#coveragethreshold-object)
- - [`snapshotSerializers`](https://facebook.github.io/jest/docs/en/configuration.html#snapshotserializers-array-string)
+
+- [`collectCoverageFrom`](https://facebook.github.io/jest/docs/en/configuration.html#collectcoveragefrom-array)
+- [`coverageReporters`](https://facebook.github.io/jest/docs/en/configuration.html#coveragereporters-array-string)
+- [`coverageThreshold`](https://facebook.github.io/jest/docs/en/configuration.html#coveragethreshold-object)
+- [`snapshotSerializers`](https://facebook.github.io/jest/docs/en/configuration.html#snapshotserializers-array-string)
 
 Example package.json:
 
@@ -1404,7 +1414,7 @@ Example package.json:
 {
   "name": "your-package",
   "jest": {
-    "collectCoverageFrom" : [
+    "collectCoverageFrom": [
       "src/**/*.{js,jsx}",
       "!<rootDir>/node_modules/",
       "!<rootDir>/path/to/dir/"
@@ -1432,10 +1442,12 @@ When creating a build of your application with `npm run build` linter warnings a
 Popular CI servers already set the environment variable `CI` by default but you can do this yourself too:
 
 ### On CI servers
+
 #### Travis CI
 
-1. Following the [Travis Getting started](https://docs.travis-ci.com/user/getting-started/) guide for syncing your GitHub repository with Travis.  You may need to initialize some settings manually in your [profile](https://travis-ci.org/profile) page.
+1. Following the [Travis Getting started](https://docs.travis-ci.com/user/getting-started/) guide for syncing your GitHub repository with Travis. You may need to initialize some settings manually in your [profile](https://travis-ci.org/profile) page.
 1. Add a `.travis.yml` file to your git repository.
+
 ```
 language: node_js
 node_js:
@@ -1447,6 +1459,7 @@ script:
   - npm run build
   - npm test
 ```
+
 1. Trigger your first build with a git push.
 1. [Customize your Travis CI Build](https://docs.travis-ci.com/user/customizing-the-build/) if needed.
 
@@ -1455,6 +1468,7 @@ script:
 Follow [this article](https://medium.com/@knowbody/circleci-and-zeits-now-sh-c9b7eebcd3c1) to set up CircleCI with a Create React App project.
 
 ### On your own environment
+
 ##### Windows (cmd.exe)
 
 ```cmd
@@ -1479,7 +1493,7 @@ CI=true npm run build
 
 The test command will force Jest to run tests once instead of launching the watcher.
 
->  If you find yourself doing this often in development, please [file an issue](https://github.com/facebookincubator/create-react-app/issues/new) to tell us about your use case because we want to make watcher the best experience and are open to changing how it works to accommodate more workflows.
+> If you find yourself doing this often in development, please [file an issue](https://github.com/facebookincubator/create-react-app/issues/new) to tell us about your use case because we want to make watcher the best experience and are open to changing how it works to accommodate more workflows.
 
 The build command will check for linter warnings and fail if any are found.
 
@@ -1506,15 +1520,15 @@ If you know that none of your tests depend on [jsdom](https://github.com/tmpvar/
 
 To help you make up your mind, here is a list of APIs that **need jsdom**:
 
-* Any browser globals like `window` and `document`
-* [`ReactDOM.render()`](https://facebook.github.io/react/docs/top-level-api.html#reactdom.render)
-* [`TestUtils.renderIntoDocument()`](https://facebook.github.io/react/docs/test-utils.html#renderintodocument) ([a shortcut](https://github.com/facebook/react/blob/34761cf9a252964abfaab6faf74d473ad95d1f21/src/test/ReactTestUtils.js#L83-L91) for the above)
-* [`mount()`](http://airbnb.io/enzyme/docs/api/mount.html) in [Enzyme](http://airbnb.io/enzyme/index.html)
+- Any browser globals like `window` and `document`
+- [`ReactDOM.render()`](https://facebook.github.io/react/docs/top-level-api.html#reactdom.render)
+- [`TestUtils.renderIntoDocument()`](https://facebook.github.io/react/docs/test-utils.html#renderintodocument) ([a shortcut](https://github.com/facebook/react/blob/34761cf9a252964abfaab6faf74d473ad95d1f21/src/test/ReactTestUtils.js#L83-L91) for the above)
+- [`mount()`](http://airbnb.io/enzyme/docs/api/mount.html) in [Enzyme](http://airbnb.io/enzyme/index.html)
 
 In contrast, **jsdom is not needed** for the following APIs:
 
-* [`TestUtils.createRenderer()`](https://facebook.github.io/react/docs/test-utils.html#shallow-rendering) (shallow rendering)
-* [`shallow()`](http://airbnb.io/enzyme/docs/api/shallow.html) in [Enzyme](http://airbnb.io/enzyme/index.html)
+- [`TestUtils.createRenderer()`](https://facebook.github.io/react/docs/test-utils.html#shallow-rendering) (shallow rendering)
+- [`shallow()`](http://airbnb.io/enzyme/docs/api/shallow.html) in [Enzyme](http://airbnb.io/enzyme/index.html)
 
 Finally, jsdom is also not needed for [snapshot testing](http://facebook.github.io/jest/blog/2016/07/27/jest-14.html).
 
@@ -1533,9 +1547,9 @@ If you use [Visual Studio Code](https://code.visualstudio.com), there is a [Jest
 Usually, in an app, you have a lot of UI components, and each of them has many different states.
 For an example, a simple button component could have following states:
 
-* In a regular state, with a text label.
-* In the disabled mode.
-* In a loading state.
+- In a regular state, with a text label.
+- In the disabled mode.
+- In a loading state.
 
 Usually, it’s hard to see these states without running a sample app or some examples.
 
@@ -1565,10 +1579,10 @@ After that, follow the instructions on the screen.
 
 Learn more about React Storybook:
 
-* Screencast: [Getting Started with React Storybook](https://egghead.io/lessons/react-getting-started-with-react-storybook)
-* [GitHub Repo](https://github.com/storybooks/storybook)
-* [Documentation](https://storybook.js.org/basics/introduction/)
-* [Snapshot Testing UI](https://github.com/storybooks/storybook/tree/master/addons/storyshots) with Storybook + addon/storyshot
+- Screencast: [Getting Started with React Storybook](https://egghead.io/lessons/react-getting-started-with-react-storybook)
+- [GitHub Repo](https://github.com/storybooks/storybook)
+- [Documentation](https://storybook.js.org/basics/introduction/)
+- [Snapshot Testing UI](https://github.com/storybooks/storybook/tree/master/addons/storyshots) with Storybook + addon/storyshot
 
 ### Getting Started with Styleguidist
 
@@ -1605,8 +1619,8 @@ After that, follow the instructions on the screen.
 
 Learn more about React Styleguidist:
 
-* [GitHub Repo](https://github.com/styleguidist/react-styleguidist)
-* [Documentation](https://react-styleguidist.js.org/docs/getting-started.html)
+- [GitHub Repo](https://github.com/styleguidist/react-styleguidist)
+- [Documentation](https://react-styleguidist.js.org/docs/getting-started.html)
 
 ## Making a Progressive Web App
 
@@ -1615,9 +1629,9 @@ By default, the production build is a fully functional, offline-first
 
 Progressive Web Apps are faster and more reliable than traditional web pages, and provide an engaging mobile experience:
 
- * All static site assets are cached so that your page loads fast on subsequent visits, regardless of network connectivity (such as 2G or 3G). Updates are downloaded in the background.
- * Your app will work regardless of network state, even if offline. This means your users will be able to use your app at 10,000 feet and on the subway.
- * On mobile devices, your app can be added directly to the user's home screen, app icon and all. You can also re-engage users using web **push notifications**. This eliminates the need for the app store.
+- All static site assets are cached so that your page loads fast on subsequent visits, regardless of network connectivity (such as 2G or 3G). Updates are downloaded in the background.
+- Your app will work regardless of network state, even if offline. This means your users will be able to use your app at 10,000 feet and on the subway.
+- On mobile devices, your app can be added directly to the user's home screen, app icon and all. You can also re-engage users using web **push notifications**. This eliminates the need for the app store.
 
 The [`sw-precache-webpack-plugin`](https://github.com/goldhand/sw-precache-webpack-plugin)
 is integrated into production configuration,
@@ -1637,9 +1651,11 @@ If you had previously enabled service workers in your production deployment and
 have decided that you would like to disable them for all your existing users,
 you can swap out the call to `registerServiceWorker()` in
 [`src/index.js`](src/index.js) first by modifying the service worker import:
+
 ```javascript
-import { unregister } from './registerServiceWorker';
+import { unregister } from "./registerServiceWorker";
 ```
+
 and then call `unregister()` instead.
 After the user visits a page that has `unregister()`,
 the service worker will be uninstalled. Note that depending on how `/service-worker.js` is served,
@@ -1648,59 +1664,59 @@ it may take up to 24 hours for the cache to be invalidated.
 ### Offline-First Considerations
 
 1. Service workers [require HTTPS](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers#you_need_https),
-although to facilitate local testing, that policy
-[does not apply to `localhost`](http://stackoverflow.com/questions/34160509/options-for-testing-service-workers-via-http/34161385#34161385).
-If your production web server does not support HTTPS, then the service worker
-registration will fail, but the rest of your web app will remain functional.
+   although to facilitate local testing, that policy
+   [does not apply to `localhost`](http://stackoverflow.com/questions/34160509/options-for-testing-service-workers-via-http/34161385#34161385).
+   If your production web server does not support HTTPS, then the service worker
+   registration will fail, but the rest of your web app will remain functional.
 
 1. Service workers are [not currently supported](https://jakearchibald.github.io/isserviceworkerready/)
-in all web browsers. Service worker registration [won't be attempted](src/registerServiceWorker.js)
-on browsers that lack support.
+   in all web browsers. Service worker registration [won't be attempted](src/registerServiceWorker.js)
+   on browsers that lack support.
 
 1. The service worker is only enabled in the [production environment](#deployment),
-e.g. the output of `npm run build`. It's recommended that you do not enable an
-offline-first service worker in a development environment, as it can lead to
-frustration when previously cached assets are used and do not include the latest
-changes you've made locally.
-
-1. If you *need* to test your offline-first service worker locally, build
-the application (using `npm run build`) and run a simple http server from your
-build directory. After running the build script, `create-react-app` will give
-instructions for one way to test your production build locally and the [deployment instructions](#deployment) have
-instructions for using other methods. *Be sure to always use an
-incognito window to avoid complications with your browser cache.*
+   e.g. the output of `npm run build`. It's recommended that you do not enable an
+   offline-first service worker in a development environment, as it can lead to
+   frustration when previously cached assets are used and do not include the latest
+   changes you've made locally.
+
+1. If you _need_ to test your offline-first service worker locally, build
+   the application (using `npm run build`) and run a simple http server from your
+   build directory. After running the build script, `create-react-app` will give
+   instructions for one way to test your production build locally and the [deployment instructions](#deployment) have
+   instructions for using other methods. _Be sure to always use an
+   incognito window to avoid complications with your browser cache._
 
 1. If possible, configure your production environment to serve the generated
-`service-worker.js` [with HTTP caching disabled](http://stackoverflow.com/questions/38843970/service-worker-javascript-update-frequency-every-24-hours).
-If that's not possible—[GitHub Pages](#github-pages), for instance, does not
-allow you to change the default 10 minute HTTP cache lifetime—then be aware
-that if you visit your production site, and then revisit again before
-`service-worker.js` has expired from your HTTP cache, you'll continue to get
-the previously cached assets from the service worker. If you have an immediate
-need to view your updated production deployment, performing a shift-refresh
-will temporarily disable the service worker and retrieve all assets from the
-network.
+   `service-worker.js` [with HTTP caching disabled](http://stackoverflow.com/questions/38843970/service-worker-javascript-update-frequency-every-24-hours).
+   If that's not possible—[GitHub Pages](#github-pages), for instance, does not
+   allow you to change the default 10 minute HTTP cache lifetime—then be aware
+   that if you visit your production site, and then revisit again before
+   `service-worker.js` has expired from your HTTP cache, you'll continue to get
+   the previously cached assets from the service worker. If you have an immediate
+   need to view your updated production deployment, performing a shift-refresh
+   will temporarily disable the service worker and retrieve all assets from the
+   network.
 
 1. Users aren't always familiar with offline-first web apps. It can be useful to
-[let the user know](https://developers.google.com/web/fundamentals/instant-and-offline/offline-ux#inform_the_user_when_the_app_is_ready_for_offline_consumption)
-when the service worker has finished populating your caches (showing a "This web
-app works offline!" message) and also let them know when the service worker has
-fetched the latest updates that will be available the next time they load the
-page (showing a "New content is available; please refresh." message). Showing
-this messages is currently left as an exercise to the developer, but as a
-starting point, you can make use of the logic included in [`src/registerServiceWorker.js`](src/registerServiceWorker.js), which
-demonstrates which service worker lifecycle events to listen for to detect each
-scenario, and which as a default, just logs appropriate messages to the
-JavaScript console.
+   [let the user know](https://developers.google.com/web/fundamentals/instant-and-offline/offline-ux#inform_the_user_when_the_app_is_ready_for_offline_consumption)
+   when the service worker has finished populating your caches (showing a "This web
+   app works offline!" message) and also let them know when the service worker has
+   fetched the latest updates that will be available the next time they load the
+   page (showing a "New content is available; please refresh." message). Showing
+   this messages is currently left as an exercise to the developer, but as a
+   starting point, you can make use of the logic included in [`src/registerServiceWorker.js`](src/registerServiceWorker.js), which
+   demonstrates which service worker lifecycle events to listen for to detect each
+   scenario, and which as a default, just logs appropriate messages to the
+   JavaScript console.
 
 1. By default, the generated service worker file will not intercept or cache any
-cross-origin traffic, like HTTP [API requests](#integrating-with-an-api-backend),
-images, or embeds loaded from a different domain. If you would like to use a
-runtime caching strategy for those requests, you can [`eject`](#npm-run-eject)
-and then configure the
-[`runtimeCaching`](https://github.com/GoogleChrome/sw-precache#runtimecaching-arrayobject)
-option in the `SWPrecacheWebpackPlugin` section of
-[`webpack.config.prod.js`](../config/webpack.config.prod.js).
+   cross-origin traffic, like HTTP [API requests](#integrating-with-an-api-backend),
+   images, or embeds loaded from a different domain. If you would like to use a
+   runtime caching strategy for those requests, you can [`eject`](#npm-run-eject)
+   and then configure the
+   [`runtimeCaching`](https://github.com/GoogleChrome/sw-precache#runtimecaching-arrayobject)
+   option in the `SWPrecacheWebpackPlugin` section of
+   [`webpack.config.prod.js`](../config/webpack.config.prod.js).
 
 ### Progressive Web App Metadata
 
@@ -1779,14 +1795,14 @@ You don’t necessarily need a static server in order to run a Create React App
 Here’s a programmatic example using [Node](https://nodejs.org/) and [Express](http://expressjs.com/):
 
 ```javascript
-const express = require('express');
-const path = require('path');
+const express = require("express");
+const path = require("path");
 const app = express();
 
-app.use(express.static(path.join(__dirname, 'build')));
+app.use(express.static(path.join(__dirname, "build")));
 
-app.get('/', function (req, res) {
-  res.sendFile(path.join(__dirname, 'build', 'index.html'));
+app.get("/", function (req, res) {
+  res.sendFile(path.join(__dirname, "build", "index.html"));
 });
 
 app.listen(9000);
@@ -1822,7 +1838,7 @@ If you’re using [Apache HTTP Server](https://httpd.apache.org/), you need to c
     RewriteRule ^ index.html [QSA,L]
 ```
 
-It will get copied to the `build` folder when you run `npm run build`. 
+It will get copied to the `build` folder when you run `npm run build`.
 
 If you’re using [Apache Tomcat](http://tomcat.apache.org/), you need to follow [this Stack Overflow answer](https://stackoverflow.com/a/41249464/4878474).
 
@@ -1858,6 +1874,7 @@ This will let Create React App correctly infer the root path to use in the gener
 More information [here](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string).<br>
 <br>
 For example:
+
 ```js
 <BrowserRouter basename="/calendar"/>
 <Link to="/today"/> // renders <a href="/calendar/today">
@@ -1865,7 +1882,7 @@ For example:
 
 #### Serving the Same Build from Different Paths
 
->Note: this feature is available with `react-scripts@0.9.0` and higher.
+> Note: this feature is available with `react-scripts@0.9.0` and higher.
 
 If you are not using the HTML5 `pushState` history API or not using client-side routing at all, it is unnecessary to specify the URL from which your app will be served. Instead, you can put this in your `package.json`:
 
@@ -1942,7 +1959,7 @@ For more information see [Add Firebase to your JavaScript Project](https://fireb
 
 ### [GitHub Pages](https://pages.github.com/)
 
->Note: this feature is available with `react-scripts@0.2.0` and higher.
+> Note: this feature is available with `react-scripts@0.2.0` and higher.
 
 #### Step 1: Add `homepage` to `package.json`
 
@@ -2007,8 +2024,8 @@ You can configure a custom domain with GitHub Pages by adding a `CNAME` file to
 
 GitHub Pages doesn’t support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
 
-* You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://reacttraining.com/react-router/web/api/Router) about different history implementations in React Router.
-* Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a special redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages).
+- You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://reacttraining.com/react-router/web/api/Router) about different history implementations in React Router.
+- Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a special redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages).
 
 ### [Heroku](https://www.heroku.com/)
 
@@ -2089,11 +2106,11 @@ Now offers a zero-configuration single-command deployment. You can use `now` to
 
 4. Run `now --name your-project-name` from within the build directory. You will see a **now.sh** URL in your output like this:
 
-    ```
-    > Ready! https://your-project-name-tpspyhtdtk.now.sh (copied to clipboard)
-    ```
+   ```
+   > Ready! https://your-project-name-tpspyhtdtk.now.sh (copied to clipboard)
+   ```
 
-    Paste that URL into your browser when the build is complete, and you will see your deployed app.
+   Paste that URL into your browser when the build is complete, and you will see your deployed app.
 
 Details are available in [this article.](https://zeit.co/blog/unlimited-static)
 
@@ -2117,17 +2134,17 @@ Note that in order to support routers that use HTML5 `pushState` API, you may wa
 
 You can adjust various development and production settings by setting environment variables in your shell or with [.env](#adding-development-environment-variables-in-env).
 
-Variable | Development | Production | Usage
-:--- | :---: | :---: | :---
-BROWSER | :white_check_mark: | :x: | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a [browser](https://github.com/sindresorhus/opn#app) to override this behavior, or set it to `none` to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to `npm start` will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the `.js` extension.
-HOST | :white_check_mark: | :x: | By default, the development web server binds to `localhost`. You may use this variable to specify a different host.
-PORT | :white_check_mark: | :x: | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port.
-HTTPS | :white_check_mark: | :x: | When set to `true`, Create React App will run the development server in `https` mode.
-PUBLIC_URL | :x: | :white_check_mark: | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application.
-CI | :large_orange_diamond: | :white_check_mark: | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default.
-REACT_EDITOR | :white_check_mark: | :x: | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can [send a pull request to detect your editor of choice](https://github.com/facebookincubator/create-react-app/issues/2636). Setting this environment variable overrides the automatic detection. If you do it, make sure your systems [PATH](https://en.wikipedia.org/wiki/PATH_(variable)) environment variable points to your editor’s bin folder.
-CHOKIDAR_USEPOLLING | :white_check_mark: | :x: | When set to `true`, the watcher runs in polling mode, as necessary inside a VM. Use this option if `npm start` isn't detecting changes.
-GENERATE_SOURCEMAP | :x: | :white_check_mark: | When set to `false`, source maps are not generated for a production build. This solves OOM issues on some smaller machines.
+| Variable            |      Development       |     Production     | Usage                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :------------------ | :--------------------: | :----------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| BROWSER             |   :white_check_mark:   |        :x:         | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a [browser](https://github.com/sindresorhus/opn#app) to override this behavior, or set it to `none` to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to `npm start` will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the `.js` extension.                                                                                        |
+| HOST                |   :white_check_mark:   |        :x:         | By default, the development web server binds to `localhost`. You may use this variable to specify a different host.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| PORT                |   :white_check_mark:   |        :x:         | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port.                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| HTTPS               |   :white_check_mark:   |        :x:         | When set to `true`, Create React App will run the development server in `https` mode.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| PUBLIC_URL          |          :x:           | :white_check_mark: | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application.                                                                                                                                                                                                |
+| CI                  | :large_orange_diamond: | :white_check_mark: | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default.                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| REACT_EDITOR        |   :white_check_mark:   |        :x:         | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can [send a pull request to detect your editor of choice](https://github.com/facebookincubator/create-react-app/issues/2636). Setting this environment variable overrides the automatic detection. If you do it, make sure your systems [PATH](<https://en.wikipedia.org/wiki/PATH_(variable)>) environment variable points to your editor’s bin folder. |
+| CHOKIDAR_USEPOLLING |   :white_check_mark:   |        :x:         | When set to `true`, the watcher runs in polling mode, as necessary inside a VM. Use this option if `npm start` isn't detecting changes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| GENERATE_SOURCEMAP  |          :x:           | :white_check_mark: | When set to `false`, source maps are not generated for a production build. This solves OOM issues on some smaller machines.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 
 ## Troubleshooting
 
@@ -2136,12 +2153,12 @@ GENERATE_SOURCEMAP | :x: | :white_check_mark: | When set to `false`, source maps
 When you save a file while `npm start` is running, the browser should refresh with the updated code.<br>
 If this doesn’t happen, try one of the following workarounds:
 
-* If your project is in a Dropbox folder, try moving it out.
-* If the watcher doesn’t see a file called `index.js` and you’re referencing it by the folder name, you [need to restart the watcher](https://github.com/facebookincubator/create-react-app/issues/1164) due to a Webpack bug.
-* Some editors like Vim and IntelliJ have a “safe write” feature that currently breaks the watcher. You will need to disable it. Follow the instructions in [“Adjusting Your Text Editor”](https://webpack.js.org/guides/development/#adjusting-your-text-editor).
-* If your project path contains parentheses, try moving the project to a path without them. This is caused by a [Webpack watcher bug](https://github.com/webpack/watchpack/issues/42).
-* On Linux and macOS, you might need to [tweak system settings](https://webpack.github.io/docs/troubleshooting.html#not-enough-watchers) to allow more watchers.
-* If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox, create an `.env` file in your project directory if it doesn’t exist, and add `CHOKIDAR_USEPOLLING=true` to it. This ensures that the next time you run `npm start`, the watcher uses the polling mode, as necessary inside a VM.
+- If your project is in a Dropbox folder, try moving it out.
+- If the watcher doesn’t see a file called `index.js` and you’re referencing it by the folder name, you [need to restart the watcher](https://github.com/facebookincubator/create-react-app/issues/1164) due to a Webpack bug.
+- Some editors like Vim and IntelliJ have a “safe write” feature that currently breaks the watcher. You will need to disable it. Follow the instructions in [“Adjusting Your Text Editor”](https://webpack.js.org/guides/development/#adjusting-your-text-editor).
+- If your project path contains parentheses, try moving the project to a path without them. This is caused by a [Webpack watcher bug](https://github.com/webpack/watchpack/issues/42).
+- On Linux and macOS, you might need to [tweak system settings](https://webpack.github.io/docs/troubleshooting.html#not-enough-watchers) to allow more watchers.
+- If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox, create an `.env` file in your project directory if it doesn’t exist, and add `CHOKIDAR_USEPOLLING=true` to it. This ensures that the next time you run `npm start`, the watcher uses the polling mode, as necessary inside a VM.
 
 If none of these solutions help please leave a comment [in this thread](https://github.com/facebookincubator/create-react-app/issues/659).
 
@@ -2151,9 +2168,9 @@ If you run `npm test` and the console gets stuck after printing `react-scripts t
 
 We recommend deleting `node_modules` in your project and running `npm install` (or `yarn` if you use it) first. If it doesn't help, you can try one of the numerous workarounds mentioned in these issues:
 
-* [facebook/jest#1767](https://github.com/facebook/jest/issues/1767)
-* [facebook/watchman#358](https://github.com/facebook/watchman/issues/358)
-* [ember-cli/ember-cli#6259](https://github.com/ember-cli/ember-cli/issues/6259)
+- [facebook/jest#1767](https://github.com/facebook/jest/issues/1767)
+- [facebook/watchman#358](https://github.com/facebook/watchman/issues/358)
+- [ember-cli/ember-cli#6259](https://github.com/ember-cli/ember-cli/issues/6259)
 
 It is reported that installing Watchman 4.7.0 or newer fixes the issue. If you use [Homebrew](http://brew.sh/), you can run these commands to update it:
 
@@ -2167,13 +2184,13 @@ You can find [other installation methods](https://facebook.github.io/watchman/do
 
 If this still doesn’t help, try running `launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist`.
 
-There are also reports that *uninstalling* Watchman fixes the issue. So if nothing else helps, remove it from your system and try again.
+There are also reports that _uninstalling_ Watchman fixes the issue. So if nothing else helps, remove it from your system and try again.
 
 ### `npm run build` exits too early
 
 It is reported that `npm run build` can fail on machines with limited memory and no swap space, which is common in cloud environments. Even with small projects this command can increase RAM usage in your system by hundreds of megabytes, so if you have less than 1 GB of available memory your build is likely to fail with the following message:
 
->  The build failed because the process exited too early. This probably means the system ran out of memory or someone called `kill -9` on the process.
+> The build failed because the process exited too early. This probably means the system ran out of memory or someone called `kill -9` on the process.
 
 If you are completely sure that you didn't terminate the process, consider [adding some swap space](https://www.digitalocean.com/community/tutorials/how-to-add-swap-on-ubuntu-14-04) to the machine you’re building on, or build the project locally.
 
@@ -2190,20 +2207,20 @@ To add a specific Moment.js locale to your bundle, you need to import it explici
 For example:
 
 ```js
-import moment from 'moment';
-import 'moment/locale/fr';
+import moment from "moment";
+import "moment/locale/fr";
 ```
 
 If import multiple locales this way, you can later switch between them by calling `moment.locale()` with the locale name:
 
 ```js
-import moment from 'moment';
-import 'moment/locale/fr';
-import 'moment/locale/es';
+import moment from "moment";
+import "moment/locale/fr";
+import "moment/locale/es";
 
 // ...
 
-moment.locale('fr');
+moment.locale("fr");
 ```
 
 This will only work for locales that have been explicitly imported before.
@@ -2216,9 +2233,10 @@ Some third-party packages don't compile their code to ES5 before publishing to n
 To resolve this:
 
 1. Open an issue on the dependency's issue tracker and ask that the package be published pre-compiled.
-  * Note: Create React App can consume both CommonJS and ES modules. For Node.js compatibility, it is recommended that the main entry point is CommonJS. However, they can optionally provide an ES module entry point with the `module` field in `package.json`. Note that **even if a library provides an ES Modules version, it should still precompile other ES6 features to ES5 if it intends to support older browsers**.
 
-2. Fork the package and publish a corrected version yourself. 
+- Note: Create React App can consume both CommonJS and ES modules. For Node.js compatibility, it is recommended that the main entry point is CommonJS. However, they can optionally provide an ES module entry point with the `module` field in `package.json`. Note that **even if a library provides an ES Modules version, it should still precompile other ES6 features to ES5 if it intends to support older browsers**.
+
+2. Fork the package and publish a corrected version yourself.
 
 3. If the dependency is small enough, copy it to your `src/` folder and treat it as application code.
 
diff --git a/client/package-lock.json b/client/package-lock.json
index 21ba42e23..d873feb99 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1080,6 +1080,53 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@fluentui/react-component-event-listener": {
+      "version": "0.51.0",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-component-event-listener/-/react-component-event-listener-0.51.0.tgz",
+      "integrity": "sha512-YzvtrqSOQIr19V5hLQ71Zt2HnBpHsPbgE6YNRI0fYkld1YbZWggiPSpk6nhmjB5U30h3EqwZzvsuQTvHbuP2Iw==",
+      "requires": {
+        "@babel/runtime": "^7.10.4"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.11.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
+          "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.7",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+        }
+      }
+    },
+    "@fluentui/react-component-ref": {
+      "version": "0.51.0",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-component-ref/-/react-component-ref-0.51.0.tgz",
+      "integrity": "sha512-eYTiZCGmcsU1RuKeHepd8i6XksnroSF5b2lqHJaQO9x+Ec62d7+M2i9FW/nhe2Mpb5f96inL0Oz3zzVMrSwJdw==",
+      "requires": {
+        "@babel/runtime": "^7.10.4",
+        "react-is": "^16.6.3"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.11.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
+          "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.7",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+        }
+      }
+    },
     "@fortawesome/fontawesome-common-types": {
       "version": "0.2.22",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.22.tgz",
@@ -1421,6 +1468,15 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
     },
+    "@semantic-ui-react/event-stack": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@semantic-ui-react/event-stack/-/event-stack-3.1.1.tgz",
+      "integrity": "sha512-SA7VOu/tY3OkooR++mm9voeQrJpYXjJaMHO1aFCcSouS2xhqMR9Gnz0LEGLOR0h9ueWPBKaQzKIrx3FTTJZmUQ==",
+      "requires": {
+        "exenv": "^1.2.2",
+        "prop-types": "^15.6.2"
+      }
+    },
     "@svgr/babel-plugin-add-jsx-attribute": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz",
@@ -6740,6 +6796,11 @@
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
       "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg=="
     },
+    "immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
+    },
     "immer": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/immer/-/immer-1.10.0.tgz",
@@ -8191,6 +8252,11 @@
         "object.assign": "^4.1.0"
       }
     },
+    "keyboard-key": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/keyboard-key/-/keyboard-key-1.1.0.tgz",
+      "integrity": "sha512-qkBzPTi3rlAKvX7k0/ub44sqOfXeLc/jcnGGmj5c7BJpU8eDrEVPyhCvNYAaoubbsLm9uGWwQJO1ytQK1a9/dQ=="
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -8246,6 +8312,11 @@
         "leven": "^3.1.0"
       }
     },
+    "levenshtein-edit-distance": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/levenshtein-edit-distance/-/levenshtein-edit-distance-2.0.5.tgz",
+      "integrity": "sha512-Yuraz7QnMX/JENJU1HA6UtdsbhRzoSFnGpVGVryjQgHtl2s/YmVgmNYkVs5yzVZ9aAvQR9wPBUH3lG755ylxGA=="
+    },
     "levn": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
@@ -8255,6 +8326,14 @@
         "type-check": "~0.3.2"
       }
     },
+    "lie": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
+      "integrity": "sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=",
+      "requires": {
+        "immediate": "~3.0.5"
+      }
+    },
     "linear-layout-vector": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/linear-layout-vector/-/linear-layout-vector-0.0.1.tgz",
@@ -8347,6 +8426,14 @@
         }
       }
     },
+    "localforage": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.9.0.tgz",
+      "integrity": "sha512-rR1oyNrKulpe+VM9cYmcFn6tsHuokyVHFaCM3+osEmxaHTbEk8oQu6eGDfS6DQLWi/N67XRmB8ECG37OES368g==",
+      "requires": {
+        "lie": "3.1.1"
+      }
+    },
     "locate-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
@@ -12650,6 +12737,72 @@
         "node-forge": "0.9.0"
       }
     },
+    "semantic-ui-react": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/semantic-ui-react/-/semantic-ui-react-1.2.1.tgz",
+      "integrity": "sha512-p0HKdHg8ZGhnanyNuGOyTp5M6mVGWzTULPY02uBYHxXMzsyRPoRDlUa/tbaU0UdFpg96CmToG4WrvkINqhcZ+Q==",
+      "requires": {
+        "@babel/runtime": "^7.10.5",
+        "@fluentui/react-component-event-listener": "~0.51.0",
+        "@fluentui/react-component-ref": "~0.51.0",
+        "@semantic-ui-react/event-stack": "^3.1.0",
+        "clsx": "^1.1.1",
+        "keyboard-key": "^1.1.0",
+        "lodash": "^4.17.19",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.6",
+        "react-popper": "^1.3.7",
+        "shallowequal": "^1.1.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.11.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
+          "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "clsx": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+          "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+        },
+        "create-react-context": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.3.0.tgz",
+          "integrity": "sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==",
+          "requires": {
+            "gud": "^1.0.0",
+            "warning": "^4.0.3"
+          }
+        },
+        "lodash": {
+          "version": "4.17.20",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+          "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
+        },
+        "react-popper": {
+          "version": "1.3.7",
+          "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz",
+          "integrity": "sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==",
+          "requires": {
+            "@babel/runtime": "^7.1.2",
+            "create-react-context": "^0.3.0",
+            "deep-equal": "^1.1.1",
+            "popper.js": "^1.14.4",
+            "prop-types": "^15.6.1",
+            "typed-styles": "^0.0.7",
+            "warning": "^4.0.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.7",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+        }
+      }
+    },
     "semver": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
diff --git a/client/package.json b/client/package.json
index c157502ec..98b327c87 100644
--- a/client/package.json
+++ b/client/package.json
@@ -15,6 +15,8 @@
     "i18next": "^12.1.0",
     "i18next-browser-languagedetector": "^2.2.4",
     "i18next-xhr-backend": "^1.5.1",
+    "levenshtein-edit-distance": "^2.0.5",
+    "localforage": "^1.9.0",
     "no-scroll": "^2.1.1",
     "normalize-css": "^2.3.1",
     "normalizr": "^3.2.4",
@@ -41,6 +43,7 @@
     "redux": "^3.7.2",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.2.0",
+    "semantic-ui-react": "^1.2.1",
     "smoothscroll": "^0.4.0",
     "stickybits": "^3.3.7",
     "styled-components": "^3.4.9",
diff --git a/client/public/google7567bc6a76d83989.html b/client/public/google7567bc6a76d83989.html
index 1677e9ede..0cac9d303 100644
--- a/client/public/google7567bc6a76d83989.html
+++ b/client/public/google7567bc6a76d83989.html
@@ -1 +1 @@
-google-site-verification: google7567bc6a76d83989.html
\ No newline at end of file
+google-site-verification: google7567bc6a76d83989.html
diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
index 737c6dfe6..75ae8b9fd 100644
--- a/client/public/locales/en/translation.json
+++ b/client/public/locales/en/translation.json
@@ -1,4 +1,7 @@
 {
+  "app": {
+    "courseChange": "Course change detected. If you added/deleted courses in another tab, please refresh this page to see the changes."
+  },
   "common": {
     "mon": "Mon",
     "tue": "Tue",
@@ -10,9 +13,15 @@
   },
   "welcome": {
     "welcome": "Welcome to WasedaTime!",
+    "newFeature": "New feature:",
+    "courseEvals": "Course Reviews",
+    "added": "is available!",
+    "returningUsers": "For returning users, your added courses are preserved.",
     "next": "next",
     "back": "back",
     "done": "done",
+    "courseEvalsDetails1": "In syllabus search, course reivews can be",
+    "courseEvalsDetails2": "viewed by clicking the orange button.",
     "Meet our developers!": "Meet our developers!",
     "Founder": "Founder",
     "Frontendtranslation": "Frontend & translation",
@@ -31,6 +40,7 @@
     "timetable": "Timetable",
     "syllabus": "Syllabus",
     "roomfinder": "Rooms",
+    "joinus": "Join Us!",
     "bus": "Bus",
     "language": "Language"
   },
@@ -94,6 +104,7 @@
     "Others": "Others",
     "IPSE": "IPSE",
     "EN-based Undergrad Program": "EN-based Undergrad Program",
+    "IPSE/EN-based Undergrad Program": "IPSE / EN-based Undergrad Program",
     "Filter by": "Filter by",
     "semesterMap": {
       "springSem": "Spring Semester",
@@ -103,7 +114,6 @@
       "intensiveSpring": "Intensive: Spring",
       "intensiveSummer": "Intensive: Summer",
       "springSummer": "Spring & Summer",
-
       "fallSem": "Fall Semester",
       "fallQuart": "Fall Quarter",
       "winterQuart": "Winter Quarter",
@@ -111,7 +121,6 @@
       "intensiveFall": "Intensive: Fall",
       "intensiveWinter": "Intensive: Winter",
       "fallWinter": "Fall & Winter",
-
       "intensiveSpringFallSem": "Intensive: Spring & Fall Semester",
       "fullYear": "Full Year",
       "undecided": "undecided"
@@ -127,6 +136,18 @@
     "Course time": "Course time",
     "langParam": "&pLng=en"
   },
+  "courseEvals": {
+    "Reviews": "Reviews",
+    "Satisfaction": "Satisfaction",
+    "Difficulty": "Difficulty",
+    "Benefit": "Benefit",
+    "Related courses": "Related courses",
+    "Disclaimer": "The reviews do not represent the official position or opinion of WasedaTime.",
+    "Thank WTSA 1": "We appreciate",
+    "WTSA": "Waseda Taiwanese Student Association (WTSA)",
+    "Thank WTSA 2": "'s help for providing the reviews!",
+    "Related courses explanation": "Top 10 courses having the same course code and similar title"
+  },
   "room": {
     "Under Construction": "Under Construction",
     "Want to help?": "Wanna build an amazing app with us?",
diff --git a/client/public/locales/jp/translation.json b/client/public/locales/jp/translation.json
index 76052b98a..cf919f58b 100644
--- a/client/public/locales/jp/translation.json
+++ b/client/public/locales/jp/translation.json
@@ -1,4 +1,7 @@
 {
+  "app": {
+    "courseChange": "科目の変更が検出されました。別のタブで科目を登録/取り消した場合は、変更を反映するためにこのページを再読み込みしてください。"
+  },
   "common": {
     "mon": "月",
     "tue": "火",
@@ -10,9 +13,15 @@
   },
   "welcome": {
     "welcome": "WasedaTime へようこそ!",
+    "newFeature": "新機能",
+    "courseEvals": "授業評価",
+    "added": "を追加しました！",
+    "returningUsers": "以前からご利用頂いている場合、既に登録した科目は保持されています。",
     "next": "次へ",
     "back": "前へ",
     "done": "完了",
+    "courseEvalsDetails1": "授業評価はシラバス検索結果でオレンジ色",
+    "courseEvalsDetails2": "のボタンをクリックすると表示できます",
     "Meet our developers!": "開発者たち",
     "Founder": "創設者",
     "Frontendtranslation": "フロントエンド &  翻訳",
@@ -31,6 +40,7 @@
     "timetable": "時間割",
     "syllabus": "シラバス",
     "roomfinder": "空き教室",
+    "joinus": "募集中！",
     "bus": "バス",
     "language": "言語"
   },
@@ -94,6 +104,7 @@
     "Others": "ほか",
     "IPSE": "理工国際プログラム",
     "EN-based Undergrad Program": "英語による学位取得",
+    "IPSE/EN-based Undergrad Program": "理工国際プログラム / 英語による学位取得",
     "Filter by": "フィルター",
     "semesterMap": {
       "springSem": "春学期",
@@ -103,7 +114,6 @@
       "intensiveSpring": "春季集中",
       "intensiveSummer": "夏季集中",
       "springSummer": "春夏期",
-
       "fallSem": "秋学期",
       "fallQuart": "秋クォーター",
       "winterQuart": "冬クォーター",
@@ -111,7 +121,6 @@
       "intensiveFall": "秋季集中",
       "intensiveWinter": "冬季集中",
       "fallWinter": "秋冬期",
-
       "intensiveSpringFallSem": "集中(春・秋学期)",
       "fullYear": "通年",
       "undecided": "未定"
@@ -127,6 +136,18 @@
     "Course time": "科目時間",
     "langParam": ""
   },
+  "courseEvals": {
+    "Reviews": "評価",
+    "Satisfaction": "満足度",
+    "Difficulty": "難易度",
+    "Benefit": "有益さ",
+    "Related courses": "関連科目",
+    "Disclaimer": "評価の内容はWasedaTimeの立場、意見を代表するものではありません",
+    "Thank WTSA 1": "",
+    "WTSA": "早稲田大学台湾留学生会（WTSA）",
+    "Thank WTSA 2": "の評価のご提供に感謝を申し上げます。",
+    "Related courses explanation": "同じコード及び似たタイトルを持つ授業の中の前10位"
+  },
   "room": {
     "Under Construction": "作成中",
     "Want to help?": "一緒に楽しく開発しませんか？",
diff --git a/client/public/manifest.json b/client/public/manifest.json
index e860d32ab..8b8e8e655 100644
--- a/client/public/manifest.json
+++ b/client/public/manifest.json
@@ -6,7 +6,8 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },{
+    },
+    {
       "src": "logo.png",
       "sizes": "192x192",
       "type": "image/png"
diff --git a/client/src/configureStore.js b/client/src/configureStore.js
index 224d8b2a2..1a59bbbbd 100644
--- a/client/src/configureStore.js
+++ b/client/src/configureStore.js
@@ -1,23 +1,26 @@
-import { createStore, applyMiddleware } from 'redux';
-import logger from 'redux-logger';
-import thunk from 'redux-thunk';
+import { createStore, applyMiddleware } from "redux";
+import logger from "redux-logger";
+import thunk from "redux-thunk";
 
-import { loadState } from './localStorage';
+import { loadState } from "./localForage";
 
-import app from './js/reducers/index';
+import app from "./js/reducers/index";
 
-const configureStore = () => {
+const configureStore = async () => {
   const middlewares = [thunk];
   if (
-    process.env.NODE_ENV !== 'production' ||
-    process.env.REACT_APP_ENV === 'staging'
+    process.env.NODE_ENV !== "production" ||
+    process.env.REACT_APP_ENV === "staging"
   ) {
     middlewares.push(logger);
   }
-
-  const preloadedState = loadState();
-
-  return createStore(app, preloadedState, applyMiddleware(...middlewares));
+  try {
+    const preloadedState = await loadState();
+    return createStore(app, preloadedState, applyMiddleware(...middlewares));
+  } catch (error) {
+    console.error(error);
+    return createStore(app, undefined, applyMiddleware(...middlewares));
+  }
 };
 
 export default configureStore;
diff --git a/client/src/index.js b/client/src/index.js
index 12008adb1..fb7e148c4 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -3,34 +3,20 @@ import { render } from "react-dom";
 import throttle from "lodash/throttle";
 
 import configureStore from "./configureStore";
-import { saveState } from "./localStorage";
+import { saveState } from "./localForage";
 import Root from "./js/components/Root";
 
 import "normalize-css/normalize.css";
 import "./styles/styles.css";
 import "./js/components/i18n";
 
-const store = configureStore();
+configureStore().then((store) => {
+  store.subscribe(
+    throttle(() => {
+      const state = store.getState();
+      saveState(state);
+    }, 800)
+  );
 
-store.subscribe(
-  throttle(() => {
-    const state = store.getState();
-    const addedCourses = state.addedCourses;
-    const user = state.user;
-    saveState({
-      addedCourses: {
-        fall: {
-          prefs: addedCourses.fall.prefs,
-          sortingOption: addedCourses.fall.sortingOption
-        },
-        spring: {
-          prefs: addedCourses.spring.prefs,
-          sortingOption: addedCourses.spring.sortingOption
-        }
-      },
-      user: user
-    });
-  }, 800)
-);
-
-render(<Root store={store} />, document.getElementById("root"));
+  render(<Root store={store} />, document.getElementById("root"));
+});
diff --git a/client/src/js/actions/index.js b/client/src/js/actions/index.js
index 3597feea9..4bdd82cc4 100644
--- a/client/src/js/actions/index.js
+++ b/client/src/js/actions/index.js
@@ -1,5 +1,5 @@
-import axios from 'axios';
-import { normalize } from 'normalizr';
+import axios from "axios";
+import { normalize } from "normalizr";
 
 import {
   FETCH_STATS_REQUEST,
@@ -7,14 +7,14 @@ import {
   FETCH_STATS_FAILURE,
   FETCH_BUILDINGS_REQUEST,
   FETCH_BUILDINGS_SUCCESS,
-  FETCH_BUILDINGS_FAILURE
-} from './types';
-import * as schema from '../data/schema';
-import { wasetimeApiStatic } from '../config/api';
+  FETCH_BUILDINGS_FAILURE,
+} from "./types";
+import * as schema from "../data/schema";
+import { wasetimeApiStatic } from "../config/api";
 
 export const fetchStats = () => async (dispatch, getState) => {
   dispatch({
-    type: FETCH_STATS_REQUEST
+    type: FETCH_STATS_REQUEST,
   });
 
   try {
@@ -22,41 +22,45 @@ export const fetchStats = () => async (dispatch, getState) => {
     const stats = res.data;
     dispatch({
       type: FETCH_STATS_SUCCESS,
-      response: stats
+      response: stats,
     });
   } catch (error) {
     const response = error.response || {
       status: 501,
-      statusText: 'Not Implemented'
+      statusText: "Not Implemented",
     };
     dispatch({
       type: FETCH_STATS_FAILURE,
-      error: response
+      error: response,
     });
   }
 };
 
 export const fetchBuildings = () => async (dispatch, getState) => {
   dispatch({
-    type: FETCH_BUILDINGS_REQUEST
+    type: FETCH_BUILDINGS_REQUEST,
   });
 
   try {
-    const res = await axios.get('/api/buildings');
+    const res = await axios.get("/api/buildings");
     const buildings = res.data;
     const normalizedBuildings = normalize(buildings, schema.buildingsSchema);
+    const fetchedTime = new Date().toISOString();
     dispatch({
       type: FETCH_BUILDINGS_SUCCESS,
-      response: normalizedBuildings
+      response: {
+        ...normalizedBuildings,
+        fetchedTime,
+      },
     });
   } catch (error) {
     const response = error.response || {
       status: 501,
-      statusText: 'Not Implemented'
+      statusText: "Not Implemented",
     };
     dispatch({
       type: FETCH_BUILDINGS_FAILURE,
-      error: response
+      error: response,
     });
   }
 };
diff --git a/client/src/js/actions/syllabus.js b/client/src/js/actions/syllabus.js
index fedc11f74..1d9fa833a 100644
--- a/client/src/js/actions/syllabus.js
+++ b/client/src/js/actions/syllabus.js
@@ -10,32 +10,36 @@ import {
   REMOVE_COURSE,
   CHANGE_COURSE_COLOR,
   TOGGLE_COURSE_VISIBILITY,
-  CHANGE_COURSES_SORTING_OPTION
+  CHANGE_COURSES_SORTING_OPTION,
 } from "./types";
 import * as schema from "../data/schema";
 import { wasetimeApiStatic } from "../config/api";
 
 export const fetchCourses = () => async (dispatch, getState) => {
   dispatch({
-    type: FETCH_COURSES_REQUEST
+    type: FETCH_COURSES_REQUEST,
   });
 
   try {
     const res = await axios.get(wasetimeApiStatic.courseListAll);
     const courses = res.data;
     const normalizedCourses = normalize(courses, schema.coursesSchema);
+    const fetchedTime = new Date().toISOString();
     dispatch({
       type: FETCH_COURSES_SUCCESS,
-      response: normalizedCourses
+      response: {
+        ...normalizedCourses,
+        fetchedTime,
+      },
     });
   } catch (error) {
     const response = error.response || {
       status: 501,
-      statusText: "Not Implemented"
+      statusText: "Not Implemented",
     };
     dispatch({
       type: FETCH_COURSES_FAILURE,
-      error: response
+      error: response,
     });
   }
 };
@@ -45,46 +49,46 @@ export const hydrateAddedCourses = (prefs, fetchedCoursesById) => ({
   type: HYDRATE_ADDED_COURSES,
   payload: {
     prefs,
-    fetchedCoursesById
-  }
+    fetchedCoursesById,
+  },
 });
 
 export const addCourse = (course, displayLang) => ({
   type: ADD_COURSE,
   payload: {
     id: course._id,
-    semester: course.term,
+    semester: course.tm,
     course: course,
-    displayLang: displayLang
-  }
+    displayLang: displayLang,
+  },
 });
 
-export const removeCourse = id => ({
+export const removeCourse = (id) => ({
   type: REMOVE_COURSE,
   payload: {
-    id
-  }
+    id,
+  },
 });
 
 export const changeCourseColor = (id, color) => ({
   type: CHANGE_COURSE_COLOR,
   payload: {
     id,
-    color
-  }
+    color,
+  },
 });
 
-export const toggleCourseVisibility = id => ({
+export const toggleCourseVisibility = (id) => ({
   type: TOGGLE_COURSE_VISIBILITY,
   payload: {
-    id
-  }
+    id,
+  },
 });
 
 export const changeCoursesSortingOption = (sortingOption, semester) => ({
   type: CHANGE_COURSES_SORTING_OPTION,
   payload: {
     sortingOption,
-    semester
-  }
+    semester,
+  },
 });
diff --git a/client/src/js/actions/user.js b/client/src/js/actions/user.js
index f2c42685c..89fc5bf1c 100644
--- a/client/src/js/actions/user.js
+++ b/client/src/js/actions/user.js
@@ -3,6 +3,6 @@ import { SET_FIRST_TIME_ACCESS_TO_FALSE } from "./types";
 export const setFirstTimeAccessToFalse = () => ({
   type: SET_FIRST_TIME_ACCESS_TO_FALSE,
   payload: {
-    isFirstTimeAccess: false
-  }
+    isFirstTimeAccess: false,
+  },
 });
diff --git a/client/src/js/components/About.js b/client/src/js/components/About.js
index 623fa990f..b17406694 100644
--- a/client/src/js/components/About.js
+++ b/client/src/js/components/About.js
@@ -21,10 +21,11 @@ import logo from "../../img/logo.png";
 // import roomFinder from "../../img/roomFinder-480.gif";
 
 const HomeWrapper = styled(WrapperWithBackground)`
-  min-height: calc(100vh - ${props => props.theme.headerHeight});
+  min-height: calc(100vh - ${(props) => props.theme.headerHeight});
 `;
 
 const ExtendedOverlay = styled(Overlay)`
+  background: rgba(0, 0, 0, 0.2);
   padding: 0 25px;
   padding-bottom: 30px;
 `;
diff --git a/client/src/js/components/App.js b/client/src/js/components/App.js
index d28f43981..f99279893 100644
--- a/client/src/js/components/App.js
+++ b/client/src/js/components/App.js
@@ -4,6 +4,7 @@ import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
 import Alert from "react-s-alert";
 import styled, { ThemeProvider } from "styled-components";
+import { withNamespaces } from "react-i18next";
 
 import { normalTheme } from "../styled-components/theme";
 import "react-s-alert/dist/s-alert-default.css";
@@ -15,7 +16,9 @@ import About from "./About";
 import InitialDialog from "./welcome/InitialDialog";
 import TimetableContainer from "../containers/timetable/TimetableContainer";
 import Syllabus from "./syllabus/Syllabus";
-import RoomFinder from "./RoomFinder";
+import CourseEvals from "./courseEvals/CourseEvals";
+// import RoomFinder from "./RoomFinder";
+import JoinUs from "./JoinUs";
 import FooterContainer from "../containers/FooterContainer";
 import Bus from "./Bus";
 import NotFound from "./NotFound";
@@ -25,7 +28,7 @@ const Wrapper = styled("div")`
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  padding-top: ${props => props.theme.headerHeight};
+  padding-top: ${(props) => props.theme.headerHeight};
 `;
 
 const StyledMain = styled("main")`
@@ -33,10 +36,19 @@ const StyledMain = styled("main")`
   flex-direction: column;
   flex: 1 0 auto;
   width: 100%;
-  min-height: calc(100vh - ${props => props.theme.headerHeight});
+  min-height: calc(100vh - ${(props) => props.theme.headerHeight});
 `;
 
-const App = ({ isFirstTimeAccess }) => {
+const App = ({ isFirstTimeAccess, t }) => {
+  window.addEventListener("storage", (e) => {
+    if (e.key === "wasedatime-2020-state-ac") {
+      Alert.warning(t("app.courseChange"), {
+        timeout: "none",
+        position: "bottom",
+        effect: "jelly",
+      });
+    }
+  });
   return (
     <ThemeProvider theme={normalTheme}>
       <Wrapper>
@@ -62,8 +74,10 @@ const App = ({ isFirstTimeAccess }) => {
               <Route exact path="/about" component={About} />
               <Route exact path="/timetable" component={TimetableContainer} />
               <Route exact path="/syllabus" component={Syllabus} />
-              <Route exact path="/roomfinder" component={RoomFinder} />
+              {/* <Route exact path="/roomfinder" component={RoomFinder} /> */}
+              <Route exact path="/joinus" component={JoinUs} />
               <Route exact path="/bus" component={Bus} />
+              <Route exact path="/courseEvals" component={CourseEvals} />
               <Route component={NotFound} />
             </Switch>
           )}
@@ -75,15 +89,12 @@ const App = ({ isFirstTimeAccess }) => {
   );
 };
 
-const mapStateToProps = state => {
+const mapStateToProps = (state) => {
   return {
-    isFirstTimeAccess: getUserIsFirstTimeAccess(state)
+    isFirstTimeAccess: getUserIsFirstTimeAccess(state),
   };
 };
 
-export default withRouter(
-  connect(
-    mapStateToProps,
-    null
-  )(App)
+export default withNamespaces("translation")(
+  withRouter(connect(mapStateToProps, null)(App))
 );
diff --git a/client/src/js/components/BuildingItem.js b/client/src/js/components/BuildingItem.js
index 17820fd00..a8f0e2bf3 100644
--- a/client/src/js/components/BuildingItem.js
+++ b/client/src/js/components/BuildingItem.js
@@ -1,8 +1,8 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import PropTypes from 'prop-types';
+import React from "react";
+import { Link } from "react-router-dom";
+import PropTypes from "prop-types";
 
-import { Button } from '../styled-components/Button';
+import { Button } from "../styled-components/Button";
 
 const BuildingItem = ({ name }) => {
   return (
@@ -15,7 +15,7 @@ const BuildingItem = ({ name }) => {
 };
 
 BuildingItem.propTypes = {
-  name: PropTypes.string.isRequired
+  name: PropTypes.string.isRequired,
 };
 
 export default BuildingItem;
diff --git a/client/src/js/components/BuildingList.js b/client/src/js/components/BuildingList.js
index c5a2c6657..54d547720 100644
--- a/client/src/js/components/BuildingList.js
+++ b/client/src/js/components/BuildingList.js
@@ -1,16 +1,16 @@
-import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
+import React from "react";
+import styled from "styled-components";
+import PropTypes from "prop-types";
 
-import BuildingItem from './BuildingItem';
-import { WrapperWithBackground } from '../styled-components/Wrapper';
-import { Overlay } from '../styled-components/Overlay';
+import BuildingItem from "./BuildingItem";
+import { WrapperWithBackground } from "../styled-components/Wrapper";
+import { Overlay } from "../styled-components/Overlay";
 
 const ExtendedOverlay = styled(Overlay)`
   padding: 40px 25px 25px 25px;
 `;
 
-const TitleWrapper = styled('div')`
+const TitleWrapper = styled("div")`
   align-self: flex-start;
   margin-top: 30px;
   margin-left: -40px;
@@ -19,16 +19,16 @@ const TitleWrapper = styled('div')`
   background-color: rgba(0, 0, 0, 0.2);
 `;
 
-const Title = styled('h3')`
+const Title = styled("h3")`
   margin: 0 0;
   padding-left: 25px;
-  font-family: 'Times';
+  font-family: "Times";
   font-size: 3.2rem;
   font-weight: lighter;
   color: #ffffff;
 `;
 
-const StyledList = styled('ul')`
+const StyledList = styled("ul")`
   text-align: center;
   padding: 0;
   list-style: none;
@@ -37,7 +37,7 @@ const StyledList = styled('ul')`
 
 const BuildingList = ({ name, buildings, background }) => {
   if (buildings !== 0) {
-    const listItems = buildings.map(building => (
+    const listItems = buildings.map((building) => (
       <BuildingItem key={building._id} name={building.name} />
     ));
     return (
@@ -63,5 +63,5 @@ export default BuildingList;
 BuildingList.propTypes = {
   name: PropTypes.string.isRequired,
   buildings: PropTypes.array.isRequired,
-  background: PropTypes.string.isRequired
+  background: PropTypes.string.isRequired,
 };
diff --git a/client/src/js/components/Bus.js b/client/src/js/components/Bus.js
index cd29f5da5..a62adcd52 100644
--- a/client/src/js/components/Bus.js
+++ b/client/src/js/components/Bus.js
@@ -7,9 +7,9 @@ import {
   faEllipsisV,
   faSearch,
   faCalendarAlt,
-  faTimes
+  faTimes,
 } from "@fortawesome/free-solid-svg-icons";
-import DatePicker from 'react-datepicker';
+import DatePicker from "react-datepicker";
 import styled from "styled-components";
 import { withNamespaces } from "react-i18next";
 import LANGS from "../config/langs";
@@ -113,8 +113,8 @@ const DatetimeSelection = styled("div")`
 `;
 
 const DatePickerSpan = styled("span")`
-   display: inline-block;
-   width: 37.5%;
+  display: inline-block;
+  width: 37.5%;
 `;
 
 const DatePickerButton = styled("button")`
@@ -122,6 +122,7 @@ const DatePickerButton = styled("button")`
   border: none;
   border-radius: 5px;
   width: 100%;
+  background: #efefef;
 
   &:hover {
     outline: none;
@@ -137,6 +138,7 @@ const DatetimeClearButton = styled("button")`
   border: none;
   border-radius: 5px;
   width: 25%;
+  background: #efefef;
 
   &:hover {
     outline: none;
@@ -173,7 +175,7 @@ const getSchduleType = (month, date, day) => {
     outOfService,
     weekdaySchedule,
     saturdaySchedule,
-    specialSchedule
+    specialSchedule,
   } = busSchedule["exceptions"];
 
   if (
@@ -235,7 +237,7 @@ const binarySearchSchedule = (totalMins, schedule) => {
   }
 };
 
-const totalMinsToTimeStr = totalMins => {
+const totalMinsToTimeStr = (totalMins) => {
   const hours = Math.floor(totalMins / 60);
   const minutes = totalMins - hours * 60;
   // TODO duplicated code from ClassroomList
@@ -255,7 +257,7 @@ const getBusStatus = (totalMins, occurrences, remarks, t) => {
     return {
       departIn: nextTotalMins - totalMins,
       timeString: nextTimeString,
-      remark
+      remark,
     };
   }
   return t("bus.Out of service");
@@ -323,45 +325,47 @@ const createStatusComponent = (status, t) => {
           <b>{status.timeString}</b>
         </span>
       ),
-      remark: status.remark
+      remark: status.remark,
     };
   }
   return {
     status: <span>{status}</span>,
-    remark: ""
+    remark: "",
   };
 };
 
 const DateSelector = forwardRef(({ value, onClick }, ref) => (
   <DatePickerButton onClick={onClick} ref={ref}>
-    <FontAwesomeIcon icon={faCalendarAlt} size="1x" />{" "}
-    {value}
+    <FontAwesomeIcon icon={faCalendarAlt} size="1x" /> {value}
   </DatePickerButton>
 ));
 
 const TimeSelector = forwardRef(({ value, onClick }, ref) => (
   <DatePickerButton onClick={onClick} ref={ref}>
-    <FontAwesomeIcon icon={faClock} size="1x" />{" "}
-    {value}
+    <FontAwesomeIcon icon={faClock} size="1x" /> {value}
   </DatePickerButton>
 ));
 
 class Bus extends React.Component {
   state = {
-    date: new Date()
+    date: new Date(),
   };
 
-  onDatetimeChange = date => {
-    this.setState({ date: date || new Date() })
-  }
+  onDatetimeChange = (date) => {
+    this.setState({ date: date || new Date() });
+  };
 
   clearDatetime = () => {
-    this.setState({ date: new Date() })
-  }
+    this.setState({ date: new Date() });
+  };
 
-  render () {
+  render() {
     const { t, lng } = this.props;
-    const { wasedaStatus, nishiStatus } = getBusStatuses(this.state.date, lng, t);
+    const { wasedaStatus, nishiStatus } = getBusStatuses(
+      this.state.date,
+      lng,
+      t
+    );
     const wasedaStatusComponent = createStatusComponent(wasedaStatus, t);
     const nishiStatusComponent = createStatusComponent(nishiStatus, t);
     return (
@@ -371,19 +375,19 @@ class Bus extends React.Component {
           <meta
             name="description"
             content="Shuttle Bus Arrival Time Checking at Waseda University."
-            />
+          />
           <meta property="og:title" content="WasedaTime - Bus" />
           <meta
             property="og:description"
             content="Shuttle Bus Arrival Time Checking at Waseda University."
-            />
+          />
           <meta property="og:site_name" content="WasedaTime - Bus" />
         </Helmet>
         <ExtendedOverlay>
           <InfoWrapper>
             <StyledHeading>{t("bus.busStatus")}</StyledHeading>
             <p>
-              <FontAwesomeIcon icon={faSearch} size="1x" />{' '}
+              <FontAwesomeIcon icon={faSearch} size="1x" />{" "}
               {t("bus.Assign a date / time to check the next bus")}：
             </p>
 
@@ -391,29 +395,29 @@ class Bus extends React.Component {
               <DatePickerSpan>
                 <DatePicker
                   selected={this.state.date}
-                  onChange={date => this.onDatetimeChange(date)}
+                  onChange={(date) => this.onDatetimeChange(date)}
                   dateFormat="yyyy-MM-dd"
                   customInput={<DateSelector />}
-                  popperPlacement='bottom-start'
+                  popperPlacement="bottom-start"
                 />
               </DatePickerSpan>
               <DatePickerSpan>
                 <DatePicker
                   selected={this.state.date}
-                  onChange={date => this.onDatetimeChange(date)}
+                  onChange={(date) => this.onDatetimeChange(date)}
                   showTimeSelect
                   showTimeSelectOnly
-                  minTime={(new Date()).setHours(9, 0)}
-                  maxTime={(new Date()).setHours(18, 20)}
+                  minTime={new Date().setHours(9, 0)}
+                  maxTime={new Date().setHours(18, 20)}
                   timeIntervals={5}
                   timeCaption="Time"
                   dateFormat="hh:mm aa"
                   customInput={<TimeSelector />}
-                  popperPlacement='bottom-start'
+                  popperPlacement="bottom-start"
                 />
               </DatePickerSpan>
               <DatetimeClearButton onClick={this.clearDatetime}>
-                <FontAwesomeIcon icon={faTimes} size="1x" />{' '}Clear
+                <FontAwesomeIcon icon={faTimes} size="1x" /> Clear
               </DatetimeClearButton>
             </DatetimeSelection>
 
@@ -438,7 +442,7 @@ class Bus extends React.Component {
             <ModalContainer
               linkText={t("bus.Add to home screen")}
               text={t("bus.and never miss a bus again!")}
-              >
+            >
               <ModalArticle>
                 <ModalSection>
                   <ModalHeading>Android / Chrome:</ModalHeading>
@@ -452,7 +456,7 @@ class Bus extends React.Component {
                   <ModalImage
                     src={a2hsChrome}
                     alt="Add to home screen image for Chrome"
-                    />
+                  />
                 </ModalSection>
                 <ModalSection>
                   <ModalHeading>IOS / Safari:</ModalHeading>
@@ -466,7 +470,7 @@ class Bus extends React.Component {
                   <ModalImage
                     src={a2hsSafari}
                     alt="Add to home screen image for Safari"
-                    />
+                  />
                 </ModalSection>
               </ModalArticle>
             </ModalContainer>
@@ -479,6 +483,6 @@ class Bus extends React.Component {
       </Wrapper>
     );
   }
-};
+}
 
 export default withNamespaces("translation")(Bus);
diff --git a/client/src/js/components/BusModal.js b/client/src/js/components/BusModal.js
index 214d797a4..f65723d80 100644
--- a/client/src/js/components/BusModal.js
+++ b/client/src/js/components/BusModal.js
@@ -1,13 +1,13 @@
 //Credits: Adapted from the awesome tutorial by Sergio Pedercini at
 //https://medium.com/@pppped/build-a-simple-modal-window-with-react-and-jss-f05041d899cc
-import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
-import styled, {keyframes} from 'styled-components';
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
+import styled, { keyframes } from "styled-components";
 
-import { media } from '../styled-components/utils';
-import {Overlay} from '../styled-components/Overlay';
-import PropTypes from 'prop-types';
+import { media } from "../styled-components/utils";
+import { Overlay } from "../styled-components/Overlay";
+import PropTypes from "prop-types";
 
 const show = keyframes`
   0% {
@@ -21,7 +21,7 @@ const show = keyframes`
   100% {
     opacity: 1;
   }
-`
+`;
 
 const hide = keyframes`
   0% {
@@ -35,7 +35,7 @@ const hide = keyframes`
     display: none;
     opacity: 0;
   }
-`
+`;
 
 const ExtendedOverlay = styled(Overlay)`
   background-color: rgba(0, 0, 0, 0.6);
@@ -49,10 +49,10 @@ const ExtendedOverlay = styled(Overlay)`
   padding: 1rem;
   z-index: 9999;
   opacity: 1;
-  animation: ${props => props.animation} .5s ease;
-`
+  animation: ${(props) => props.animation} 0.5s ease;
+`;
 
-const Window = styled('div')`
+const Window = styled("div")`
   height: 100%;
   max-width: 500px;
   padding: 10px 25px;
@@ -63,23 +63,23 @@ const Window = styled('div')`
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   ${media.phone`width: 80vw;`};
-`
+`;
 
-const Header = styled('header')`
+const Header = styled("header")`
   display: flex;
   flex-direction: column;
   margin-bottom: 10px;
-`
+`;
 
-const Content = styled('section')`
+const Content = styled("section")`
   color: #000000;
   display: flex;
   flex-direction: column;
-`
+`;
 
-const Footer = Header.withComponent('footer');
+const Footer = Header.withComponent("footer");
 
-const CloseLink = styled('a')`
+const CloseLink = styled("a")`
   color: #000000;
   position: relative;
   top: -5px;
@@ -87,8 +87,8 @@ const CloseLink = styled('a')`
   align-self: flex-end;
   margin-bottom: -35px;
   cursor: pointer;
-`
-const CloseButton = styled('button')`
+`;
+const CloseButton = styled("button")`
   padding: 12px;
   text-align: center;
   text-decoration: none;
@@ -102,8 +102,7 @@ const CloseButton = styled('button')`
   &:active {
     background-color: #999;
   }
-`
-
+`;
 
 class BusModal extends React.Component {
   constructor(props) {
@@ -114,33 +113,41 @@ class BusModal extends React.Component {
     this.handleOutsideTouchStart = this.handleOutsideTouchStart.bind(this);
 
     this.state = {
-      close: false
+      close: false,
     };
   }
 
   componentDidMount() {
     // Add listeners
-    document.addEventListener('click', this.handleOutsideClick, false);
-    document.addEventListener('touchstart', this.handleOutsideTouchStart, false);
-    document.body.style.overflowY = 'hidden';
+    document.addEventListener("click", this.handleOutsideClick, false);
+    document.addEventListener(
+      "touchstart",
+      this.handleOutsideTouchStart,
+      false
+    );
+    document.body.style.overflowY = "hidden";
   }
 
   componentWillUnmount() {
     // Remove listeners
-    document.removeEventListener('click', this.handleOutsideClick, false);
-    document.removeEventListener('touchstart', this.handleOutsideTouchStart, false);
-    document.body.style.overflowY = '';
+    document.removeEventListener("click", this.handleOutsideClick, false);
+    document.removeEventListener(
+      "touchstart",
+      this.handleOutsideTouchStart,
+      false
+    );
+    document.body.style.overflowY = "";
   }
 
   closeModal() {
     if (!this.state.close) {
       const { onClose } = this.props;
       this.setState({
-        close: true
+        close: true,
       });
-      setTimeout(()=>{
+      setTimeout(() => {
         onClose();
-      },300);
+      }, 300);
     }
   }
 
@@ -149,7 +156,7 @@ class BusModal extends React.Component {
     if (this.modalWindow != null) {
       if (!this.modalWindow.contains(e.target)) {
         this.closeModal();
-        document.removeEventListener('click', this.handleOutsideClick, false);
+        document.removeEventListener("click", this.handleOutsideClick, false);
       }
     }
   }
@@ -159,36 +166,40 @@ class BusModal extends React.Component {
     if (this.modalWindow != null) {
       if (!this.modalWindow.contains(e.target)) {
         this.closeModal();
-        document.removeEventListener('touchstart', this.handleOutsideTouchStart, false);
+        document.removeEventListener(
+          "touchstart",
+          this.handleOutsideTouchStart,
+          false
+        );
       }
     }
   }
 
   setModalWindow(element) {
     this.modalWindow = element;
-  };
+  }
 
   render() {
-    const {children} = this.props;
-    return(
+    const { children } = this.props;
+    return (
       <ExtendedOverlay animation={this.state.close ? hide : show}>
         <Window innerRef={this.setModalWindow}>
           <Header>
             <CloseLink onClick={this.closeModal}>
-              <FontAwesomeIcon icon={faTimesCircle} size="2x" transform="shrink-2" />
+              <FontAwesomeIcon
+                icon={faTimesCircle}
+                size="2x"
+                transform="shrink-2"
+              />
             </CloseLink>
           </Header>
-          <Content>
-              {children}
-          </Content>
+          <Content>{children}</Content>
           <Footer>
-            <CloseButton onClick={this.closeModal}>
-              Close
-            </CloseButton>
+            <CloseButton onClick={this.closeModal}>Close</CloseButton>
           </Footer>
         </Window>
       </ExtendedOverlay>
-    )
+    );
   }
 }
 
@@ -196,9 +207,9 @@ export default BusModal;
 
 BusModal.propTypes = {
   onClose: PropTypes.func.isRequired,
-  children: PropTypes.element.isRequired
-}
+  children: PropTypes.element.isRequired,
+};
 
 ExtendedOverlay.propTypes = {
   animation: PropTypes.object.isRequired,
-}
+};
diff --git a/client/src/js/components/ClassroomItem.js b/client/src/js/components/ClassroomItem.js
index 11fb514d4..b98952ad8 100644
--- a/client/src/js/components/ClassroomItem.js
+++ b/client/src/js/components/ClassroomItem.js
@@ -1,15 +1,15 @@
-import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
+import React from "react";
+import styled from "styled-components";
+import PropTypes from "prop-types";
 
-const StyledListItem = styled('li')`
+const StyledListItem = styled("li")`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   font-size: 1.7rem;
 `;
 
-const Classroom = styled('div')`
+const Classroom = styled("div")`
   display: inline-block;
   height: 100%;
   margin: 4px 5px 4px 0px;
@@ -26,7 +26,7 @@ const OccupiedClassroom = styled(Classroom)`
   background-color: #ffafaf;
 `;
 
-const Course = styled('div')`
+const Course = styled("div")`
   display: flex;
   flex: 1 1 150px;
   background-color: #ffafaf;
@@ -38,7 +38,7 @@ const Course = styled('div')`
 `;
 //TODO we have cases where multiple classes take place in one classroom...
 const ClassroomItem = ({ classroom }) => {
-  if (typeof classroom.courses !== 'undefined') {
+  if (typeof classroom.courses !== "undefined") {
     return (
       <StyledListItem>
         <OccupiedClassroom>{classroom.name}</OccupiedClassroom>
@@ -59,5 +59,5 @@ const ClassroomItem = ({ classroom }) => {
 export default ClassroomItem;
 
 ClassroomItem.propTypes = {
-  classroom: PropTypes.object.isRequired
+  classroom: PropTypes.object.isRequired,
 };
diff --git a/client/src/js/components/ClassroomList.js b/client/src/js/components/ClassroomList.js
index fa770c449..e33e47881 100644
--- a/client/src/js/components/ClassroomList.js
+++ b/client/src/js/components/ClassroomList.js
@@ -1,16 +1,16 @@
-import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
+import React from "react";
+import styled from "styled-components";
+import PropTypes from "prop-types";
 
-import ClassroomItem from './ClassroomItem';
-import { Overlay } from '../styled-components/Overlay';
-import { WrapperWithBackground } from '../styled-components/Wrapper';
+import ClassroomItem from "./ClassroomItem";
+import { Overlay } from "../styled-components/Overlay";
+import { WrapperWithBackground } from "../styled-components/Wrapper";
 
 const ExtendedOverlay = styled(Overlay)`
   padding: 40px 25px 25px 25px;
 `;
 
-const TitleWrapper = styled('div')`
+const TitleWrapper = styled("div")`
   align-self: flex-start;
   margin-top: 30px;
   margin-left: -40px;
@@ -19,16 +19,16 @@ const TitleWrapper = styled('div')`
   background-color: rgba(0, 0, 0, 0.2);
 `;
 
-const Title = styled('h3')`
+const Title = styled("h3")`
   margin: 0 0;
   padding-left: 25px;
-  font-family: 'Times';
+  font-family: "Times";
   font-size: 3.2rem;
   font-weight: lighter;
   color: #ffffff;
 `;
 
-const Subtitle = styled('h4')`
+const Subtitle = styled("h4")`
   margin: 0 0;
   padding-left: 25px;
   font-size: 1.5rem;
@@ -36,13 +36,13 @@ const Subtitle = styled('h4')`
   color: #ffffff;
 `;
 
-const ListWrapper = styled('div')`
+const ListWrapper = styled("div")`
   display: flex;
   justify-content: center;
   margin-bottom: 8vh;
 `;
 
-const StyledList = styled('ul')`
+const StyledList = styled("ul")`
   padding: 0;
   list-style: none;
   list-style-type: none;
@@ -56,8 +56,8 @@ const ClassroomList = ({ buildingName, classrooms, background, date }) => {
     const periodString =
       /^[1-5]$/.test(day) && /^[1-7]$/.test(period)
         ? `Period ${period}`
-        : 'Non-Class Time';
-    const listItems = classrooms.map(classroom => {
+        : "Non-Class Time";
+    const listItems = classrooms.map((classroom) => {
       return <ClassroomItem key={classroom.id} classroom={classroom} />;
     });
     return (
@@ -68,8 +68,7 @@ const ClassroomList = ({ buildingName, classrooms, background, date }) => {
         <ExtendedOverlay>
           <TitleWrapper>
             <Title>{`Building ${buildingName}`}</Title>
-            <Subtitle
-            >{`${dateString} ${hoursString}:${minutesString}`}</Subtitle>
+            <Subtitle>{`${dateString} ${hoursString}:${minutesString}`}</Subtitle>
             <Subtitle>{periodString}</Subtitle>
           </TitleWrapper>
           <ListWrapper>
@@ -96,5 +95,5 @@ ClassroomList.propTypes = {
   date: PropTypes.object,
   buildingName: PropTypes.string.isRequired,
   classrooms: PropTypes.array.isRequired,
-  background: PropTypes.string.isRequired
+  background: PropTypes.string.isRequired,
 };
diff --git a/client/src/js/components/CourseListSummary.js b/client/src/js/components/CourseListSummary.js
index 62d293139..419fb29b1 100644
--- a/client/src/js/components/CourseListSummary.js
+++ b/client/src/js/components/CourseListSummary.js
@@ -1,11 +1,11 @@
-import React from 'react';
-import styled from 'styled-components';
+import React from "react";
+import styled from "styled-components";
 
-import SortingOptions from './SortingOptions';
-import { RowWrapper } from '../styled-components/Wrapper';
-import { InvisibleButton } from '../styled-components/Button';
+import SortingOptions from "./SortingOptions";
+import { RowWrapper } from "../styled-components/Wrapper";
+import { InvisibleButton } from "../styled-components/Button";
 import { withNamespaces } from "react-i18next";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 
 const CourseAddedMessageWrapper = styled(RowWrapper)`
   justify-content: space-between;
@@ -18,11 +18,11 @@ const SortByButton = styled(InvisibleButton)`
     color: #b51e36;
   }
   &:focus {
-    fill: ${props => (props.isSortingOptionOpen ? '#b51e36;' : '#000;')};
-    color: ${props => (props.isSortingOptionOpen ? '#b51e36;' : '#000;')};
+    fill: ${(props) => (props.isSortingOptionOpen ? "#b51e36;" : "#000;")};
+    color: ${(props) => (props.isSortingOptionOpen ? "#b51e36;" : "#000;")};
   }
-  fill: ${props => (props.isSortingOptionOpen ? '#b51e36;' : '#000;')};
-  color: ${props => (props.isSortingOptionOpen ? '#b51e36;' : '#000;')};
+  fill: ${(props) => (props.isSortingOptionOpen ? "#b51e36;" : "#000;")};
+  color: ${(props) => (props.isSortingOptionOpen ? "#b51e36;" : "#000;")};
 `;
 
 const CourseListSummary = ({
@@ -31,12 +31,14 @@ const CourseListSummary = ({
   handleToggleSortingOptions,
   selectedSortingOption,
   handleChangeSortingOption,
-  t
+  t,
 }) => {
   return (
     <div>
       <CourseAddedMessageWrapper>
-        <span>{`${courses.length}`} {t("timetable.courses added")} </span>
+        <span>
+          {`${courses.length}`} {t("timetable.courses added")}{" "}
+        </span>
         <SortByButton
           isSortingOptionOpen={isSortingOptionOpen}
           onClick={handleToggleSortingOptions}
@@ -69,9 +71,9 @@ CourseListSummary.propTypes = {
   isSortingOptionOpen: PropTypes.bool.isRequired,
   handleToggleSortingOptions: PropTypes.func.isRequired,
   selectedSortingOption: PropTypes.string.isRequired,
-  handleChangeSortingOption: PropTypes.func.isRequired
-}
+  handleChangeSortingOption: PropTypes.func.isRequired,
+};
 
 SortByButton.propTypes = {
-  isSortingOptionOpen: PropTypes.bool.isRequired
-}
+  isSortingOptionOpen: PropTypes.bool.isRequired,
+};
diff --git a/client/src/js/components/FetchError.js b/client/src/js/components/FetchError.js
index 1d6e89cf5..e9070db3d 100644
--- a/client/src/js/components/FetchError.js
+++ b/client/src/js/components/FetchError.js
@@ -35,5 +35,5 @@ const FetchError = ({ onRetry }) => {
 export default FetchError;
 
 FetchError.propTypes = {
-  onRetry: PropTypes.func.isRequired
+  onRetry: PropTypes.func.isRequired,
 };
diff --git a/client/src/js/components/Footer.js b/client/src/js/components/Footer.js
index 555e2b57e..e81dc2306 100644
--- a/client/src/js/components/Footer.js
+++ b/client/src/js/components/Footer.js
@@ -114,5 +114,5 @@ export default withNamespaces("translation")(Footer);
 Footer.propTypes = {
   finishTime: PropTypes.string.isRequired,
   t: PropTypes.func.isRequired,
-  lng: PropTypes.string.isRequired
-}
+  lng: PropTypes.string.isRequired,
+};
diff --git a/client/src/js/components/Header.js b/client/src/js/components/Header.js
index 1eaed9807..c035a8a46 100644
--- a/client/src/js/components/Header.js
+++ b/client/src/js/components/Header.js
@@ -11,8 +11,8 @@ const StyledHeader = styled("header")`
   flex-direction: row;
   align-items: center;
   padding: 0.3rem 1rem;
-  height: ${props => props.theme.headerHeight};
-  background: ${props => props.theme.grey2};
+  height: ${(props) => props.theme.headerHeight};
+  background: ${(props) => props.theme.grey2};
   position: fixed;
   top: 0;
   right: 0;
diff --git a/client/src/js/components/JoinUs.js b/client/src/js/components/JoinUs.js
new file mode 100644
index 000000000..b159d0c74
--- /dev/null
+++ b/client/src/js/components/JoinUs.js
@@ -0,0 +1,167 @@
+import React from "react";
+import MediaQuery from "react-responsive";
+import { Helmet } from "react-helmet";
+import { Wrapper } from "../styled-components/Wrapper";
+import { Overlay } from "../styled-components/Overlay";
+import styled from "styled-components";
+import { Header, List, Divider } from "semantic-ui-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faUserTie, faUserCog } from "@fortawesome/free-solid-svg-icons";
+import { media } from "../styled-components/utils";
+import { sizes } from "../styled-components/utils";
+import "../../styles/semantic-ui-css/components/header.min.css";
+import "../../styles/semantic-ui-css/components/list.min.css";
+import "../../styles/semantic-ui-css/components/divider.min.css";
+
+const ExtendedOverlay = styled(Overlay)`
+  align-items: center;
+  background-color: #fff;
+  padding: 0 20vw;
+  color: #666;
+  ${media.phone`padding: 0 10vw;`};
+`;
+
+const ColoredHeader = styled(Header)`
+  color: #555 !important;
+`;
+
+const DividerTitle = styled(Divider)`
+  width: 60vw;
+  ${media.phone`width: 80vw;`};
+`;
+
+const JoinUs = () => {
+  return (
+    <Wrapper>
+      <Helmet>
+        <title>WasedaTime - Join Us!</title>
+        <meta
+          name="description"
+          content="Recruitment document for WasedaTime."
+        />
+        <meta property="og:title" content="WasedaTime - Join Us!" />
+        <meta
+          property="og:description"
+          content="Recruitment document for WasedaTime."
+        />
+        <meta property="og:site_name" content="WasedaTime - Join Us!" />
+      </Helmet>
+
+      <ExtendedOverlay>
+        <Divider hidden />
+        <MediaQuery minWidth={sizes.desktop}>
+          {(matches) =>
+            matches ? (
+              <ColoredHeader
+                size="huge"
+                textAlign="center"
+                content="WasedaTime is back, AND WE WANT YOU!"
+              />
+            ) : (
+              <ColoredHeader
+                size="large"
+                textAlign="center"
+                content="WasedaTime is back, AND WE WANT YOU!"
+              />
+            )
+          }
+        </MediaQuery>
+        <Divider hidden />
+        <p>
+          WasedaTime has been working on supporting students' academic
+          activities since launching. Its well-tested Syllabus Search feature is
+          favored by thousands of students. More than 50% of international
+          students are using this website. We never expect this could happen and
+          are always grateful for all our users.
+        </p>
+        <p>
+          With the quick iterations of the product, WasedaTime is running short
+          of talented minds! We want to extend a sincere invitation to you, and
+          let's build this fantastic product together! WasedaTime is a 100%
+          student-run, open-source project.
+        </p>
+
+        <Divider hidden />
+        <DividerTitle horizontal>
+          <Header size="huge">
+            <FontAwesomeIcon icon={faUserCog} /> Technology Roles
+          </Header>
+        </DividerTitle>
+        <List bulleted size="medium">
+          <List.Item>General Software Developer / Apprentice</List.Item>
+          <List.Item>Frontend Developer / Apprentice</List.Item>
+          <List.Item>Backend Developer / Apprentice</List.Item>
+          <List.Item>Infrastructure Developer / Apprentice</List.Item>
+        </List>
+        <p>
+          We are looking for experienced developers, but we also love to provide
+          mentorship to passionate beginners with little background! You will be
+          working with a talented team whose members entered the world's top 4
+          CS schools and interned at recognized employers in the industry:
+          Google, Tencent, Yahoo, Bilibili, etc. They are happy to provide
+          guidance in your career development :D
+        </p>
+
+        <Divider hidden />
+        <DividerTitle horizontal>
+          <Header size="huge">
+            <FontAwesomeIcon icon={faUserTie} />
+            <MediaQuery minWidth={sizes.desktop}>
+              {(matches) => (matches ? " " : <br />)}
+            </MediaQuery>
+            Performance Marketing
+            <MediaQuery minWidth={sizes.desktop}>
+              {(matches) => (matches ? " " : <br />)}
+            </MediaQuery>
+            & Business Operations
+          </Header>
+        </DividerTitle>
+
+        <List bulleted size="medium">
+          <List.Item>Product management</List.Item>
+          <List.Item>Marketing & Advertising</List.Item>
+          <List.Item>Business expansion/liaison</List.Item>
+          <List.Item>Finance</List.Item>
+        </List>
+        <p>
+          The “Non-Tech” team builds bridges across technology to users. They
+          transform WasedaTime from code to a vivid product. We are looking for
+          innovative minds who possess outstanding analytical skills. You will
+          be working with our excellent members who entered the world's top 10
+          business schools and interned at prestigious companies: Morgan
+          Stanley, Accenture, etc.
+        </p>
+
+        <Divider hidden />
+        <DividerTitle horizontal>
+          <Header size="huge">
+            <span role="img" aria-label="smile">
+              🤗
+            </span>{" "}
+            How to get started
+          </Header>
+        </DividerTitle>
+        <p>
+          We welcome students who are interested to send an email with a brief
+          self-introduction or a CV/resume to the following address:{" "}
+          <b>wasedatime@gmail.com</b>
+        </p>
+        <p>
+          The self-introduction should contain your name, department, year,
+          interests, and highlight projects (if possible). You're welcome to add
+          more information!
+        </p>
+
+        <Divider hidden />
+        <ColoredHeader
+          size="medium"
+          textAlign="center"
+          content="We look forward to hearing from you!"
+        />
+        <Divider hidden />
+      </ExtendedOverlay>
+    </Wrapper>
+  );
+};
+
+export default JoinUs;
diff --git a/client/src/js/components/LanguageMenu.js b/client/src/js/components/LanguageMenu.js
index 31523d647..7b2251686 100644
--- a/client/src/js/components/LanguageMenu.js
+++ b/client/src/js/components/LanguageMenu.js
@@ -34,10 +34,10 @@ const StyledSpan = styled("span")`
 
 class LanguangeMenu extends React.Component {
   state = {
-    anchorEl: null
+    anchorEl: null,
   };
 
-  handleClick = event => {
+  handleClick = (event) => {
     event.preventDefault();
     this.setState({ anchorEl: event.currentTarget });
   };
@@ -51,7 +51,7 @@ class LanguangeMenu extends React.Component {
     ReactGA.event({
       category: gaLanguage,
       action: gaAppendActionWithLng(gaChangeLanguage, this.props.lng),
-      label: lang
+      label: lang,
     });
     i18n.changeLanguage(lang);
     this.handleClose();
@@ -75,13 +75,13 @@ class LanguangeMenu extends React.Component {
         >
           <MenuItem
             style={{ fontSize: "0.8em", padding: "5px 12px" }}
-            onClick={event => this.handleMenuItemClick(event, LANGS.JP)}
+            onClick={(event) => this.handleMenuItemClick(event, LANGS.JP)}
           >
             日本語
           </MenuItem>
           <MenuItem
             style={{ fontSize: "0.8em", padding: "5px 12px" }}
-            onClick={event => this.handleMenuItemClick(event, LANGS.EN)}
+            onClick={(event) => this.handleMenuItemClick(event, LANGS.EN)}
           >
             English
           </MenuItem>
@@ -95,5 +95,5 @@ export default withNamespaces("translation")(LanguangeMenu);
 
 LanguangeMenu.propTypes = {
   lng: PropTypes.string.isRequired,
-  t: PropTypes.func.isRequired
-}
+  t: PropTypes.func.isRequired,
+};
diff --git a/client/src/js/components/LoadingSpinner.js b/client/src/js/components/LoadingSpinner.js
index 0e47eef4a..9a58a8c6b 100644
--- a/client/src/js/components/LoadingSpinner.js
+++ b/client/src/js/components/LoadingSpinner.js
@@ -1,10 +1,10 @@
-import React from 'react';
+import React from "react";
 import PropTypes from "prop-types";
-import styled, { keyframes } from 'styled-components';
+import styled, { keyframes } from "styled-components";
 
-import { Wrapper } from '../styled-components/Wrapper';
-import { Overlay } from '../styled-components/Overlay';
-import logo from '../../img/logo.png';
+import { Wrapper } from "../styled-components/Wrapper";
+import { Overlay } from "../styled-components/Overlay";
+import logo from "../../img/logo.png";
 
 const spin = keyframes`
   from {
@@ -28,7 +28,7 @@ const ExtendedOverlay = styled(Overlay)`
   padding: 25px;
 `;
 
-const Logo = styled('img')`
+const Logo = styled("img")`
   height: 100px;
   width: 100px;
   transition: transform(0, 12vh);
@@ -36,23 +36,54 @@ const Logo = styled('img')`
   transform-style: preserve-3d;
 `;
 
-const Description = styled('p')`
+const Description = styled("p")`
   font-size: 2rem;
+  text-align: center;
 `;
 
-const LoadingSpinner = props => {
-  return (
-    <ExtendedWrapper>
-      <ExtendedOverlay>
-        <Logo src={logo} alt="WasedaTime logo" />
-        <Description>{props.message || 'Loading...'}</Description>
-      </ExtendedOverlay>
-    </ExtendedWrapper>
-  );
-};
+class LoadingSpinner extends React.Component {
+  constructor(props) {
+    super(props);
+
+    // isMounted pattern to prevent setTimeOut executing after the component unmounts.
+    this._isMounted = false;
+
+    this.state = {
+      delayMessage: "",
+    };
+  }
+
+  componentDidMount() {
+    this._isMounted = true;
+    this._isMounted &&
+      setTimeout(() => {
+        this._isMounted &&
+          this.setState({
+            delayMessage:
+              "Slow network is detected. Please wait we're almost done 💪",
+          });
+      }, 4000);
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+
+  render() {
+    return (
+      <ExtendedWrapper>
+        <ExtendedOverlay>
+          <Logo src={logo} alt="WasedaTime logo" />
+          <Description>{this.props.message || "Loading..."}</Description>
+          <Description>{this.state.delayMessage}</Description>
+        </ExtendedOverlay>
+      </ExtendedWrapper>
+    );
+  }
+}
 
 export default LoadingSpinner;
 
 LoadingSpinner.propTypes = {
-  message: PropTypes.string.isRequired
-}
+  message: PropTypes.string.isRequired,
+};
diff --git a/client/src/js/components/Modal.js b/client/src/js/components/Modal.js
index 266162c6a..9088024b0 100644
--- a/client/src/js/components/Modal.js
+++ b/client/src/js/components/Modal.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import ReactModal from 'react-modal';
-import noScroll from 'no-scroll';
-import PropTypes from 'prop-types';
+import React from "react";
+import ReactModal from "react-modal";
+import noScroll from "no-scroll";
+import PropTypes from "prop-types";
 
-ReactModal.setAppElement('#root');
+ReactModal.setAppElement("#root");
 //TODO check how often this is called.
 // console.log('setAppElement called');
 
@@ -55,5 +55,5 @@ Modal.propTypes = {
   style: PropTypes.object,
   overlayClassName: PropTypes.string,
   className: PropTypes.string,
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
 };
diff --git a/client/src/js/components/Navigation.js b/client/src/js/components/Navigation.js
index 9e8282a6f..f5fd6faf7 100644
--- a/client/src/js/components/Navigation.js
+++ b/client/src/js/components/Navigation.js
@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
 import { withNamespaces } from "react-i18next";
 import { withRouter } from "react-router";
@@ -8,8 +8,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faCalendarAlt,
   faBook,
-  faBuilding,
-  faBus
+  faBus,
+  faStar,
 } from "@fortawesome/free-solid-svg-icons";
 
 import { media } from "../styled-components/utils";
@@ -40,10 +40,10 @@ const StyledButton = styled("button")`
   padding: 0;
   margin: 0;
   background-color: inherit;
-  color: ${props =>
+  color: ${(props) =>
     props.isClicked ? props.theme.colorPrimary : props.theme.white};
   &:hover {
-    color: ${props => props.theme.colorPrimary};
+    color: ${(props) => props.theme.colorPrimary};
   }
 `;
 
@@ -53,32 +53,32 @@ const StyledSpan = styled("span")`
   ${media.phone`font-size: 0.5em;`};
 `;
 
-const Navigation = props => {
+const Navigation = (props) => {
   const pathname = props.location.pathname;
   const t = props.t;
   const navItems = [
     {
       name: t("navigation.timetable"),
       path: "/timetable",
-      icon: faCalendarAlt
+      icon: faCalendarAlt,
     },
     {
       name: t("navigation.syllabus"),
       path: "/syllabus",
-      icon: faBook
-    },
-    {
-      name: t("navigation.roomfinder"),
-      path: "/roomfinder",
-      icon: faBuilding
+      icon: faBook,
     },
     {
       name: t("navigation.bus"),
       path: "/bus",
-      icon: faBus
-    }
+      icon: faBus,
+    },
+    {
+      name: t("navigation.joinus"),
+      path: "/joinus",
+      icon: faStar,
+    },
   ];
-  const styledLinks = navItems.map(item => {
+  const styledLinks = navItems.map((item) => {
     const itemName = item["name"];
     const itemPath = item["path"];
     const itemIcon = item["icon"];
@@ -103,9 +103,9 @@ export default withRouter(withNamespaces("translation")(Navigation));
 
 Navigation.propTypes = {
   location: PropTypes.object.isRequired,
-  t: PropTypes.func.isRequired
-}
+  t: PropTypes.func.isRequired,
+};
 
 StyledButton.propTypes = {
-  isClicked: PropTypes.bool.isRequired
-}
+  isClicked: PropTypes.bool.isRequired,
+};
diff --git a/client/src/js/components/NotFound.js b/client/src/js/components/NotFound.js
index 59b090bde..27362a68a 100644
--- a/client/src/js/components/NotFound.js
+++ b/client/src/js/components/NotFound.js
@@ -1,10 +1,10 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import styled from 'styled-components';
+import React from "react";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
 
-import { Wrapper } from '../styled-components/Wrapper';
-import { Button } from '../styled-components/Button';
-import { Overlay } from '../styled-components/Overlay';
+import { Wrapper } from "../styled-components/Wrapper";
+import { Button } from "../styled-components/Button";
+import { Overlay } from "../styled-components/Overlay";
 
 const ExtendedOverlay = styled(Overlay)`
   justify-content: center;
diff --git a/client/src/js/components/RoomFinder.js b/client/src/js/components/RoomFinder.js
index 7eecaa977..0853fb771 100644
--- a/client/src/js/components/RoomFinder.js
+++ b/client/src/js/components/RoomFinder.js
@@ -1,22 +1,28 @@
-import React from 'react';
-import { Switch, Route } from 'react-router-dom';
-import { Helmet } from 'react-helmet';
-import PropTypes from 'prop-types';
+import React from "react";
+import { Switch, Route } from "react-router-dom";
+import { Helmet } from "react-helmet";
+import PropTypes from "prop-types";
 
 // import RoomFinderNavigation from './RoomFinderNavigation';
-import UnderConstruction from './UnderConstruction';
+import UnderConstruction from "./UnderConstruction";
 // import NishiBuildingList from '../containers/NishiBuildingList';
 // import ClassroomListContainer from '../containers/ClassroomListContainer';
-import { Wrapper } from '../styled-components/Wrapper';
+import { Wrapper } from "../styled-components/Wrapper";
 
 const RoomFinder = ({ match }) => {
   return (
     <Wrapper>
       <Helmet>
         <title>WasedaTime - Classroom Usage</title>
-        <meta name="description" content="Classroom Usage Checking at Waseda University." />
+        <meta
+          name="description"
+          content="Classroom Usage Checking at Waseda University."
+        />
         <meta property="og:title" content="WasedaTime - Classroom Usage" />
-        <meta property="og:description" content="Classroom Usage Checking at Waseda University." />
+        <meta
+          property="og:description"
+          content="Classroom Usage Checking at Waseda University."
+        />
         <meta property="og:site_name" content="WasedaTime - Classroom Usage" />
       </Helmet>
       {/* <RoomFinderNavigation /> */}
@@ -35,5 +41,5 @@ const RoomFinder = ({ match }) => {
 export default RoomFinder;
 
 RoomFinder.propTypes = {
-  match: PropTypes.object.isRequired
+  match: PropTypes.object.isRequired,
 };
diff --git a/client/src/js/components/RoomFinderNavigation.js b/client/src/js/components/RoomFinderNavigation.js
index d684bcfe0..097445771 100644
--- a/client/src/js/components/RoomFinderNavigation.js
+++ b/client/src/js/components/RoomFinderNavigation.js
@@ -1,10 +1,10 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import styled from 'styled-components';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faUniversity } from '@fortawesome/free-solid-svg-icons';
+import React from "react";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faUniversity } from "@fortawesome/free-solid-svg-icons";
 
-const StyledNav = styled('nav')`
+const StyledNav = styled("nav")`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -15,7 +15,7 @@ const StyledNav = styled('nav')`
   background-color: #777777;
 `;
 
-const Icon = styled('div')`
+const Icon = styled("div")`
   align-items: center;
   margin-right: 18px;
   color: #ffffff;
@@ -24,13 +24,13 @@ const Icon = styled('div')`
 const StyledLink = styled(Link)`
   padding: 0px 14px;
   color: #ffffff;
-  font-family: 'Garamond';
+  font-family: "Garamond";
   font-size: 2rem;
   font-weight: 400;
   text-decoration: none;
 `;
 
-const ComingSoon = styled('div')`
+const ComingSoon = styled("div")`
   top: 105px;
   padding: 1px 5px;
   background-color: pink;
diff --git a/client/src/js/components/Root.js b/client/src/js/components/Root.js
index 4505f4910..eb4d963aa 100644
--- a/client/src/js/components/Root.js
+++ b/client/src/js/components/Root.js
@@ -45,7 +45,7 @@ class Analytics extends React.Component {
   }
 
   debounceSendPageChange = debounce(this.sendPageChange, 2000, {
-    leading: false
+    leading: false,
   });
 
   render() {
@@ -84,5 +84,5 @@ const Root = ({ store }) => {
 export default Root;
 
 Root.propTypes = {
-  store: PropTypes.object.isRequired
+  store: PropTypes.object.isRequired,
 };
diff --git a/client/src/js/components/SortingOptions.js b/client/src/js/components/SortingOptions.js
index a83f27dc1..6bb9cf1d6 100644
--- a/client/src/js/components/SortingOptions.js
+++ b/client/src/js/components/SortingOptions.js
@@ -17,32 +17,32 @@ const ExtendedInvisibleButton = styled(InvisibleButton)`
     color: #b51e36;
   }
   &:focus {
-    fill: ${props => (props.isClicked ? "#b51e36;" : "#000;")};
-    color: ${props => (props.isClicked ? "#b51e36;" : "#000;")};
+    fill: ${(props) => (props.isClicked ? "#b51e36;" : "#000;")};
+    color: ${(props) => (props.isClicked ? "#b51e36;" : "#000;")};
   }
-  fill: ${props => (props.isClicked ? "#b51e36;" : "#000;")};
-  color: ${props => (props.isClicked ? "#b51e36;" : "#000;")};
+  fill: ${(props) => (props.isClicked ? "#b51e36;" : "#000;")};
+  color: ${(props) => (props.isClicked ? "#b51e36;" : "#000;")};
 `;
 
 const SortingOptions = ({
   selectedSortingOption,
   handleChangeSortingOption,
-  t
+  t,
 }) => {
   const sortingOptions = [
     { value: ADDED_ORDER, label: t("syllabus.Added order") },
     { value: COURSE_TITLE, label: t("syllabus.Course title") },
-    { value: COURSE_TIME, label: t("syllabus.Course time") }
+    { value: COURSE_TIME, label: t("syllabus.Course time") },
   ];
   return (
     <ExtendedRowWrapper>
-      {sortingOptions.map(sortingOption => {
+      {sortingOptions.map((sortingOption) => {
         const sortingOptionValue = sortingOption.value;
         return (
           <ExtendedInvisibleButton
             key={sortingOptionValue}
             isClicked={sortingOptionValue === selectedSortingOption}
-            onClick={event => {
+            onClick={(event) => {
               event.preventDefault();
               handleChangeSortingOption(sortingOptionValue);
             }}
diff --git a/client/src/js/components/Updates.js b/client/src/js/components/Updates.js
index 19d5d9ca3..6994f1c3f 100644
--- a/client/src/js/components/Updates.js
+++ b/client/src/js/components/Updates.js
@@ -11,7 +11,7 @@ const StyledUpdates = styled("div")`
   align-items: center;
   padding: 0.3rem 2rem;
   height: 60px;
-  background: ${props => props.theme.colorPrimary};
+  background: ${(props) => props.theme.colorPrimary};
   position: fixed;
   top: 0;
   right: 0;
@@ -35,35 +35,21 @@ const ModalSection = styled("section")`
 `;
 
 class Updates extends React.Component {
-
   render() {
     const { t } = this.props;
     return (
       <StyledUpdates>
-        <ModalContainer
-            linkText={t("updates.header")}
-            text={""}
-          >
-            <ModalArticle>
-              <ModalSection>
-                <p>
-                  {t("updates.main")}
-                </p>
-                <p>
-                  {t("updates.main2")}
-                </p>
-                <p>
-                  {t("updates.main3")}
-                </p>
-                <p>
-                  {t("updates.main4")}
-                </p>
-                <p>
-                  {t("updates.main5")}
-                </p>
-              </ModalSection>
-            </ModalArticle>
-          </ModalContainer>
+        <ModalContainer linkText={t("updates.header")} text={""}>
+          <ModalArticle>
+            <ModalSection>
+              <p>{t("updates.main")}</p>
+              <p>{t("updates.main2")}</p>
+              <p>{t("updates.main3")}</p>
+              <p>{t("updates.main4")}</p>
+              <p>{t("updates.main5")}</p>
+            </ModalSection>
+          </ModalArticle>
+        </ModalContainer>
       </StyledUpdates>
     );
   }
@@ -72,5 +58,5 @@ class Updates extends React.Component {
 export default withNamespaces("translation")(Updates);
 
 Updates.propTypes = {
-  t: PropTypes.func.isRequired
-}
+  t: PropTypes.func.isRequired,
+};
diff --git a/client/src/js/components/courseEvals/CourseEvals.js b/client/src/js/components/courseEvals/CourseEvals.js
new file mode 100644
index 000000000..feca60049
--- /dev/null
+++ b/client/src/js/components/courseEvals/CourseEvals.js
@@ -0,0 +1,401 @@
+import React from "react";
+import MediaQuery from "react-responsive";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBullhorn } from "@fortawesome/free-solid-svg-icons";
+import qs from "qs";
+import { Helmet } from "react-helmet";
+import styled from "styled-components";
+import axios from "axios";
+import { wasetimeApiStatic } from "../../config/api";
+import ReactGA from "react-ga";
+import { gaRelatedCourses } from "../../ga/eventCategories";
+import {
+  gaAppendActionWithLng,
+  gaOpenModal,
+  gaCloseModal,
+} from "../../ga/eventActions";
+import levenshtein from "levenshtein-edit-distance";
+import { withNamespaces } from "react-i18next";
+import withFetchCourses from "../../hocs/withFetchCourses";
+
+import { media } from "../../styled-components/utils";
+import { sizes } from "../../styled-components/utils";
+import { RowWrapper } from "../../styled-components/Wrapper";
+import { Overlay } from "../../styled-components/Overlay";
+import { Wrapper } from "../../styled-components/Wrapper";
+
+import ReviewLangSwitches from "./ReviewLangSwitches";
+import RelatedCoursesButton from "./RelatedCoursesButton";
+import Modal from "../../components/Modal";
+import FetchError from "../../components/FetchError";
+import FetchedCourseItem from "../../containers/syllabus/FetchedCourseItem";
+import EvaluationScalesCountContainer from "./EvaluationScalesCountContainer";
+import RelatedCoursesContainer from "./RelatedCoursesContainer";
+import EvalsList from "./EvalsList";
+import LoadingSpinner from "../LoadingSpinner";
+
+export const LongWrapper = styled(Wrapper)`
+  flex: 1 1 auto;
+  ${media.tablet`flex: 0 0 auto; width: 100%`};
+`;
+
+export const ShortWrapper = styled(Wrapper)`
+  flex: 0 0 24em;
+  ${media.tablet`flex: 0 0 auto; width: 100%`};
+`;
+
+const ExtendedOverlay = styled(Overlay)`
+  padding: 0 25px;
+  ${media.tablet`padding-right: 2rem;`};
+`;
+
+const Announcement = styled("div")`
+  background-color: #48af37;
+  color: #fff;
+  margin-top: 20px;
+  margin-bottom: 5px;
+  padding: 5px 10px;
+  font-size: 0.7em;
+  border-radius: 3px;
+`;
+
+const Disclaimer = styled(Announcement)`
+  background-color: #aaa;
+  margin: 0.5rem 0px;
+`;
+
+const StyledSubHeading = styled("h2")`
+  align-self: flex-start;
+  margin: 1rem 0px;
+  padding-left: 1rem;
+  border-left: 5px solid rgb(148, 27, 47);
+  font-size: 2rem;
+  font-weight: 300;
+  ${media.tablet`font-size: 2rem;`};
+`;
+
+const EvalsListWrapper = styled("div")`
+  max-height: 60vh;
+  overflow-y: auto;
+`;
+
+const modalStyle = {
+  overlay: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: "1050",
+  },
+  content: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "#ccc",
+    overflowY: "auto",
+    overflowScrolling: "touch",
+    WebkitOverflowScrolling: "touch",
+    outline: "none",
+    padding: 0,
+  },
+};
+
+const getCourse = (loadedCourses, courseID) => {
+  // Return null if courses not saved in localStorage or the course to display is not saved in localStorage
+  return loadedCourses ? loadedCourses[courseID] : null;
+};
+
+const getCourseKey = (course) =>
+  course.ks.find((key) => key.s === "SILS" || key.s === "PSE") &&
+  course.t.toLowerCase().includes("seminar")
+    ? course._id.substring(0, 12)
+    : course._id.substring(0, 10);
+
+const getRelatedCourses = (
+  loadedCourses,
+  courseCode,
+  thisCourseKey,
+  thisCourseTitle,
+  thisCourseSchool
+) => {
+  const relatedCourseIDs = Object.keys(loadedCourses).filter(
+    (courseID) =>
+      loadedCourses[courseID].c === courseCode &&
+      getCourseKey(loadedCourses[courseID]) !== thisCourseKey
+  );
+  const relatedCourses = relatedCourseIDs.map(
+    (courseID) => loadedCourses[courseID]
+  );
+  const sortedRelatedCourses = relatedCourses
+    .sort((a, b) => {
+      if (a.ks[0].s === thisCourseSchool && b.ks[0].s !== thisCourseSchool)
+        return -1;
+      if (a.ks[0].s !== thisCourseSchool && b.ks[0].s === thisCourseSchool)
+        return 1;
+      return (
+        levenshtein(thisCourseTitle, a.t) - levenshtein(thisCourseTitle, b.t)
+      );
+    })
+    .slice(0, 10);
+  return sortedRelatedCourses;
+};
+
+class CourseEvals extends React.Component {
+  constructor(props) {
+    super(props);
+    this._isMounted = false;
+  }
+
+  state = {
+    thisCourse: {},
+    relatedCourses: [],
+    thisCourseEvals: [],
+    relatedCourseEvals: [],
+    avgSatisfaction: 0,
+    avgDifficulty: 0,
+    avgBenefit: 0,
+    searchLang: "",
+    reviewLang: "",
+    isLoaded: false,
+    isModalOpen: false,
+    error: false,
+  };
+
+  componentDidMount() {
+    this._isMounted = true;
+    this._isMounted && this.loadEvaluationsAndRelatedCourses();
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+
+  async loadEvaluationsAndRelatedCourses() {
+    const courseID = qs.parse(this.props.location.search, {
+      ignoreQueryPrefix: true,
+    }).courseID;
+    const searchLang = qs.parse(this.props.location.search, {
+      ignoreQueryPrefix: true,
+    }).searchLang;
+    let loadedCourses = this.props.fetchedCoursesById;
+    //loadState().fetchedCourses.byId;
+
+    const thisCourse = getCourse(loadedCourses, courseID);
+    const thisCourseKey = getCourseKey(thisCourse);
+
+    // 1. Get related courses by code, sort them, and get the first k courses (k=10)
+    const relatedCourses = getRelatedCourses(
+      loadedCourses,
+      thisCourse.c,
+      thisCourseKey,
+      thisCourse.t,
+      thisCourse.ks[0].s
+    );
+
+    // 2. Make the key of tis course and keys of top 3 related courses into a list
+    const courseKeysToFetchEvals = [thisCourseKey].concat(
+      relatedCourses.slice(0, 3).map((course) => getCourseKey(course))
+    );
+
+    // 3. Fetch the reviews by posting the keys list
+    const courseEvals = await this.getCourseEvalsByKey(courseKeysToFetchEvals);
+    let thisCourseEvals = {};
+    let relatedCourseEvals = {};
+    courseEvals.forEach((c, i) => {
+      if (i === 0) thisCourseEvals = c.comments;
+      else relatedCourseEvals[courseKeysToFetchEvals[i]] = c.comments;
+    });
+
+    let satisfactionSum = 0,
+      difficultySum = 0,
+      benefitSum = 0;
+    thisCourseEvals.forEach((review) => {
+      satisfactionSum += review.satisfaction;
+      difficultySum += review.difficulty;
+      benefitSum += review.benefit;
+    });
+    // calculate the averages of scales and round them to the nearest .5
+    const avgSatisfaction =
+      Math.round((satisfactionSum / thisCourseEvals.length) * 2) / 2;
+    const avgDifficulty =
+      Math.round((difficultySum / thisCourseEvals.length) * 2) / 2;
+    const avgBenefit =
+      Math.round((benefitSum / thisCourseEvals.length) * 2) / 2;
+
+    this._isMounted &&
+      this.setState({
+        thisCourse: thisCourse,
+        relatedCourses: relatedCourses,
+        thisCourseEvals: thisCourseEvals,
+        relatedCourseEvals: relatedCourseEvals,
+        avgSatisfaction: avgSatisfaction,
+        avgDifficulty: avgDifficulty,
+        avgBenefit: avgBenefit,
+        searchLang: searchLang,
+        reviewLang: this.props.lng,
+        isLoaded: true,
+      });
+  }
+
+  async getCourseEvalsByKey(courseKeys) {
+    try {
+      // get reviews by courseKeys
+      const res = await axios.post(
+        wasetimeApiStatic.courseEvalsBaseURL,
+        {
+          course_keys: courseKeys,
+        },
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+      return res.data;
+    } catch (error) {
+      console.error(error);
+      this.setState({ error: true });
+    }
+  }
+
+  handleToggleModal = (event) => {
+    event.preventDefault();
+    const gaAction = this.state.isModalOpen ? gaCloseModal : gaOpenModal;
+    ReactGA.event({
+      category: gaRelatedCourses,
+      action: gaAppendActionWithLng(gaAction, this.props.lng),
+    });
+    this.setState((prevState, props) => {
+      return {
+        isModalOpen: !prevState.isModalOpen,
+      };
+    });
+  };
+
+  switchReviewLang = (lang) => this.setState({ reviewLang: lang });
+
+  render() {
+    const {
+      thisCourse,
+      relatedCourses,
+      thisCourseEvals,
+      relatedCourseEvals,
+      avgSatisfaction,
+      avgDifficulty,
+      avgBenefit,
+      searchLang,
+      reviewLang,
+      isLoaded,
+      error,
+    } = this.state;
+    if (error)
+      return <FetchError onRetry={this.loadEvaluationsAndRelatedCourses} />;
+    return isLoaded ? (
+      <RowWrapper>
+        <Helmet>
+          <title>WasedaTime - Course Reviews</title>
+          <meta
+            name="description"
+            content="Latest Course Reviews by Waseda Students."
+          />
+          <meta property="og:title" content="WasedaTime - Course Reviews" />
+          <meta
+            property="og:description"
+            content="Latest Course Reviews by Waseda Students."
+          />
+          <meta property="og:site_name" content="WasedaTime - Course Reviews" />
+        </Helmet>
+
+        <LongWrapper>
+          <ExtendedOverlay>
+            <div>
+              <Announcement>
+                <FontAwesomeIcon icon={faBullhorn} />{" "}
+                {this.props.t(`courseEvals.Thank WTSA 1`)}{" "}
+                <a
+                  href="https://www.facebook.com/WasedaTaiwaneseStudentAssociation/"
+                  style={{ color: "#fff" }}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {this.props.t(`courseEvals.WTSA`)}
+                </a>
+                {this.props.t(`courseEvals.Thank WTSA 2`)}
+              </Announcement>
+              {isLoaded && (
+                <FetchedCourseItem
+                  searchTerm={""}
+                  searchLang={searchLang}
+                  course={thisCourse}
+                  isInCourseEvalsPage={true}
+                />
+              )}
+
+              <StyledSubHeading>
+                {this.props.t(`courseEvals.Reviews`)}{" "}
+                <span style={{ marginLeft: "10px" }}>
+                  <ReviewLangSwitches
+                    reviewLang={reviewLang}
+                    switchReviewLang={this.switchReviewLang}
+                  />
+                </span>
+              </StyledSubHeading>
+              <Disclaimer>{this.props.t(`courseEvals.Disclaimer`)}</Disclaimer>
+              <EvalsListWrapper>
+                <EvaluationScalesCountContainer
+                  avgSatisfaction={avgSatisfaction}
+                  avgDifficulty={avgDifficulty}
+                  avgBenefit={avgBenefit}
+                  thisCourseEvalsLength={thisCourseEvals.length}
+                />
+                <EvalsList
+                  reviews={thisCourseEvals}
+                  searchLang={searchLang}
+                  reviewLang={reviewLang}
+                />
+              </EvalsListWrapper>
+              <br />
+            </div>
+          </ExtendedOverlay>
+        </LongWrapper>
+
+        {isLoaded && (
+          <MediaQuery minWidth={sizes.desktop}>
+            {(matches) => {
+              return matches ? (
+                <ShortWrapper>
+                  <RelatedCoursesContainer
+                    relatedCourses={relatedCourses}
+                    courseEvals={relatedCourseEvals}
+                    searchLang={searchLang}
+                  />
+                </ShortWrapper>
+              ) : (
+                <div>
+                  <RelatedCoursesButton
+                    isModalOpen={this.state.isModalOpen}
+                    handleToggleModal={this.handleToggleModal}
+                  />
+                  <Modal isOpen={this.state.isModalOpen} style={modalStyle}>
+                    <RelatedCoursesContainer
+                      relatedCourses={relatedCourses}
+                      courseEvals={relatedCourseEvals}
+                      searchLang={searchLang}
+                    />
+                  </Modal>
+                </div>
+              );
+            }}
+          </MediaQuery>
+        )}
+      </RowWrapper>
+    ) : (
+      <LoadingSpinner message={"Loading reviews..."} />
+    );
+  }
+}
+
+export default withFetchCourses(withNamespaces("translation")(CourseEvals));
diff --git a/client/src/js/components/courseEvals/CourseEvalsGroup.js b/client/src/js/components/courseEvals/CourseEvalsGroup.js
new file mode 100644
index 000000000..79b532242
--- /dev/null
+++ b/client/src/js/components/courseEvals/CourseEvalsGroup.js
@@ -0,0 +1,40 @@
+import React from "react";
+import styled from "styled-components";
+import { withNamespaces } from "react-i18next";
+
+import FetchedCourseItem from "../../containers/syllabus/FetchedCourseItem";
+import EvalsList from "./EvalsList";
+
+const CourseEvalsGroupWrapper = styled("div")`
+  background: #fff;
+  margin-bottom: 1em;
+`;
+
+const EvalsHeader = styled("h3")`
+  margin: 0;
+  text-align: center;
+  background: #eee;
+`;
+
+const CourseEvalsGroup = ({ course, reviews, searchLang, reviewLang, t }) => {
+  return (
+    <CourseEvalsGroupWrapper>
+      <FetchedCourseItem
+        searchTerm={""}
+        searchLang={searchLang}
+        course={course}
+        isInCourseEvalsPage={true}
+      />
+      <EvalsHeader>{t(`courseEvals.Reviews`)}</EvalsHeader>
+      {reviews && (
+        <EvalsList
+          reviews={reviews}
+          searchLang={searchLang}
+          reviewLang={reviewLang}
+        />
+      )}
+    </CourseEvalsGroupWrapper>
+  );
+};
+
+export default withNamespaces("translation")(CourseEvalsGroup);
diff --git a/client/src/js/components/courseEvals/EvalsList.js b/client/src/js/components/courseEvals/EvalsList.js
new file mode 100644
index 000000000..4e6f2f836
--- /dev/null
+++ b/client/src/js/components/courseEvals/EvalsList.js
@@ -0,0 +1,113 @@
+import React from "react";
+import styled from "styled-components";
+import EvaluationStars from "./EvaluationStars";
+import { media } from "../../styled-components/utils";
+import { withNamespaces } from "react-i18next";
+import {
+  COURSE_EVAL_LNG,
+  COURSE_EVAL_LNG_FULL_NAME,
+} from "../../config/course_eval_lng";
+
+const EvaluationsWrapper = styled("div")`
+  background: #fff;
+`;
+
+const Evaluation = styled("div")`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 1em;
+`;
+
+const EvaluationDivider = styled("hr")`
+  margin: 0px 2em;
+  border: 1px solid #ddd;
+`;
+
+const EvaluationText = styled("div")`
+  ${media.phoneMini`font-size: 1.4rem; flex: 1 0 60%;`};
+`;
+
+const GoogleTranslationHint = styled("p")`
+  margin: 0;
+  margin-top: 5px;
+  font-size: 0.7em;
+  color: #aaa;
+`;
+
+const EvaluationTitle = styled("h6")`
+  font-size: 0.7em;
+  margin-top: 0;
+  margin-bottom: 0.5em;
+`;
+
+const EvaluationYear = styled("span")`
+  background-color: orange;
+  color: #fff;
+  padding: 0 0.5em;
+  border-radius: 5px;
+`;
+
+const EvaluationScalesList = styled("div")`
+  word-break: break-word;
+  flex: 1 0 6em;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font-size: 1em;
+  ${media.tablet`font-size: 1em;`};
+  ${media.phoneMini`font-size: 1.2rem; flex: 1 0 40%;`};
+`;
+
+const EvaluationScale = styled("div")`
+  text-align: end;
+`;
+
+const EvalsList = ({ reviews, searchLang, reviewLang, t }) => {
+  return reviews.map((review, i) => {
+    return (
+      <EvaluationsWrapper key={i}>
+        {i !== 0 && <EvaluationDivider />}
+        <Evaluation>
+          <EvaluationText>
+            <EvaluationTitle>
+              <EvaluationYear>{review["year"]}</EvaluationYear>{" "}
+              {review[searchLang === "en" ? "title" : "title_jp"]} ({" "}
+              {review[searchLang === "en" ? "instructor" : "instructor_jp"]} )
+            </EvaluationTitle>
+            <span>
+              {review["comment_" + reviewLang].split("\n").map((str) => (
+                <span>
+                  {str}
+                  <br />
+                </span>
+              ))}
+            </span>
+            {COURSE_EVAL_LNG[review["comment_src_lng"]] !== reviewLang && (
+              <GoogleTranslationHint>
+                Translated from{" "}
+                {COURSE_EVAL_LNG_FULL_NAME[review["comment_src_lng"]]} by Google
+              </GoogleTranslationHint>
+            )}
+          </EvaluationText>
+          <EvaluationScalesList>
+            <EvaluationScale>
+              <span>{t(`courseEvals.Satisfaction`)}&nbsp;</span>
+              <EvaluationStars scale={review["satisfaction"]} />
+            </EvaluationScale>
+            <EvaluationScale>
+              <span>{t(`courseEvals.Difficulty`)}&nbsp;</span>
+              <EvaluationStars scale={review["difficulty"]} />
+            </EvaluationScale>
+            <EvaluationScale>
+              <span>{t(`courseEvals.Benefit`)}&nbsp;</span>
+              <EvaluationStars scale={review["benefit"]} />
+            </EvaluationScale>
+          </EvaluationScalesList>
+        </Evaluation>
+      </EvaluationsWrapper>
+    );
+  });
+};
+
+export default withNamespaces("translation")(EvalsList);
diff --git a/client/src/js/components/courseEvals/EvaluationScalesCountContainer.js b/client/src/js/components/courseEvals/EvaluationScalesCountContainer.js
new file mode 100644
index 000000000..94f1e8a5f
--- /dev/null
+++ b/client/src/js/components/courseEvals/EvaluationScalesCountContainer.js
@@ -0,0 +1,87 @@
+import React from "react";
+import MediaQuery from "react-responsive";
+import styled from "styled-components";
+import EvaluationStars from "./EvaluationStars";
+import { media } from "../../styled-components/utils";
+import { sizes } from "../../styled-components/utils";
+import { withNamespaces } from "react-i18next";
+
+const EvaluationScalesRow = styled("div")`
+  display: flex;
+  flex-direction: row;
+  font-size: 1.5em;
+  background: #eee;
+  padding: 1rem;
+  ${media.tablet`font-size: 1.2em;`};
+  ${media.phoneMini`font-size: 1em;`};
+`;
+
+const EvaluationScalesList = styled("div")`
+  flex: 5;
+  display: flex;
+  flex-direction: row;
+  ${media.tablet`flex: 2; flex-direction: column;`};
+`;
+
+const EvaluationScale = styled("div")`
+  flex: 1;
+  padding: 1rem 0px;
+  text-align: center;
+  color: #333;
+  font-size: 0.8em;
+  ${media.tablet`
+    flex: 1;
+    padding: 0.2rem 0px;
+    text-align: left;
+  `};
+`;
+
+const EvaluationsCount = styled("div")`
+  flex: 1;
+  padding: 1rem 0px;
+  padding-top: 1.5rem;
+  text-align: center;
+  justify-content: flex-start;
+  color: #777;
+  font-size: 0.6em;
+`;
+
+const EvaluationScalesCountContainer = ({
+  avgSatisfaction,
+  avgDifficulty,
+  avgBenefit,
+  thisCourseEvalsLength,
+  t,
+}) => (
+  <EvaluationScalesRow>
+    <EvaluationScalesList>
+      <EvaluationScale>
+        <EvaluationStars scale={avgSatisfaction} />
+        <span>&nbsp;{t(`courseEvals.Satisfaction`)}</span>
+      </EvaluationScale>
+      <EvaluationScale>
+        <EvaluationStars scale={avgDifficulty} />
+        <span>&nbsp;{t(`courseEvals.Difficulty`)}</span>
+      </EvaluationScale>
+      <EvaluationScale>
+        <EvaluationStars scale={avgBenefit} />
+        <span>&nbsp;{t(`courseEvals.Benefit`)}</span>
+      </EvaluationScale>
+    </EvaluationScalesList>
+
+    <EvaluationsCount>
+      <MediaQuery minWidth={sizes.desktop}>
+        {(matches) =>
+          matches ? (
+            <span>{thisCourseEvalsLength}</span>
+          ) : (
+            <h1 style={{ margin: "0px" }}>{thisCourseEvalsLength}</h1>
+          )
+        }
+      </MediaQuery>{" "}
+      {t(`courseEvals.Reviews`)}
+    </EvaluationsCount>
+  </EvaluationScalesRow>
+);
+
+export default withNamespaces("translation")(EvaluationScalesCountContainer);
diff --git a/client/src/js/components/courseEvals/EvaluationStars.js b/client/src/js/components/courseEvals/EvaluationStars.js
new file mode 100644
index 000000000..52c38a4ba
--- /dev/null
+++ b/client/src/js/components/courseEvals/EvaluationStars.js
@@ -0,0 +1,58 @@
+import React from "react";
+import styled from "styled-components";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faStar, faStarHalf } from "@fortawesome/free-solid-svg-icons";
+
+const FilledStar = styled(FontAwesomeIcon)`
+  color: orange;
+  font-size: 0.7em;
+  vertical-align: 0.1em;
+`;
+
+const BlankStar = styled(FontAwesomeIcon)`
+  color: #ccc;
+  font-size: 0.7em;
+  vertical-align: 0.1em;
+`;
+
+const StyledEvaluationStars = styled("span")`
+  white-space: pre;
+`;
+
+const displayFilledStars = (scale) => {
+  let stars = [];
+  for (let n = Math.floor(scale); n > 0; n--) {
+    stars.push(<FilledStar key={n} icon={faStar} />);
+  }
+  return stars;
+  // return [...Array(Math.floor(scale)).keys()].map(i => {
+  //   return <FilledStar key={i} icon={faStar} />
+  // })
+};
+
+const displayHalfStar = (scale) => {
+  return (scale - Math.floor(scale)) * 2 ? (
+    <FilledStar icon={faStarHalf} />
+  ) : (
+    ""
+  );
+};
+
+const displayBlankStars = (scale) => {
+  let stars = [];
+  for (let n = 5 - Math.ceil(scale); n > 0; n--) {
+    stars.push(<BlankStar key={n} icon={faStar} />);
+  }
+  return stars;
+  // return [...Array(5-Math.ceil(scale)).keys()].map(i => <BlankStar key={i} icon={faStar} />)
+};
+
+const EvaluationStars = ({ scale }) => (
+  <StyledEvaluationStars>
+    {displayFilledStars(scale)}
+    {displayHalfStar(scale)}
+    {displayBlankStars(scale)}
+  </StyledEvaluationStars>
+);
+
+export default EvaluationStars;
diff --git a/client/src/js/components/courseEvals/RelatedCoursesButton.js b/client/src/js/components/courseEvals/RelatedCoursesButton.js
new file mode 100644
index 000000000..d4071fbf9
--- /dev/null
+++ b/client/src/js/components/courseEvals/RelatedCoursesButton.js
@@ -0,0 +1,61 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTimes, faSearchPlus } from "@fortawesome/free-solid-svg-icons";
+import styled from "styled-components";
+import PropTypes from "prop-types";
+import { withNamespaces } from "react-i18next";
+
+import { FloatingActionButton } from "../../styled-components/Button";
+
+const IconTextWrapper = styled("div")`
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+  margin: 0 10px;
+`;
+
+const IconWrapper = styled("div")`
+  flex: 1;
+`;
+
+const ButtonText = styled("div")`
+  flex: 2;
+`;
+
+const RelatedCoursesButton = ({ isModalOpen, handleToggleModal, t }) => {
+  const width = isModalOpen ? "56px" : "130px";
+  const borderRadius = isModalOpen ? "30px" : "20px";
+
+  return (
+    <FloatingActionButton
+      onClick={handleToggleModal}
+      width={width}
+      borderRadius={borderRadius}
+    >
+      {isModalOpen ? (
+        <FontAwesomeIcon icon={faTimes} size="2x" transform="shrink-3" />
+      ) : (
+        <IconTextWrapper>
+          <IconWrapper>
+            <FontAwesomeIcon
+              icon={faSearchPlus}
+              size="2x"
+              transform="shrink-3"
+            />{" "}
+          </IconWrapper>
+          <ButtonText>{t(`courseEvals.Related courses`)}</ButtonText>
+        </IconTextWrapper>
+      )}
+    </FloatingActionButton>
+  );
+};
+
+export default withNamespaces("translation")(RelatedCoursesButton);
+
+RelatedCoursesButton.propTypes = {
+  isModalOpen: PropTypes.bool.isRequired,
+  handleToggleModal: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired,
+};
diff --git a/client/src/js/components/courseEvals/RelatedCoursesContainer.js b/client/src/js/components/courseEvals/RelatedCoursesContainer.js
new file mode 100644
index 000000000..222009145
--- /dev/null
+++ b/client/src/js/components/courseEvals/RelatedCoursesContainer.js
@@ -0,0 +1,106 @@
+import React from "react";
+import styled from "styled-components";
+import CourseEvalsGroup from "./CourseEvalsGroup";
+import ReviewLangSwitches from "./ReviewLangSwitches";
+import { media } from "../../styled-components/utils";
+import { Overlay } from "../../styled-components/Overlay";
+import { withNamespaces } from "react-i18next";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
+
+const ExtendedOverlay = styled(Overlay)`
+  padding: 0 25px;
+  ${media.tablet`padding-right: 2rem;`};
+`;
+
+const StyledSubHeading = styled("h2")`
+  align-self: flex-start;
+  margin-top: 1rem 0px;
+  margin-bottom: 0.5rem;
+  padding-left: 1rem;
+  border-left: 5px solid rgb(148, 27, 47);
+  font-size: 2rem;
+  font-weight: 300;
+  ${media.tablet`font-size: 2rem;`};
+`;
+
+const RelatedCoursesWrapper = styled("div")`
+  margin-top: 0.5rem;
+  max-height: 80vh;
+  overflow-y: auto;
+`;
+
+const RelatedCoursesExplainTooltip = styled("div")`
+  position: relative;
+  display: inline-block;
+
+  &:hover span {
+    visibility: visible;
+  }
+`;
+
+const RelatedCoursesExplainTooltipText = styled("span")`
+  visibility: hidden;
+  width: 150px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px;
+  margin-left: 5px;
+  font-size: 0.6em;
+  position: absolute;
+  z-index: 1;
+  ${media.phoneMini`left: -400%; top: 100%;`};
+`;
+
+const getCourseKey = (course) =>
+  course.ks.find((key) => key.s === "SILS" || key.s === "PSE") &&
+  course.t.toLowerCase().includes("seminar")
+    ? course._id.substring(0, 12)
+    : course._id.substring(0, 10);
+
+class RelatedCoursesContainer extends React.Component {
+  state = {
+    reviewLang: this.props.lng,
+  };
+
+  switchReviewLang = (lang) => this.setState({ reviewLang: lang });
+
+  render() {
+    const { relatedCourses, courseEvals, searchLang, t } = this.props;
+    return (
+      <ExtendedOverlay>
+        <StyledSubHeading>
+          {t(`courseEvals.Related courses`)}{" "}
+          <RelatedCoursesExplainTooltip>
+            <FontAwesomeIcon
+              icon={faQuestionCircle}
+              style={{ fontSize: "0.7em" }}
+            ></FontAwesomeIcon>
+            <RelatedCoursesExplainTooltipText>
+              {t(`courseEvals.Related courses explanation`)}
+            </RelatedCoursesExplainTooltipText>
+          </RelatedCoursesExplainTooltip>
+        </StyledSubHeading>
+        <ReviewLangSwitches
+          reviewLang={this.state.reviewLang}
+          switchReviewLang={this.switchReviewLang}
+        />
+        <RelatedCoursesWrapper>
+          {relatedCourses.map((relatedCourse, i) => (
+            <CourseEvalsGroup
+              course={relatedCourse}
+              reviews={courseEvals[getCourseKey(relatedCourse)]}
+              searchLang={searchLang}
+              reviewLang={this.state.reviewLang}
+              key={i}
+            />
+          ))}
+        </RelatedCoursesWrapper>
+      </ExtendedOverlay>
+    );
+  }
+}
+
+export default withNamespaces("translation")(RelatedCoursesContainer);
diff --git a/client/src/js/components/courseEvals/ReviewLangSwitches.js b/client/src/js/components/courseEvals/ReviewLangSwitches.js
new file mode 100644
index 000000000..aa24013ef
--- /dev/null
+++ b/client/src/js/components/courseEvals/ReviewLangSwitches.js
@@ -0,0 +1,62 @@
+import React from "react";
+import styled from "styled-components";
+
+const ReviewLangSwitch = styled("button")`
+  font-size: 0.6em;
+  border: none;
+  padding: 5px 10px;
+  background-color: #ddd;
+  height: 2em;
+  vertical-align: 0.3em;
+  ${(props) =>
+    props.active && "border-bottom: 2px solid #fff; background-color: #eee;"};
+
+  &:hover {
+    outline: none;
+    background-color: #eee;
+  }
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+const ReviewLangSwitchEng = styled(ReviewLangSwitch)`
+  border-top: 2px solid #ddd;
+  ${(props) => props.active && "border-top: 2px solid #eee;"};
+
+  &:hover {
+    border-top: 2px solid #eee;
+  }
+`;
+
+const ReviewLangSwitches = ({ reviewLang, switchReviewLang, t }) => (
+  <span>
+    <ReviewLangSwitchEng
+      active={reviewLang === "en"}
+      onClick={() => switchReviewLang("en")}
+    >
+      English
+    </ReviewLangSwitchEng>
+    <ReviewLangSwitch
+      active={reviewLang === "jp"}
+      onClick={() => switchReviewLang("jp")}
+    >
+      日本語
+    </ReviewLangSwitch>
+    <ReviewLangSwitch
+      active={reviewLang === "zh_TW"}
+      onClick={() => switchReviewLang("zh_TW")}
+    >
+      繁中
+    </ReviewLangSwitch>
+    <ReviewLangSwitch
+      active={reviewLang === "zh_CN"}
+      onClick={() => switchReviewLang("zh_CN")}
+    >
+      简中
+    </ReviewLangSwitch>
+  </span>
+);
+
+export default ReviewLangSwitches;
diff --git a/client/src/js/components/i18n.js b/client/src/js/components/i18n.js
index ae7df833d..4c38261e4 100644
--- a/client/src/js/components/i18n.js
+++ b/client/src/js/components/i18n.js
@@ -3,13 +3,12 @@ import { reactI18nextModule } from "react-i18next";
 import detector from "i18next-browser-languagedetector";
 import backend from "i18next-xhr-backend";
 import LANGS from "../config/langs";
-
-const LNG_KEY = "wasedatime-2019-lng";
+import { LNG_KEY } from "../../localForage";
 
 const detectorOptions = {
   order: ["localStorage"],
   lookupLocalStorage: LNG_KEY,
-  caches: ["localStorage"]
+  caches: ["localStorage"],
 };
 
 i18n
@@ -21,14 +20,14 @@ i18n
     keySeparator: ".",
     interpolation: {
       // react already safes from xss
-      escapeValue: false
+      escapeValue: false,
     },
     // Configure the withNamespaces / NamespacesConsumer to
     // not render the content until needed namespaces are loaded.
     react: {
-      wait: true
+      wait: true,
     },
-    detection: detectorOptions
+    detection: detectorOptions,
   });
 
 export default i18n;
diff --git a/client/src/js/components/syllabus/AddedCourseList.js b/client/src/js/components/syllabus/AddedCourseList.js
index d2fb36b83..ecd90c688 100644
--- a/client/src/js/components/syllabus/AddedCourseList.js
+++ b/client/src/js/components/syllabus/AddedCourseList.js
@@ -7,7 +7,7 @@ import { withNamespaces } from "react-i18next";
 
 import {
   headerHeight,
-  addedCourseListSwitchHeight
+  addedCourseListSwitchHeight,
 } from "../../styled-components/variables";
 import CourseListSummary from "../CourseListSummary";
 import AddedCourseItem from "../../containers/syllabus/AddedCourseItem";
@@ -17,7 +17,7 @@ import {
   Section,
   Subheading,
   OList,
-  ListItem
+  ListItem,
 } from "../../styled-components/Article";
 
 const CourseListWrapper = styled(Wrapper)`
@@ -25,8 +25,8 @@ const CourseListWrapper = styled(Wrapper)`
   padding: 0.5em 1em 1em 1em;
   overflow-y: auto;
   height: calc(
-    100vh - ${props => props.theme.headerHeight} -
-      ${props => props.theme.addedCourseListSwitchHeight}
+    100vh - ${(props) => props.theme.headerHeight} -
+      ${(props) => props.theme.addedCourseListSwitchHeight}
   );
 `;
 
@@ -39,7 +39,7 @@ class AddedCourseList extends React.Component {
     super(props);
     this.wrapper = null;
 
-    this.setWrapperRef = element => {
+    this.setWrapperRef = (element) => {
       this.wrapper = element;
     };
 
@@ -48,7 +48,7 @@ class AddedCourseList extends React.Component {
         this.stickyWrapper = stickybits(this.wrapper, {
           stickyBitStickyOffset:
             parseInt(headerHeight, 10) +
-            parseInt(addedCourseListSwitchHeight, 10)
+            parseInt(addedCourseListSwitchHeight, 10),
         });
       }
     };
@@ -75,7 +75,7 @@ class AddedCourseList extends React.Component {
       handleToggleSortingOptions,
       selectedSortingOption,
       handleChangeSortingOption,
-      t
+      t,
     } = this.props;
 
     return (
diff --git a/client/src/js/components/syllabus/BinarySwitch.js b/client/src/js/components/syllabus/BinarySwitch.js
index 99d0e9d8a..d99473dbe 100644
--- a/client/src/js/components/syllabus/BinarySwitch.js
+++ b/client/src/js/components/syllabus/BinarySwitch.js
@@ -1,30 +1,30 @@
-import React from 'react';
-import styled from 'styled-components';
-import stickybits from 'stickybits';
+import React from "react";
+import styled from "styled-components";
+import stickybits from "stickybits";
 
-import { headerHeight } from '../../styled-components/variables';
-import { RowWrapper } from '../../styled-components/Wrapper';
+import { headerHeight } from "../../styled-components/variables";
+import { RowWrapper } from "../../styled-components/Wrapper";
 
 const ExtendedWrapper = styled(RowWrapper)`
   flex: none;
   align-items: center;
   justify-content: space-around;
-  height: ${props => props.height};
+  height: ${(props) => props.height};
   width: 100%;
-  background-color: ${props => props.theme.grey7};
+  background-color: ${(props) => props.theme.grey7};
   z-index: 1030;
 `;
 
-const SwitchButton = styled('button')`
+const SwitchButton = styled("button")`
   width: 100%;
   height: 100%;
-  background-color: ${props =>
-    props.isSelected ? props.theme.grey4 : 'unset'};
+  background-color: ${(props) =>
+    props.isSelected ? props.theme.grey4 : "unset"};
   border: none;
   padding: 0;
-  color: ${props => props.theme.white};
+  color: ${(props) => props.theme.white};
   &:hover {
-    background-color: ${props => props.theme.grey4};
+    background-color: ${(props) => props.theme.grey4};
   }
   &:focus {
     outline: 0;
@@ -35,14 +35,14 @@ export default class BinarySwitch extends React.Component {
   constructor() {
     super();
     this.wrapper = null;
-    this.setWrapperRef = element => {
+    this.setWrapperRef = (element) => {
       this.wrapper = element;
     };
 
     this.createStickyWrapper = () => {
       if (this.wrapper) {
         this.stickyWrapper = stickybits(this.wrapper, {
-          stickyBitStickyOffset: parseInt(headerHeight, 10)
+          stickyBitStickyOffset: parseInt(headerHeight, 10),
         });
       }
     };
@@ -54,7 +54,7 @@ export default class BinarySwitch extends React.Component {
     };
   }
 
-  handleOnClick = event => {
+  handleOnClick = (event) => {
     event.preventDefault();
     const buttonId = event.target.id;
     const { leftButtonId, leftValue, rightValue } = this.props;
@@ -78,7 +78,7 @@ export default class BinarySwitch extends React.Component {
       rightValue,
       value,
       leftDisplayedValue,
-      rightDisplayedValue
+      rightDisplayedValue,
     } = this.props;
     return (
       <ExtendedWrapper
diff --git a/client/src/js/components/syllabus/CourseChunk.js b/client/src/js/components/syllabus/CourseChunk.js
index 8132364fa..cba4090e7 100644
--- a/client/src/js/components/syllabus/CourseChunk.js
+++ b/client/src/js/components/syllabus/CourseChunk.js
@@ -7,7 +7,7 @@ import { UnstyledUList } from "../../styled-components/List";
 const CourseChunk = ({ chunk, searchTerm, searchLang }) => {
   return (
     <UnstyledUList>
-      {chunk.map(course => (
+      {chunk.map((course) => (
         <FetchedCourseItem
           key={course._id}
           searchTerm={searchTerm}
@@ -24,5 +24,5 @@ export default CourseChunk;
 CourseChunk.propTypes = {
   chunk: PropTypes.array.isRequired,
   searchTerm: PropTypes.string.isRequired,
-  searchLang: PropTypes.string.isRequired
+  searchLang: PropTypes.string.isRequired,
 };
diff --git a/client/src/js/components/syllabus/CourseItem.js b/client/src/js/components/syllabus/CourseItem.js
index ec3947059..c87a02b14 100644
--- a/client/src/js/components/syllabus/CourseItem.js
+++ b/client/src/js/components/syllabus/CourseItem.js
@@ -1,12 +1,14 @@
 import React from "react";
 import styled from "styled-components";
+import MediaQuery from "react-responsive";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faPlusCircle,
   faMinusCircle,
   faClock,
   faMapMarkerAlt,
-  faExternalLinkSquareAlt
+  faExternalLinkSquareAlt,
+  faCommentDots,
 } from "@fortawesome/free-solid-svg-icons";
 import PropTypes from "prop-types";
 import { withNamespaces } from "react-i18next";
@@ -15,6 +17,7 @@ import { SILS, PSE, SSS, FSE, ASE, CSE, CJL, GEC } from "../../data/schools";
 import { getCourseTitleAndInstructor } from "../../utils/courseSearch";
 import { highlight } from "../../utils/highlight";
 import { media } from "../../styled-components/utils";
+import { sizes } from "../../styled-components/utils";
 import { InvisibleButton } from "../../styled-components/Button";
 import fseIcon from "../../../img/syllabus-icons/fse.png";
 import cseIcon from "../../../img/syllabus-icons/cse.png";
@@ -100,12 +103,19 @@ const KeywordList = styled(SchoolIconList)`
   flex-wrap: wrap;
 `;
 
+const DetailWrapper = styled("div")`
+  display: flex;
+  flex-direction: row;
+  font-size: 1.2em;
+  flex-wrap: wrap;
+  ${media.phone`font-size: 1.0em;`};
+`;
+
 const DescriptionWrapper = styled("div")`
+  flex: 3 0 70%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  font-size: 1.2em;
-  ${media.phone`font-size: 1.1em;`};
 `;
 
 const Description = styled("div")`
@@ -113,6 +123,48 @@ const Description = styled("div")`
   text-align: left;
 `;
 
+const Instructors = styled("div")`
+  text-align: left;
+  font-size: 1.2em;
+  ${media.phone`font-size: 1.0em;`};
+`;
+
+const EvalButtonsWrapper = styled("div")`
+  flex: 1 0 30%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font-size: 0.9em;
+`;
+
+const ViewEvalsButton = styled("a")`
+  display: block;
+  background-color: #ffae42;
+  border: 0px;
+  border-radius: 5px;
+  color: #fff;
+  padding: 5px 1rem;
+  margin-bottom: 4px;
+  text-align: center;
+  text-decoration: none;
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+const ViewEvalsIconButton = styled("a")`
+  display: block;
+  background-color: #fff;
+  border: 0px;
+  color: #ffae42;
+  text-decoration: none;
+
+  &:focus {
+    outline: none;
+  }
+`;
+
 const OccurrenceList = styled("ul")`
   list-style: none;
   margin: 0;
@@ -128,14 +180,14 @@ const schoolNameIconMap = {
   [CSE]: cseIcon,
   [ASE]: aseIcon,
   [CJL]: cjlIcon,
-  [GEC]: gecIcon
+  [GEC]: gecIcon,
 };
 
-const mapLinkToSchoolIcon = keys => {
-  return keys.map(key => {
+const mapLinkToSchoolIcon = (keys) => {
+  return keys.map((key) => {
     return (
-      <SchoolIconItem key={key.school}>
-        <SchoolIconImage src={schoolNameIconMap[key.school]} />
+      <SchoolIconItem key={key.s}>
+        <SchoolIconImage src={schoolNameIconMap[key.s]} />
       </SchoolIconItem>
     );
   });
@@ -194,20 +246,21 @@ const CourseItem = ({
   isAddable,
   handleOnClick,
   handleClickSyllabusLink,
+  isInCourseEvalsPage,
   t,
-  lng
+  lng,
 }) => {
   const { title, instructor } = getCourseTitleAndInstructor(course, searchLang);
   const highlightedTitle = highlight(searchTerm, searchLang, title);
   const highlightedInstructor = highlight(searchTerm, searchLang, instructor);
-  const yearTerm = combineYearTerm(course.year, course.term, t);
-  const schoolIcons = mapLinkToSchoolIcon(course.keys);
+  const yearTerm = combineYearTerm(course.y, course.tm, t);
+  const schoolIcons = mapLinkToSchoolIcon(course.ks);
   const syllabusId = course._id;
   //Need to use index as keys due to Waseda's data.
-  const occurrences = course.occurrences.map((occurrence, index) => {
-    const day = getDay(occurrence.day, t);
-    const period = getPeriod(occurrence.start_period, occurrence.end_period, t);
-    const location = getLocation(occurrence.building, occurrence.classroom, t);
+  const occurrences = course.os.map((occurrence, index) => {
+    const day = getDay(occurrence.d, t);
+    const period = getPeriod(occurrence.s, occurrence.e, t);
+    const location = getLocation(occurrence.b, occurrence.c, t);
     return (
       <li key={index}>
         <span>
@@ -223,8 +276,8 @@ const CourseItem = ({
     );
   });
   const keywords =
-    "keywords" in course
-      ? course.keywords.map((keyword, index) => {
+    "kws" in course
+      ? course.kws.map((keyword, index) => {
           return (
             <li key={keyword} style={{ display: "inline-block" }}>
               <Badge>
@@ -253,14 +306,14 @@ const CourseItem = ({
         <CourseItemRow>
           <IconBadgeWrapper>
             <SchoolIconList>{schoolIcons}</SchoolIconList>
-            <Badge>{t(`syllabus.${course.lang}`)}</Badge>
+            <Badge>{t(`syllabus.${course.l}`)}</Badge>
             {keywordsList}
           </IconBadgeWrapper>
           <div
             style={{
               display: "flex",
               flex: "1 0 auto",
-              justifyContent: "flex-end"
+              justifyContent: "flex-end",
             }}
           >
             <a
@@ -270,7 +323,7 @@ const CourseItem = ({
               )}`}
               target="_blank"
               rel="noopener noreferrer"
-              onClick={e => {
+              onClick={(e) => {
                 handleClickSyllabusLink(title, lng);
               }}
             >
@@ -282,22 +335,59 @@ const CourseItem = ({
               />
             </a>
             <InvisibleButton
-              onClick={e => {
+              onClick={(e) => {
                 e.preventDefault();
                 handleOnClick(title, lng);
               }}
             >
               {buttonIcon}
             </InvisibleButton>
+            <MediaQuery maxWidth={sizes.desktop}>
+              {(matches) => {
+                return (
+                  matches &&
+                  !isInCourseEvalsPage &&
+                  course.e && (
+                    <ViewEvalsIconButton
+                      href={`/courseEvals?courseID=${syllabusId}&searchLang=${searchLang}`}
+                      target="_blank"
+                    >
+                      <FontAwesomeIcon icon={faCommentDots} size="2x" />{" "}
+                    </ViewEvalsIconButton>
+                  )
+                );
+              }}
+            </MediaQuery>
           </div>
         </CourseItemRow>
-        <DescriptionWrapper>
-          <Description>{yearTerm}</Description>
-          <Description>
-            <OccurrenceList>{occurrences}</OccurrenceList>
-          </Description>
-          <Description>{highlightedInstructor}</Description>
-        </DescriptionWrapper>
+        <DetailWrapper>
+          <DescriptionWrapper>
+            <Description>{yearTerm}</Description>
+            <Description>
+              <OccurrenceList>{occurrences}</OccurrenceList>
+            </Description>
+          </DescriptionWrapper>
+          <MediaQuery minWidth={sizes.desktop}>
+            {(matches) => {
+              return (
+                matches &&
+                !isInCourseEvalsPage &&
+                course.e && (
+                  <EvalButtonsWrapper>
+                    <ViewEvalsButton
+                      href={`/courseEvals?courseID=${syllabusId}&searchLang=${searchLang}`}
+                      target="_blank"
+                    >
+                      <FontAwesomeIcon icon={faCommentDots} />{" "}
+                      {t("courseEvals.Reviews")}
+                    </ViewEvalsButton>
+                  </EvalButtonsWrapper>
+                )
+              );
+            }}
+          </MediaQuery>
+        </DetailWrapper>
+        <Instructors>{highlightedInstructor}</Instructors>
       </CourseItemWrapper>
     </RowWrapper>
   );
diff --git a/client/src/js/components/syllabus/FetchedCourseList.js b/client/src/js/components/syllabus/FetchedCourseList.js
index 1c052570a..c2fa9301c 100644
--- a/client/src/js/components/syllabus/FetchedCourseList.js
+++ b/client/src/js/components/syllabus/FetchedCourseList.js
@@ -27,7 +27,7 @@ const CourseChunkWrapper = styled("div")`
   margin: 0.5em 0;
 `;
 
-const getChunkKey = chunk => {
+const getChunkKey = (chunk) => {
   const head = chunk[0];
   const tail = chunk[chunk.length - 1];
   return `${head._id}-${tail._id}`;
@@ -40,14 +40,14 @@ class FetchedCourseList extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      loadedChunksNum: INIT_CHUNKS_NUM
+      loadedChunksNum: INIT_CHUNKS_NUM,
     };
   }
 
   componentDidUpdate(prevProps) {
     if (this.props.searchTerm !== prevProps.searchTerm) {
       this.setState({
-        loadedChunksNum: INIT_CHUNKS_NUM
+        loadedChunksNum: INIT_CHUNKS_NUM,
       });
       window.scrollTo({ top: 0 });
     }
@@ -59,11 +59,11 @@ class FetchedCourseList extends React.Component {
       this.state.loadedChunksNum
     );
 
-  loadMoreChunks = index => {
+  loadMoreChunks = (index) => {
     if (index !== 0 && index + 1 === this.state.loadedChunksNum) {
       this.setState((prevState, props) => {
         return {
-          loadedChunksNum: prevState.loadedChunksNum + 1
+          loadedChunksNum: prevState.loadedChunksNum + 1,
         };
       });
     }
@@ -129,5 +129,5 @@ export default withNamespaces("translation")(FetchedCourseList);
 
 FetchedCourseList.propTypes = {
   searchTerm: PropTypes.string.isRequired,
-  results: PropTypes.array.isRequired
+  results: PropTypes.array.isRequired,
 };
diff --git a/client/src/js/components/syllabus/Filter.js b/client/src/js/components/syllabus/Filter.js
index 3db536854..6bf760205 100644
--- a/client/src/js/components/syllabus/Filter.js
+++ b/client/src/js/components/syllabus/Filter.js
@@ -8,35 +8,31 @@ import { withNamespaces } from "react-i18next";
 import { SILS, PSE, SSS, FSE, ASE, CSE, CJL, GEC } from "../../data/schools";
 import {
   headerHeight,
-  searchBarHeight
+  searchBarHeight,
 } from "../../styled-components/variables";
 import FilterGroup from "./FilterGroup";
 import { Wrapper } from "../../styled-components/Wrapper";
+import { Overlay } from "../../styled-components/Overlay";
 
 const FilterWrapper = styled(Wrapper)`
   flex: none;
   overflow-y: auto;
-  height: ${props =>
+  height: ${(props) =>
     props.isSideBar
-      ? `calc(100vh - ${props.theme.headerHeight} - ${
-          props.theme.searchBarHeight
-        });`
+      ? `calc(100vh - ${props.theme.headerHeight} - ${props.theme.searchBarHeight});`
       : "auto"};
 `;
 
-const FilterOverlay = styled("div")`
-  display: flex;
-  flex-direction: column;
-  flex: 1 0 auto;
-  padding: ${props => (props.isSideBar ? "0.5em 1em 1em 1em;" : "1.5em 1.2em;")}
-  background-color: ${props =>
-    props.isSideBar ? "rgba(0, 0, 0, 0.2);" : "unset;"};
+const FilterOverlay = styled(Overlay)`
+  padding: ${(props) =>
+    props.isSideBar ? "0.5em 1em 1em 1em;" : "1.5em 1.2em;"}
+  background-color: ${(props) => (props.isSideBar ? "#ccc;" : "#fff;")};
 `;
 
 const FilterTitle = styled("span")`
   display: flex;
   align-items: center;
-  font-size: ${props => (props.isSideBar ? "1em" : "1.3em")};
+  font-size: ${(props) => (props.isSideBar ? "1em" : "1.3em")};
 `;
 
 const FilterGroupWrapper = styled("div")`
@@ -52,7 +48,7 @@ class Filter extends React.Component {
     super(props);
     this.wrapper = null;
 
-    this.setWrapperRef = element => {
+    this.setWrapperRef = (element) => {
       this.wrapper = element;
     };
 
@@ -62,7 +58,7 @@ class Filter extends React.Component {
           ? parseInt(headerHeight, 10) + parseInt(searchBarHeight, 10)
           : 0;
         this.stickyWrapper = stickybits(this.wrapper, {
-          stickyBitStickyOffset: offset
+          stickyBitStickyOffset: offset,
         });
       }
     };
@@ -88,11 +84,11 @@ class Filter extends React.Component {
     const semesterInputName = "semester";
     const semesterInputs = [
       { value: "spring", label: t("syllabus.Spring / Summer") },
-      { value: "fall", label: t("syllabus.Fall / Winter") }
+      { value: "fall", label: t("syllabus.Fall / Winter") },
     ];
-    const checkedSemesterInputs = semesterInputs.map(input => ({
+    const checkedSemesterInputs = semesterInputs.map((input) => ({
       ...input,
-      isChecked: filterGroups[semesterInputName].includes(input.value)
+      isChecked: filterGroups[semesterInputName].includes(input.value),
     }));
 
     const schoolLegend = t("syllabus.Schools");
@@ -105,11 +101,11 @@ class Filter extends React.Component {
       { value: CSE, label: t(`syllabus.${CSE}`) },
       { value: ASE, label: t(`syllabus.${ASE}`) },
       { value: CJL, label: t(`syllabus.${CJL}`) },
-      { value: GEC, label: t(`syllabus.${GEC}`) }
+      { value: GEC, label: t(`syllabus.${GEC}`) },
     ];
-    const checkedSchoolInputs = schoolInputs.map(input => ({
+    const checkedSchoolInputs = schoolInputs.map((input) => ({
       ...input,
-      isChecked: filterGroups[schoolInputName].includes(input.value)
+      isChecked: filterGroups[schoolInputName].includes(input.value),
     }));
 
     const langLegend = t("syllabus.Languages");
@@ -117,26 +113,23 @@ class Filter extends React.Component {
     const langInputs = [
       { value: "EN", label: t("syllabus.English") },
       { value: "JP", label: t("syllabus.Japanese") },
-      { value: "others", label: t("syllabus.Others") }
+      { value: "others", label: t("syllabus.Others") },
     ];
-    const checkedLangInputs = langInputs.map(input => ({
+    const checkedLangInputs = langInputs.map((input) => ({
       ...input,
-      isChecked: filterGroups[langInputName].includes(input.value)
+      isChecked: filterGroups[langInputName].includes(input.value),
     }));
 
     const specialLegend = t("syllabus.Special");
     const specialInputName = "special";
-    const specialInputs = [
-      { value: "IPSE", label: t("syllabus.IPSE") },
-      {
-        value: "English-based Undergraduate Program",
-        label: t("syllabus.EN-based Undergrad Program")
-      }
-    ];
-    const checkedSpecialInputs = specialInputs.map(input => ({
-      ...input,
-      isChecked: filterGroups[specialInputName].includes(input.value)
-    }));
+    const specialInput = {
+      value: "IPSE/English-based Undergraduate Program",
+      label: t("syllabus.IPSE/EN-based Undergrad Program")
+    };
+    const checkedSpecialInput = [{
+      ...specialInput,
+      isChecked: filterGroups[specialInputName].includes(specialInput.value)
+    }];
 
     const dayLegend = t("syllabus.day");
     const dayInputName = "day";
@@ -146,11 +139,11 @@ class Filter extends React.Component {
       { value: "3", label: t("common.wed") },
       { value: "4", label: t("common.thu") },
       { value: "5", label: t("common.fri") },
-      { value: "6", label: t("common.sat") }
+      { value: "6", label: t("common.sat") },
     ];
-    const checkedDayInputs = dayInputs.map(input => ({
+    const checkedDayInputs = dayInputs.map((input) => ({
       ...input,
-      isChecked: filterGroups[dayInputName].includes(input.value)
+      isChecked: filterGroups[dayInputName].includes(input.value),
     }));
 
     const periodLegend = t("syllabus.period");
@@ -162,11 +155,11 @@ class Filter extends React.Component {
       { value: "4", label: "4" },
       { value: "5", label: "5" },
       { value: "6", label: "6" },
-      { value: "7", label: "7" }
+      { value: "7", label: "7" },
     ];
-    const checkedPeriodInputs = periodInputs.map(input => ({
+    const checkedPeriodInputs = periodInputs.map((input) => ({
       ...input,
-      isChecked: filterGroups[periodInputName].includes(input.value)
+      isChecked: filterGroups[periodInputName].includes(input.value),
     }));
 
     const { isSideBar } = this.props;
@@ -212,7 +205,7 @@ class Filter extends React.Component {
               handleToggleFilter={this.props.handleToggleFilter}
               legend={specialLegend}
               inputName={specialInputName}
-              inputs={checkedSpecialInputs}
+              inputs={checkedSpecialInput}
             />
           </FilterGroupWrapper>
         </FilterOverlay>
diff --git a/client/src/js/components/syllabus/FilterButton.js b/client/src/js/components/syllabus/FilterButton.js
index 0a3f2daf6..a79883782 100644
--- a/client/src/js/components/syllabus/FilterButton.js
+++ b/client/src/js/components/syllabus/FilterButton.js
@@ -1,38 +1,23 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faFilter, faTimes } from "@fortawesome/free-solid-svg-icons";
-import styled from "styled-components";
 import PropTypes from "prop-types";
 
-import { InvisibleButton } from "../../styled-components/Button";
-
-const ExtendedInvisibleButton = styled(InvisibleButton)`
-  position: fixed;
-  z-index: 2000;
-  width: 56px;
-  height: 56px;
-  justify-content: center;
-  display: flex;
-  align-items: center;
-  background-color: #b51e36;
-  color: white;
-  border-radius: 30px;
-  bottom: 20px;
-  right: 20px;
-  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.4), 0 6px 10px 0 rgba(0, 0, 0, 0.2),
-    0 1px 18px 0 rgba(0, 0, 0, 0.15);
-  -webkit-tap-highlight-color: transparent;
-`;
+import { FloatingActionButton } from "../../styled-components/Button";
 
 const FilterButton = ({ isModalOpen, handleToggleModal }) => {
   return (
-    <ExtendedInvisibleButton onClick={handleToggleModal}>
+    <FloatingActionButton
+      onClick={handleToggleModal}
+      width="56px"
+      borderRadius="30px"
+    >
       <FontAwesomeIcon
         icon={isModalOpen ? faTimes : faFilter}
         size="2x"
         transform="shrink-3"
       />
-    </ExtendedInvisibleButton>
+    </FloatingActionButton>
   );
 };
 
@@ -40,5 +25,5 @@ export default FilterButton;
 
 FilterButton.propTypes = {
   isModalOpen: PropTypes.bool.isRequired,
-  handleToggleModal: PropTypes.func.isRequired
+  handleToggleModal: PropTypes.func.isRequired,
 };
diff --git a/client/src/js/components/syllabus/FilterGroup.js b/client/src/js/components/syllabus/FilterGroup.js
index 2a7d6b736..4446aebcd 100644
--- a/client/src/js/components/syllabus/FilterGroup.js
+++ b/client/src/js/components/syllabus/FilterGroup.js
@@ -5,28 +5,28 @@ import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Checkbox from "@material-ui/core/Checkbox";
 import { withStyles } from "@material-ui/core/styles";
 
-const styles = theme => ({
+const styles = (theme) => ({
   formLabel: {
     fontSize: "1.3em",
     color: "#000",
-    fontWeight: "bold"
+    fontWeight: "bold",
   },
   formGroup: {
     fontSize: "1.2em",
-    margin: "5px 0"
+    margin: "5px 0",
   },
   formControlLabel: {
-    minWidth: "105px"
+    minWidth: "105px",
   },
   formControlLabel_label: {
-    fontSize: "1em"
+    fontSize: "1em",
   },
   checkBox: {
-    height: "30px"
+    height: "30px",
   },
   checkBoxChecked: {
-    color: "#b51e36 !important"
-  }
+    color: "#b51e36 !important",
+  },
 });
 
 const FilterGroup = ({
@@ -34,9 +34,9 @@ const FilterGroup = ({
   legend,
   inputs,
   inputName,
-  classes
+  classes,
 }) => {
-  const checkboxes = inputs.map(input => (
+  const checkboxes = inputs.map((input) => (
     <FormControlLabel
       key={input.value}
       control={
@@ -45,7 +45,7 @@ const FilterGroup = ({
           name={inputName}
           value={input.value}
           checked={input.isChecked}
-          onChange={e => {
+          onChange={(e) => {
             handleToggleFilter(e.target.name, e.target.value);
           }}
           classes={{ root: classes.checkBox, checked: classes.checkBoxChecked }}
@@ -54,7 +54,7 @@ const FilterGroup = ({
       label={input.label}
       classes={{
         root: classes.formControlLabel,
-        label: classes.formControlLabel_label
+        label: classes.formControlLabel_label,
       }}
     />
   ));
diff --git a/client/src/js/components/syllabus/SearchBar.js b/client/src/js/components/syllabus/SearchBar.js
index a3b45e6e0..6a085aed9 100644
--- a/client/src/js/components/syllabus/SearchBar.js
+++ b/client/src/js/components/syllabus/SearchBar.js
@@ -1,34 +1,34 @@
-import React from 'react';
-import styled from 'styled-components';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
-import stickybits from 'stickybits';
-import PropTypes from 'prop-types';
+import React from "react";
+import styled from "styled-components";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import stickybits from "stickybits";
+import PropTypes from "prop-types";
 
-import { headerHeight } from '../../styled-components/variables';
-import { RowWrapper } from '../../styled-components/Wrapper';
+import { headerHeight } from "../../styled-components/variables";
+import { RowWrapper } from "../../styled-components/Wrapper";
 
 const ExtendedWrapper = styled(RowWrapper)`
   flex: none;
   align-items: center;
-  height: ${props => props.theme.searchBarHeight};
+  height: ${(props) => props.theme.searchBarHeight};
   width: 100%;
   padding: 0 1em;
-  background-color: ${props => props.theme.grey7};
+  background-color: ${(props) => props.theme.grey7};
   z-index: 1030;
 `;
 
-const StyledForm = styled('form')`
+const StyledForm = styled("form")`
   width: 100%;
   align-self: center;
-  background-color: ${props => props.theme.white};
+  background-color: ${(props) => props.theme.white};
   padding: 0 5px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 `;
 
-const StyledInput = styled('input')`
+const StyledInput = styled("input")`
   border: none;
   background: none;
   outline: none;
@@ -37,11 +37,11 @@ const StyledInput = styled('input')`
   flex: 1 0 auto;
 `;
 
-const StyledClearButton = styled('span')`
+const StyledClearButton = styled("span")`
   display: flex;
   align-items: center;
   cursor: pointer;
-  color: ${props => props.theme.grey7};
+  color: ${(props) => props.theme.grey7};
   &:focus {
     outline: 0;
   }
@@ -52,14 +52,14 @@ class SearchBar extends React.Component {
   constructor() {
     super();
     this.wrapper = null;
-    this.setWrapperRef = element => {
+    this.setWrapperRef = (element) => {
       this.wrapper = element;
     };
 
     this.createStickyWrapper = () => {
       if (this.wrapper) {
         this.stickyWrapper = stickybits(this.wrapper, {
-          stickyBitStickyOffset: parseInt(headerHeight, 10)
+          stickyBitStickyOffset: parseInt(headerHeight, 10),
         });
       }
     };
@@ -79,22 +79,22 @@ class SearchBar extends React.Component {
     this.cleanupStickyWrapper();
   }
 
-  handleInputChange = event => {
+  handleInputChange = (event) => {
     event.preventDefault();
     const inputText = event.target.value;
     this.props.onInputChange(inputText);
   };
 
-  handleClearInput = event => {
+  handleClearInput = (event) => {
     event.preventDefault();
-    this.props.onInputChange('');
+    this.props.onInputChange("");
   };
 
   render() {
     return (
       <ExtendedWrapper innerRef={this.setWrapperRef}>
         <StyledForm
-          onSubmit={e => {
+          onSubmit={(e) => {
             e.preventDefault();
           }}
         >
@@ -122,22 +122,22 @@ export default SearchBar;
 SearchBar.propTypes = {
   placeholder: PropTypes.string.isRequired,
   inputText: PropTypes.string.isRequired,
-  onInputChange: PropTypes.func.isRequired
+  onInputChange: PropTypes.func.isRequired,
 };
 
 StyledForm.propTypes = {
-  onSubmit: PropTypes.func.isRequired
+  onSubmit: PropTypes.func.isRequired,
 };
 
 StyledInput.propTypes = {
   type: PropTypes.string.isRequired,
   placeholder: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired
-}
+  onChange: PropTypes.func.isRequired,
+};
 
 StyledClearButton.propTypes = {
   role: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired,
 };
diff --git a/client/src/js/components/syllabus/SemesterTabs.js b/client/src/js/components/syllabus/SemesterTabs.js
index 20554ba32..f1fcd6b19 100644
--- a/client/src/js/components/syllabus/SemesterTabs.js
+++ b/client/src/js/components/syllabus/SemesterTabs.js
@@ -1,32 +1,31 @@
-import React from 'react';
-import styled from 'styled-components';
-import stickybits from 'stickybits';
-
-import { headerHeight } from '../../styled-components/variables';
-import { RowWrapper } from '../../styled-components/Wrapper';
-import PropTypes from 'prop-types';
+import React from "react";
+import styled from "styled-components";
+import stickybits from "stickybits";
 
+import { headerHeight } from "../../styled-components/variables";
+import { RowWrapper } from "../../styled-components/Wrapper";
+import PropTypes from "prop-types";
 
 const ExtendedWrapper = styled(RowWrapper)`
   flex: none;
   align-items: center;
   justify-content: space-around;
-  height: ${props => props.theme.semesterTabsHeight};
+  height: ${(props) => props.theme.semesterTabsHeight};
   width: 100%;
-  background-color: ${props => props.theme.grey7};
+  background-color: ${(props) => props.theme.grey7};
   z-index: 1030;
 `;
 
-const SemesterButton = styled('button')`
+const SemesterButton = styled("button")`
   width: 100%;
   height: 100%;
-  background-color: ${props =>
-    props.isSelected ? props.theme.grey4 : 'unset'};
+  background-color: ${(props) =>
+    props.isSelected ? props.theme.grey4 : "unset"};
   border: none;
   padding: 0;
-  color: ${props => props.theme.white};
+  color: ${(props) => props.theme.white};
   &:hover {
-    background-color: ${props => props.theme.grey4};
+    background-color: ${(props) => props.theme.grey4};
   }
   &:focus {
     outline: 0;
@@ -37,14 +36,14 @@ class SemesterTabs extends React.Component {
   constructor() {
     super();
     this.wrapper = null;
-    this.setWrapperRef = element => {
+    this.setWrapperRef = (element) => {
       this.wrapper = element;
     };
 
     this.createStickyWrapper = () => {
       if (this.wrapper) {
         this.stickyWrapper = stickybits(this.wrapper, {
-          stickyBitStickyOffset: parseInt(headerHeight, 10)
+          stickyBitStickyOffset: parseInt(headerHeight, 10),
         });
       }
     };
@@ -55,13 +54,13 @@ class SemesterTabs extends React.Component {
       }
     };
 
-    this.fallButtonId = 'button--fall';
-    this.springButtonId = 'button--spring';
-    this.fallSemester = 'fall';
-    this.springSemester = 'spring';
+    this.fallButtonId = "button--fall";
+    this.springButtonId = "button--spring";
+    this.fallSemester = "fall";
+    this.springSemester = "spring";
   }
 
-  handleOnClick = event => {
+  handleOnClick = (event) => {
     event.preventDefault();
     const buttonId = event.target.id;
     const semester =
@@ -86,14 +85,14 @@ class SemesterTabs extends React.Component {
           onClick={this.handleOnClick}
           isSelected={this.props.semester === this.springSemester}
         >
-         Spring Semester
+          Spring Semester
         </SemesterButton>
         <SemesterButton
           id={this.fallButtonId}
           onClick={this.handleOnClick}
           isSelected={this.props.semester === this.fallSemester}
         >
-        Fall Semester
+          Fall Semester
         </SemesterButton>
       </ExtendedWrapper>
     );
@@ -103,11 +102,11 @@ export default SemesterTabs;
 
 SemesterTabs.propTypes = {
   handleChangeSemester: PropTypes.func.isRequired,
-  semester: PropTypes.string.isRequired
-}
+  semester: PropTypes.string.isRequired,
+};
 
 SemesterButton.propTypes = {
   id: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
   isSelected: PropTypes.bool.isRequired,
-}
+};
diff --git a/client/src/js/components/syllabus/Syllabus.js b/client/src/js/components/syllabus/Syllabus.js
index b055cd3c4..471c721e1 100644
--- a/client/src/js/components/syllabus/Syllabus.js
+++ b/client/src/js/components/syllabus/Syllabus.js
@@ -1,8 +1,8 @@
-import React from 'react';
-import { Helmet } from 'react-helmet';
+import React from "react";
+import { Helmet } from "react-helmet";
 
-import SyllabusSearch from './SyllabusSearch';
-import { RowWrapper } from '../../styled-components/Wrapper';
+import SyllabusSearch from "./SyllabusSearch";
+import { RowWrapper } from "../../styled-components/Wrapper";
 
 const Syllabus = () => {
   return (
diff --git a/client/src/js/components/syllabus/SyllabusSearch.js b/client/src/js/components/syllabus/SyllabusSearch.js
index f4250ff16..19b257c17 100644
--- a/client/src/js/components/syllabus/SyllabusSearch.js
+++ b/client/src/js/components/syllabus/SyllabusSearch.js
@@ -13,12 +13,12 @@ const ExtendedRowWrapper = styled(RowWrapper)`
   flex: 1 0 0;
 `;
 
-const SyllabusSearch = props => {
+const SyllabusSearch = (props) => {
   const { addedCoursesAndPrefs, fetchedCourses } = props;
   return (
     <ExtendedRowWrapper>
       <MediaQuery minWidth={sizes.tablet}>
-        {matches =>
+        {(matches) =>
           matches && (
             <SideBar flexBasis="21em">
               <AddedCourseListSwitch
diff --git a/client/src/js/components/timetable/AddedCourseAndPrefList.js b/client/src/js/components/timetable/AddedCourseAndPrefList.js
index 272c752e3..da89ef37d 100644
--- a/client/src/js/components/timetable/AddedCourseAndPrefList.js
+++ b/client/src/js/components/timetable/AddedCourseAndPrefList.js
@@ -1,11 +1,11 @@
-import React from 'react';
-import styled from 'styled-components';
+import React from "react";
+import styled from "styled-components";
 
-import CourseListSummary from '../CourseListSummary';
-import AddedCourseAndPrefItem from '../../containers/timetable/AddedCourseAndPrefItem';
-import { Wrapper } from '../../styled-components/Wrapper';
-import { media } from '../../styled-components/utils';
-import { UnstyledUList } from '../../styled-components/List';
+import CourseListSummary from "../CourseListSummary";
+import AddedCourseAndPrefItem from "../../containers/timetable/AddedCourseAndPrefItem";
+import { Wrapper } from "../../styled-components/Wrapper";
+import { media } from "../../styled-components/utils";
+import { UnstyledUList } from "../../styled-components/List";
 
 const ExtendedWrapper = styled(Wrapper)`
   padding: 0 1em;
@@ -22,7 +22,7 @@ const AddedCourseAndPrefList = ({
   isSortingOptionOpen,
   handleToggleSortingOptions,
   selectedSortingOption,
-  handleChangeSortingOption
+  handleChangeSortingOption,
 }) => {
   return (
     <ExtendedWrapper>
@@ -35,7 +35,7 @@ const AddedCourseAndPrefList = ({
       />
       <Wrapper>
         <ExtendedUnstyledUList>
-          {addedCoursesAndPrefs.map(addedCourseAndPref => (
+          {addedCoursesAndPrefs.map((addedCourseAndPref) => (
             <AddedCourseAndPrefItem
               key={addedCourseAndPref.id}
               addedCourseAndPref={addedCourseAndPref}
diff --git a/client/src/js/components/timetable/ColorSelector.js b/client/src/js/components/timetable/ColorSelector.js
index 78f2da5cc..0ee25cb26 100644
--- a/client/src/js/components/timetable/ColorSelector.js
+++ b/client/src/js/components/timetable/ColorSelector.js
@@ -1,32 +1,32 @@
-import React from 'react';
-import styled from 'styled-components';
+import React from "react";
+import styled from "styled-components";
 
 const colorIds = [0, 1, 2, 3, 4, 5, 6, 7];
 
-const InvisibleButton = styled('button')`
+const InvisibleButton = styled("button")`
   align-self: flex-start;
   background-color: #fff;
   border: none;
   padding: 0;
   outline: 0;
-`
+`;
 
 const ColorButton = styled(InvisibleButton)`
   width: 1.5em;
   height: 1.5em;
   border: solid 2px;
-  border-radius: .3em;
-  margin: 0 .1em;
-`
+  border-radius: 0.3em;
+  margin: 0 0.1em;
+`;
 
-const ColorSelector = ({handleChangeColor}) => {
+const ColorSelector = ({ handleChangeColor }) => {
   return (
     <div>
-      {colorIds.map(id => (
+      {colorIds.map((id) => (
         <ColorButton
           key={id}
           className={`color-${id}`}
-          onClick={ event => {
+          onClick={(event) => {
             event.preventDefault();
             handleChangeColor(id);
           }}
@@ -34,6 +34,6 @@ const ColorSelector = ({handleChangeColor}) => {
       ))}
     </div>
   );
-}
+};
 
 export default ColorSelector;
diff --git a/client/src/js/components/timetable/CourseAndPrefItem.js b/client/src/js/components/timetable/CourseAndPrefItem.js
index 3d578d9e1..9750903b5 100644
--- a/client/src/js/components/timetable/CourseAndPrefItem.js
+++ b/client/src/js/components/timetable/CourseAndPrefItem.js
@@ -5,7 +5,7 @@ import {
   faMinusCircle,
   faToggleOn,
   faToggleOff,
-  faExternalLinkSquareAlt
+  faExternalLinkSquareAlt,
 } from "@fortawesome/free-solid-svg-icons";
 import { Manager, Reference, Popper } from "react-popper";
 import PropTypes from "prop-types";
@@ -77,7 +77,7 @@ const CourseAndPrefItem = ({
   handleToggleVisibility,
   handleRemoveCourse,
   handleChangeColor,
-  handleClickSyllabusLink
+  handleClickSyllabusLink,
 }) => {
   const { title, instructor } = getCourseTitleAndInstructor(
     course,
@@ -112,7 +112,7 @@ const CourseAndPrefItem = ({
               overflowWrap: "break-word",
               wordWrap: "break-word",
               flex: "1 0 auto",
-              width: "0"
+              width: "0",
             }}
           >
             {instructor}
@@ -121,7 +121,7 @@ const CourseAndPrefItem = ({
             style={{
               display: "flex",
               flex: "0 1 auto",
-              justifyContent: "flex-end"
+              justifyContent: "flex-end",
             }}
           >
             <Manager>
@@ -154,7 +154,7 @@ const CourseAndPrefItem = ({
               </Popper>
             </Manager>
             <InvisibleButton
-              onClick={e => {
+              onClick={(e) => {
                 e.preventDefault();
                 handleToggleVisibility(courseId, title);
               }}
@@ -167,7 +167,7 @@ const CourseAndPrefItem = ({
               href={`https://www.wsl.waseda.jp/syllabus/JAA104.php?pKey=${courseId}&pLng=en`}
               target="_blank"
               rel="noopener noreferrer"
-              onClick={e => {
+              onClick={(e) => {
                 handleClickSyllabusLink(title);
               }}
             >
@@ -179,7 +179,7 @@ const CourseAndPrefItem = ({
               />
             </a>
             <InvisibleButton
-              onClick={e => {
+              onClick={(e) => {
                 e.preventDefault();
                 handleRemoveCourse(courseId, title);
               }}
@@ -196,5 +196,5 @@ const CourseAndPrefItem = ({
 export default CourseAndPrefItem;
 
 CourseAndPrefItem.propTypes = {
-  course: PropTypes.object.isRequired
+  course: PropTypes.object.isRequired,
 };
diff --git a/client/src/js/components/timetable/CourseColumn.js b/client/src/js/components/timetable/CourseColumn.js
index 16bd0a232..17ec571d3 100644
--- a/client/src/js/components/timetable/CourseColumn.js
+++ b/client/src/js/components/timetable/CourseColumn.js
@@ -7,11 +7,11 @@ import { getCourseTitleAndInstructor } from "../../utils/courseSearch";
 
 const StyledCourseColumn = styled("div")`
   display: flex;
-  flex: 1 0 calc(63rem / 7 * ${props => props.displayPeriods});
+  flex: 1 0 calc(63rem / 7 * ${(props) => props.displayPeriods});
   border-right: solid 1px #ccc;
   border-bottom: solid 1px #ccc;
   background: linear-gradient(180deg, #fff 50%, #eee 50%);
-  background-size: 100% calc(100% / ${props => props.displayPeriods} * 2);
+  background-size: 100% calc(100% / ${(props) => props.displayPeriods} * 2);
   position: relative;
   min-width: 6.8rem;
   flex-direction: row;
@@ -21,9 +21,11 @@ const CourseItem = styled("div")`
   display: flex;
   flex-direction: column;
   position: absolute;
-  top: calc(100% / ${props => props.displayPeriods} * ${props => props.top});
+  top: calc(
+    100% / ${(props) => props.displayPeriods} * ${(props) => props.top}
+  );
   height: calc(
-    100% / ${props => props.displayPeriods} * ${props => props.height} - 1px
+    100% / ${(props) => props.displayPeriods} * ${(props) => props.height} - 1px
   );
   width: 100%;
   padding: 0.3rem 0 0 0.1rem;
@@ -74,11 +76,9 @@ const CourseColumn = ({ largestPeriod, coursesAndProperties, t }) => {
   const initSlotList = [0, 0, 0, 0, 0, 0, 0, 0];
   let slotLists = [initSlotList.slice()];
 
-  coursesAndProperties.forEach(courseAndProperty => {
-    const startPeriod = Number(
-      courseAndProperty.course.occurrence.start_period
-    );
-    const endPeriod = Number(courseAndProperty.course.occurrence.end_period);
+  coursesAndProperties.forEach((courseAndProperty) => {
+    const startPeriod = Number(courseAndProperty.course.occurrence.s);
+    const endPeriod = Number(courseAndProperty.course.occurrence.e);
 
     let existsAvailableSlot = true;
     for (let i = 0; i < slotLists.length; i++) {
@@ -117,23 +117,23 @@ const CourseColumn = ({ largestPeriod, coursesAndProperties, t }) => {
 
   const distinctCourseListsComponent = distinctCourseLists.map(
     (distinctCourseList, index) => {
-      const listComponent = distinctCourseList.map(courseAndProperty => {
+      const listComponent = distinctCourseList.map((courseAndProperty) => {
         const { course, color, displayLang } = courseAndProperty;
         const { title } = getCourseTitleAndInstructor(course, displayLang);
-        const startPeriod = Number(course.occurrence.start_period);
-        const endPeriod = Number(course.occurrence.end_period);
+        const startPeriod = Number(course.occurrence.s);
+        const endPeriod = Number(course.occurrence.e);
         let location = t("timetable.undecided");
-        if (course.occurrence.classroom !== "undecided") {
-          if (course.occurrence.building !== "-1") {
-            location = course.occurrence.location;
+        if (course.occurrence.c !== "undecided") {
+          if (course.occurrence.b !== "-1") {
+            location = course.occurrence.l;
           } else {
-            location = course.occurrence.classroom;
+            location = course.occurrence.c;
           }
         }
         return (
           <CourseItem
             className={`color-${color}`}
-            key={`${course.term}-${course.title}-${startPeriod}-${endPeriod}`}
+            key={`${course.term}-${course.t}-${startPeriod}-${endPeriod}`}
             displayPeriods={displayPeriods}
             top={startPeriod - 1}
             height={endPeriod - startPeriod + 1}
diff --git a/client/src/js/components/timetable/DayColumnList.js b/client/src/js/components/timetable/DayColumnList.js
index 517c0aa80..e9f67acdb 100644
--- a/client/src/js/components/timetable/DayColumnList.js
+++ b/client/src/js/components/timetable/DayColumnList.js
@@ -19,31 +19,31 @@ const DayColumnList = ({
   largestDay,
   largestPeriod,
   addedCoursesAndPrefs,
-  t
+  t,
 }) => {
   const initCoursesByDay = {
     "-1": [],
-    "0": [],
-    "1": [],
-    "2": [],
-    "3": [],
-    "4": [],
-    "5": [],
-    "6": []
+    0: [],
+    1: [],
+    2: [],
+    3: [],
+    4: [],
+    5: [],
+    6: [],
   };
   const coursesByDay = addedCoursesAndPrefs.reduce((acc, elem) => {
     const { course, ...restOfElem } = elem;
-    const { occurrences, ...restOfCourse } = course;
-    occurrences.forEach(occ => {
-      acc[occ.day] = [
-        ...acc[occ.day],
+    const { os, ...restOfCourse } = course;
+    os.forEach((occ) => {
+      acc[occ.d] = [
+        ...acc[occ.d],
         {
           ...restOfElem,
           course: {
             occurrence: occ,
-            ...restOfCourse
-          }
-        }
+            ...restOfCourse,
+          },
+        },
       ];
     });
     return acc;
@@ -56,7 +56,7 @@ const DayColumnList = ({
     t("common.wed"),
     t("common.thu"),
     t("common.fri"),
-    t("common.sat")
+    t("common.sat"),
   ];
 
   const dayColumns = days
diff --git a/client/src/js/components/timetable/SemesterSwitcher.js b/client/src/js/components/timetable/SemesterSwitcher.js
index 8d5f2555c..bf69348c1 100644
--- a/client/src/js/components/timetable/SemesterSwitcher.js
+++ b/client/src/js/components/timetable/SemesterSwitcher.js
@@ -2,7 +2,7 @@ import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faAngleDoubleLeft,
-  faAngleDoubleRight
+  faAngleDoubleRight,
 } from "@fortawesome/free-solid-svg-icons";
 import styled from "styled-components";
 
@@ -47,7 +47,7 @@ const SemesterTitle = styled("div")`
 const SemesterSwitcher = ({
   semesterTitle,
   handleIncreaseSemesterIndex,
-  handleDecreaseSemesterIndex
+  handleDecreaseSemesterIndex,
 }) => {
   return (
     <ExtendedRowWrapper>
@@ -55,7 +55,7 @@ const SemesterSwitcher = ({
         <FontAwesomeIcon icon={faAngleDoubleLeft} size="1x" />
       </ExtendedInvisibleButton>
       <SemesterTitle>{semesterTitle}</SemesterTitle>
-      <ExtendedInvisibleButton onClick={handleIncreaseSemesterIndex}>
+      <ExtendedInvisibleButton onClick={handleDecreaseSemesterIndex}>
         <FontAwesomeIcon icon={faAngleDoubleRight} size="1x" />
       </ExtendedInvisibleButton>
     </ExtendedRowWrapper>
diff --git a/client/src/js/components/timetable/TimeRowItem.js b/client/src/js/components/timetable/TimeRowItem.js
index 8d925f552..b8d3852ed 100644
--- a/client/src/js/components/timetable/TimeRowItem.js
+++ b/client/src/js/components/timetable/TimeRowItem.js
@@ -1,7 +1,7 @@
-import React from 'react';
-import styled from 'styled-components';
+import React from "react";
+import styled from "styled-components";
 
-const StyledListItem = styled('li')`
+const StyledListItem = styled("li")`
   display: flex;
   flex: 1 0 auto;
   flex-direction: column;
@@ -10,12 +10,12 @@ const StyledListItem = styled('li')`
   width: 3rem;
   border-right: solid 1px #ccc;
 `;
-const StyledSpan = styled('span')`
+const StyledSpan = styled("span")`
   font-size: 2.2rem;
   font-weight: 600;
 `;
 
-const StyledTime = styled('time')`
+const StyledTime = styled("time")`
   font-size: 1.2rem;
   color: #333;
 `;
diff --git a/client/src/js/components/timetable/TimeRowList.js b/client/src/js/components/timetable/TimeRowList.js
index 68ccdbaea..44a597ebc 100644
--- a/client/src/js/components/timetable/TimeRowList.js
+++ b/client/src/js/components/timetable/TimeRowList.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import styled from 'styled-components';
+import React from "react";
+import styled from "styled-components";
 
-import TimeRowItem from './TimeRowItem';
+import TimeRowItem from "./TimeRowItem";
 
-const StyledList = styled('ol')`
+const StyledList = styled("ol")`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -17,34 +17,50 @@ const StyledList = styled('ol')`
   left: 0;
 `;
 
-const TimeRowList = ({largestPeriod}) => {
+const TimeRowList = ({ largestPeriod }) => {
   const periods = [
     {
-      's':'0900', 'e':'1030', 'p':1
-    }, {
-      's':'1040', 'e':'1210', 'p':2
-    }, {
-      's':'1300', 'e':'1430', 'p':3
-    }, {
-      's':'1445', 'e':'1615', 'p':4
-    }, {
-      's':'1630', 'e':'1800', 'p':5
-    }, {
-      's':'1815', 'e':'1945', 'p':6
-    }, {
-      's':'1955', 'e':'2125', 'p':7
-    }
-  ]
-  const timeRows = periods.slice(0, Math.max(largestPeriod, 5)).map(period => {
-    return (
-      <TimeRowItem key={period.p} period={period}></TimeRowItem>
-    );
-  });
-  return (
-      <StyledList>
-        {timeRows}
-      </StyledList>
-  )
-}
+      s: "0900",
+      e: "1030",
+      p: 1,
+    },
+    {
+      s: "1040",
+      e: "1210",
+      p: 2,
+    },
+    {
+      s: "1300",
+      e: "1430",
+      p: 3,
+    },
+    {
+      s: "1445",
+      e: "1615",
+      p: 4,
+    },
+    {
+      s: "1630",
+      e: "1800",
+      p: 5,
+    },
+    {
+      s: "1815",
+      e: "1945",
+      p: 6,
+    },
+    {
+      s: "1955",
+      e: "2125",
+      p: 7,
+    },
+  ];
+  const timeRows = periods
+    .slice(0, Math.max(largestPeriod, 5))
+    .map((period) => {
+      return <TimeRowItem key={period.p} period={period}></TimeRowItem>;
+    });
+  return <StyledList>{timeRows}</StyledList>;
+};
 
 export default TimeRowList;
diff --git a/client/src/js/components/timetable/Timetable.js b/client/src/js/components/timetable/Timetable.js
index 5989a1538..2517510f2 100644
--- a/client/src/js/components/timetable/Timetable.js
+++ b/client/src/js/components/timetable/Timetable.js
@@ -1,15 +1,14 @@
-import React from 'react';
-import styled from 'styled-components';
+import React from "react";
+import styled from "styled-components";
 
-import { Wrapper, RowWrapper } from '../../styled-components/Wrapper';
-import { Article, Section } from '../../styled-components/Article';
-import TimeRowList from './TimeRowList';
-import DayColumnList from './DayColumnList';
-import AddedCourseAndPrefListContainer from '../../containers/timetable/AddedCourseAndPrefListContainer';
-import { media } from '../../styled-components/utils';
+import { Wrapper, RowWrapper } from "../../styled-components/Wrapper";
+import { Article, Section } from "../../styled-components/Article";
+import TimeRowList from "./TimeRowList";
+import DayColumnList from "./DayColumnList";
+import AddedCourseAndPrefListContainer from "../../containers/timetable/AddedCourseAndPrefListContainer";
+import { media } from "../../styled-components/utils";
 import { withNamespaces } from "react-i18next";
 
-
 const ExtendedRowWrapper = styled(RowWrapper)`
   flex-wrap: wrap;
   padding: 0.2em;
@@ -18,9 +17,9 @@ const ExtendedRowWrapper = styled(RowWrapper)`
   `};
 `;
 
-const Column = styled('div')`
-  flex: ${props => `0 0 ${props.flexBasis};`}
-  max-width: ${props => `${props.flexBasis};`}
+const Column = styled("div")`
+  flex: ${(props) => `0 0 ${props.flexBasis};`}
+  max-width: ${(props) => `${props.flexBasis};`}
   ${media.tablet`
     flex: 1 0 auto;
     max-width: 100%;
@@ -31,7 +30,7 @@ const Column = styled('div')`
   `};
 `;
 
-const ScrollableTimetable = styled('div')`
+const ScrollableTimetable = styled("div")`
   display: flex;
   flex-direction: row;
   flex: 1 0 0;
@@ -41,17 +40,17 @@ const ScrollableTimetable = styled('div')`
 
 const Timetable = ({ addedCoursesAndPrefs, semesterKey, t }) => {
   const visibleAddedCoursesAndPrefs = addedCoursesAndPrefs.filter(
-    elem => elem.visibility === true
+    (elem) => elem.visibility === true
   );
 
   const largestDayAndPeriod = visibleAddedCoursesAndPrefs.reduce(
     (acc, elem) => {
-      const occurrences = elem.course.occurrences;
+      const occurrences = elem.course.os;
       return occurrences.reduce((acc, occurrence) => {
         return {
           ...acc,
-          day: Math.max(acc.day, occurrence.day),
-          period: Math.max(acc.period, occurrence.end_period)
+          day: Math.max(acc.day, occurrence.d),
+          period: Math.max(acc.period, occurrence.e),
         };
       }, acc);
     },
@@ -78,8 +77,11 @@ const Timetable = ({ addedCoursesAndPrefs, semesterKey, t }) => {
               <Article>
                 <h3>{t("timetable.welcome")}</h3>
                 <Section>
-                  {t("timetable.You haven't added any courses")}<br />
-                  {t("timetable.Go to")}  <a href="./syllabus">{t("timetable.Syllabus")} </a> {t("timetable.and try adding one!")}
+                  {t("timetable.You haven't added any courses")}
+                  <br />
+                  {t("timetable.Go to")}{" "}
+                  <a href="./syllabus">{t("timetable.Syllabus")} </a>{" "}
+                  {t("timetable.and try adding one!")}
                 </Section>
                 <Section> {t("timetable.SaveSpace")} </Section>
               </Article>
diff --git a/client/src/js/components/welcome/Contributors.js b/client/src/js/components/welcome/Contributors.js
index d4ee197a6..8567476f6 100644
--- a/client/src/js/components/welcome/Contributors.js
+++ b/client/src/js/components/welcome/Contributors.js
@@ -26,12 +26,12 @@ const styles = {
   h3: {
     margin: "0.6em 0",
     wordBreak: "keep-all",
-    fontSize: "1.6em"
+    fontSize: "1.6em",
   },
   h4: {
     margin: "0.35em 0",
-    fontSize: "1.1em"
-  }
+    fontSize: "1.1em",
+  },
 };
 
 const Contributors = ({ classes, t }) => {
diff --git a/client/src/js/components/welcome/Developers.js b/client/src/js/components/welcome/Developers.js
index 4575a8492..477c6fbce 100644
--- a/client/src/js/components/welcome/Developers.js
+++ b/client/src/js/components/welcome/Developers.js
@@ -7,7 +7,7 @@ import {
   faTwitter,
   faGithub,
   faInstagram,
-  faWeibo
+  faWeibo,
 } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
diff --git a/client/src/js/components/welcome/DialogStepper.js b/client/src/js/components/welcome/DialogStepper.js
index 106174870..4c96ddc9d 100644
--- a/client/src/js/components/welcome/DialogStepper.js
+++ b/client/src/js/components/welcome/DialogStepper.js
@@ -13,28 +13,28 @@ import ReactGA from "react-ga";
 
 import { setFirstTimeAccessToFalse } from "../../actions/user";
 import Greeting from "./Greeting";
-import Contributors from "./Contributors";
+import NewFeature from "./NewFeature";
 import Notice from "./Notice";
 import { gaLanguage } from "../../ga/eventCategories";
 import { gaSetLanguage } from "../../ga/eventActions";
 
-const styles = theme => ({
+const styles = (theme) => ({
   root: {
-    flexGrow: 1
+    flexGrow: 1,
   },
   dotActive: {
-    backgroundColor: "#000"
+    backgroundColor: "#000",
   },
   buttonLabel: {
-    fontSize: "1.6em"
-  }
+    fontSize: "1.6em",
+  },
 });
 
 class DialogStepper extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      activeStep: 0
+      activeStep: 0,
     };
   }
 
@@ -48,20 +48,20 @@ class DialogStepper extends React.Component {
   }
 
   handleNext = () => {
-    this.setState(prevState => ({
-      activeStep: prevState.activeStep + 1
+    this.setState((prevState) => ({
+      activeStep: prevState.activeStep + 1,
     }));
   };
 
   handleBack = () => {
-    this.setState(prevState => ({
-      activeStep: prevState.activeStep - 1
+    this.setState((prevState) => ({
+      activeStep: prevState.activeStep - 1,
     }));
   };
 
   redirectToRoot = () => {
     this.props.history.push({
-      pathname: "/"
+      pathname: "/",
     });
   };
 
@@ -69,7 +69,7 @@ class DialogStepper extends React.Component {
     ReactGA.event({
       category: gaLanguage,
       action: gaSetLanguage,
-      label: this.props.lng
+      label: this.props.lng,
     });
     this.props.setFirstTimeAccessToFalse();
     this.redirectToRoot();
@@ -78,7 +78,7 @@ class DialogStepper extends React.Component {
   render() {
     const { classes, t } = this.props;
     const { activeStep } = this.state;
-    const setupSteps = [<Greeting />, <Contributors />, <Notice />];
+    const setupSteps = [<Greeting />, <NewFeature />, <Notice />];
     const maxSteps = setupSteps.length;
     const isFirstStep = activeStep === 0;
     const isLastStep = activeStep === maxSteps - 1;
@@ -91,7 +91,7 @@ class DialogStepper extends React.Component {
           activeStep={activeStep}
           classes={{
             root: classes.mobileStepper,
-            dotActive: classes.dotActive
+            dotActive: classes.dotActive,
           }}
           nextButton={
             !isLastStep ? (
@@ -132,20 +132,15 @@ class DialogStepper extends React.Component {
 }
 
 const mapDispatchToProps = {
-  setFirstTimeAccessToFalse
+  setFirstTimeAccessToFalse,
 };
 
 DialogStepper.propTypes = {
-  classes: PropTypes.object.isRequired
+  classes: PropTypes.object.isRequired,
 };
 
 export default withNamespaces("translation")(
   withRouter(
-    withStyles(styles)(
-      connect(
-        null,
-        mapDispatchToProps
-      )(DialogStepper)
-    )
+    withStyles(styles)(connect(null, mapDispatchToProps)(DialogStepper))
   )
 );
diff --git a/client/src/js/components/welcome/Greeting.js b/client/src/js/components/welcome/Greeting.js
index d893dab4f..488d80205 100644
--- a/client/src/js/components/welcome/Greeting.js
+++ b/client/src/js/components/welcome/Greeting.js
@@ -28,18 +28,22 @@ const Logo = styled("img")`
 
 const styles = {
   h3: {
-    wordBreak: "keep-all"
+    wordBreak: "keep-all",
+  },
+  h4: {
+    wordBreak: "keep-all",
+    color: "#0b35c8 !important",
   },
   formControlLabelLabel: {
-    fontSize: "1em"
+    fontSize: "1em",
   },
   radioChecked: {
-    color: "#b51e36 !important"
-  }
+    color: "#b51e36 !important",
+  },
 };
 
 class Greeting extends React.Component {
-  handleChangeLang = event => {
+  handleChangeLang = (event) => {
     event.preventDefault();
     const lng = event.target.value;
     this.props.i18n.changeLanguage(lng);
@@ -59,6 +63,20 @@ class Greeting extends React.Component {
         >
           {t("welcome.welcome")}
         </Typography>
+        <Typography
+          variant="h4"
+          component="h4"
+          align="center"
+          gutterBottom
+          className={classes.h4}
+        >
+          {`${t("welcome.newFeature")} ${t("welcome.courseEvals")} ${t(
+            "welcome.added"
+          )}`}
+        </Typography>
+        <Typography variant="h4" component="p" align="center" gutterBottom>
+          {t("welcome.returningUsers")}
+        </Typography>
         <FormControl component="fieldset" className={undefined}>
           <RadioGroup
             aria-label="Language"
diff --git a/client/src/js/components/welcome/InitialDialog.js b/client/src/js/components/welcome/InitialDialog.js
index 50332854b..eb6d4233f 100644
--- a/client/src/js/components/welcome/InitialDialog.js
+++ b/client/src/js/components/welcome/InitialDialog.js
@@ -10,8 +10,8 @@ import homeBackgroundPhone from "../../../img/home_background-phone.jpg";
 const styles = {
   dialogPaper: {
     margin: "40px",
-    maxWidth: "620px"
-  }
+    maxWidth: "620px",
+  },
 };
 
 const InitialDialog = ({ classes }) => {
diff --git a/client/src/js/components/welcome/NewFeature.js b/client/src/js/components/welcome/NewFeature.js
new file mode 100644
index 000000000..3bc286273
--- /dev/null
+++ b/client/src/js/components/welcome/NewFeature.js
@@ -0,0 +1,109 @@
+import React from "react";
+import { withNamespaces } from "react-i18next";
+import { withStyles } from "@material-ui/core/styles";
+import styled from "styled-components";
+import Typography from "@material-ui/core/Typography";
+
+import { Article } from "../../styled-components/Article";
+import { media } from "../../styled-components/utils";
+import CourseItem from "../../components/syllabus/CourseItem";
+
+const ExtendedArticle = styled(Article)`
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  ${media.phone`
+    font-size: 16px
+  `};
+`;
+
+const CourseItemWrapper = styled("div")`
+  pointer-events: none !important;
+  font-size: 16px;
+  width: 500px;
+  ${media.phone`
+    width: auto;
+  `};
+`;
+
+const styles = {
+  h3: {
+    margin: "0.6em 0",
+    wordBreak: "keep-all",
+    fontSize: "1.6em",
+  },
+  h4: {
+    margin: "0.35em 0",
+    fontSize: "1.1em",
+  },
+};
+
+const NewFeature = ({ classes, t, lng }) => {
+  const dummyCourse = {
+    _id: "11G100101001202011G100101011",
+    y: 2020,
+    tm: "fallSem",
+    t: "Introduction to Political Analysis [E] 01",
+    tj: "Introduction to Political Analysis 01",
+    i: "KELLAM, Marisa",
+    ij: "ケラム マリサ",
+    e: true,
+    os: [
+      {
+        d: 3,
+        s: 2,
+        e: 2,
+        b: "-1",
+        c: "undecided",
+        l: "-1-undecided",
+      },
+      {
+        d: 2,
+        s: 3,
+        e: 3,
+        b: "-1",
+        c: "undecided",
+        l: "-1-undecided",
+      },
+    ],
+    l: "EN",
+    ks: [{ s: "PSE", k: "11G100101001202011G100101011" }],
+  };
+  return (
+    <ExtendedArticle>
+      <Typography
+        variant="h3"
+        component="h3"
+        align="center"
+        gutterBottom
+        className={classes.h3}
+      >
+        {t("welcome.courseEvals")}
+      </Typography>
+      <CourseItemWrapper>
+        <CourseItem
+          handleOnClick={() => {}}
+          handleClickSyllabusLink={() => {}}
+          isAddable={true}
+          searchTerm={""}
+          searchLang={lng}
+          course={dummyCourse}
+          isInCourseEvalsPage={false}
+        />
+      </CourseItemWrapper>
+      <Typography
+        className={classes.h4}
+        variant="h4"
+        component="p"
+        align="center"
+        gutterBottom
+      >
+        {t("welcome.courseEvalsDetails1")}
+        <br />
+        {t("welcome.courseEvalsDetails2")}
+      </Typography>
+    </ExtendedArticle>
+  );
+};
+
+export default withNamespaces("translation")(withStyles(styles)(NewFeature));
diff --git a/client/src/js/components/welcome/Notice.js b/client/src/js/components/welcome/Notice.js
index 8f13909c8..028395c24 100644
--- a/client/src/js/components/welcome/Notice.js
+++ b/client/src/js/components/welcome/Notice.js
@@ -20,12 +20,12 @@ const styles = {
   h3: {
     margin: "0.6em 0",
     wordBreak: "keep-all",
-    fontSize: "1.6em"
+    fontSize: "1.6em",
   },
   h4: {
     margin: "0.35em 0",
-    fontSize: "1.1em"
-  }
+    fontSize: "1.1em",
+  },
 };
 
 const Notice = ({ classes, t }) => {
diff --git a/client/src/js/config/api.js b/client/src/js/config/api.js
index 369a5d051..9d2ddd705 100644
--- a/client/src/js/config/api.js
+++ b/client/src/js/config/api.js
@@ -4,7 +4,12 @@ const API_STATIC_BASE_URL =
     : "https://staging.wasedatime.com/api/static/";
 const YEAR = "2020-2021/";
 const API_STATIC_URL = API_STATIC_BASE_URL + YEAR;
+const API_COURSE_EVALS_BASE_URL =
+  process.env.NODE_ENV === "production"
+    ? "/api/course_evals"
+    : "https://staging.wasedatime.com/api/course_evals_test";
 export const wasetimeApiStatic = {
   scraperStats: API_STATIC_URL + "scraper_stats/index.json",
-  courseListAll: API_STATIC_URL + "course_list_all.json"
+  courseListAll: API_STATIC_URL + "course_list_all_min.json",
+  courseEvalsBaseURL: API_COURSE_EVALS_BASE_URL,
 };
diff --git a/client/src/js/config/course_eval_lng.js b/client/src/js/config/course_eval_lng.js
new file mode 100644
index 000000000..88c856f19
--- /dev/null
+++ b/client/src/js/config/course_eval_lng.js
@@ -0,0 +1,13 @@
+export const COURSE_EVAL_LNG = Object.freeze({
+  0: "en",
+  1: "jp",
+  2: "zh_TW",
+  3: "zh_CN",
+});
+
+export const COURSE_EVAL_LNG_FULL_NAME = Object.freeze({
+  0: "English",
+  1: "Japanese",
+  2: "Traditional Chinese",
+  3: "Simplified Chinese",
+});
diff --git a/client/src/js/config/langs.js b/client/src/js/config/langs.js
index 2fc9a0ad4..c8a02af41 100644
--- a/client/src/js/config/langs.js
+++ b/client/src/js/config/langs.js
@@ -1,6 +1,6 @@
 const LANGS = Object.freeze({
   EN: "en",
-  JP: "jp"
+  JP: "jp",
 });
 
 export default LANGS;
diff --git a/client/src/js/config/semesters.js b/client/src/js/config/semesters.js
new file mode 100644
index 000000000..62009ab3d
--- /dev/null
+++ b/client/src/js/config/semesters.js
@@ -0,0 +1,9 @@
+export const SEMESTERS = Object.freeze({
+  FALL: "fall",
+  SPRING: "spring",
+});
+
+export const getCurrentSemester = () => {
+  const month = new Date().getMonth();
+  return month > 1 && month < 8 ? SEMESTERS.SPRING : SEMESTERS.FALL;
+};
diff --git a/client/src/js/containers/ClassroomListContainer.js b/client/src/js/containers/ClassroomListContainer.js
index 932ea8297..e0185d4b6 100644
--- a/client/src/js/containers/ClassroomListContainer.js
+++ b/client/src/js/containers/ClassroomListContainer.js
@@ -1,17 +1,17 @@
-import React from 'react';
-import { Redirect } from 'react-router-dom';
-import axios from 'axios';
-import { normalize } from 'normalizr';
+import React from "react";
+import { Redirect } from "react-router-dom";
+import axios from "axios";
+import { normalize } from "normalizr";
 import {
   buildingClassroomsSchema,
-  occupiedClassroomsSchema
-} from '../data/schema';
-import PropTypes from 'prop-types';
+  occupiedClassroomsSchema,
+} from "../data/schema";
+import PropTypes from "prop-types";
 
-import ClassroomList from '../components/ClassroomList';
-import NotFound from '../components/NotFound';
-import FetchError from '../components/FetchError';
-import background from '../../img/nishi_waseda_campus.jpg';
+import ClassroomList from "../components/ClassroomList";
+import NotFound from "../components/NotFound";
+import FetchError from "../components/FetchError";
+import background from "../../img/nishi_waseda_campus.jpg";
 
 class ClassroomListContainer extends React.Component {
   constructor(props) {
@@ -21,7 +21,7 @@ class ClassroomListContainer extends React.Component {
       isFetching: true,
       mergedClassrooms: [],
       date: null,
-      error: null
+      error: null,
     };
   }
 
@@ -32,7 +32,7 @@ class ClassroomListContainer extends React.Component {
     occupiedClassroomsById
   ) {
     let mergedClassroomsById = { ...buildingClassroomsById };
-    occupiedClassroomIds.forEach(id => {
+    occupiedClassroomIds.forEach((id) => {
       mergedClassroomsById[id] = occupiedClassroomsById[id];
     });
     return mergedClassroomsById;
@@ -45,7 +45,7 @@ class ClassroomListContainer extends React.Component {
     } catch (error) {
       this.setState({
         isFetching: false,
-        error: error.response
+        error: error.response,
       });
     }
     if (res) {
@@ -65,23 +65,23 @@ class ClassroomListContainer extends React.Component {
         normalizedOccupiedClassrooms.entities.occupiedClassrooms
       );
 
-      const mergedClassrooms = normalizedBuildingClassrooms.result.map(id => {
+      const mergedClassrooms = normalizedBuildingClassrooms.result.map((id) => {
         return mergedClassroomsById[id];
       });
       this.setState({
         isFetching: false,
         date,
-        mergedClassrooms
+        mergedClassrooms,
       });
     }
   }
 
   //Avoid creating an arrow function wrapper and binds in render.
-  handleRetry = async e => {
+  handleRetry = async (e) => {
     e.preventDefault();
     this.setState({
       isFetching: true,
-      error: null
+      error: null,
     });
     await this.fetchData();
   };
@@ -121,5 +121,5 @@ class ClassroomListContainer extends React.Component {
 export default ClassroomListContainer;
 
 ClassroomListContainer.propTypes = {
-  match: PropTypes.object.isRequired
+  match: PropTypes.object.isRequired,
 };
diff --git a/client/src/js/containers/FooterContainer.js b/client/src/js/containers/FooterContainer.js
index b678ad25c..0caa2db38 100644
--- a/client/src/js/containers/FooterContainer.js
+++ b/client/src/js/containers/FooterContainer.js
@@ -29,28 +29,25 @@ class FooterContainer extends React.Component {
   }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state) => {
   return {
     isFetching: getIsFetching(state.stats),
     info: getInfo(state.stats),
-    error: getError(state.stats)
+    error: getError(state.stats),
   };
 };
 
 const mapDispatchToProps = {
-  fetchStats
+  fetchStats,
 };
 
 export default withNamespaces("translation")(
-  connect(
-    mapStateToProps,
-    mapDispatchToProps
-  )(FooterContainer)
+  connect(mapStateToProps, mapDispatchToProps)(FooterContainer)
 );
 
 FooterContainer.propTypes = {
   isFetching: PropTypes.bool.isRequired,
   info: PropTypes.object.isRequired,
   error: PropTypes.object,
-  fetchStats: PropTypes.func.isRequired
+  fetchStats: PropTypes.func.isRequired,
 };
diff --git a/client/src/js/containers/ModalContainer.js b/client/src/js/containers/ModalContainer.js
index 225bb82e5..302d99b34 100644
--- a/client/src/js/containers/ModalContainer.js
+++ b/client/src/js/containers/ModalContainer.js
@@ -13,7 +13,7 @@ class ModalContainer extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      showModal: false
+      showModal: false,
     };
   }
 
@@ -21,7 +21,7 @@ class ModalContainer extends React.Component {
   handleToggleModal = () => {
     ReactGA.event({
       category: gaBus,
-      action: gaAppendActionWithLng(gaOpenModal, this.props.lng)
+      action: gaAppendActionWithLng(gaOpenModal, this.props.lng),
     });
     this.setState((prevState, props) => {
       return { showModal: !this.state.showModal };
@@ -39,7 +39,7 @@ class ModalContainer extends React.Component {
             style={{
               color: "#ffffff",
               textDecoration: "underline",
-              cursor: "pointer"
+              cursor: "pointer",
             }}
             onClick={this.handleToggleModal}
           >
diff --git a/client/src/js/containers/NishiBuildingList.js b/client/src/js/containers/NishiBuildingList.js
index 32ab6087e..404844bee 100644
--- a/client/src/js/containers/NishiBuildingList.js
+++ b/client/src/js/containers/NishiBuildingList.js
@@ -1,19 +1,23 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-
-import { fetchBuildings } from '../actions/index';
-import { getIsFetching, getBuildings, getError } from '../reducers/fetchedBuildings';
-import BuildingList from '../components/BuildingList';
-import LoadingSpinner from '../components/LoadingSpinner';
-import FetchError from '../components/FetchError';
-import nishiBuildings from '../data/buildingList';
-import background from '../../img/nishi_waseda_campus.jpg';
+import React from "react";
+import { connect } from "react-redux";
+import PropTypes from "prop-types";
+
+import { fetchBuildings } from "../actions/index";
+import {
+  getIsFetching,
+  getBuildings,
+  getError,
+} from "../reducers/fetchedBuildings";
+import BuildingList from "../components/BuildingList";
+import LoadingSpinner from "../components/LoadingSpinner";
+import FetchError from "../components/FetchError";
+import nishiBuildings from "../data/buildingList";
+import background from "../../img/nishi_waseda_campus.jpg";
 
 class NishiBuildingList extends React.Component {
   constructor(props) {
     super(props);
-    this.name = 'Nishi-Waseda Campus';
+    this.name = "Nishi-Waseda Campus";
     this.background = background;
   }
 
@@ -40,16 +44,16 @@ class NishiBuildingList extends React.Component {
   }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state) => {
   return {
     isFetching: getIsFetching(state.fetchedBuildings),
     buildings: getBuildings(state.fetchedBuildings, nishiBuildings),
-    error: getError(state.fetchedBuildings)
+    error: getError(state.fetchedBuildings),
   };
 };
 
 const mapDispatchToProps = {
-  fetchBuildings
+  fetchBuildings,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(NishiBuildingList);
@@ -58,5 +62,5 @@ NishiBuildingList.propTypes = {
   isFetching: PropTypes.bool.isRequired,
   buildings: PropTypes.array.isRequired,
   error: PropTypes.object,
-  fetchBuildings: PropTypes.func.isRequired
+  fetchBuildings: PropTypes.func.isRequired,
 };
diff --git a/client/src/js/containers/syllabus/AddedCourseItem.js b/client/src/js/containers/syllabus/AddedCourseItem.js
index 5bd1de44c..a53794662 100644
--- a/client/src/js/containers/syllabus/AddedCourseItem.js
+++ b/client/src/js/containers/syllabus/AddedCourseItem.js
@@ -9,7 +9,7 @@ import { gaAddedCourseItem } from "../../ga/eventCategories";
 import {
   gaAppendActionWithLng,
   gaRemoveCourse,
-  gaClickSyllabusLink
+  gaClickSyllabusLink,
 } from "../../ga/eventActions";
 
 class AddedCourseItem extends React.Component {
@@ -17,7 +17,7 @@ class AddedCourseItem extends React.Component {
     ReactGA.event({
       category: gaAddedCourseItem,
       action: gaAppendActionWithLng(gaClickSyllabusLink, lng),
-      label: title
+      label: title,
     });
   };
   handleRemoveCourse = (title, lng) => {
@@ -25,12 +25,12 @@ class AddedCourseItem extends React.Component {
     ReactGA.event({
       category: gaAddedCourseItem,
       action: gaAppendActionWithLng(gaRemoveCourse, lng),
-      label: title
+      label: title,
     });
     this.props.removeCourse(course._id);
     Alert.success("Course removed.", {
       position: "bottom",
-      effect: "jelly"
+      effect: "jelly",
     });
   };
 
@@ -50,10 +50,7 @@ class AddedCourseItem extends React.Component {
 }
 
 const mapDispatchToProps = {
-  removeCourse
+  removeCourse,
 };
 
-export default connect(
-  null,
-  mapDispatchToProps
-)(AddedCourseItem);
+export default connect(null, mapDispatchToProps)(AddedCourseItem);
diff --git a/client/src/js/containers/syllabus/AddedCourseListContainer.js b/client/src/js/containers/syllabus/AddedCourseListContainer.js
index b763efd03..c7b15849f 100644
--- a/client/src/js/containers/syllabus/AddedCourseListContainer.js
+++ b/client/src/js/containers/syllabus/AddedCourseListContainer.js
@@ -12,37 +12,37 @@ import {
   gaAppendActionWithLng,
   gaOpenSortingOption,
   gaCloseSortingOption,
-  gaChangeSortingOption
+  gaChangeSortingOption,
 } from "../../ga/eventActions";
 
 class AddedCourseListContainer extends React.Component {
   constructor() {
     super();
     this.state = {
-      isSortingOptionOpen: false
+      isSortingOptionOpen: false,
     };
   }
 
-  handleToggleSortingOptions = event => {
+  handleToggleSortingOptions = (event) => {
     event.preventDefault();
     const gaAction = this.state.isSortingOptionOpen
       ? gaCloseSortingOption
       : gaOpenSortingOption;
     ReactGA.event({
       category: gaAddedCourseItem,
-      action: gaAppendActionWithLng(gaAction, this.props.lng)
+      action: gaAppendActionWithLng(gaAction, this.props.lng),
     });
     this.setState((prevState, props) => {
       return { isSortingOptionOpen: !prevState.isSortingOptionOpen };
     });
   };
 
-  handleChangeSortingOption = sortingOption => {
+  handleChangeSortingOption = (sortingOption) => {
     if (sortingOption !== this.props.sortingOption) {
       ReactGA.event({
         category: gaAddedCourseItem,
         action: gaAppendActionWithLng(gaChangeSortingOption, this.props.lng),
-        label: sortingOption
+        label: sortingOption,
       });
       this.props.changeCoursesSortingOption(
         sortingOption,
@@ -54,10 +54,10 @@ class AddedCourseListContainer extends React.Component {
   render() {
     const { addedCoursesAndPrefs, selectedSortingOption } = this.props;
     const isSortingOptionOpen = this.state.isSortingOptionOpen;
-    const addedCourses = addedCoursesAndPrefs.map(addedCourseAndPref => {
+    const addedCourses = addedCoursesAndPrefs.map((addedCourseAndPref) => {
       return {
         ...addedCourseAndPref.course,
-        displayLang: addedCourseAndPref.displayLang
+        displayLang: addedCourseAndPref.displayLang,
       };
     });
     const sortedAddedCourses = sortAddedCourses(
@@ -80,17 +80,14 @@ const mapStateToProps = (state, ownProps) => {
   return {
     selectedSortingOption: getSortingOption(
       state.addedCourses[ownProps.semesterKey]
-    )
+    ),
   };
 };
 
 const mapDispatchToProps = {
-  changeCoursesSortingOption
+  changeCoursesSortingOption,
 };
 
 export default withNamespaces("translation")(
-  connect(
-    mapStateToProps,
-    mapDispatchToProps
-  )(AddedCourseListContainer)
+  connect(mapStateToProps, mapDispatchToProps)(AddedCourseListContainer)
 );
diff --git a/client/src/js/containers/syllabus/AddedCourseListSwitch.js b/client/src/js/containers/syllabus/AddedCourseListSwitch.js
index e3f931523..f5dc2cec4 100644
--- a/client/src/js/containers/syllabus/AddedCourseListSwitch.js
+++ b/client/src/js/containers/syllabus/AddedCourseListSwitch.js
@@ -6,21 +6,22 @@ import BinarySwitch from "../../components/syllabus/BinarySwitch";
 import AddedCourseListContainer from "./AddedCourseListContainer";
 import { Wrapper } from "../../styled-components/Wrapper";
 import { Overlay } from "../../styled-components/Overlay";
+import { getCurrentSemester, SEMESTERS } from "../../config/semesters";
 
 class AddedCourseListSwitch extends React.Component {
   constructor(props) {
     super(props);
-    this.springSemester = "spring";
-    this.fallSemester = "fall";
+    this.springSemester = SEMESTERS.SPRING;
+    this.fallSemester = SEMESTERS.FALL;
     this.state = {
-      selectedSemester: this.fallSemester
+      selectedSemester: getCurrentSemester(),
     };
   }
 
-  handleChangeSemester = targetSemester => {
+  handleChangeSemester = (targetSemester) => {
     if (this.state.selectedSemester !== targetSemester) {
       this.setState({
-        selectedSemester: targetSemester
+        selectedSemester: targetSemester,
       });
     }
   };
diff --git a/client/src/js/containers/syllabus/FetchedCourseItem.js b/client/src/js/containers/syllabus/FetchedCourseItem.js
index 1fc336ec9..47e423133 100644
--- a/client/src/js/containers/syllabus/FetchedCourseItem.js
+++ b/client/src/js/containers/syllabus/FetchedCourseItem.js
@@ -11,7 +11,7 @@ import {
   gaAppendActionWithLng,
   gaAddCourse,
   gaRemoveCourse,
-  gaClickSyllabusLink
+  gaClickSyllabusLink,
 } from "../../ga/eventActions";
 
 const ADDED_COURSES_NUMBER_LIMIT = 100;
@@ -19,35 +19,35 @@ const ADDED_COURSES_NUMBER_LIMIT = 100;
 class FetchedCourseItem extends React.Component {
   handleAddCourse = (title, lng) => {
     const { course, byId, searchLang } = this.props;
-    const occurrences = course.occurrences;
+    const occurrences = course.os;
     ReactGA.event({
       category: gaFetchedCourseItem,
       action: gaAppendActionWithLng(gaAddCourse, lng),
-      label: title
+      label: title,
     });
     if (Object.keys(byId).length >= ADDED_COURSES_NUMBER_LIMIT) {
       Alert.error(
         `Cannot add more than ${ADDED_COURSES_NUMBER_LIMIT} courses`,
         {
           position: "bottom",
-          effect: "jelly"
+          effect: "jelly",
         }
       );
       return;
     }
     this.props.addCourse(course, searchLang);
-    if (occurrences.some(o => o.day === -1 || o.start_period === -1)) {
+    if (occurrences.some((o) => o.day === -1 || o.start_period === -1)) {
       Alert.warning(
         "Course with undecided time cannot be displayed in timetable.",
         {
           position: "bottom",
-          effect: "jelly"
+          effect: "jelly",
         }
       );
     } else {
       Alert.success("Course added.", {
         position: "bottom",
-        effect: "jelly"
+        effect: "jelly",
       });
     }
   };
@@ -57,12 +57,12 @@ class FetchedCourseItem extends React.Component {
     ReactGA.event({
       category: gaFetchedCourseItem,
       action: gaAppendActionWithLng(gaRemoveCourse, lng),
-      label: title
+      label: title,
     });
     this.props.removeCourse(course._id);
     Alert.success("Course removed.", {
       position: "bottom",
-      effect: "jelly"
+      effect: "jelly",
     });
   };
 
@@ -70,12 +70,18 @@ class FetchedCourseItem extends React.Component {
     ReactGA.event({
       category: gaFetchedCourseItem,
       action: gaAppendActionWithLng(gaClickSyllabusLink, lng),
-      label: title
+      label: title,
     });
   };
 
   render() {
-    const { searchTerm, searchLang, course, byId } = this.props;
+    const {
+      searchTerm,
+      searchLang,
+      course,
+      byId,
+      isInCourseEvalsPage,
+    } = this.props;
     const id = course._id;
     const isAddable = !(id in byId);
     return (
@@ -88,23 +94,21 @@ class FetchedCourseItem extends React.Component {
         searchTerm={searchTerm}
         searchLang={searchLang}
         course={course}
+        isInCourseEvalsPage={isInCourseEvalsPage}
       />
     );
   }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state) => {
   return {
-    byId: getById(state.addedCourses)
+    byId: getById(state.addedCourses),
   };
 };
 
 const mapDispatchToProps = {
   addCourse,
-  removeCourse
+  removeCourse,
 };
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(FetchedCourseItem);
+export default connect(mapStateToProps, mapDispatchToProps)(FetchedCourseItem);
diff --git a/client/src/js/containers/syllabus/FetchedCourseListSearch.js b/client/src/js/containers/syllabus/FetchedCourseListSearch.js
index 62b7669ad..7da18b8dc 100644
--- a/client/src/js/containers/syllabus/FetchedCourseListSearch.js
+++ b/client/src/js/containers/syllabus/FetchedCourseListSearch.js
@@ -1,5 +1,6 @@
 import React from "react";
 import debounce from "lodash/debounce";
+import sortBy from "lodash/sortBy";
 import MediaQuery from "react-responsive";
 import { withRouter } from "react-router";
 import { withNamespaces } from "react-i18next";
@@ -24,7 +25,7 @@ import {
   gaOpenModal,
   gaCloseModal,
   gaApplyFilter,
-  gaRemoveFilter
+  gaRemoveFilter,
 } from "../../ga/eventActions";
 
 const ExtendedWrapper = styled(Wrapper)`
@@ -38,7 +39,7 @@ const modalStyle = {
     left: 0,
     right: 0,
     bottom: 0,
-    zIndex: "1050"
+    zIndex: "1050",
   },
   content: {
     position: "absolute",
@@ -52,8 +53,8 @@ const modalStyle = {
     WebkitOverflowScrolling: "touch",
     outline: "none",
     fontSize: "16px",
-    padding: 0
-  }
+    padding: 0,
+  },
 };
 
 class FetchedCourseSearch extends React.Component {
@@ -71,11 +72,11 @@ class FetchedCourseSearch extends React.Component {
         lang: [],
         special: [],
         day: [],
-        period: []
+        period: [],
       },
       inputText: searchTerm,
       searchTerm: searchTerm,
-      filteredCourses: props.fetchedCourses
+      filteredCourses: props.fetchedCourses,
     };
   }
 
@@ -83,16 +84,16 @@ class FetchedCourseSearch extends React.Component {
     this.debounceUpdateSearchTerm.cancel();
   }
 
-  handleToggleModal = event => {
+  handleToggleModal = (event) => {
     event.preventDefault();
     const gaAction = this.state.isModalOpen ? gaCloseModal : gaOpenModal;
     ReactGA.event({
       category: gaFilter,
-      action: gaAppendActionWithLng(gaAction, this.props.lng)
+      action: gaAppendActionWithLng(gaAction, this.props.lng),
     });
     this.setState((prevState, props) => {
       return {
-        isModalOpen: !prevState.isModalOpen
+        isModalOpen: !prevState.isModalOpen,
       };
     });
   };
@@ -102,7 +103,7 @@ class FetchedCourseSearch extends React.Component {
       const { [inputName]: filters, ...rest } = prevState.filterGroups;
       let newFilters, gaAction;
       if (filters.includes(value)) {
-        newFilters = filters.filter(elem => elem !== value);
+        newFilters = filters.filter((elem) => elem !== value);
         gaAction = gaRemoveFilter;
       } else {
         newFilters = [...filters, value];
@@ -111,11 +112,11 @@ class FetchedCourseSearch extends React.Component {
       ReactGA.event({
         category: gaFilter,
         action: gaAppendActionWithLng(gaAction, this.props.lng),
-        label: `${inputName} - ${value}`
+        label: `${inputName} - ${value}`,
       });
       const newFilterGroups = {
         [inputName]: newFilters,
-        ...rest
+        ...rest,
       };
       const newFilteredCourses = this.filterCourses(
         newFilterGroups,
@@ -123,7 +124,7 @@ class FetchedCourseSearch extends React.Component {
       );
       return {
         filterGroups: newFilterGroups,
-        filteredCourses: newFilteredCourses
+        filteredCourses: newFilteredCourses,
       };
     });
   };
@@ -143,16 +144,16 @@ class FetchedCourseSearch extends React.Component {
     let filteredCourses =
       semesterFilters.length === 0
         ? courses
-        : courses.filter(course => semesterFilters.includes(course.term));
+        : courses.filter((course) => semesterFilters.includes(course.tm));
 
     const schoolFilters = filterGroups.school;
     filteredCourses =
       schoolFilters.length === 0 || schoolFilters.length === 6
         ? filteredCourses
-        : filteredCourses.filter(course => {
-            const keys = course.keys;
+        : filteredCourses.filter((course) => {
+            const keys = course.ks;
             for (let i = 0; i < keys.length; i++) {
-              if (schoolFilters.includes(keys[i].school)) return true;
+              if (schoolFilters.includes(keys[i].s)) return true;
             }
             return false;
           });
@@ -161,30 +162,29 @@ class FetchedCourseSearch extends React.Component {
     filteredCourses =
       langFilters.length === 0 || langFilters.length === 3
         ? filteredCourses
-        : filteredCourses.filter(course => langFilters.includes(course.lang));
+        : filteredCourses.filter((course) => langFilters.includes(course.l));
 
-    const specialFilters = filterGroups.special;
-    filteredCourses =
-      specialFilters.length === 0
-        ? filteredCourses
-        : filteredCourses.filter(course => {
-            const keywords = course.keywords;
-            if (keywords === undefined) return false;
-            for (let i = 0; i < keywords.length; i++) {
-              if (specialFilters.includes(keywords[i])) return true;
-            }
-            return false;
-          });
+    // IPSE/English-based Undergraduate Program
+    if (filterGroups.special.length > 0) {
+      const specialFilters = filterGroups.special[0].split("/");
+      filteredCourses = filteredCourses.filter((course) => {
+        const keywords = course.kws;
+        if (keywords === undefined) return false;
+        for (let i = 0; i < keywords.length; i++) {
+          if (specialFilters.includes(keywords[i])) return true;
+        }
+        return false;
+      });
+    }
 
     const dayFilters = filterGroups.day;
     filteredCourses =
       dayFilters.length === 0 || dayFilters.length === 6
         ? filteredCourses
-        : filteredCourses.filter(course => {
-            const occurrences = course.occurrences;
+        : filteredCourses.filter((course) => {
+            const occurrences = course.os;
             for (let i = 0; i < occurrences.length; i++) {
-              if (dayFilters.includes(occurrences[i].day.toString()))
-                return true;
+              if (dayFilters.includes(occurrences[i].d.toString())) return true;
             }
             return false;
           });
@@ -194,16 +194,13 @@ class FetchedCourseSearch extends React.Component {
     filteredCourses =
       periodFilters.length === 0 || periodFilters.length === 6
         ? filteredCourses
-        : filteredCourses.filter(course => {
-            const occurrences = course.occurrences;
+        : filteredCourses.filter((course) => {
+            const occurrences = course.os;
 
             for (let i = 0; i < periodFilters.length; i++) {
               const period = parseInt(periodFilters[i], 10);
               for (let j = 0; j < occurrences.length; j++) {
-                if (
-                  occurrences[j].start_period <= period &&
-                  period <= occurrences[j].end_period
-                ) {
+                if (occurrences[j].s <= period && period <= occurrences[j].e) {
                   return true;
                 }
               }
@@ -216,31 +213,34 @@ class FetchedCourseSearch extends React.Component {
   pushHistory = () => {
     this.props.history.push({
       pathname: "/syllabus",
-      search: this.state.inputText === "" ? "" : `q=${this.state.inputText}`
+      search: this.state.inputText === "" ? "" : `q=${this.state.inputText}`,
     });
   };
 
   updateSearchTerm = () => {
     this.setState((prevState, props) => {
       return {
-        searchTerm: prevState.inputText
+        searchTerm: prevState.inputText,
       };
     }, this.pushHistory());
   };
 
   debounceUpdateSearchTerm = debounce(this.updateSearchTerm, 500, {
-    leading: false
+    leading: false,
   });
 
-  handleInputChange = inputText => {
+  handleInputChange = (inputText) => {
     this.setState(
       {
-        inputText
+        inputText,
       },
       this.debounceUpdateSearchTerm()
     );
   };
 
+  sortCoursesWithEvalsExistence = (courses) =>
+    sortBy(courses, (course) => (course.e ? 1 : 2));
+
   render() {
     const { inputText, searchTerm } = this.state;
     const searchLang =
@@ -254,7 +254,7 @@ class FetchedCourseSearch extends React.Component {
             searchCourses(searchTerm, this.state.filteredCourses, searchLang),
             searchLang
           )
-        : this.state.filteredCourses;
+        : this.sortCoursesWithEvalsExistence(this.state.filteredCourses);
     return (
       <ExtendedWrapper>
         <SearchBar
@@ -269,7 +269,7 @@ class FetchedCourseSearch extends React.Component {
             results={results}
           />
           <MediaQuery minWidth={sizes.desktop}>
-            {matches => {
+            {(matches) => {
               return matches ? (
                 <SideBar flexBasis="20em">
                   <Filter
diff --git a/client/src/js/containers/timetable/AddedCourseAndPrefItem.js b/client/src/js/containers/timetable/AddedCourseAndPrefItem.js
index da2f7aca3..59eb40505 100644
--- a/client/src/js/containers/timetable/AddedCourseAndPrefItem.js
+++ b/client/src/js/containers/timetable/AddedCourseAndPrefItem.js
@@ -10,20 +10,20 @@ import {
   gaMakeCourseVisible,
   gaMakeCourseInVisible,
   gaClickSyllabusLink,
-  gaRemoveCourse
+  gaRemoveCourse,
 } from "../../ga/eventActions";
 
 import {
   removeCourse,
   changeCourseColor,
-  toggleCourseVisibility
+  toggleCourseVisibility,
 } from "../../actions/syllabus";
 import CourseAndPrefItem from "../../components/timetable/CourseAndPrefItem";
 import { courseColors } from "../../data/colors";
 
 class AddedCourseAndPrefItem extends React.Component {
   state = {
-    isPopperOpen: false
+    isPopperOpen: false,
   };
 
   handleRemoveCourse = (id, title) => {
@@ -32,22 +32,22 @@ class AddedCourseAndPrefItem extends React.Component {
     ReactGA.event({
       category: gaAddedCourseAndPrefItem,
       action: gaAppendActionWithLng(gaRemoveCourse, lng),
-      label: title
+      label: title,
     });
     Alert.success("Course removed.", {
       position: "bottom",
-      effect: "jelly"
+      effect: "jelly",
     });
   };
 
-  handleToggleColorPopper = event => {
+  handleToggleColorPopper = (event) => {
     event.preventDefault();
     this.setState((prevState, props) => {
       return { isPopperOpen: !prevState.isPopperOpen };
     });
   };
 
-  handleChangeColor = colorId => {
+  handleChangeColor = (colorId) => {
     const { addedCourseAndPref, lng } = this.props;
     const { course } = addedCourseAndPref;
     this.setState((prevState, props) => {
@@ -56,7 +56,7 @@ class AddedCourseAndPrefItem extends React.Component {
     ReactGA.event({
       category: gaAddedCourseAndPrefItem,
       action: gaAppendActionWithLng(gaChangeCourseColor, lng),
-      label: courseColors[colorId]
+      label: courseColors[colorId],
     });
     this.props.changeCourseColor(course._id, colorId);
   };
@@ -70,17 +70,17 @@ class AddedCourseAndPrefItem extends React.Component {
     ReactGA.event({
       category: gaAddedCourseAndPrefItem,
       action: gaAppendActionWithLng(gaAction, lng),
-      label: title
+      label: title,
     });
     this.props.toggleCourseVisibility(id);
   };
 
-  handleClickSyllabusLink = title => {
+  handleClickSyllabusLink = (title) => {
     const { lng } = this.props;
     ReactGA.event({
       category: gaAddedCourseAndPrefItem,
       action: gaAppendActionWithLng(gaClickSyllabusLink, lng),
-      label: title
+      label: title,
     });
   };
 
@@ -107,12 +107,9 @@ class AddedCourseAndPrefItem extends React.Component {
 const mapDispatchToProps = {
   removeCourse,
   changeCourseColor,
-  toggleCourseVisibility
+  toggleCourseVisibility,
 };
 
 export default withNamespaces("translation")(
-  connect(
-    null,
-    mapDispatchToProps
-  )(AddedCourseAndPrefItem)
+  connect(null, mapDispatchToProps)(AddedCourseAndPrefItem)
 );
diff --git a/client/src/js/containers/timetable/AddedCourseAndPrefListContainer.js b/client/src/js/containers/timetable/AddedCourseAndPrefListContainer.js
index 92b065a32..c03ad87a6 100644
--- a/client/src/js/containers/timetable/AddedCourseAndPrefListContainer.js
+++ b/client/src/js/containers/timetable/AddedCourseAndPrefListContainer.js
@@ -12,37 +12,37 @@ import {
   gaAppendActionWithLng,
   gaOpenSortingOption,
   gaCloseSortingOption,
-  gaChangeSortingOption
+  gaChangeSortingOption,
 } from "../../ga/eventActions";
 
 class AddedCourseAndPrefListContainer extends React.Component {
   constructor() {
     super();
     this.state = {
-      isSortingOptionOpen: false
+      isSortingOptionOpen: false,
     };
   }
 
-  handleToggleSortingOptions = event => {
+  handleToggleSortingOptions = (event) => {
     event.preventDefault();
     const gaAction = this.state.isSortingOptionOpen
       ? gaCloseSortingOption
       : gaOpenSortingOption;
     ReactGA.event({
       category: gaAddedCourseAndPrefItem,
-      action: gaAppendActionWithLng(gaAction, this.props.lng)
+      action: gaAppendActionWithLng(gaAction, this.props.lng),
     });
     this.setState((prevState, props) => {
       return { isSortingOptionOpen: !prevState.isSortingOptionOpen };
     });
   };
 
-  handleChangeSortingOption = sortingOption => {
+  handleChangeSortingOption = (sortingOption) => {
     if (sortingOption !== this.props.sortingOption) {
       ReactGA.event({
         category: gaAddedCourseAndPrefItem,
         action: gaAppendActionWithLng(gaChangeSortingOption, this.props.lng),
-        label: sortingOption
+        label: sortingOption,
       });
       this.props.changeCoursesSortingOption(
         sortingOption,
@@ -74,17 +74,14 @@ const mapStateToProps = (state, ownProps) => {
   return {
     selectedSortingOption: getSortingOption(
       state.addedCourses[ownProps.semesterKey]
-    )
+    ),
   };
 };
 
 const mapDispatchToProps = {
-  changeCoursesSortingOption
+  changeCoursesSortingOption,
 };
 
 export default withNamespaces("translation")(
-  connect(
-    mapStateToProps,
-    mapDispatchToProps
-  )(AddedCourseAndPrefListContainer)
+  connect(mapStateToProps, mapDispatchToProps)(AddedCourseAndPrefListContainer)
 );
diff --git a/client/src/js/containers/timetable/CourseAdderContainer.js b/client/src/js/containers/timetable/CourseAdderContainer.js
index ff928ab02..b30ef6d10 100644
--- a/client/src/js/containers/timetable/CourseAdderContainer.js
+++ b/client/src/js/containers/timetable/CourseAdderContainer.js
@@ -1,15 +1,15 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
+import React from "react";
+import { connect } from "react-redux";
+import PropTypes from "prop-types";
 
-import { fetchCourses } from '../../actions/syllabus';
+import { fetchCourses } from "../../actions/syllabus";
 import {
   getIsFetching,
   getCourses,
-  getError
-} from '../../reducers/fetchedCourses';
-import { filterCourses, sortCourses } from '../../utils/courseSearch';
-import CourseAdder from '../../components/timetable/CourseAdder';
+  getError,
+} from "../../reducers/fetchedCourses";
+import { filterCourses, sortCourses } from "../../utils/courseSearch";
+import CourseAdder from "../../components/timetable/CourseAdder";
 // import LoadingSpinner from '../components/LoadingSpinner';
 // import FetchError from '../components/FetchError';
 
@@ -23,7 +23,7 @@ class CourseAdderContainer extends React.Component {
     }
   }
 
-  getFilteredCourses = searchTerm => {
+  getFilteredCourses = (searchTerm) => {
     if (searchTerm.length > 0) {
       const filteredCourses = filterCourses(searchTerm, this.props.courses);
       return sortCourses(searchTerm, filteredCourses.slice(0, RESULTS_LIMIT));
@@ -50,25 +50,26 @@ class CourseAdderContainer extends React.Component {
   }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state) => {
   return {
     isFetching: getIsFetching(state.fetchedCourses),
     courses: getCourses(state.fetchedCourses),
-    error: getError(state.fetchedCourses)
+    error: getError(state.fetchedCourses),
   };
 };
 
 const mapDispatchToProps = {
-  fetchCourses
+  fetchCourses,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(
-  CourseAdderContainer
-);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CourseAdderContainer);
 
 CourseAdderContainer.propTypes = {
   isFetching: PropTypes.bool.isRequired,
   courses: PropTypes.array.isRequired,
   error: PropTypes.object,
-  fetchCourses: PropTypes.func.isRequired
+  fetchCourses: PropTypes.func.isRequired,
 };
diff --git a/client/src/js/containers/timetable/TimetableContainer.js b/client/src/js/containers/timetable/TimetableContainer.js
index abd650858..0574f3af5 100644
--- a/client/src/js/containers/timetable/TimetableContainer.js
+++ b/client/src/js/containers/timetable/TimetableContainer.js
@@ -6,43 +6,40 @@ import Timetable from "../../components/timetable/Timetable";
 import SemesterSwitcher from "../../components/timetable/SemesterSwitcher";
 import withFetchCourses from "../../hocs/withFetchCourses";
 import { withNamespaces } from "react-i18next";
+import { SEMESTERS, getCurrentSemester } from "../../config/semesters";
 
 class TimetableContainer extends React.Component {
   constructor(props) {
     super(props);
     this.semesters = [
-      { title: "Spring Semester", key: "spring" },
-      { title: "Fall Semester", key: "fall" }
+      { title: "Spring Semester", key: SEMESTERS.SPRING },
+      { title: "Fall Semester", key: SEMESTERS.FALL },
     ];
-    let semesterIndex;
-    const month = new Date().getMonth();
-    // 0-base index
-    if (month >= 2 && month <= 7) {
-      semesterIndex = 0;
-    } else {
-      semesterIndex = 1;
-    }
+    const currentSemester = getCurrentSemester();
+    const semesterIndex = this.semesters.findIndex(
+      (semester) => semester.key === currentSemester
+    );
     this.state = {
-      semesterIndex
+      semesterIndex,
     };
   }
 
-  handleIncreaseSemesterIndex = event => {
+  handleIncreaseSemesterIndex = (event) => {
     event.preventDefault();
     const newSemesterIndex =
       (this.state.semesterIndex + 1) % this.semesters.length;
     this.setState({
-      semesterIndex: newSemesterIndex
+      semesterIndex: newSemesterIndex,
     });
   };
 
-  handleDecreaseSemesterIndex = event => {
+  handleDecreaseSemesterIndex = (event) => {
     event.preventDefault();
     const newSemesterIndex = Math.abs(
       (this.state.semesterIndex - 1) % this.semesters.length
     );
     this.setState({
-      semesterIndex: newSemesterIndex
+      semesterIndex: newSemesterIndex,
     });
   };
 
diff --git a/client/src/js/data/buildingList.js b/client/src/js/data/buildingList.js
index 46f2a7c92..d1f418d90 100644
--- a/client/src/js/data/buildingList.js
+++ b/client/src/js/data/buildingList.js
@@ -1,19 +1,19 @@
 export const mainBuildings = [];
 
 export const nishiBuildings = [
-  '51',
-  '52',
-  '53',
-  '54',
-  '55',
-  '56',
-  '57',
-  '58',
-  '59',
-  '60',
-  '61',
-  '62',
-  '63'
+  "51",
+  "52",
+  "53",
+  "54",
+  "55",
+  "56",
+  "57",
+  "58",
+  "59",
+  "60",
+  "61",
+  "62",
+  "63",
 ];
 
 export const toyamaBuildings = [];
diff --git a/client/src/js/data/busSchedule.js b/client/src/js/data/busSchedule.js
index dd990ab80..6a420077b 100644
--- a/client/src/js/data/busSchedule.js
+++ b/client/src/js/data/busSchedule.js
@@ -8,209 +8,175 @@ export const busSchedule = {
     fromWasedaToNishiWaseda: {
       occurrences: [
         // Converted to minutes. E.g., 09:15 = 9 * 60 + 15 = 555
-        getTotalMins(9,15),
-        getTotalMins(9,45),
-        getTotalMins(10,10),
-        getTotalMins(10,35),
-        getTotalMins(10,45),
-        getTotalMins(11,20),
-        getTotalMins(11,50),
-        getTotalMins(12,5),
-        getTotalMins(12,15),
-        getTotalMins(12,45),
-        getTotalMins(13,15),
-        getTotalMins(13,45),
-        getTotalMins(14,0),
-        getTotalMins(14,15),
-        getTotalMins(14,35),
-        getTotalMins(14,50),
-        getTotalMins(15,15),
-        getTotalMins(15,40),
-        getTotalMins(16,5),
-        getTotalMins(16,20),
-        getTotalMins(16,40),
-        getTotalMins(17,0),
-        getTotalMins(17,15),
-        getTotalMins(17,40),
-        getTotalMins(18,5),
+        getTotalMins(9, 15),
+        getTotalMins(9, 45),
+        getTotalMins(10, 10),
+        getTotalMins(10, 35),
+        getTotalMins(10, 45),
+        getTotalMins(11, 20),
+        getTotalMins(11, 50),
+        getTotalMins(12, 5),
+        getTotalMins(12, 15),
+        getTotalMins(12, 45),
+        getTotalMins(13, 15),
+        getTotalMins(13, 45),
+        getTotalMins(14, 0),
+        getTotalMins(14, 15),
+        getTotalMins(14, 35),
+        getTotalMins(14, 50),
+        getTotalMins(15, 15),
+        getTotalMins(15, 40),
+        getTotalMins(16, 5),
+        getTotalMins(16, 20),
+        getTotalMins(16, 40),
+        getTotalMins(17, 0),
+        getTotalMins(17, 15),
+        getTotalMins(17, 40),
+        getTotalMins(18, 5),
       ],
       // Remarks written in the pdf file.
       remarks_jp: {
         [getTotalMins(
           12,
           5
-        ).toString()]:
-          "西早稲田キャンパス経由先端生命医科学センター行き。先端先端生命医科学センターは降車のみ。乗車はできません。",
+        ).toString()]: "西早稲田キャンパス経由先端生命医科学センター行き。先端先端生命医科学センターは降車のみ。乗車はできません。",
         [getTotalMins(
           12,
           15
-        ).toString()]:
-          "先端生命医科学センター経由西早稲田キャンパス行き。先端先端生命医科学センターは降車のみ。乗車はできません。",
-        [getTotalMins(
-          14,
-          50
-        ).toString()]:
-          "中型バスとマイクロバスの運行",
-        [getTotalMins(
-          16,
-          40
-        ).toString()]:
-          "中型バスとマイクロバスの運行",
-        [getTotalMins(
-          18,
-          5
-        ).toString()]:
-          "中型バスとマイクロバスの運行"
+        ).toString()]: "先端生命医科学センター経由西早稲田キャンパス行き。先端先端生命医科学センターは降車のみ。乗車はできません。",
+        [getTotalMins(14, 50).toString()]: "中型バスとマイクロバスの運行",
+        [getTotalMins(16, 40).toString()]: "中型バスとマイクロバスの運行",
+        [getTotalMins(18, 5).toString()]: "中型バスとマイクロバスの運行",
       },
       remarks_en: {
         [getTotalMins(
           12,
           5
-        ).toString()]:
-          "To TWIns via Nishiwaseda campus. Get-offs ONLY at TWIns. The stop is located at 'Tokyo Joshiidaimae'.",
+        ).toString()]: "To TWIns via Nishiwaseda campus. Get-offs ONLY at TWIns. The stop is located at 'Tokyo Joshiidaimae'.",
         [getTotalMins(
           12,
           15
-        ).toString()]:
-          "To Nishiwaseda campus via TWIns. Get-offs ONLY at TWIns. The stop is located at 'Tokyo Joshiidaimae'.",
+        ).toString()]: "To Nishiwaseda campus via TWIns. Get-offs ONLY at TWIns. The stop is located at 'Tokyo Joshiidaimae'.",
         [getTotalMins(
           14,
           50
-        ).toString()]:
-          "Operation of middle-size bus and minibus.",
+        ).toString()]: "Operation of middle-size bus and minibus.",
         [getTotalMins(
           16,
           40
-        ).toString()]:
-          "Operation of middle-size bus and minibus.",
+        ).toString()]: "Operation of middle-size bus and minibus.",
         [getTotalMins(
           18,
           5
-        ).toString()]:
-          "Operation of middle-size bus and minibus."
-      }
+        ).toString()]: "Operation of middle-size bus and minibus.",
+      },
     },
     fromNishiWasedaToWaseda: {
       occurrences: [
-        getTotalMins(9,15),
-        getTotalMins(9,45),
-        getTotalMins(10,10),
-        getTotalMins(10,35),
-        getTotalMins(10,45),
-        getTotalMins(11,5),
-        getTotalMins(11,40),
-        getTotalMins(12,5),
-        getTotalMins(12,20),
-        getTotalMins(12,45),
-        getTotalMins(13,0),
-        getTotalMins(13,30),
-        getTotalMins(14,0),
-        getTotalMins(14,15),
-        getTotalMins(14,35),
-        getTotalMins(14,50),
-        getTotalMins(15,15),
-        getTotalMins(15,40),
-        getTotalMins(16,5),
-        getTotalMins(16,20),
-        getTotalMins(16,40),
-        getTotalMins(17,0),
-        getTotalMins(17,15),
-        getTotalMins(17,40),
-        getTotalMins(18,5),
-        getTotalMins(18,20),
+        getTotalMins(9, 15),
+        getTotalMins(9, 45),
+        getTotalMins(10, 10),
+        getTotalMins(10, 35),
+        getTotalMins(10, 45),
+        getTotalMins(11, 5),
+        getTotalMins(11, 40),
+        getTotalMins(12, 5),
+        getTotalMins(12, 20),
+        getTotalMins(12, 45),
+        getTotalMins(13, 0),
+        getTotalMins(13, 30),
+        getTotalMins(14, 0),
+        getTotalMins(14, 15),
+        getTotalMins(14, 35),
+        getTotalMins(14, 50),
+        getTotalMins(15, 15),
+        getTotalMins(15, 40),
+        getTotalMins(16, 5),
+        getTotalMins(16, 20),
+        getTotalMins(16, 40),
+        getTotalMins(17, 0),
+        getTotalMins(17, 15),
+        getTotalMins(17, 40),
+        getTotalMins(18, 5),
+        getTotalMins(18, 20),
       ],
       remarks_en: {
         [getTotalMins(
           12,
           5
-        ).toString()]:
-          "To TWIns via Waseda campus. Get-offs ONLY at TWIns. The stop is located at 'Tokyo Joshiidaimae'.",
+        ).toString()]: "To TWIns via Waseda campus. Get-offs ONLY at TWIns. The stop is located at 'Tokyo Joshiidaimae'.",
         [getTotalMins(
           12,
           20
-        ).toString()]:
-          "To Waseda campus via TWIns. Get-offs ONLY at TWIns. The stop is located at 'Tokyo Joshiidaimae'.",
+        ).toString()]: "To Waseda campus via TWIns. Get-offs ONLY at TWIns. The stop is located at 'Tokyo Joshiidaimae'.",
         [getTotalMins(
           14,
           35
-        ).toString()]:
-          "Operation of middle-size bus and minibus.",
+        ).toString()]: "Operation of middle-size bus and minibus.",
         [getTotalMins(
           16,
           20
-        ).toString()]:
-          "Operation of middle-size bus and minibus.",
+        ).toString()]: "Operation of middle-size bus and minibus.",
         [getTotalMins(
           18,
           20
-        ).toString()]:
-          "Operation of middle-size bus and minibus. Possibility of early/late departure."
+        ).toString()]: "Operation of middle-size bus and minibus. Possibility of early/late departure.",
       },
       remarks_jp: {
         [getTotalMins(
           12,
           5
-        ).toString()]:
-          "早稲田キャンパス経由行き。先端先端生命医科学センターは降車のみ。乗車はできません。",
+        ).toString()]: "早稲田キャンパス経由行き。先端先端生命医科学センターは降車のみ。乗車はできません。",
         [getTotalMins(
           12,
           20
-        ).toString()]:
-          "先端生命医科学センター経由早稲田キャンパス行き。先端先端生命医科学センターは降車のみ。乗車はできません。",
-        [getTotalMins(
-          14,
-          35
-        ).toString()]:
-          "中型バスとマイクロバスの運行",
-        [getTotalMins(
-          16,
-          20
-        ).toString()]: "中型バスとマイクロバスの運行",
+        ).toString()]: "先端生命医科学センター経由早稲田キャンパス行き。先端先端生命医科学センターは降車のみ。乗車はできません。",
+        [getTotalMins(14, 35).toString()]: "中型バスとマイクロバスの運行",
+        [getTotalMins(16, 20).toString()]: "中型バスとマイクロバスの運行",
         [getTotalMins(
           18,
           20
-        ).toString()]:
-          "中型バスとマイクロバスの運行。出発時間は目安になります。"
-      }
-    }
+        ).toString()]: "中型バスとマイクロバスの運行。出発時間は目安になります。",
+      },
+    },
   },
   // Saturday schedule
   saturday: {
     fromWasedaToNishiWaseda: {
       occurrences: [
         //560, 620, 650, 690, 720, 750, 825, 855, 890, 950, 995
-        getTotalMins(9,20),
-        getTotalMins(10,20),
-        getTotalMins(10,50),
-        getTotalMins(11,30),
-        getTotalMins(12,0),
-        getTotalMins(12,30),
-        getTotalMins(13,45),
-        getTotalMins(14,15),
-        getTotalMins(14,50),
-        getTotalMins(15,50),
-        getTotalMins(16,35),
+        getTotalMins(9, 20),
+        getTotalMins(10, 20),
+        getTotalMins(10, 50),
+        getTotalMins(11, 30),
+        getTotalMins(12, 0),
+        getTotalMins(12, 30),
+        getTotalMins(13, 45),
+        getTotalMins(14, 15),
+        getTotalMins(14, 50),
+        getTotalMins(15, 50),
+        getTotalMins(16, 35),
       ],
       remarks_en: {},
-      remarks_jp: {}
+      remarks_jp: {},
     },
     fromNishiWasedaToWaseda: {
       occurrences: [
         // 575, 635, 665, 705, 735, 765, 840, 875, 920, 980
-        getTotalMins(9,35),
-        getTotalMins(10,35),
-        getTotalMins(11,5),
-        getTotalMins(11,45),
-        getTotalMins(12,15),
-        getTotalMins(12,45),
-        getTotalMins(14,0),
-        getTotalMins(14,35),
-        getTotalMins(15,20),
-        getTotalMins(16,15),
-        ],
+        getTotalMins(9, 35),
+        getTotalMins(10, 35),
+        getTotalMins(11, 5),
+        getTotalMins(11, 45),
+        getTotalMins(12, 15),
+        getTotalMins(12, 45),
+        getTotalMins(14, 0),
+        getTotalMins(14, 35),
+        getTotalMins(15, 20),
+        getTotalMins(16, 15),
+      ],
       remarks_en: {},
-      remarks_jp: {}
-    }
+      remarks_jp: {},
+    },
   },
   // Special schedules
   exceptions: {
@@ -219,8 +185,8 @@ export const busSchedule = {
       // Month is 0-based. So "0" is January and "11" is December.
       // Date is 1-based. So 1 is the first date of the month.
       // E.g., "0": [1,2,3,4,5] means January 01 to Janurary 05.
-      "0": [1, 2, 3, 4],
-      "1": [
+      0: [1, 2, 3, 4],
+      1: [
         5,
         6,
         7,
@@ -239,12 +205,12 @@ export const busSchedule = {
         20,
         21,
         22,
-        29
+        29,
       ],
-      "2": [7,14,21,25,28],
-      "3": [1],
-      "4": [1, 2],
-      "7": [
+      2: [7, 14, 21, 25, 28],
+      3: [1],
+      4: [1, 2],
+      7: [
         5,
         6,
         7,
@@ -271,24 +237,24 @@ export const busSchedule = {
         28,
         29,
         30,
-        31
+        31,
       ],
-      "8": [7],
-      "10": [1],
-      "11": [28, 29, 30, 31]
+      8: [7],
+      10: [1],
+      11: [28, 29, 30, 31],
     },
     weekdaySchedule: {
-      "4": [6],
-      "6": [15],
-      "9": [14]
+      4: [6],
+      6: [15],
+      9: [14],
     },
     specialSchedule: {
-      "7": [3, 4],
-      "10": [2, 3],
+      7: [3, 4],
+      10: [2, 3],
     },
     saturdaySchedule: {
-      "1": [25, 26, 27, 28, 29],
-      "2": [
+      1: [25, 26, 27, 28, 29],
+      2: [
         1,
         2,
         3,
@@ -312,10 +278,10 @@ export const busSchedule = {
         21,
         22,
         23,
-        24
+        24,
       ],
-      "8": [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
-      "11": [24, 25, 26, 27]
-    }
-  }
+      8: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
+      11: [24, 25, 26, 27],
+    },
+  },
 };
diff --git a/client/src/js/data/colors.js b/client/src/js/data/colors.js
index 208d09902..602ac88d9 100644
--- a/client/src/js/data/colors.js
+++ b/client/src/js/data/colors.js
@@ -6,5 +6,5 @@ export const courseColors = [
   "blue",
   "purple",
   "brown",
-  "black"
+  "black",
 ];
diff --git a/client/src/js/data/schema.js b/client/src/js/data/schema.js
index 24fe8d2e0..1255ce57c 100644
--- a/client/src/js/data/schema.js
+++ b/client/src/js/data/schema.js
@@ -1,22 +1,22 @@
-import { schema } from 'normalizr';
+import { schema } from "normalizr";
 
-const courseSchema = new schema.Entity('courses', {}, { idAttribute: '_id' });
+const courseSchema = new schema.Entity("courses", {}, { idAttribute: "_id" });
 
 export const coursesSchema = [courseSchema];
 
 //{ _id: '51', name: '51' }
 const buildingSchema = new schema.Entity(
-  'buildings',
+  "buildings",
   {},
-  { idAttribute: '_id' }
+  { idAttribute: "_id" }
 );
 //shorthand syntax for new schema.Array(bldgSchema)
 export const buildingsSchema = [buildingSchema];
 // { id: "51-04-05", name: "04-05" }
 const buildingClassroomSchema = new schema.Entity(
-  'classrooms',
+  "classrooms",
   {},
-  { idAttribute: 'id' }
+  { idAttribute: "id" }
 );
 
 export const buildingClassroomsSchema = [buildingClassroomSchema];
@@ -30,17 +30,17 @@ export const buildingClassroomsSchema = [buildingClassroomSchema];
 //   }
 // }
 const occupiedClassroomSchema = new schema.Entity(
-  'occupiedClassrooms',
+  "occupiedClassrooms",
   {},
   {
-    idAttribute: '_id',
-    processStrategy: entity => {
+    idAttribute: "_id",
+    processStrategy: (entity) => {
       return {
         id: entity._id,
         name: entity.name,
-        courses: entity.courses
+        courses: entity.courses,
       };
-    }
+    },
   }
 );
 
diff --git a/client/src/js/data/semesters.js b/client/src/js/data/semesters.js
index 7d7e158e5..15bf5a823 100644
--- a/client/src/js/data/semesters.js
+++ b/client/src/js/data/semesters.js
@@ -17,7 +17,7 @@ export const springSemesterMap = {
   intensiveSummer: "Intensive: Summer",
   springSummer: "Spring & Summer",
 
-  undecided: "undecided"
+  undecided: "undecided",
 };
 
 export const fallSemesterMap = {
@@ -34,12 +34,12 @@ export const fallSemesterMap = {
   intensiveWinter: "Intensive: Winter",
   fallWinter: "Fall & Winter",
 
-  undecided: "undecided"
+  undecided: "undecided",
 };
 
 export const semesterMap = {
   ...springSemesterMap,
-  ...fallSemesterMap
+  ...fallSemesterMap,
 };
 
 export const springSemesters = Object.keys(springSemesterMap);
diff --git a/client/src/js/data/sortingOptions.js b/client/src/js/data/sortingOptions.js
index 7ee4fa46b..704909e2a 100644
--- a/client/src/js/data/sortingOptions.js
+++ b/client/src/js/data/sortingOptions.js
@@ -1,4 +1,3 @@
-export const ADDED_ORDER = 'ADDED_ORDER';
-export const COURSE_TITLE = 'COURSE_TITLE';
-export const COURSE_TIME = 'COURSE_TIME';
-
+export const ADDED_ORDER = "ADDED_ORDER";
+export const COURSE_TITLE = "COURSE_TITLE";
+export const COURSE_TIME = "COURSE_TIME";
diff --git a/client/src/js/ga/eventCategories.js b/client/src/js/ga/eventCategories.js
index 621e0aec4..8530441b3 100644
--- a/client/src/js/ga/eventCategories.js
+++ b/client/src/js/ga/eventCategories.js
@@ -2,6 +2,7 @@ export const gaFetchedCourseItem = "FetchedCourseItem";
 export const gaAddedCourseItem = "AddedCourseItem";
 export const gaAddedCourseAndPrefItem = "AddedCourseAndPrefItem";
 export const gaFilter = "Filter";
+export const gaRelatedCourses = "RelatedCourses";
 export const gaLanguage = "Language";
 export const gaBus = "Bus";
 export const gaSortBy = "SortBy";
diff --git a/client/src/js/hocs/withFetchCourses.js b/client/src/js/hocs/withFetchCourses.js
index c88545ace..4c56ef548 100644
--- a/client/src/js/hocs/withFetchCourses.js
+++ b/client/src/js/hocs/withFetchCourses.js
@@ -6,19 +6,19 @@ import {
   getIsFetching,
   getFetchedIds,
   getFetchedById,
-  getError
+  getError,
 } from "../reducers/fetchedCourses";
 import {
   getAddedCourses,
   getIsAddedCoursesEmpty,
   getPrefs,
   getIsPrefsEmpty,
-  getAddedCoursesAndPrefs
+  getAddedCoursesAndPrefs,
 } from "../reducers/addedCourses";
 import LoadingSpinner from "../components/LoadingSpinner";
 import FetchError from "../components/FetchError";
 
-const withFetchCourses = WrappedComponent => {
+const withFetchCourses = (WrappedComponent) => {
   class WithFetchCoursesComponent extends React.Component {
     componentDidMount() {
       if (!this.props.fetchedCourseIds.length) {
@@ -33,7 +33,7 @@ const withFetchCourses = WrappedComponent => {
         isPrefsEmpty,
         fetchedCourseIds,
         fetchedCoursesById,
-        hydrateAddedCourses
+        hydrateAddedCourses,
       } = this.props;
       // if prefs is not empty, addedCourses is empty, and courses are fetched
       if (!isPrefsEmpty && isAddedCoursesEmpty && fetchedCourseIds.length) {
@@ -56,20 +56,25 @@ const withFetchCourses = WrappedComponent => {
       } = this.props;
 
       if (isFetching && !fetchedCourseIds.length) {
-        return <LoadingSpinner message={""} />;
+        return <LoadingSpinner message={"Loading the lastest syllabus..."} />;
       }
       if (error && !fetchedCourseIds.length) {
         return <FetchError onRetry={fetchCourses} />;
       }
       if (!isPrefsEmpty && isAddedCoursesEmpty) {
-        return <LoadingSpinner message={"Initializing your added courses"} />;
+        return (
+          <LoadingSpinner message={"Initializing your added courses..."} />
+        );
       }
 
-      const fetchedCourses = fetchedCourseIds.map(id => fetchedCoursesById[id]);
+      const fetchedCourses = fetchedCourseIds.map(
+        (id) => fetchedCoursesById[id]
+      );
 
       return (
         <WrappedComponent
           fetchedCourses={fetchedCourses}
+          fetchedCoursesById={fetchedCoursesById}
           addedCourses={addedCourses}
           addedCoursesAndPrefs={addedCoursesAndPrefs}
           {...rest}
@@ -78,7 +83,7 @@ const withFetchCourses = WrappedComponent => {
     }
   }
 
-  const mapStateToProps = state => {
+  const mapStateToProps = (state) => {
     return {
       isFetching: getIsFetching(state.fetchedCourses),
       fetchedCourseIds: getFetchedIds(state.fetchedCourses),
@@ -88,13 +93,13 @@ const withFetchCourses = WrappedComponent => {
       isAddedCoursesEmpty: getIsAddedCoursesEmpty(state.addedCourses),
       prefs: getPrefs(state.addedCourses),
       isPrefsEmpty: getIsPrefsEmpty(state.addedCourses),
-      addedCoursesAndPrefs: getAddedCoursesAndPrefs(state.addedCourses)
+      addedCoursesAndPrefs: getAddedCoursesAndPrefs(state.addedCourses),
     };
   };
 
   const mapDispatchToProps = {
     fetchCourses,
-    hydrateAddedCourses
+    hydrateAddedCourses,
   };
 
   return connect(
diff --git a/client/src/js/reducers/addedById.js b/client/src/js/reducers/addedById.js
index 0fbc49d44..b9610c51c 100644
--- a/client/src/js/reducers/addedById.js
+++ b/client/src/js/reducers/addedById.js
@@ -1,8 +1,8 @@
 import {
   HYDRATE_ADDED_COURSES,
   ADD_COURSE,
-  REMOVE_COURSE
-} from '../actions/types';
+  REMOVE_COURSE,
+} from "../actions/types";
 
 const addedById = (state = {}, action) => {
   switch (action.type) {
@@ -17,16 +17,16 @@ const addedById = (state = {}, action) => {
           : {
               ...acc,
               [pref.id]: {
-                ...action.payload.fetchedCoursesById[pref.id]
-              }
+                ...action.payload.fetchedCoursesById[pref.id],
+              },
             };
       }, {});
     case ADD_COURSE:
       return {
         ...state,
         [action.payload.id]: {
-          ...action.payload.course
-        }
+          ...action.payload.course,
+        },
       };
     case REMOVE_COURSE:
       const { [action.payload.id]: value, ...rest } = state;
diff --git a/client/src/js/reducers/addedCoursePrefs.js b/client/src/js/reducers/addedCoursePrefs.js
index b5c889e53..d2dbcc6c4 100644
--- a/client/src/js/reducers/addedCoursePrefs.js
+++ b/client/src/js/reducers/addedCoursePrefs.js
@@ -3,7 +3,7 @@ import {
   ADD_COURSE,
   REMOVE_COURSE,
   CHANGE_COURSE_COLOR,
-  TOGGLE_COURSE_VISIBILITY
+  TOGGLE_COURSE_VISIBILITY,
 } from "../actions/types";
 
 const addedCoursePrefs = (state = [], action) => {
@@ -11,7 +11,7 @@ const addedCoursePrefs = (state = [], action) => {
     case HYDRATE_ADDED_COURSES:
       //Remove coursePref whose id doesn't match to any courses
       //due to course key udpates in waseda official syllabus
-      return state.filter(coursePref => {
+      return state.filter((coursePref) => {
         return action.payload.fetchedCoursesById[coursePref.id] !== undefined;
       });
     case ADD_COURSE:
@@ -21,19 +21,19 @@ const addedCoursePrefs = (state = [], action) => {
           id: action.payload.id,
           color: state.length % 8,
           visibility: true,
-          displayLang: action.payload.displayLang
-        }
+          displayLang: action.payload.displayLang,
+        },
       ];
     case REMOVE_COURSE:
-      return state.filter(coursePref => coursePref.id !== action.payload.id);
+      return state.filter((coursePref) => coursePref.id !== action.payload.id);
     case CHANGE_COURSE_COLOR:
-      return state.map(coursePref =>
+      return state.map((coursePref) =>
         coursePref.id === action.payload.id
           ? { ...coursePref, color: action.payload.color }
           : coursePref
       );
     case TOGGLE_COURSE_VISIBILITY:
-      return state.map(coursePref =>
+      return state.map((coursePref) =>
         coursePref.id === action.payload.id
           ? { ...coursePref, visibility: !coursePref.visibility }
           : coursePref
@@ -45,4 +45,4 @@ const addedCoursePrefs = (state = [], action) => {
 
 export default addedCoursePrefs;
 
-export const getId = property => property.id;
+export const getId = (property) => property.id;
diff --git a/client/src/js/reducers/addedCourses.js b/client/src/js/reducers/addedCourses.js
index a5d608ca5..aab7b2a8f 100644
--- a/client/src/js/reducers/addedCourses.js
+++ b/client/src/js/reducers/addedCourses.js
@@ -1,12 +1,12 @@
-import { combineReducers } from 'redux';
+import { combineReducers } from "redux";
 
 import {
   HYDRATE_ADDED_COURSES,
   ADD_COURSE,
-  CHANGE_COURSES_SORTING_OPTION
-} from '../actions/types';
-import addedSemesterCourses, * as fromSemesterCourses from './addedSemesterCourses';
-import { fallSemesters, springSemesters } from '../data/semesters';
+  CHANGE_COURSES_SORTING_OPTION,
+} from "../actions/types";
+import addedSemesterCourses, * as fromSemesterCourses from "./addedSemesterCourses";
+import { fallSemesters, springSemesters } from "../data/semesters";
 
 // Higher-order reducer.
 // https://redux.js.org/recipes/structuringreducers/reusingreducerlogic
@@ -29,7 +29,7 @@ const createSemesterWrapperReducer = (
         const { prefs, ...payloadRest } = payload;
         const newPayload = {
           prefs: payload.prefs[reducerName],
-          ...payloadRest
+          ...payloadRest,
         };
         const newAction = { payload: newPayload, ...actionRest };
         return reducerFunction(state, newAction);
@@ -47,48 +47,48 @@ const createSemesterWrapperReducer = (
 const addedCourses = combineReducers({
   fall: createSemesterWrapperReducer(
     addedSemesterCourses,
-    'fall',
+    "fall",
     fallSemesters
   ),
   spring: createSemesterWrapperReducer(
     addedSemesterCourses,
-    'spring',
+    "spring",
     springSemesters
-  )
+  ),
 });
 
 export default addedCourses;
 
-export const getPrefs = state => ({
+export const getPrefs = (state) => ({
   fall: fromSemesterCourses.getPrefs(state.fall),
-  spring: fromSemesterCourses.getPrefs(state.spring)
+  spring: fromSemesterCourses.getPrefs(state.spring),
 });
 
-export const getIsPrefsEmpty = state => {
+export const getIsPrefsEmpty = (state) => {
   return (
     !fromSemesterCourses.getPrefs(state.fall).length &&
     !fromSemesterCourses.getPrefs(state.spring).length
   );
 };
 
-export const getAddedCourses = state => ({
+export const getAddedCourses = (state) => ({
   fall: fromSemesterCourses.getAddedCourses(state.fall),
-  spring: fromSemesterCourses.getAddedCourses(state.spring)
+  spring: fromSemesterCourses.getAddedCourses(state.spring),
 });
 
-export const getIsAddedCoursesEmpty = state => {
+export const getIsAddedCoursesEmpty = (state) => {
   return (
     !fromSemesterCourses.getAddedCourses(state.fall).length &&
     !fromSemesterCourses.getAddedCourses(state.spring).length
   );
 };
 
-export const getAddedCoursesAndPrefs = state => ({
+export const getAddedCoursesAndPrefs = (state) => ({
   fall: fromSemesterCourses.getAddedCoursesAndPrefs(state.fall),
-  spring: fromSemesterCourses.getAddedCoursesAndPrefs(state.spring)
+  spring: fromSemesterCourses.getAddedCoursesAndPrefs(state.spring),
 });
 
-export const getById = state => ({
+export const getById = (state) => ({
   ...fromSemesterCourses.getById(state.fall),
-  ...fromSemesterCourses.getById(state.spring)
+  ...fromSemesterCourses.getById(state.spring),
 });
diff --git a/client/src/js/reducers/addedSemesterCourses.js b/client/src/js/reducers/addedSemesterCourses.js
index 7bff679c2..d21bf91fc 100644
--- a/client/src/js/reducers/addedSemesterCourses.js
+++ b/client/src/js/reducers/addedSemesterCourses.js
@@ -1,38 +1,38 @@
-import { combineReducers } from 'redux';
+import { combineReducers } from "redux";
 
-import addedById, * as fromById from './addedById';
-import addedCoursePrefs, * as fromPrefs from './addedCoursePrefs';
-import sortingOption, * as fromSortingOption from './sortingOption';
+import addedById, * as fromById from "./addedById";
+import addedCoursePrefs, * as fromPrefs from "./addedCoursePrefs";
+import sortingOption, * as fromSortingOption from "./sortingOption";
 
 const addedSemesterCourses = combineReducers({
   prefs: addedCoursePrefs,
   byId: addedById,
-  sortingOption: sortingOption
+  sortingOption: sortingOption,
 });
 
 export default addedSemesterCourses;
 
-export const getPrefs = state => state.prefs;
+export const getPrefs = (state) => state.prefs;
 
-export const getById = state => state.byId;
+export const getById = (state) => state.byId;
 
-export const getAddedCourses = state => {
+export const getAddedCourses = (state) => {
   if (!Object.keys(state.byId).length) return [];
-  return state.prefs.map(pref =>
+  return state.prefs.map((pref) =>
     fromById.getItem(state.byId, fromPrefs.getId(pref))
   );
 };
 
-export const getAddedCoursesAndPrefs = state => {
+export const getAddedCoursesAndPrefs = (state) => {
   if (!Object.keys(state.byId).length) return [];
-  return state.prefs.map(pref => {
+  return state.prefs.map((pref) => {
     return {
       ...pref,
-      course: fromById.getItem(state.byId, fromPrefs.getId(pref))
+      course: fromById.getItem(state.byId, fromPrefs.getId(pref)),
     };
   });
 };
 
-export const getSortingOption = state => {
+export const getSortingOption = (state) => {
   return fromSortingOption.getSortingOption(state.sortingOption);
 };
diff --git a/client/src/js/reducers/fetchedBuildings.js b/client/src/js/reducers/fetchedBuildings.js
index 3c8259a16..dc95dd07d 100644
--- a/client/src/js/reducers/fetchedBuildings.js
+++ b/client/src/js/reducers/fetchedBuildings.js
@@ -1,38 +1,38 @@
-import { combineReducers } from 'redux';
+import { combineReducers } from "redux";
 
 import {
   FETCH_BUILDINGS_REQUEST,
   FETCH_BUILDINGS_SUCCESS,
-  FETCH_BUILDINGS_FAILURE
-} from '../actions/types';
-import list, * as fromList from './fetchedList';
-import byId, * as fromById from './fetchedById';
+  FETCH_BUILDINGS_FAILURE,
+} from "../actions/types";
+import list, * as fromList from "./fetchedList";
+import byId, * as fromById from "./fetchedById";
 
 const actionTypes = {
   fetchRequest: FETCH_BUILDINGS_REQUEST,
   fetchSuccess: FETCH_BUILDINGS_SUCCESS,
-  fetchFailure: FETCH_BUILDINGS_FAILURE
+  fetchFailure: FETCH_BUILDINGS_FAILURE,
 };
 
 const buildings = combineReducers({
   list: list(actionTypes),
-  byId: byId('buildings', actionTypes)
+  byId: byId("buildings", actionTypes),
 });
 
 export default buildings;
 
 export const getBuildings = (state, filterArray) => {
   const ids = fromList.getIds(state.list);
-  const buildings = ids.map(id => fromById.getItem(state.byId, id));
-  return buildings.filter(building => {
+  const buildings = ids.map((id) => fromById.getItem(state.byId, id));
+  return buildings.filter((building) => {
     return filterArray.includes(building.name);
   });
 };
 
-export const getIsFetching = state => {
+export const getIsFetching = (state) => {
   return fromList.getIsFetching(state.list);
 };
 
-export const getError = state => {
+export const getError = (state) => {
   return fromList.getError(state.list);
 };
diff --git a/client/src/js/reducers/fetchedCourses.js b/client/src/js/reducers/fetchedCourses.js
index 6aea89404..ffc32d00b 100644
--- a/client/src/js/reducers/fetchedCourses.js
+++ b/client/src/js/reducers/fetchedCourses.js
@@ -1,34 +1,34 @@
-import { combineReducers } from 'redux';
+import { combineReducers } from "redux";
 
 import {
   FETCH_COURSES_REQUEST,
   FETCH_COURSES_SUCCESS,
-  FETCH_COURSES_FAILURE
-} from '../actions/types';
-import fetchedList, * as fromList from './fetchedList';
-import fetchedById from './fetchedById';
+  FETCH_COURSES_FAILURE,
+} from "../actions/types";
+import fetchedList, * as fromList from "./fetchedList";
+import fetchedById from "./fetchedById";
 
 const actionTypes = {
   fetchRequest: FETCH_COURSES_REQUEST,
   fetchSuccess: FETCH_COURSES_SUCCESS,
-  fetchFailure: FETCH_COURSES_FAILURE
+  fetchFailure: FETCH_COURSES_FAILURE,
 };
 
 const fetchedCourses = combineReducers({
   list: fetchedList(actionTypes),
-  byId: fetchedById('courses', actionTypes)
+  byId: fetchedById("courses", actionTypes),
 });
 
 export default fetchedCourses;
 
-export const getFetchedIds = state => fromList.getIds(state.list);
+export const getFetchedIds = (state) => fromList.getIds(state.list);
 
-export const getFetchedById = state => state.byId;
+export const getFetchedById = (state) => state.byId;
 
-export const getIsFetching = state => {
+export const getIsFetching = (state) => {
   return fromList.getIsFetching(state.list);
 };
 
-export const getError = state => {
+export const getError = (state) => {
   return fromList.getError(state.list);
 };
diff --git a/client/src/js/reducers/fetchedLanguage.js b/client/src/js/reducers/fetchedLanguage.js
index dd64e4565..73f4f7494 100644
--- a/client/src/js/reducers/fetchedLanguage.js
+++ b/client/src/js/reducers/fetchedLanguage.js
@@ -1,8 +1,6 @@
-import { combineReducers } from 'redux';
+import { combineReducers } from "redux";
 
-import {
-  UPDATE_LANGUAGE
-} from '../actions/types';
+import { UPDATE_LANGUAGE } from "../actions/types";
 
 const getLanguage = (state = {}, action) => {
   switch (action.type) {
diff --git a/client/src/js/reducers/fetchedList.js b/client/src/js/reducers/fetchedList.js
index 939079d22..5e75a5e56 100644
--- a/client/src/js/reducers/fetchedList.js
+++ b/client/src/js/reducers/fetchedList.js
@@ -1,6 +1,6 @@
-import { combineReducers } from 'redux';
+import { combineReducers } from "redux";
 
-const fetchedList = actionTypes => {
+const fetchedList = (actionTypes) => {
   const ids = (state = [], action) => {
     switch (action.type) {
       case actionTypes.fetchSuccess:
@@ -22,6 +22,15 @@ const fetchedList = actionTypes => {
     }
   };
 
+  const fetchedTime = (state = null, action) => {
+    switch (action.type) {
+      case actionTypes.fetchSuccess:
+        return action.response.fetchedTime;
+      default:
+        return state;
+    }
+  };
+
   const error = (state = null, action) => {
     switch (action.type) {
       case actionTypes.fetchFailure:
@@ -33,11 +42,11 @@ const fetchedList = actionTypes => {
         return state;
     }
   };
-  return combineReducers({ ids, isFetching, error });
+  return combineReducers({ ids, isFetching, fetchedTime, error });
 };
 
 export default fetchedList;
 
-export const getIds = state => state.ids;
-export const getIsFetching = state => state.isFetching;
-export const getError = state => state.error;
+export const getIds = (state) => state.ids;
+export const getIsFetching = (state) => state.isFetching;
+export const getError = (state) => state.error;
diff --git a/client/src/js/reducers/index.js b/client/src/js/reducers/index.js
index 27565a6ed..4ef19e534 100644
--- a/client/src/js/reducers/index.js
+++ b/client/src/js/reducers/index.js
@@ -1,17 +1,17 @@
-import { combineReducers } from 'redux';
+import { combineReducers } from "redux";
 
-import stats from './stats';
-import fetchedCourses from './fetchedCourses';
-import fetchedBuildings from './fetchedBuildings';
-import addedCourses from './addedCourses';
-import user from './user';
+import stats from "./stats";
+import fetchedCourses from "./fetchedCourses";
+import fetchedBuildings from "./fetchedBuildings";
+import addedCourses from "./addedCourses";
+import user from "./user";
 
 const app = combineReducers({
   stats,
   fetchedCourses,
   fetchedBuildings,
   addedCourses,
-  user
+  user,
 });
 
 export default app;
diff --git a/client/src/js/reducers/sortingOption.js b/client/src/js/reducers/sortingOption.js
index 6a34ab8ef..6165780ce 100644
--- a/client/src/js/reducers/sortingOption.js
+++ b/client/src/js/reducers/sortingOption.js
@@ -1,5 +1,5 @@
-import { ADDED_ORDER } from '../data/sortingOptions';
-import { CHANGE_COURSES_SORTING_OPTION } from '../actions/types';
+import { ADDED_ORDER } from "../data/sortingOptions";
+import { CHANGE_COURSES_SORTING_OPTION } from "../actions/types";
 
 const sortingOption = (state = ADDED_ORDER, action) => {
   switch (action.type) {
@@ -12,4 +12,4 @@ const sortingOption = (state = ADDED_ORDER, action) => {
 
 export default sortingOption;
 
-export const getSortingOption = state => state;
+export const getSortingOption = (state) => state;
diff --git a/client/src/js/reducers/stats.js b/client/src/js/reducers/stats.js
index e96b328b4..e4c9e01ba 100644
--- a/client/src/js/reducers/stats.js
+++ b/client/src/js/reducers/stats.js
@@ -1,10 +1,10 @@
-import { combineReducers } from 'redux';
+import { combineReducers } from "redux";
 
 import {
   FETCH_STATS_REQUEST,
   FETCH_STATS_SUCCESS,
-  FETCH_STATS_FAILURE
-} from '../actions/types';
+  FETCH_STATS_FAILURE,
+} from "../actions/types";
 
 //TODO Think about a way of abstracting list and stats into one reusable reducer.
 //TODO Perhaps combine is Fetching, error into one reducer called status?
@@ -42,10 +42,10 @@ const error = (state = null, action) => {
   }
 };
 
-const stats =  combineReducers({ info, isFetching, error });
+const stats = combineReducers({ info, isFetching, error });
 
 export default stats;
 
-export const getInfo = state => state.info;
-export const getIsFetching = state => state.isFetching;
-export const getError = state => state.error;
+export const getInfo = (state) => state.info;
+export const getIsFetching = (state) => state.isFetching;
+export const getError = (state) => state.error;
diff --git a/client/src/js/reducers/user.js b/client/src/js/reducers/user.js
index 78d613321..0b2aa963e 100644
--- a/client/src/js/reducers/user.js
+++ b/client/src/js/reducers/user.js
@@ -12,11 +12,11 @@ const isFirstTimeAccess = (state = true, action) => {
 };
 
 const user = combineReducers({
-  isFirstTimeAccess
+  isFirstTimeAccess,
 });
 
 export default user;
 
-export const getUserIsFirstTimeAccess = state => {
+export const getUserIsFirstTimeAccess = (state) => {
   return state.user.isFirstTimeAccess;
 };
diff --git a/client/src/js/styled-components/Article.js b/client/src/js/styled-components/Article.js
index ac6ce608c..8e2a9b129 100644
--- a/client/src/js/styled-components/Article.js
+++ b/client/src/js/styled-components/Article.js
@@ -1,25 +1,25 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 
-export const Article = styled('article')`
+export const Article = styled("article")`
   background-color: #fff;
   flex: 1 0 auto;
   font-size: 18px;
   padding: 0.5em 0.7em;
-`
+`;
 
-export const Section = styled('section')`
+export const Section = styled("section")`
   margin-bottom: 1em;
-`
+`;
 
-export const Subheading = styled('h4')`
+export const Subheading = styled("h4")`
   margin: 0;
-`
+`;
 
-export const OList = styled('ol')`
+export const OList = styled("ol")`
   padding-left: 1em;
   margin: 0;
-`
+`;
 
-export const ListItem = styled('li')`
-  margin-top: .2em;
-`
+export const ListItem = styled("li")`
+  margin-top: 0.2em;
+`;
diff --git a/client/src/js/styled-components/Button.js b/client/src/js/styled-components/Button.js
index 3b3e4303a..b70e68d89 100644
--- a/client/src/js/styled-components/Button.js
+++ b/client/src/js/styled-components/Button.js
@@ -1,6 +1,6 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 
-export const Button = styled('button')`
+export const Button = styled("button")`
   padding: 12px;
   margin: 10px 0;
   width: 160px;
@@ -21,7 +21,7 @@ export const Button = styled('button')`
   }
 `;
 
-export const InvisibleButton = styled('button')`
+export const InvisibleButton = styled("button")`
   align-self: flex-start;
   background-color: unset;
   border: none;
@@ -31,3 +31,21 @@ export const InvisibleButton = styled('button')`
   }
   -webkit-tap-highlight-color: transparent;
 `;
+
+export const FloatingActionButton = styled(InvisibleButton)`
+  position: fixed;
+  z-index: 2000;
+  width: ${(props) => props.width};
+  height: 56px;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  background-color: #b51e36;
+  color: white;
+  border-radius: ${(props) => props.borderRadius};
+  bottom: 20px;
+  right: 20px;
+  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.4), 0 6px 10px 0 rgba(0, 0, 0, 0.2),
+    0 1px 18px 0 rgba(0, 0, 0, 0.15);
+  -webkit-tap-highlight-color: transparent;
+`;
diff --git a/client/src/js/styled-components/ColorPopper.js b/client/src/js/styled-components/ColorPopper.js
index 7e132a643..1c3b2ce0f 100644
--- a/client/src/js/styled-components/ColorPopper.js
+++ b/client/src/js/styled-components/ColorPopper.js
@@ -1,10 +1,10 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 
-export const Arrow = styled('div')`
+export const Arrow = styled("div")`
   position: absolute;
   width: 3em;
   height: 3em;
-  &[data-placement*='top'] {
+  &[data-placement*="top"] {
     bottom: 0;
     left: 0;
     margin-bottom: -0.9em;
@@ -16,7 +16,7 @@ export const Arrow = styled('div')`
     }
   }
   &::before {
-    content: '';
+    content: "";
     margin: auto;
     display: block;
     width: 0;
@@ -26,7 +26,7 @@ export const Arrow = styled('div')`
   z-index: 1050;
 `;
 
-export const PopperBox = styled('div')`
+export const PopperBox = styled("div")`
   display: flex;
   flex-direction: column;
   justify-content: center;
diff --git a/client/src/js/styled-components/List.js b/client/src/js/styled-components/List.js
index 52d41eff6..a41cb45ac 100644
--- a/client/src/js/styled-components/List.js
+++ b/client/src/js/styled-components/List.js
@@ -1,6 +1,6 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 
-export const UnstyledUList = styled('ul')`
+export const UnstyledUList = styled("ul")`
   margin: 0;
   padding: 0;
   list-style: none;
diff --git a/client/src/js/styled-components/Overlay.js b/client/src/js/styled-components/Overlay.js
index 3fbec7ea4..f9cd38cd5 100644
--- a/client/src/js/styled-components/Overlay.js
+++ b/client/src/js/styled-components/Overlay.js
@@ -1,8 +1,8 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 
-export const Overlay = styled('div')`
+export const Overlay = styled("div")`
   display: flex;
   flex-direction: column;
   flex: 1 0 auto;
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: #ccc;
 `;
diff --git a/client/src/js/styled-components/SideBar.js b/client/src/js/styled-components/SideBar.js
index b7ef735fa..2589db992 100644
--- a/client/src/js/styled-components/SideBar.js
+++ b/client/src/js/styled-components/SideBar.js
@@ -1,7 +1,7 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 
-export const SideBar = styled('div')`
+export const SideBar = styled("div")`
   display: flex;
   flex-direction: column;
-  flex: ${props => `0 0 ${props.flexBasis};`}
-`
+  flex: ${(props) => `0 0 ${props.flexBasis};`};
+`;
diff --git a/client/src/js/styled-components/Wrapper.js b/client/src/js/styled-components/Wrapper.js
index 76c967027..e63a6b867 100644
--- a/client/src/js/styled-components/Wrapper.js
+++ b/client/src/js/styled-components/Wrapper.js
@@ -1,23 +1,23 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 
-import { media } from '../styled-components/utils';
+import { media } from "../styled-components/utils";
 
-export const Wrapper = styled('div')`
+export const Wrapper = styled("div")`
   display: flex;
   flex-direction: column;
   flex: 1 0 auto;
 `;
 
-export const RowWrapper = styled('div')`
+export const RowWrapper = styled("div")`
   display: flex;
   flex-direction: row;
   flex: 1 0 auto;
 `;
 
 export const WrapperWithBackground = styled(Wrapper)`
-  background-image: url(${props => props.background});
+  background-image: url(${(props) => props.background});
   background-position: center, center;
   background-size: cover;
   background-repeat: no-repeat;
-  ${media.phone`background-image: url(${props => props.backgroundPhone});`};
+  ${media.phone`background-image: url(${(props) => props.backgroundPhone});`};
 `;
diff --git a/client/src/js/styled-components/theme.js b/client/src/js/styled-components/theme.js
index fe50ba352..a473187fd 100644
--- a/client/src/js/styled-components/theme.js
+++ b/client/src/js/styled-components/theme.js
@@ -2,25 +2,25 @@ import {
   headerHeight,
   searchBarHeight,
   addedCourseListSwitchHeight,
-  fetchedCourseListSwitchHeight
-} from './variables';
+  fetchedCourseListSwitchHeight,
+} from "./variables";
 
 // Adapted from https://medium.com/codyhouse/create-your-design-system-part-3-colors-798e4729921f
 const sizes = {
   headerHeight,
   searchBarHeight,
   addedCourseListSwitchHeight,
-  fetchedCourseListSwitchHeight
+  fetchedCourseListSwitchHeight,
 };
 
 const shades = {
-  black: '#000',
-  grey2: '#222',
-  grey4: '#444',
-  grey7: '#777',
-  grey12: '#ccc',
-  grey14: '#eee',
-  white: '#fff'
+  black: "#000",
+  grey2: "#222",
+  grey4: "#444",
+  grey7: "#777",
+  grey12: "#ccc",
+  grey14: "#eee",
+  white: "#fff",
 };
 
 export const normalTheme = {
@@ -28,15 +28,15 @@ export const normalTheme = {
   ...shades,
 
   //main colors
-  colorPrimary: '#b51e36',
+  colorPrimary: "#b51e36",
 
   //declarative colors
-  red: '#ce0115',
-  green: '#48af37',
-  blue: '#6495ed',
+  red: "#ce0115",
+  green: "#48af37",
+  blue: "#6495ed",
 
   //semantic colors
-  timetableBgColor: shades.white
+  timetableBgColor: shades.white,
 };
 
 export const darkTheme = {
@@ -44,12 +44,12 @@ export const darkTheme = {
   ...shades,
 
   //main colors
-  colorPrimary: '#b51e36',
+  colorPrimary: "#b51e36",
 
   //declarative colors
-  red: '#ce0115',
-  green: '#48af37',
-  blue: '#6495ed'
+  red: "#ce0115",
+  green: "#48af37",
+  blue: "#6495ed",
 };
 
 export const timetableTheme = {
@@ -57,20 +57,20 @@ export const timetableTheme = {
   Incredibly useful site:
   https://www.materialpalette.com/colors
   */
-  color0: '#580505',
-  bgColor0: '#ef9a9a',
-  color1: '#862505',
-  bgColor1: '#ffcc80',
-  color2: '#845125',
-  bgColor2: '#fff59d',
-  color3: '#114615',
-  bgColor3: '#a5d6a7',
-  color4: '#0c2a58',
-  bgColor4: '#90caf9',
-  color5: '#221361',
-  bgColor5: '#b39ddb',
-  color6: '#3e2723',
-  bgColor6: '#c7a59a',
-  color7: '#222',
-  bgColor7: '#aaa'
+  color0: "#580505",
+  bgColor0: "#ef9a9a",
+  color1: "#862505",
+  bgColor1: "#ffcc80",
+  color2: "#845125",
+  bgColor2: "#fff59d",
+  color3: "#114615",
+  bgColor3: "#a5d6a7",
+  color4: "#0c2a58",
+  bgColor4: "#90caf9",
+  color5: "#221361",
+  bgColor5: "#b39ddb",
+  color6: "#3e2723",
+  bgColor6: "#c7a59a",
+  color7: "#222",
+  bgColor7: "#aaa",
 };
diff --git a/client/src/js/styled-components/utils.js b/client/src/js/styled-components/utils.js
index 5dc214c4a..e7218abd3 100644
--- a/client/src/js/styled-components/utils.js
+++ b/client/src/js/styled-components/utils.js
@@ -1,10 +1,10 @@
-import { css } from 'styled-components';
+import { css } from "styled-components";
 
 export const sizes = {
   desktop: 992,
   tablet: 768,
   phone: 480,
-  phoneMini: 375
+  phoneMini: 375,
 };
 
 // Iterate through the sizes and create a media template
diff --git a/client/src/js/styled-components/variables.js b/client/src/js/styled-components/variables.js
index 0a1598f0f..dfd225ffe 100644
--- a/client/src/js/styled-components/variables.js
+++ b/client/src/js/styled-components/variables.js
@@ -1,4 +1,4 @@
-export const headerHeight = '60px';
-export const searchBarHeight = '32px';
+export const headerHeight = "60px";
+export const searchBarHeight = "32px";
 export const addedCourseListSwitchHeight = searchBarHeight;
 export const fetchedCourseListSwitchHeight = searchBarHeight;
diff --git a/client/src/js/utils/addedCourses.js b/client/src/js/utils/addedCourses.js
index 8f3714ab9..7b68d83dd 100644
--- a/client/src/js/utils/addedCourses.js
+++ b/client/src/js/utils/addedCourses.js
@@ -1,4 +1,4 @@
-import { ADDED_ORDER, COURSE_TITLE, COURSE_TIME } from '../data/sortingOptions';
+import { ADDED_ORDER, COURSE_TITLE, COURSE_TIME } from "../data/sortingOptions";
 
 export const sortAddedCourses = (addedCourses, sortingOption) => {
   switch (sortingOption) {
@@ -7,8 +7,8 @@ export const sortAddedCourses = (addedCourses, sortingOption) => {
     case COURSE_TITLE:
       return addedCourses.sort((a, b) => {
         // ignore upper and lowercase
-        const courseTitleA = a.title.toUpperCase();
-        const courseTitleB = b.title.toUpperCase();
+        const courseTitleA = a.t.toUpperCase();
+        const courseTitleB = b.t.toUpperCase();
         if (courseTitleA < courseTitleB) {
           return -1;
         } else if (courseTitleA > courseTitleB) {
@@ -19,10 +19,10 @@ export const sortAddedCourses = (addedCourses, sortingOption) => {
       });
     case COURSE_TIME:
       return addedCourses.sort((a, b) => {
-        const firstOccurrenceDayA = a.occurrences[0].day;
-        const firstOccurrenceDayB = b.occurrences[0].day;
-        const firstOccurrenceStartPeriodA = a.occurrences[0].start_period;
-        const firstOccurrenceStartPeriodB = b.occurrences[0].start_period;
+        const firstOccurrenceDayA = a.os[0].d;
+        const firstOccurrenceDayB = b.os[0].d;
+        const firstOccurrenceStartPeriodA = a.os[0].s;
+        const firstOccurrenceStartPeriodB = b.os[0].s;
         if (firstOccurrenceDayA < firstOccurrenceDayB) {
           return -1;
         } else if (firstOccurrenceDayA > firstOccurrenceDayB) {
diff --git a/client/src/js/utils/addedCoursesAndPrefs.js b/client/src/js/utils/addedCoursesAndPrefs.js
index abd9d3266..73dc228b9 100644
--- a/client/src/js/utils/addedCoursesAndPrefs.js
+++ b/client/src/js/utils/addedCoursesAndPrefs.js
@@ -1,4 +1,4 @@
-import { ADDED_ORDER, COURSE_TITLE, COURSE_TIME } from '../data/sortingOptions';
+import { ADDED_ORDER, COURSE_TITLE, COURSE_TIME } from "../data/sortingOptions";
 
 export const sortAddedCoursesAndPrefs = (
   addedCoursesAndPrefs,
@@ -10,8 +10,8 @@ export const sortAddedCoursesAndPrefs = (
     case COURSE_TITLE:
       return addedCoursesAndPrefs.sort((a, b) => {
         // ignore upper and lowercase
-        const courseTitleA = a.course.title.toUpperCase();
-        const courseTitleB = b.course.title.toUpperCase();
+        const courseTitleA = a.course.t.toUpperCase();
+        const courseTitleB = b.course.t.toUpperCase();
         if (courseTitleA < courseTitleB) {
           return -1;
         } else if (courseTitleA > courseTitleB) {
@@ -22,12 +22,10 @@ export const sortAddedCoursesAndPrefs = (
       });
     case COURSE_TIME:
       return addedCoursesAndPrefs.sort((a, b) => {
-        const firstOccurrenceDayA = a.course.occurrences[0].day;
-        const firstOccurrenceDayB = b.course.occurrences[0].day;
-        const firstOccurrenceStartPeriodA =
-          a.course.occurrences[0].start_period;
-        const firstOccurrenceStartPeriodB =
-          b.course.occurrences[0].start_period;
+        const firstOccurrenceDayA = a.course.os[0].day;
+        const firstOccurrenceDayB = b.course.os[0].day;
+        const firstOccurrenceStartPeriodA = a.course.os[0].start_period;
+        const firstOccurrenceStartPeriodB = b.course.os[0].start_period;
         if (firstOccurrenceDayA < firstOccurrenceDayB) {
           return -1;
         } else if (firstOccurrenceDayA > firstOccurrenceDayB) {
diff --git a/client/src/js/utils/courseSearch.js b/client/src/js/utils/courseSearch.js
index 403bd664b..0140894f4 100644
--- a/client/src/js/utils/courseSearch.js
+++ b/client/src/js/utils/courseSearch.js
@@ -6,13 +6,13 @@ import UnsupportedLanguageError from "../errors/UnsupportedLanguageError";
 // Unicode for Japanese: http://www.rikai.com/library/kanjitables/kanji_codes.unicode.shtml
 export const jpRegex = "\u3040-\u309f\u30a0-\u30ff\u4e00-\u9faf";
 
-export const tokenize = string => {
+export const tokenize = (string) => {
   // TODO benchmark contructor (new RegExp) vs factory (RegExp)
   const regex = new RegExp(`[^A-Za-z0-9${jpRegex}]+`);
   return string.trim().split(regex);
 };
 
-export const getSearchLang = searchTerm => {
+export const getSearchLang = (searchTerm) => {
   return new RegExp(`[${jpRegex}]`).test(searchTerm) ? LANGS.JP : LANGS.EN;
 };
 
@@ -30,36 +30,36 @@ export const regexify = (token, searchLang) => {
 export const getCourseTitleAndInstructor = (course, searchLang) => {
   switch (searchLang) {
     case LANGS.JP:
-      return { title: course.title_jp, instructor: course.instructor_jp };
+      return { title: course.tj, instructor: course.ij };
     case LANGS.EN:
-      return { title: course.title, instructor: course.instructor };
+      return { title: course.t, instructor: course.i };
     default:
       throw new UnsupportedLanguageError(searchLang);
   }
 };
 
 export const searchCourses = (searchTerm, courses, searchLang) => {
-  const searchRegexes = tokenize(searchTerm).map(token =>
+  const searchRegexes = tokenize(searchTerm).map((token) =>
     regexify(token, searchLang)
   );
 
-  return courses.filter(course => {
+  return courses.filter((course) => {
     const { title, instructor } = getCourseTitleAndInstructor(
       course,
       searchLang
     );
-    return searchRegexes.every(regex => {
+    return searchRegexes.every((regex) => {
       return regex.test(title) || regex.test(instructor);
     });
   });
 };
 
 export const sortCourses = (searchTerm, courses, searchLang) => {
-  const searchRegexes = tokenize(searchTerm).map(token =>
+  const searchRegexes = tokenize(searchTerm).map((token) =>
     regexify(token, searchLang)
   );
 
-  return sortBy(courses, course => {
+  return sortBy(courses, (course) => {
     const { title, instructor } = getCourseTitleAndInstructor(
       course,
       searchLang
@@ -67,11 +67,11 @@ export const sortCourses = (searchTerm, courses, searchLang) => {
     let sum = 0;
     for (let i = 0; i < searchRegexes.length; i++) {
       if (searchRegexes[i].test(title)) {
-        sum += 1;
+        sum += course.e ? 1 : 3;
       } else if (searchRegexes[i].test(instructor)) {
-        sum += 2;
+        sum += course.e ? 2 : 4;
       } else {
-        sum += 3;
+        sum += course.e ? 5 : 6;
       }
       return sum;
     }
diff --git a/client/src/js/utils/courseSearch.test.js b/client/src/js/utils/courseSearch.test.js
index 1f437f3a0..f38724ac8 100644
--- a/client/src/js/utils/courseSearch.test.js
+++ b/client/src/js/utils/courseSearch.test.js
@@ -3,7 +3,7 @@ import {
   regexify,
   getCourseTitleAndInstructor,
   searchCourses,
-  sortCourses
+  sortCourses,
 } from "./courseSearch";
 import LANGS from "../config/langs";
 
@@ -21,7 +21,7 @@ describe(">>>UTILS --- Test tokenize", () => {
       "search",
       "term",
       "検索",
-      "ワード"
+      "ワード",
     ]);
   });
 });
@@ -42,22 +42,22 @@ describe(">>>UTILS --- Test regexify", () => {
 
 describe(">>>UTILS --- getCourseTitleAndInstructor", () => {
   const dummyCourse = {
-    title: "Advanced Calculus",
-    title_jp: "解析学入門",
-    instructor: "TANAKA, Kazunaga",
-    instructor_jp: "田中 和永"
+    t: "Advanced Calculus",
+    tj: "解析学入門",
+    i: "TANAKA, Kazunaga",
+    ij: "田中 和永",
   };
   test("should return a en title and instructor given a en searchLang", () => {
     expect(getCourseTitleAndInstructor(dummyCourse, LANGS.EN)).toEqual({
       title: "Advanced Calculus",
-      instructor: "TANAKA, Kazunaga"
+      instructor: "TANAKA, Kazunaga",
     });
   });
 
   test("should return a jp title and instructor given a jp searchLang", () => {
     expect(getCourseTitleAndInstructor(dummyCourse, LANGS.JP)).toEqual({
       title: "解析学入門",
-      instructor: "田中 和永"
+      instructor: "田中 和永",
     });
   });
 });
@@ -65,17 +65,17 @@ describe(">>>UTILS --- getCourseTitleAndInstructor", () => {
 describe(">>>UTILS --- searchCourses", () => {
   const dummyCourses = [
     {
-      title: "Advanced Calculus",
-      title_jp: "解析学入門",
-      instructor: "TANAKA, Kazunaga",
-      instructor_jp: "田中 和永"
+      t: "Advanced Calculus",
+      tj: "解析学入門",
+      i: "TANAKA, Kazunaga",
+      ij: "田中 和永",
     },
     {
-      title: "Advanced Chinese II fall semester-Wed-5 Nagatomi",
-      title_jp: "中国語上級II 秋期水5永冨",
-      instructor: "NAGATOMI, Seiji",
-      instructor_jp: "永冨 青地"
-    }
+      t: "Advanced Chinese II fall semester-Wed-5 Nagatomi",
+      tj: "中国語上級II 秋期水5永冨",
+      i: "NAGATOMI, Seiji",
+      ij: "永冨 青地",
+    },
   ];
 
   test("should search a course given one en partial title", () => {
@@ -106,60 +106,60 @@ describe(">>>UTILS --- searchCourses", () => {
 describe(">>>UTILS --- sortCourses", () => {
   const dummyCourses = [
     {
-      title: "Advanced Calculus",
-      title_jp: "解析学入門",
-      instructor: "TANAKA, Kazunaga",
-      instructor_jp: "田中 和永"
+      t: "Advanced Calculus",
+      tj: "解析学入門",
+      i: "TANAKA, Kazunaga",
+      ij: "田中 和永",
     },
     {
-      title: "Advanced Chinese II fall semester-Wed-5 Nagatomi",
-      title_jp: "中国語上級II 秋期水5永冨",
-      instructor: "NAGATOMI, Seiji",
-      instructor_jp: "永冨 青地"
+      t: "Advanced Chinese II fall semester-Wed-5 Nagatomi",
+      tj: "中国語上級II 秋期水5永冨",
+      i: "NAGATOMI, Seiji",
+      ij: "永冨 青地",
     },
     {
-      title: "Beginners Chinese IA spring semester-Fri-1 Hara",
-      title_jp: "中国語初級IA 春期金1原",
-      instructor: "HARA, Shintaro Alexandre",
-      instructor_jp: "原 信太郎 アレシャンドレ"
-    }
+      t: "Beginners Chinese IA spring semester-Fri-1 Hara",
+      tj: "中国語初級IA 春期金1原",
+      i: "HARA, Shintaro Alexandre",
+      ij: "原 信太郎 アレシャンドレ",
+    },
   ];
 
   const dummyEnCourses = [
     {
-      title: "Advanced Calculus",
-      instructor: "TANAKA, Kazunaga"
+      t: "Advanced Calculus",
+      i: "TANAKA, Kazunaga",
     },
     {
-      title: "Calculus A",
-      instructor: "BOWEN, Mark"
+      t: "Calculus A",
+      i: "BOWEN, Mark",
     },
     {
-      title: "Advanced Macroeconomics A 01",
-      instructor: "UEDA, Kozo"
-    }
+      t: "Advanced Macroeconomics A 01",
+      i: "UEDA, Kozo",
+    },
   ];
 
   const dummyJpCourses = [
     {
-      title_jp: "保険数学",
-      instructor_jp: "内藤 和晃"
+      tj: "保険数学",
+      ij: "内藤 和晃",
     },
     {
-      title_jp: "量子力学特論",
-      instructor_jp: "山中 由也"
+      tj: "量子力学特論",
+      ij: "山中 由也",
     },
     {
-      title_jp: "中国語上級II 秋期水5永冨",
-      instructor_jp: "永冨 青地"
-    }
+      tj: "中国語上級II 秋期水5永冨",
+      ij: "永冨 青地",
+    },
   ];
 
   test("should prioritize en title > instructor > no match", () => {
     expect(sortCourses("ma", dummyEnCourses, LANGS.EN)).toEqual([
       dummyEnCourses[2],
       dummyEnCourses[1],
-      dummyEnCourses[0]
+      dummyEnCourses[0],
     ]);
   });
 
@@ -167,7 +167,7 @@ describe(">>>UTILS --- sortCourses", () => {
     expect(sortCourses("中", dummyJpCourses, LANGS.JP)).toEqual([
       dummyJpCourses[2],
       dummyJpCourses[1],
-      dummyJpCourses[0]
+      dummyJpCourses[0],
     ]);
   });
 });
diff --git a/client/src/js/utils/invalidClassrooms.js b/client/src/js/utils/invalidClassrooms.js
index f475b6797..c5fc2677e 100644
--- a/client/src/js/utils/invalidClassrooms.js
+++ b/client/src/js/utils/invalidClassrooms.js
@@ -3,12 +3,12 @@ export const filterInvalidClassrooms = (
   school,
   classroomNameLength
 ) => {
-  return courses.filter(course => {
-    const keys = course.keys;
-    const schools = keys.map(key => key.school);
+  return courses.filter((course) => {
+    const keys = course.ks;
+    const schools = keys.map((key) => key.school);
     if (!schools.includes(school)) return false;
 
-    const occurrences = course.occurrences;
+    const occurrences = course.os;
     for (let i = 0; i < occurrences.length; i++) {
       const classroom = occurrences[i].classroom;
       const building = occurrences[i].building;
diff --git a/client/src/localForage.js b/client/src/localForage.js
new file mode 100644
index 000000000..86811be86
--- /dev/null
+++ b/client/src/localForage.js
@@ -0,0 +1,127 @@
+import localForage from "localforage";
+
+export const LNG_KEY = "wasedatime-2020-lng";
+const PREV_STATE_NAME = "wasedatime-2019-state";
+const STATE_NAME = "wasedatime-2020-state";
+const STATE_FETCHED_COURSES_NAME = "wasedatime-2020-state-fc";
+const STATE_ADDED_COURSES_NAME = "wasedatime-2020-state-ac";
+const DATA_TO_SAVE = [
+  LNG_KEY,
+  STATE_NAME,
+  STATE_FETCHED_COURSES_NAME,
+  STATE_ADDED_COURSES_NAME,
+];
+
+export const loadState = () => {
+  let prevState = null;
+  try {
+    const serializedPrevState = localStorage.getItem(PREV_STATE_NAME);
+    if (serializedPrevState !== null) {
+      prevState = JSON.parse(serializedPrevState);
+    }
+  } catch (error) {
+    console.error(error);
+  }
+
+  return Promise.all([
+    localForage.getItem(STATE_NAME),
+    localForage.getItem(STATE_FETCHED_COURSES_NAME),
+  ])
+    .then((states) => {
+      let state;
+      let fetchedCourses;
+      if (prevState !== null) {
+        state = prevState;
+        state.user.isFirstTimeAccess = true;
+        fetchedCourses = {
+          byId: {},
+          list: {},
+        };
+      } else {
+        state = states[0];
+        fetchedCourses = states[1];
+
+        let needsUpdate = false;
+        if (fetchedCourses !== null) {
+          const fetchedTime = fetchedCourses.list.fetchedTime;
+
+          let nextUpdateTime = new Date(fetchedTime);
+          // Courses are updated at 7am everyday
+          // if the last fetched time is 0 - 6 o'clock, the next update time is the same day, 7am
+          // if the last fetched time is 7 - 23 o'clock, the next update time is the next day, 7am
+          if (nextUpdateTime.getHours() >= 7) {
+            nextUpdateTime.setDate(nextUpdateTime.getDate() + 1);
+          }
+          nextUpdateTime.setHours(7, 0, 0, 0);
+
+          const currentTime = new Date();
+          needsUpdate = currentTime >= nextUpdateTime;
+        }
+
+        if (fetchedCourses === null || needsUpdate) {
+          fetchedCourses = {
+            byId: {},
+            list: {},
+          };
+        }
+      }
+
+      if (prevState === null && (state === null || fetchedCourses === null)) {
+        return undefined;
+      }
+
+      const fallPrefs = state.addedCourses.fall.prefs.map((pref) => {
+        pref["displayLang"] = pref["displayLang"] || "en";
+        return pref;
+      });
+      const springPrefs = state.addedCourses.spring.prefs.map((pref) => {
+        pref["displayLang"] = pref["displayLang"] || "en";
+        return pref;
+      });
+
+      state.addedCourses.fall.prefs = fallPrefs;
+      state.addedCourses.spring.prefs = springPrefs;
+
+      return {
+        ...state,
+        fetchedCourses,
+      };
+    })
+    .catch((error) => {
+      console.error(error);
+      // In case of any errors, play safe and let reducers initialize the state.
+      return undefined;
+    });
+};
+
+export const saveState = (state) => {
+  for (let i = 0, len = localStorage.length; i < len; ++i) {
+    const key = localStorage.key(i);
+    if (!DATA_TO_SAVE.includes(key)) {
+      localStorage.clear();
+      localForage
+        .clear()
+        .then(() => {})
+        .catch((error) => {
+          console.error(error);
+        });
+    }
+  }
+  const { fetchedCourses, ...rest } = state;
+  localStorage.setItem(
+    STATE_ADDED_COURSES_NAME,
+    JSON.stringify(rest.addedCourses)
+  );
+  localForage
+    .setItem(STATE_NAME, rest)
+    .then((value) => {})
+    .catch((error) => {
+      console.error(error);
+    });
+  localForage
+    .setItem(STATE_FETCHED_COURSES_NAME, fetchedCourses)
+    .then((value) => {})
+    .catch((error) => {
+      console.error(error);
+    });
+};
diff --git a/client/src/localStorage.js b/client/src/localStorage.js
deleted file mode 100644
index 4a003ae81..000000000
--- a/client/src/localStorage.js
+++ /dev/null
@@ -1,41 +0,0 @@
-const STATE_NAME = "wasedatime-2019-state";
-
-export const loadState = () => {
-  try {
-    const serializedState = localStorage.getItem(STATE_NAME);
-    if (serializedState === null) {
-      return undefined;
-    }
-    const state = JSON.parse(serializedState);
-    const fallPrefs = state.addedCourses.fall.prefs.map(pref => {
-      if (pref["displayLang"] === undefined) {
-        pref["displayLang"] = "en";
-      }
-      return pref;
-    });
-    const springPrefs = state.addedCourses.spring.prefs.map(pref => {
-      if (pref["displayLang"] === undefined) {
-        pref["displayLang"] = "en";
-      }
-      return pref;
-    });
-
-    state.addedCourses.fall.prefs = fallPrefs;
-    state.addedCourses.spring.prefs = springPrefs;
-
-    return state;
-  } catch (error) {
-    console.log(error);
-    // In case of any errors, play safe and let reducers initialize the state.
-    return undefined;
-  }
-};
-
-export const saveState = state => {
-  try {
-    const serializedState = JSON.stringify(state);
-    localStorage.setItem(STATE_NAME, serializedState);
-  } catch (error) {
-    console.log(error);
-  }
-};
diff --git a/client/src/registerServiceWorker.js b/client/src/registerServiceWorker.js
index 12542ba22..1b6406aee 100644
--- a/client/src/registerServiceWorker.js
+++ b/client/src/registerServiceWorker.js
@@ -9,9 +9,9 @@
 // This link also includes instructions on opting out of this behavior.
 
 const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
+  window.location.hostname === "localhost" ||
     // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
+    window.location.hostname === "[::1]" ||
     // 127.0.0.1/8 is considered localhost for IPv4.
     window.location.hostname.match(
       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
@@ -19,7 +19,7 @@ const isLocalhost = Boolean(
 );
 
 export default function register() {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+  if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
     // The URL constructor is available in all browsers that support SW.
     const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
     if (publicUrl.origin !== window.location.origin) {
@@ -29,7 +29,7 @@ export default function register() {
       return;
     }
 
-    window.addEventListener('load', () => {
+    window.addEventListener("load", () => {
       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 
       if (isLocalhost) {
@@ -46,43 +46,43 @@ export default function register() {
 function registerValidSW(swUrl) {
   navigator.serviceWorker
     .register(swUrl)
-    .then(registration => {
+    .then((registration) => {
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
         installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
+          if (installingWorker.state === "installed") {
             if (navigator.serviceWorker.controller) {
               // At this point, the old content will have been purged and
               // the fresh content will have been added to the cache.
               // It's the perfect time to display a "New content is
               // available; please refresh." message in your web app.
-              console.log('New content is available; please refresh.');
+              console.log("New content is available; please refresh.");
             } else {
               // At this point, everything has been precached.
               // It's the perfect time to display a
               // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
+              console.log("Content is cached for offline use.");
             }
           }
         };
       };
     })
-    .catch(error => {
-      console.error('Error during service worker registration:', error);
+    .catch((error) => {
+      console.error("Error during service worker registration:", error);
     });
 }
 
 function checkValidServiceWorker(swUrl) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl)
-    .then(response => {
+    .then((response) => {
       // Ensure service worker exists, and that we really are getting a JS file.
       if (
         response.status === 404 ||
-        response.headers.get('content-type').indexOf('javascript') === -1
+        response.headers.get("content-type").indexOf("javascript") === -1
       ) {
         // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
+        navigator.serviceWorker.ready.then((registration) => {
           registration.unregister().then(() => {
             window.location.reload();
           });
@@ -94,14 +94,14 @@ function checkValidServiceWorker(swUrl) {
     })
     .catch(() => {
       console.log(
-        'No internet connection found. App is running in offline mode.'
+        "No internet connection found. App is running in offline mode."
       );
     });
 }
 
 export function unregister() {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
+  if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.ready.then((registration) => {
       registration.unregister();
     });
   }
diff --git a/client/src/setupProxy.js b/client/src/setupProxy.js
index 078b8df5a..2da2e0e87 100644
--- a/client/src/setupProxy.js
+++ b/client/src/setupProxy.js
@@ -1,7 +1,7 @@
 // A required file for create-react-app proxy configuration after 2.0.3
 
-const proxy = require('http-proxy-middleware');
+const proxy = require("http-proxy-middleware");
 
-module.exports = function(app) {
-  app.use(proxy('/api/*', { target: 'http://localhost:5000' }));
+module.exports = function (app) {
+  app.use(proxy("/api/*", { target: "http://localhost:5000" }));
 };
diff --git a/client/src/styles/datetime.css b/client/src/styles/datetime.css
index 1e4ffea61..c471a56a4 100644
--- a/client/src/styles/datetime.css
+++ b/client/src/styles/datetime.css
@@ -24,7 +24,8 @@
   padding: 0.5em !important;
 }
 
-.react-datepicker__day-name, .react-datepicker__day {
+.react-datepicker__day-name,
+.react-datepicker__day {
   width: 2em !important;
   margin: 0.2em !important;
   line-height: 2em !important;
@@ -53,7 +54,7 @@
   font-size: 1.2em !important;
 }
 
-.react-datepicker__time-container  {
+.react-datepicker__time-container {
   width: 150px !important;
 }
 
diff --git a/client/src/styles/s-alert-custom.css b/client/src/styles/s-alert-custom.css
index 003f9b922..b9e895200 100644
--- a/client/src/styles/s-alert-custom.css
+++ b/client/src/styles/s-alert-custom.css
@@ -14,10 +14,12 @@
 .s-alert-warning {
   background: #ffc107;
   color: #000;
+  z-index: 3000;
 }
 
 .s-alert-error {
   /* background: #b51e36; */
   background-color: #ce0115;
   color: #fff;
+  z-index: 3000;
 }
diff --git a/client/src/styles/semantic-ui-css/components/divider.min.css b/client/src/styles/semantic-ui-css/components/divider.min.css
new file mode 100644
index 000000000..aecd2c113
--- /dev/null
+++ b/client/src/styles/semantic-ui-css/components/divider.min.css
@@ -0,0 +1,9 @@
+/*!
+ * # Semantic UI 2.4.1 - Divider
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */.ui.divider{margin:1rem 0;line-height:1;height:0;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:rgba(0,0,0,.85);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ui.divider:not(.vertical):not(.horizontal){border-top:1px solid rgba(34,36,38,.15);border-bottom:1px solid rgba(255,255,255,.1)}.ui.grid>.column+.divider,.ui.grid>.row>.column+.divider{left:auto}.ui.horizontal.divider{display:table;white-space:nowrap;height:auto;margin:'';line-height:1;text-align:center}.ui.horizontal.divider:after,.ui.horizontal.divider:before{content:'';display:table-cell;position:relative;top:50%;width:50%;background-repeat:no-repeat}.ui.horizontal.divider:before{background-position:right 1em top 50%}.ui.horizontal.divider:after{background-position:left 1em top 50%}.ui.vertical.divider{position:absolute;z-index:2;top:50%;left:50%;margin:0;padding:0;width:auto;height:50%;line-height:0;text-align:center;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.ui.vertical.divider:after,.ui.vertical.divider:before{position:absolute;left:50%;content:'';z-index:3;border-left:1px solid rgba(34,36,38,.15);border-right:1px solid rgba(255,255,255,.1);width:0%;height:calc(100% - 1rem)}.ui.vertical.divider:before{top:-100%}.ui.vertical.divider:after{top:auto;bottom:0}@media only screen and (max-width:767px){.ui.grid .stackable.row .ui.vertical.divider,.ui.stackable.grid .ui.vertical.divider{display:table;white-space:nowrap;height:auto;margin:'';overflow:hidden;line-height:1;text-align:center;position:static;top:0;left:0;-webkit-transform:none;transform:none}.ui.grid .stackable.row .ui.vertical.divider:after,.ui.grid .stackable.row .ui.vertical.divider:before,.ui.stackable.grid .ui.vertical.divider:after,.ui.stackable.grid .ui.vertical.divider:before{position:static;left:0;border-left:none;border-right:none;content:'';display:table-cell;position:relative;top:50%;width:50%;background-repeat:no-repeat}.ui.grid .stackable.row .ui.vertical.divider:before,.ui.stackable.grid .ui.vertical.divider:before{background-position:right 1em top 50%}.ui.grid .stackable.row .ui.vertical.divider:after,.ui.stackable.grid .ui.vertical.divider:after{background-position:left 1em top 50%}}.ui.divider>.icon{margin:0;font-size:1rem;height:1em;vertical-align:middle}.ui.hidden.divider{border-color:transparent!important}.ui.hidden.divider:after,.ui.hidden.divider:before{display:none}.ui.divider.inverted,.ui.horizontal.inverted.divider,.ui.vertical.inverted.divider{color:#fff}.ui.divider.inverted,.ui.divider.inverted:after,.ui.divider.inverted:before{border-top-color:rgba(34,36,38,.15)!important;border-left-color:rgba(34,36,38,.15)!important;border-bottom-color:rgba(255,255,255,.15)!important;border-right-color:rgba(255,255,255,.15)!important}.ui.fitted.divider{margin:0}.ui.clearing.divider{clear:both}.ui.section.divider{margin-top:2rem;margin-bottom:2rem}.ui.divider{font-size:1rem}.ui.horizontal.divider:after,.ui.horizontal.divider:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC)}@media only screen and (max-width:767px){.ui.grid .stackable.row .ui.vertical.divider:after,.ui.grid .stackable.row .ui.vertical.divider:before,.ui.stackable.grid .ui.vertical.divider:after,.ui.stackable.grid .ui.vertical.divider:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC)}}
\ No newline at end of file
diff --git a/client/src/styles/semantic-ui-css/components/header.min.css b/client/src/styles/semantic-ui-css/components/header.min.css
new file mode 100644
index 000000000..a496a5a35
--- /dev/null
+++ b/client/src/styles/semantic-ui-css/components/header.min.css
@@ -0,0 +1,9 @@
+/*!
+ * # Semantic UI 2.4.1 - Header
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */.ui.header{border:none;margin:calc(2rem - .14285714em) 0 1rem;padding:0 0;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-weight:700;line-height:1.28571429em;text-transform:none;color:rgba(0,0,0,.87)}.ui.header:first-child{margin-top:-.14285714em}.ui.header:last-child{margin-bottom:0}.ui.header .sub.header{display:block;font-weight:400;padding:0;margin:0;font-size:1rem;line-height:1.2em;color:rgba(0,0,0,.6)}.ui.header>.icon{display:table-cell;opacity:1;font-size:1.5em;padding-top:0;vertical-align:middle}.ui.header .icon:only-child{display:inline-block;padding:0;margin-right:.75rem}.ui.header>.image:not(.icon),.ui.header>img{display:inline-block;margin-top:.14285714em;width:2.5em;height:auto;vertical-align:middle}.ui.header>.image:not(.icon):only-child,.ui.header>img:only-child{margin-right:.75rem}.ui.header .content{display:inline-block;vertical-align:top}.ui.header>.image+.content,.ui.header>img+.content{padding-left:.75rem;vertical-align:middle}.ui.header>.icon+.content{padding-left:.75rem;display:table-cell;vertical-align:middle}.ui.header .ui.label{font-size:'';margin-left:.5rem;vertical-align:middle}.ui.header+p{margin-top:0}h1.ui.header{font-size:2rem}h2.ui.header{font-size:1.71428571rem}h3.ui.header{font-size:1.28571429rem}h4.ui.header{font-size:1.07142857rem}h5.ui.header{font-size:1rem}h1.ui.header .sub.header{font-size:1.14285714rem}h2.ui.header .sub.header{font-size:1.14285714rem}h3.ui.header .sub.header{font-size:1rem}h4.ui.header .sub.header{font-size:1rem}h5.ui.header .sub.header{font-size:.92857143rem}.ui.huge.header{min-height:1em;font-size:2em}.ui.large.header{font-size:1.71428571em}.ui.medium.header{font-size:1.28571429em}.ui.small.header{font-size:1.07142857em}.ui.tiny.header{font-size:1em}.ui.huge.header .sub.header{font-size:1.14285714rem}.ui.large.header .sub.header{font-size:1.14285714rem}.ui.header .sub.header{font-size:1rem}.ui.small.header .sub.header{font-size:1rem}.ui.tiny.header .sub.header{font-size:.92857143rem}.ui.sub.header{padding:0;margin-bottom:.14285714rem;font-weight:700;font-size:.85714286em;text-transform:uppercase;color:''}.ui.small.sub.header{font-size:.78571429em}.ui.sub.header{font-size:.85714286em}.ui.large.sub.header{font-size:.92857143em}.ui.huge.sub.header{font-size:1em}.ui.icon.header{display:inline-block;text-align:center;margin:2rem 0 1rem}.ui.icon.header:after{content:'';display:block;height:0;clear:both;visibility:hidden}.ui.icon.header:first-child{margin-top:0}.ui.icon.header .icon{float:none;display:block;width:auto;height:auto;line-height:1;padding:0;font-size:3em;margin:0 auto .5rem;opacity:1}.ui.icon.header .content{display:block;padding:0}.ui.icon.header .circular.icon{font-size:2em}.ui.icon.header .square.icon{font-size:2em}.ui.block.icon.header .icon{margin-bottom:0}.ui.icon.header.aligned{margin-left:auto;margin-right:auto;display:block}.ui.disabled.header{opacity:.45}.ui.inverted.header{color:#fff}.ui.inverted.header .sub.header{color:rgba(255,255,255,.8)}.ui.inverted.attached.header{background:#545454 -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.05)));background:#545454 -webkit-linear-gradient(transparent,rgba(0,0,0,.05));background:#545454 linear-gradient(transparent,rgba(0,0,0,.05));-webkit-box-shadow:none;box-shadow:none;border-color:transparent}.ui.inverted.block.header{background:#545454 -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.05)));background:#545454 -webkit-linear-gradient(transparent,rgba(0,0,0,.05));background:#545454 linear-gradient(transparent,rgba(0,0,0,.05));-webkit-box-shadow:none;box-shadow:none}.ui.inverted.block.header{border-bottom:none}.ui.red.header{color:#db2828!important}a.ui.red.header:hover{color:#d01919!important}.ui.red.dividing.header{border-bottom:2px solid #db2828}.ui.inverted.red.header{color:#ff695e!important}a.ui.inverted.red.header:hover{color:#ff5144!important}.ui.orange.header{color:#f2711c!important}a.ui.orange.header:hover{color:#f26202!important}.ui.orange.dividing.header{border-bottom:2px solid #f2711c}.ui.inverted.orange.header{color:#ff851b!important}a.ui.inverted.orange.header:hover{color:#ff7701!important}.ui.olive.header{color:#b5cc18!important}a.ui.olive.header:hover{color:#a7bd0d!important}.ui.olive.dividing.header{border-bottom:2px solid #b5cc18}.ui.inverted.olive.header{color:#d9e778!important}a.ui.inverted.olive.header:hover{color:#d8ea5c!important}.ui.yellow.header{color:#fbbd08!important}a.ui.yellow.header:hover{color:#eaae00!important}.ui.yellow.dividing.header{border-bottom:2px solid #fbbd08}.ui.inverted.yellow.header{color:#ffe21f!important}a.ui.inverted.yellow.header:hover{color:#ffdf05!important}.ui.green.header{color:#21ba45!important}a.ui.green.header:hover{color:#16ab39!important}.ui.green.dividing.header{border-bottom:2px solid #21ba45}.ui.inverted.green.header{color:#2ecc40!important}a.ui.inverted.green.header:hover{color:#22be34!important}.ui.teal.header{color:#00b5ad!important}a.ui.teal.header:hover{color:#009c95!important}.ui.teal.dividing.header{border-bottom:2px solid #00b5ad}.ui.inverted.teal.header{color:#6dffff!important}a.ui.inverted.teal.header:hover{color:#54ffff!important}.ui.blue.header{color:#2185d0!important}a.ui.blue.header:hover{color:#1678c2!important}.ui.blue.dividing.header{border-bottom:2px solid #2185d0}.ui.inverted.blue.header{color:#54c8ff!important}a.ui.inverted.blue.header:hover{color:#3ac0ff!important}.ui.violet.header{color:#6435c9!important}a.ui.violet.header:hover{color:#5829bb!important}.ui.violet.dividing.header{border-bottom:2px solid #6435c9}.ui.inverted.violet.header{color:#a291fb!important}a.ui.inverted.violet.header:hover{color:#8a73ff!important}.ui.purple.header{color:#a333c8!important}a.ui.purple.header:hover{color:#9627ba!important}.ui.purple.dividing.header{border-bottom:2px solid #a333c8}.ui.inverted.purple.header{color:#dc73ff!important}a.ui.inverted.purple.header:hover{color:#d65aff!important}.ui.pink.header{color:#e03997!important}a.ui.pink.header:hover{color:#e61a8d!important}.ui.pink.dividing.header{border-bottom:2px solid #e03997}.ui.inverted.pink.header{color:#ff8edf!important}a.ui.inverted.pink.header:hover{color:#ff74d8!important}.ui.brown.header{color:#a5673f!important}a.ui.brown.header:hover{color:#975b33!important}.ui.brown.dividing.header{border-bottom:2px solid #a5673f}.ui.inverted.brown.header{color:#d67c1c!important}a.ui.inverted.brown.header:hover{color:#c86f11!important}.ui.grey.header{color:#767676!important}a.ui.grey.header:hover{color:#838383!important}.ui.grey.dividing.header{border-bottom:2px solid #767676}.ui.inverted.grey.header{color:#dcddde!important}a.ui.inverted.grey.header:hover{color:#cfd0d2!important}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header,.ui.centered.header{text-align:center}.ui.justified.header{text-align:justify}.ui.justified.header:after{display:inline-block;content:'';width:100%}.ui.floated.header,.ui[class*="left floated"].header{float:left;margin-top:0;margin-right:.5em}.ui[class*="right floated"].header{float:right;margin-top:0;margin-left:.5em}.ui.fitted.header{padding:0}.ui.dividing.header{padding-bottom:.21428571rem;border-bottom:1px solid rgba(34,36,38,.15)}.ui.dividing.header .sub.header{padding-bottom:.21428571rem}.ui.dividing.header .icon{margin-bottom:0}.ui.inverted.dividing.header{border-bottom-color:rgba(255,255,255,.1)}.ui.block.header{background:#f3f4f5;padding:.78571429rem 1rem;-webkit-box-shadow:none;box-shadow:none;border:1px solid #d4d4d5;border-radius:.28571429rem}.ui.tiny.block.header{font-size:.85714286rem}.ui.small.block.header{font-size:.92857143rem}.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6){font-size:1rem}.ui.large.block.header{font-size:1.14285714rem}.ui.huge.block.header{font-size:1.42857143rem}.ui.attached.header{background:#fff;padding:.78571429rem 1rem;margin-left:-1px;margin-right:-1px;-webkit-box-shadow:none;box-shadow:none;border:1px solid #d4d4d5}.ui.attached.block.header{background:#f3f4f5}.ui.attached:not(.top):not(.bottom).header{margin-top:0;margin-bottom:0;border-top:none;border-radius:0}.ui.top.attached.header{margin-bottom:0;border-radius:.28571429rem .28571429rem 0 0}.ui.bottom.attached.header{margin-top:0;border-top:none;border-radius:0 0 .28571429rem .28571429rem}.ui.tiny.attached.header{font-size:.85714286em}.ui.small.attached.header{font-size:.92857143em}.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6){font-size:1em}.ui.large.attached.header{font-size:1.14285714em}.ui.huge.attached.header{font-size:1.42857143em}.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6){font-size:1.28571429em}
\ No newline at end of file
diff --git a/client/src/styles/semantic-ui-css/components/list.min.css b/client/src/styles/semantic-ui-css/components/list.min.css
new file mode 100644
index 000000000..cc1ba738e
--- /dev/null
+++ b/client/src/styles/semantic-ui-css/components/list.min.css
@@ -0,0 +1,9 @@
+/*!
+ * # Semantic UI 2.4.1 - List
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */.ui.list,ol.ui.list,ul.ui.list{list-style-type:none;margin:1em 0;padding:0 0}.ui.list:first-child,ol.ui.list:first-child,ul.ui.list:first-child{margin-top:0;padding-top:0}.ui.list:last-child,ol.ui.list:last-child,ul.ui.list:last-child{margin-bottom:0;padding-bottom:0}.ui.list .list>.item,.ui.list>.item,ol.ui.list li,ul.ui.list li{display:list-item;table-layout:fixed;list-style-type:none;list-style-position:outside;padding:.21428571em 0;line-height:1.14285714em}.ui.list>.item:after,.ui.list>.list>.item,ol.ui.list>li:first-child:after,ul.ui.list>li:first-child:after{content:'';display:block;height:0;clear:both;visibility:hidden}.ui.list .list>.item:first-child,.ui.list>.item:first-child,ol.ui.list li:first-child,ul.ui.list li:first-child{padding-top:0}.ui.list .list>.item:last-child,.ui.list>.item:last-child,ol.ui.list li:last-child,ul.ui.list li:last-child{padding-bottom:0}.ui.list .list,ol.ui.list ol,ul.ui.list ul{clear:both;margin:0;padding:.75em 0 .25em .5em}.ui.list .list>.item,ol.ui.list ol li,ul.ui.list ul li{padding:.14285714em 0;line-height:inherit}.ui.list .list>.item>i.icon,.ui.list>.item>i.icon{display:table-cell;margin:0;padding-top:0;padding-right:.28571429em;vertical-align:top;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.list .list>.item>i.icon:only-child,.ui.list>.item>i.icon:only-child{display:inline-block;vertical-align:top}.ui.list .list>.item>.image,.ui.list>.item>.image{display:table-cell;background-color:transparent;margin:0;vertical-align:top}.ui.list .list>.item>.image:not(:only-child):not(img),.ui.list>.item>.image:not(:only-child):not(img){padding-right:.5em}.ui.list .list>.item>.image img,.ui.list>.item>.image img{vertical-align:top}.ui.list .list>.item>.image:only-child,.ui.list .list>.item>img.image,.ui.list>.item>.image:only-child,.ui.list>.item>img.image{display:inline-block}.ui.list .list>.item>.content,.ui.list>.item>.content{line-height:1.14285714em}.ui.list .list>.item>.icon+.content,.ui.list .list>.item>.image+.content,.ui.list>.item>.icon+.content,.ui.list>.item>.image+.content{display:table-cell;width:100%;padding:0 0 0 .5em;vertical-align:top}.ui.list .list>.item>img.image+.content,.ui.list>.item>img.image+.content{display:inline-block;width:auto}.ui.list .list>.item>.content>.list,.ui.list>.item>.content>.list{margin-left:0;padding-left:0}.ui.list .list>.item .header,.ui.list>.item .header{display:block;margin:0;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-weight:700;color:rgba(0,0,0,.87)}.ui.list .list>.item .description,.ui.list>.item .description{display:block;color:rgba(0,0,0,.7)}.ui.list .list>.item a,.ui.list>.item a{cursor:pointer}.ui.list .list>a.item,.ui.list>a.item{cursor:pointer;color:#4183c4}.ui.list .list>a.item:hover,.ui.list>a.item:hover{color:#1e70bf}.ui.list .list>a.item i.icon,.ui.list>a.item i.icon{color:rgba(0,0,0,.4)}.ui.list .list>.item a.header,.ui.list>.item a.header{cursor:pointer;color:#4183c4!important}.ui.list .list>.item a.header:hover,.ui.list>.item a.header:hover{color:#1e70bf!important}.ui[class*="left floated"].list{float:left}.ui[class*="right floated"].list{float:right}.ui.list .list>.item [class*="left floated"],.ui.list>.item [class*="left floated"]{float:left;margin:0 1em 0 0}.ui.list .list>.item [class*="right floated"],.ui.list>.item [class*="right floated"]{float:right;margin:0 0 0 1em}.ui.menu .ui.list .list>.item,.ui.menu .ui.list>.item{display:list-item;table-layout:fixed;background-color:transparent;list-style-type:none;list-style-position:outside;padding:.21428571em 0;line-height:1.14285714em}.ui.menu .ui.list .list>.item:before,.ui.menu .ui.list>.item:before{border:none;background:0 0}.ui.menu .ui.list .list>.item:first-child,.ui.menu .ui.list>.item:first-child{padding-top:0}.ui.menu .ui.list .list>.item:last-child,.ui.menu .ui.list>.item:last-child{padding-bottom:0}.ui.horizontal.list{display:inline-block;font-size:0}.ui.horizontal.list>.item{display:inline-block;margin-left:1em;font-size:1rem}.ui.horizontal.list:not(.celled)>.item:first-child{margin-left:0!important;padding-left:0!important}.ui.horizontal.list .list{padding-left:0;padding-bottom:0}.ui.horizontal.list .list>.item>.content,.ui.horizontal.list .list>.item>.icon,.ui.horizontal.list .list>.item>.image,.ui.horizontal.list>.item>.content,.ui.horizontal.list>.item>.icon,.ui.horizontal.list>.item>.image{vertical-align:middle}.ui.horizontal.list>.item:first-child,.ui.horizontal.list>.item:last-child{padding-top:.21428571em;padding-bottom:.21428571em}.ui.horizontal.list>.item>i.icon{margin:0;padding:0 .25em 0 0}.ui.horizontal.list>.item>.icon,.ui.horizontal.list>.item>.icon+.content{float:none;display:inline-block}.ui.list .list>.disabled.item,.ui.list>.disabled.item{pointer-events:none;color:rgba(40,40,40,.3)!important}.ui.inverted.list .list>.disabled.item,.ui.inverted.list>.disabled.item{color:rgba(225,225,225,.3)!important}.ui.list .list>a.item:hover .icon,.ui.list>a.item:hover .icon{color:rgba(0,0,0,.87)}.ui.inverted.list .list>a.item>.icon,.ui.inverted.list>a.item>.icon{color:rgba(255,255,255,.7)}.ui.inverted.list .list>.item .header,.ui.inverted.list>.item .header{color:rgba(255,255,255,.9)}.ui.inverted.list .list>.item .description,.ui.inverted.list>.item .description{color:rgba(255,255,255,.7)}.ui.inverted.list .list>a.item,.ui.inverted.list>a.item{cursor:pointer;color:rgba(255,255,255,.9)}.ui.inverted.list .list>a.item:hover,.ui.inverted.list>a.item:hover{color:#1e70bf}.ui.inverted.list .item a:not(.ui){color:rgba(255,255,255,.9)!important}.ui.inverted.list .item a:not(.ui):hover{color:#1e70bf!important}.ui.list [class*="top aligned"],.ui.list[class*="top aligned"] .content,.ui.list[class*="top aligned"] .image{vertical-align:top!important}.ui.list [class*="middle aligned"],.ui.list[class*="middle aligned"] .content,.ui.list[class*="middle aligned"] .image{vertical-align:middle!important}.ui.list [class*="bottom aligned"],.ui.list[class*="bottom aligned"] .content,.ui.list[class*="bottom aligned"] .image{vertical-align:bottom!important}.ui.link.list .item,.ui.link.list .item a:not(.ui),.ui.link.list a.item{color:rgba(0,0,0,.4);-webkit-transition:.1s color ease;transition:.1s color ease}.ui.link.list.list .item a:not(.ui):hover,.ui.link.list.list a.item:hover{color:rgba(0,0,0,.8)}.ui.link.list.list .item a:not(.ui):active,.ui.link.list.list a.item:active{color:rgba(0,0,0,.9)}.ui.link.list.list .active.item,.ui.link.list.list .active.item a:not(.ui){color:rgba(0,0,0,.95)}.ui.inverted.link.list .item,.ui.inverted.link.list .item a:not(.ui),.ui.inverted.link.list a.item{color:rgba(255,255,255,.5)}.ui.inverted.link.list.list .item a:not(.ui):hover,.ui.inverted.link.list.list a.item:hover{color:#fff}.ui.inverted.link.list.list .item a:not(.ui):active,.ui.inverted.link.list.list a.item:active{color:#fff}.ui.inverted.link.list.list .active.item a:not(.ui),.ui.inverted.link.list.list a.active.item{color:#fff}.ui.selection.list .list>.item,.ui.selection.list>.item{cursor:pointer;background:0 0;padding:.5em .5em;margin:0;color:rgba(0,0,0,.4);border-radius:.5em;-webkit-transition:.1s color ease,.1s padding-left ease,.1s background-color ease;transition:.1s color ease,.1s padding-left ease,.1s background-color ease}.ui.selection.list .list>.item:last-child,.ui.selection.list>.item:last-child{margin-bottom:0}.ui.selection.list.list>.item:hover,.ui.selection.list>.item:hover{background:rgba(0,0,0,.03);color:rgba(0,0,0,.8)}.ui.selection.list .list>.item:active,.ui.selection.list>.item:active{background:rgba(0,0,0,.05);color:rgba(0,0,0,.9)}.ui.selection.list .list>.item.active,.ui.selection.list>.item.active{background:rgba(0,0,0,.05);color:rgba(0,0,0,.95)}.ui.inverted.selection.list>.item{background:0 0;color:rgba(255,255,255,.5)}.ui.inverted.selection.list>.item:hover{background:rgba(255,255,255,.02);color:#fff}.ui.inverted.selection.list>.item:active{background:rgba(255,255,255,.08);color:#fff}.ui.inverted.selection.list>.item.active{background:rgba(255,255,255,.08);color:#fff}.ui.celled.selection.list .list>.item,.ui.celled.selection.list>.item,.ui.divided.selection.list .list>.item,.ui.divided.selection.list>.item{border-radius:0}.ui.animated.list>.item{-webkit-transition:.25s color ease .1s,.25s padding-left ease .1s,.25s background-color ease .1s;transition:.25s color ease .1s,.25s padding-left ease .1s,.25s background-color ease .1s}.ui.animated.list:not(.horizontal)>.item:hover{padding-left:1em}.ui.fitted.list:not(.selection) .list>.item,.ui.fitted.list:not(.selection)>.item{padding-left:0;padding-right:0}.ui.fitted.selection.list .list>.item,.ui.fitted.selection.list>.item{margin-left:-.5em;margin-right:-.5em}.ui.bulleted.list,ul.ui.list{margin-left:1.25rem}.ui.bulleted.list .list>.item,.ui.bulleted.list>.item,ul.ui.list li{position:relative}.ui.bulleted.list .list>.item:before,.ui.bulleted.list>.item:before,ul.ui.list li:before{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;position:absolute;top:auto;left:auto;font-weight:400;margin-left:-1.25rem;content:'•';opacity:1;color:inherit;vertical-align:top}.ui.bulleted.list .list>a.item:before,.ui.bulleted.list>a.item:before,ul.ui.list li:before{color:rgba(0,0,0,.87)}.ui.bulleted.list .list,ul.ui.list ul{padding-left:1.25rem}.ui.horizontal.bulleted.list,ul.ui.horizontal.bulleted.list{margin-left:0}.ui.horizontal.bulleted.list>.item,ul.ui.horizontal.bulleted.list li{margin-left:1.75rem}.ui.horizontal.bulleted.list>.item:first-child,ul.ui.horizontal.bulleted.list li:first-child{margin-left:0}.ui.horizontal.bulleted.list>.item::before,ul.ui.horizontal.bulleted.list li::before{color:rgba(0,0,0,.87)}.ui.horizontal.bulleted.list>.item:first-child::before,ul.ui.horizontal.bulleted.list li:first-child::before{display:none}.ui.ordered.list,.ui.ordered.list .list,ol.ui.list,ol.ui.list ol{counter-reset:ordered;margin-left:1.25rem;list-style-type:none}.ui.ordered.list .list>.item,.ui.ordered.list>.item,ol.ui.list li{list-style-type:none;position:relative}.ui.ordered.list .list>.item:before,.ui.ordered.list>.item:before,ol.ui.list li:before{position:absolute;top:auto;left:auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;margin-left:-1.25rem;counter-increment:ordered;content:counters(ordered, ".") " ";text-align:right;color:rgba(0,0,0,.87);vertical-align:middle;opacity:.8}.ui.ordered.inverted.list .list>.item:before,.ui.ordered.inverted.list>.item:before,ol.ui.inverted.list li:before{color:rgba(255,255,255,.7)}.ui.ordered.list>.item[data-value],.ui.ordered.list>.list>.item[data-value]{content:attr(data-value)}ol.ui.list li[value]:before{content:attr(value)}.ui.ordered.list .list,ol.ui.list ol{margin-left:1em}.ui.ordered.list .list>.item:before,ol.ui.list ol li:before{margin-left:-2em}.ui.ordered.horizontal.list,ol.ui.horizontal.list{margin-left:0}.ui.ordered.horizontal.list .list>.item:before,.ui.ordered.horizontal.list>.item:before,ol.ui.horizontal.list li:before{position:static;margin:0 .5em 0 0}.ui.divided.list>.item{border-top:1px solid rgba(34,36,38,.15)}.ui.divided.list .list>.item{border-top:none}.ui.divided.list .item .list>.item{border-top:none}.ui.divided.list .list>.item:first-child,.ui.divided.list>.item:first-child{border-top:none}.ui.divided.list:not(.horizontal) .list>.item:first-child{border-top-width:1px}.ui.divided.bulleted.list .list,.ui.divided.bulleted.list:not(.horizontal){margin-left:0;padding-left:0}.ui.divided.bulleted.list>.item:not(.horizontal){padding-left:1.25rem}.ui.divided.ordered.list{margin-left:0}.ui.divided.ordered.list .list>.item,.ui.divided.ordered.list>.item{padding-left:1.25rem}.ui.divided.ordered.list .item .list{margin-left:0;margin-right:0;padding-bottom:.21428571em}.ui.divided.ordered.list .item .list>.item{padding-left:1em}.ui.divided.selection.list .list>.item,.ui.divided.selection.list>.item{margin:0;border-radius:0}.ui.divided.horizontal.list{margin-left:0}.ui.divided.horizontal.list>.item:not(:first-child){padding-left:.5em}.ui.divided.horizontal.list>.item:not(:last-child){padding-right:.5em}.ui.divided.horizontal.list>.item{border-top:none;border-left:1px solid rgba(34,36,38,.15);margin:0;line-height:.6}.ui.horizontal.divided.list>.item:first-child{border-left:none}.ui.divided.inverted.horizontal.list>.item,.ui.divided.inverted.list>.item,.ui.divided.inverted.list>.list{border-color:rgba(255,255,255,.1)}.ui.celled.list>.item,.ui.celled.list>.list{border-top:1px solid rgba(34,36,38,.15);padding-left:.5em;padding-right:.5em}.ui.celled.list>.item:last-child{border-bottom:1px solid rgba(34,36,38,.15)}.ui.celled.list>.item:first-child,.ui.celled.list>.item:last-child{padding-top:.21428571em;padding-bottom:.21428571em}.ui.celled.list .item .list>.item{border-width:0}.ui.celled.list .list>.item:first-child{border-top-width:0}.ui.celled.bulleted.list{margin-left:0}.ui.celled.bulleted.list .list>.item,.ui.celled.bulleted.list>.item{padding-left:1.25rem}.ui.celled.bulleted.list .item .list{margin-left:-1.25rem;margin-right:-1.25rem;padding-bottom:.21428571em}.ui.celled.ordered.list{margin-left:0}.ui.celled.ordered.list .list>.item,.ui.celled.ordered.list>.item{padding-left:1.25rem}.ui.celled.ordered.list .item .list{margin-left:0;margin-right:0;padding-bottom:.21428571em}.ui.celled.ordered.list .list>.item{padding-left:1em}.ui.horizontal.celled.list{margin-left:0}.ui.horizontal.celled.list .list>.item,.ui.horizontal.celled.list>.item{border-top:none;border-left:1px solid rgba(34,36,38,.15);margin:0;padding-left:.5em;padding-right:.5em;line-height:.6}.ui.horizontal.celled.list .list>.item:last-child,.ui.horizontal.celled.list>.item:last-child{border-bottom:none;border-right:1px solid rgba(34,36,38,.15)}.ui.celled.inverted.list>.item,.ui.celled.inverted.list>.list{border-color:1px solid rgba(255,255,255,.1)}.ui.celled.inverted.horizontal.list .list>.item,.ui.celled.inverted.horizontal.list>.item{border-color:1px solid rgba(255,255,255,.1)}.ui.relaxed.list:not(.horizontal)>.item:not(:first-child){padding-top:.42857143em}.ui.relaxed.list:not(.horizontal)>.item:not(:last-child){padding-bottom:.42857143em}.ui.horizontal.relaxed.list .list>.item:not(:first-child),.ui.horizontal.relaxed.list>.item:not(:first-child){padding-left:1rem}.ui.horizontal.relaxed.list .list>.item:not(:last-child),.ui.horizontal.relaxed.list>.item:not(:last-child){padding-right:1rem}.ui[class*="very relaxed"].list:not(.horizontal)>.item:not(:first-child){padding-top:.85714286em}.ui[class*="very relaxed"].list:not(.horizontal)>.item:not(:last-child){padding-bottom:.85714286em}.ui.horizontal[class*="very relaxed"].list .list>.item:not(:first-child),.ui.horizontal[class*="very relaxed"].list>.item:not(:first-child){padding-left:1.5rem}.ui.horizontal[class*="very relaxed"].list .list>.item:not(:last-child),.ui.horizontal[class*="very relaxed"].list>.item:not(:last-child){padding-right:1.5rem}.ui.mini.list{font-size:.78571429em}.ui.tiny.list{font-size:.85714286em}.ui.small.list{font-size:.92857143em}.ui.list{font-size:1em}.ui.large.list{font-size:1.14285714em}.ui.big.list{font-size:1.28571429em}.ui.huge.list{font-size:1.42857143em}.ui.massive.list{font-size:1.71428571em}.ui.mini.horizontal.list .list>.item,.ui.mini.horizontal.list>.item{font-size:.78571429rem}.ui.tiny.horizontal.list .list>.item,.ui.tiny.horizontal.list>.item{font-size:.85714286rem}.ui.small.horizontal.list .list>.item,.ui.small.horizontal.list>.item{font-size:.92857143rem}.ui.horizontal.list .list>.item,.ui.horizontal.list>.item{font-size:1rem}.ui.large.horizontal.list .list>.item,.ui.large.horizontal.list>.item{font-size:1.14285714rem}.ui.big.horizontal.list .list>.item,.ui.big.horizontal.list>.item{font-size:1.28571429rem}.ui.huge.horizontal.list .list>.item,.ui.huge.horizontal.list>.item{font-size:1.42857143rem}.ui.massive.horizontal.list .list>.item,.ui.massive.horizontal.list>.item{font-size:1.71428571rem}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index c2b9ac66a..e8e0c0577 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1282,7 +1282,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -1697,7 +1698,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -1753,6 +1755,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -1796,12 +1799,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -2438,9 +2443,9 @@
       "integrity": "sha512-l3hLhffs9zqoDe8zjmb/mAN4B8VT3L56EUvKNqLFVs9YlFA+zx7ke1DO8STAdDyYNkeSo1nKmjuvQeI12So8Xw=="
     },
     "kind-of": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
-      "integrity": "sha1-ARRrNqYhjmTljzqNZt5df8b20FE=",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
       "dev": true
     },
     "latest-version": {
@@ -2483,9 +2488,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.15",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+      "version": "4.17.19",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
+      "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
     },
     "lowercase-keys": {
       "version": "1.0.1",
@@ -3136,6 +3141,12 @@
       "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
       "dev": true
     },
+    "prettier": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz",
+      "integrity": "sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==",
+      "dev": true
+    },
     "process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -3228,9 +3239,9 @@
       },
       "dependencies": {
         "minimist": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
           "dev": true
         }
       }
@@ -4029,9 +4040,9 @@
       }
     },
     "tree-kill": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.1.tgz",
-      "integrity": "sha512-4hjqbObwlh2dLyW4tcz0Ymw0ggoaVDMveUB9w8kFSQScdRLo0gxO9J7WFcUBo+W3C1TLdFIEwNOWebgZZ0RH9Q==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
       "dev": true
     },
     "tslib": {
@@ -4363,9 +4374,9 @@
       }
     },
     "yargs-parser": {
-      "version": "13.1.1",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.1.tgz",
-      "integrity": "sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==",
+      "version": "13.1.2",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+      "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
       "dev": true,
       "requires": {
         "camelcase": "^5.0.0",
diff --git a/package.json b/package.json
index 315d10622..fdbaddfd1 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "WasedaTime-Web",
+  "name": "wasedatime-web",
   "version": "1.0.0",
   "description": "An unonfficial app for syllabus searching, classroom finding, and bus schedule checking at Waseda University.",
   "main": "server.js",
@@ -27,13 +27,14 @@
     "dotenv": "^4.0.0",
     "express": "^4.16.2",
     "helmet": "^3.9.0",
-    "lodash": "^4.17.11",
+    "lodash": "^4.17.19",
     "mongoose": "^5.3.4"
   },
   "devDependencies": {
     "all-contributors-cli": "^6.1.1",
     "concurrently": "^3.5.1",
     "mocha": "^4.0.1",
-    "nodemon": "^1.18.10"
+    "nodemon": "^1.18.10",
+    "prettier": "2.0.5"
   }
 }
diff --git a/server.js b/server.js
index 255347e84..5f60439b7 100644
--- a/server.js
+++ b/server.js
@@ -9,7 +9,7 @@ const haltOnTimedout = (req, res, next) => {
 };
 
 const sendCustomizedIndexFile = (filePath, title, description) => {
-  return function(req, res, next) {
+  return function (req, res, next) {
     fs.readFile(filePath, "utf8", (err, data) => {
       if (err) {
         console.log(err);
diff --git a/test/no.test.js b/test/no.test.js
index 866c6791f..3992c324a 100644
--- a/test/no.test.js
+++ b/test/no.test.js
@@ -1,7 +1,7 @@
-const assert = require('assert');
+const assert = require("assert");
 
-describe('Currently no test is created', () => {
-  it('pass', done => {
+describe("Currently no test is created", () => {
+  it("pass", (done) => {
     done();
   });
 });