diff --git a/README.md b/README.md
index 8f522696..06dbdc98 100644
--- a/README.md
+++ b/README.md
@@ -85,7 +85,7 @@ This is the heart of your Sapper app. There are two kinds of routes — *pages*,
 
 There are three simple rules for naming the files that define your routes:
 
-* A file called `src/routes/about.svelte` corresponds to the `/about` route. A file called `src/routes/blog/[slug].svelte` corresponds to the `/blog/:slug` route, in which case `params.slug` is available to the route
+* A file called `src/routes/about.svelte` corresponds to the `/about` route. A file called `src/routes/blog/[id].svelte` corresponds to the `/blog/:id` route, in which case `params.id` is available to the route
 * The file `src/routes/index.svelte` (or `src/routes/index.js`) corresponds to the root of your app. `src/routes/about/index.svelte` is treated the same as `src/routes/about.svelte`.
 * Files and directories with a leading underscore do *not* create routes. This allows you to colocate helper modules and components with the routes that depend on them — for example you could have a file called `src/routes/_helpers/datetime.js` and it would *not* create a `/_helpers/datetime` route.
 
diff --git a/_template/build-pkg.js b/_template/build-pkg.js
new file mode 100644
index 00000000..30df9466
--- /dev/null
+++ b/_template/build-pkg.js
@@ -0,0 +1,13 @@
+const fs = require('fs');
+
+const type = process.argv[2];
+
+const pkg = require('../package_template.json');
+for (const key in pkg['merge-configs'][type]) {
+	Object.assign(pkg[key], pkg['merge-configs'][type][key]);
+}
+delete pkg['merge-configs'];
+fs.writeFileSync(
+	__dirname + '/../package.json',
+	JSON.stringify(pkg, null, '  ') + '\n'
+);
diff --git a/_template/build.sh b/_template/build.sh
new file mode 100755
index 00000000..7d11a13d
--- /dev/null
+++ b/_template/build.sh
@@ -0,0 +1,19 @@
+#!/bin/bash
+cd "$(dirname "$0")"
+
+if [ "$CI" ]; then
+	(umask 0077; echo "$SSH_KEY" > ~/ssh_key; echo "$SSH_KEY_ROLLUP" > ~/ssh_key_rollup; echo "$SSH_KEY_WEBPACK" > ~/ssh_key_webpack)
+	git config user.email 'noreply@svelte.dev'
+	git config user.name '[bot]'
+fi
+
+# branch names
+ROLLUP=rollup
+WEBPACK=webpack
+
+./create-branches.sh $ROLLUP $WEBPACK
+
+# force push rollup and webpack branches and repos
+GIT_SSH_COMMAND='ssh -o StrictHostKeyChecking=accept-new -i ~/ssh_key' git push git@github.com:sveltejs/sapper-template.git $ROLLUP $WEBPACK -f
+GIT_SSH_COMMAND='ssh -o StrictHostKeyChecking=accept-new -i ~/ssh_key_rollup' git push git@github.com:sveltejs/sapper-template-rollup.git $ROLLUP:master -f
+GIT_SSH_COMMAND='ssh -o StrictHostKeyChecking=accept-new -i ~/ssh_key_webpack' git push git@github.com:sveltejs/sapper-template-webpack.git $WEBPACK:master -f
diff --git a/_template/create-branches.sh b/_template/create-branches.sh
new file mode 100755
index 00000000..906b65a9
--- /dev/null
+++ b/_template/create-branches.sh
@@ -0,0 +1,25 @@
+#!/bin/bash
+cd "$(dirname "$0")"/..
+
+HEAD=$(git rev-parse HEAD)
+
+ROLLUP=${1:-rollup}
+WEBPACK=${2:-webpack}
+
+echo "Creating $ROLLUP and $WEBPACK branches from $REV"
+
+# create the $ROLLUP branch off the current HEAD
+git symbolic-ref HEAD refs/heads/$ROLLUP
+git reset $HEAD --hard
+node _template/build-pkg.js rollup
+git rm -r --cached .github _template package_template.json webpack.config.js
+git add package.json
+git commit -m 'Sapper template for Rollup'
+
+# create the $WEBPACK branch off the current HEAD
+git symbolic-ref HEAD refs/heads/$WEBPACK
+git reset $HEAD --hard
+node _template/build-pkg.js webpack
+git rm -r --cached .github _template package_template.json rollup.config.js
+git add package.json
+git commit -m 'Sapper template for webpack'
diff --git a/package-lock.json b/package-lock.json
index 8d14b9fd..eb60a96b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "TODO",
+  "name": "Unidiscuss",
   "version": "0.0.1",
   "lockfileVersion": 1,
   "requires": true,
@@ -1042,6 +1042,44 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@fullhuman/postcss-purgecss": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.3.0.tgz",
+      "integrity": "sha512-qnKm5dIOyPGJ70kPZ5jiz0I9foVOic0j+cOzNDoo8KoCf6HjicIZ99UfO2OmE7vCYSKAAepEwJtNzpiiZAh9xw==",
+      "dev": true,
+      "requires": {
+        "postcss": "7.0.32",
+        "purgecss": "^2.3.0"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "@polka/url": {
       "version": "1.0.0-next.11",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.11.tgz",
@@ -1097,17 +1135,6 @@
         "magic-string": "^0.25.7"
       }
     },
-    "@rollup/plugin-url": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-url/-/plugin-url-5.0.1.tgz",
-      "integrity": "sha512-/dO8Ic+vR9VtMkHjmFBWzISjX0iDwrB3vLg8sy4A7hxu2Uk0J09kAXbtku7gJb1fqVcJUIByFG5d/4sgNh1DvA==",
-      "dev": true,
-      "requires": {
-        "@rollup/pluginutils": "^3.0.4",
-        "make-dir": "^3.0.0",
-        "mime": "^2.4.4"
-      }
-    },
     "@rollup/pluginutils": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
@@ -1131,6 +1158,12 @@
       "integrity": "sha512-naXYePhweTi+BMv11TgioE2/FXU4fSl29HAH1ffxVciNsH3rYXjNP2yM8wqmSm7jS20gM8TIklKiTen+1iVncw==",
       "dev": true
     },
+    "@types/pug": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.4.tgz",
+      "integrity": "sha1-h3L80EGOPNLMFxVV1zAHQVBR9LI=",
+      "dev": true
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -1140,6 +1173,15 @@
         "@types/node": "*"
       }
     },
+    "@types/sass": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/@types/sass/-/sass-1.16.0.tgz",
+      "integrity": "sha512-2XZovu4NwcqmtZtsBR5XYLw18T8cBCnU2USFHTnYLLHz9fkhnoEMoDsqShJIOFsFhn5aJHjweiUUdTrDGujegA==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
@@ -1149,6 +1191,29 @@
         "negotiator": "0.6.2"
       }
     },
+    "acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "dev": true
+    },
+    "acorn-node": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
+      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
+      "dev": true,
+      "requires": {
+        "acorn": "^7.0.0",
+        "acorn-walk": "^7.0.0",
+        "xtend": "^4.0.2"
+      }
+    },
+    "acorn-walk": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+      "dev": true
+    },
     "ansi-styles": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -1158,6 +1223,58 @@
         "color-convert": "^1.9.0"
       }
     },
+    "argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "requires": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "autoprefixer": {
+      "version": "9.8.6",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
+      "integrity": "sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.12.0",
+        "caniuse-lite": "^1.0.30001109",
+        "colorette": "^1.2.1",
+        "normalize-range": "^0.1.2",
+        "num2fraction": "^1.2.2",
+        "postcss": "^7.0.32",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "babel-plugin-dynamic-import-node": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
@@ -1223,6 +1340,30 @@
         "get-intrinsic": "^1.0.0"
       }
     },
+    "caller-callsite": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
+      "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
+      "dev": true,
+      "requires": {
+        "callsites": "^2.0.0"
+      }
+    },
+    "caller-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
+      "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
+      "dev": true,
+      "requires": {
+        "caller-callsite": "^2.0.0"
+      }
+    },
+    "callsites": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
+      "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=",
+      "dev": true
+    },
     "camel-case": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz",
@@ -1233,6 +1374,12 @@
         "upper-case": "^1.1.1"
       }
     },
+    "camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true
+    },
     "caniuse-lite": {
       "version": "1.0.30001170",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001170.tgz",
@@ -1273,6 +1420,16 @@
         }
       }
     },
+    "color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.1.3.tgz",
+      "integrity": "sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^1.9.1",
+        "color-string": "^1.5.4"
+      }
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -1288,6 +1445,16 @@
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
       "dev": true
     },
+    "color-string": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.4.tgz",
+      "integrity": "sha512-57yF5yt8Xa3czSEW1jfQDE79Idk0+AkN/4KWad6tbdxUmAs3MvjxlWSWD4deYytcRfoZ9nhKyFl1kj5tBvidbw==",
+      "dev": true,
+      "requires": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "colorette": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz",
@@ -1361,6 +1528,30 @@
         }
       }
     },
+    "cosmiconfig": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
+      "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
+      "dev": true,
+      "requires": {
+        "import-fresh": "^2.0.0",
+        "is-directory": "^0.3.1",
+        "js-yaml": "^3.13.1",
+        "parse-json": "^4.0.0"
+      }
+    },
+    "css-unit-converter": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
+      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
+      "dev": true
+    },
+    "cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -1390,12 +1581,44 @@
         "object-keys": "^1.0.12"
       }
     },
+    "defined": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
+      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
+      "dev": true
+    },
+    "detect-indent": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.0.0.tgz",
+      "integrity": "sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA==",
+      "dev": true
+    },
+    "detective": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
+      "integrity": "sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==",
+      "dev": true,
+      "requires": {
+        "acorn-node": "^1.6.1",
+        "defined": "^1.0.0",
+        "minimist": "^1.1.1"
+      }
+    },
     "electron-to-chromium": {
       "version": "1.3.633",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.633.tgz",
       "integrity": "sha512-bsVCsONiVX1abkWdH7KtpuDAhsQ3N3bjPYhROSAXE78roJKet0Y5wznA14JE9pzbwSZmSMAW6KiKYf1RvbTJkA==",
       "dev": true
     },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -1408,6 +1631,12 @@
       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
       "dev": true
     },
+    "esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true
+    },
     "estree-walker": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
@@ -1420,6 +1649,17 @@
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
       "dev": true
     },
+    "fs-extra": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      }
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -1476,6 +1716,12 @@
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
       "dev": true
     },
+    "graceful-fs": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
+      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
+      "dev": true
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -1518,12 +1764,52 @@
         "uglify-js": "^3.5.1"
       }
     },
+    "html-tags": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
+      "integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==",
+      "dev": true
+    },
     "http-link-header": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/http-link-header/-/http-link-header-1.0.3.tgz",
       "integrity": "sha512-nARK1wSKoBBrtcoESlHBx36c1Ln/gnbNQi1eB6MeTUefJIT3NvUOsV15bClga0k38f0q/kN5xxrGSDS3EFnm9w==",
       "dev": true
     },
+    "import-cwd": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
+      "integrity": "sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=",
+      "dev": true,
+      "requires": {
+        "import-from": "^2.1.0"
+      }
+    },
+    "import-fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
+      "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
+      "dev": true,
+      "requires": {
+        "caller-path": "^2.0.0",
+        "resolve-from": "^3.0.0"
+      }
+    },
+    "import-from": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz",
+      "integrity": "sha1-M1238qev/VOqpHHUuAId7ja387E=",
+      "dev": true,
+      "requires": {
+        "resolve-from": "^3.0.0"
+      }
+    },
+    "indexes-of": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
+      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
+      "dev": true
+    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -1540,6 +1826,12 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
+      "dev": true
+    },
     "is-core-module": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
@@ -1549,6 +1841,12 @@
         "has": "^1.0.3"
       }
     },
+    "is-directory": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
+      "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
+      "dev": true
+    },
     "is-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
@@ -1598,12 +1896,28 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "dev": true
     },
+    "js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dev": true,
+      "requires": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      }
+    },
     "jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
       "dev": true
     },
+    "json-parse-better-errors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
+      "dev": true
+    },
     "json5": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
@@ -1613,12 +1927,27 @@
         "minimist": "^1.2.5"
       }
     },
+    "jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "lodash": {
       "version": "4.17.20",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
       "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
       "dev": true
     },
+    "lodash.toarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
+      "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=",
+      "dev": true
+    },
     "lower-case": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
@@ -1634,23 +1963,6 @@
         "sourcemap-codec": "^1.4.4"
       }
     },
-    "make-dir": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-      "dev": true,
-      "requires": {
-        "semver": "^6.0.0"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
-        }
-      }
-    },
     "merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -1675,6 +1987,12 @@
         "mime-db": "1.44.0"
       }
     },
+    "min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true
+    },
     "minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -1695,6 +2013,12 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
+    "nanoid": {
+      "version": "3.1.20",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz",
+      "integrity": "sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==",
+      "dev": true
+    },
     "negotiator": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
@@ -1709,12 +2033,51 @@
         "lower-case": "^1.1.1"
       }
     },
+    "node-emoji": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
+      "integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==",
+      "dev": true,
+      "requires": {
+        "lodash.toarray": "^4.4.0"
+      }
+    },
     "node-releases": {
       "version": "1.1.67",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.67.tgz",
       "integrity": "sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg==",
       "dev": true
     },
+    "normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
+      "dev": true
+    },
+    "normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==",
+      "dev": true
+    },
+    "num2fraction": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
+      "dev": true
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true
+    },
+    "object-hash": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.1.1.tgz",
+      "integrity": "sha512-VOJmgmS+7wvXf8CjbQmimtCnEx3IAoLxI3fp2fbWehxrWBcAQFbk+vcwb6vzR0VZv/eNCJ/27j151ZTwqW/JeQ==",
+      "dev": true
+    },
     "object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
@@ -1756,6 +2119,16 @@
         "no-case": "^2.2.0"
       }
     },
+    "parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+      "dev": true,
+      "requires": {
+        "error-ex": "^1.3.1",
+        "json-parse-better-errors": "^1.0.1"
+      }
+    },
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -1783,6 +2156,218 @@
         "trouter": "^3.1.0"
       }
     },
+    "postcss": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.1.tgz",
+      "integrity": "sha512-RhsqOOAQzTgh1UB/IZdca7F9WDb7SUCR2Vnv1x7DbvuuggQIpoDwjK+q0rzoPffhYvWNKX5JSwS4so4K3UC6vA==",
+      "dev": true,
+      "requires": {
+        "colorette": "^1.2.1",
+        "nanoid": "^3.1.20",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-functions": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz",
+      "integrity": "sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.2",
+        "object-assign": "^4.1.1",
+        "postcss": "^6.0.9",
+        "postcss-value-parser": "^3.3.0"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.4.0"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-js": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.3.tgz",
+      "integrity": "sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==",
+      "dev": true,
+      "requires": {
+        "camelcase-css": "^2.0.1",
+        "postcss": "^7.0.18"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-load-config": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.2.tgz",
+      "integrity": "sha512-/rDeGV6vMUo3mwJZmeHfEDvwnTKKqQ0S7OHUi/kJvvtx3aWtyWG2/0ZWnzCt2keEclwN6Tf0DST2v9kITdOKYw==",
+      "dev": true,
+      "requires": {
+        "cosmiconfig": "^5.0.0",
+        "import-cwd": "^2.0.0"
+      }
+    },
+    "postcss-nested": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.3.tgz",
+      "integrity": "sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.32",
+        "postcss-selector-parser": "^6.0.2"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-selector-parser": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz",
+      "integrity": "sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==",
+      "dev": true,
+      "requires": {
+        "cssesc": "^3.0.0",
+        "indexes-of": "^1.0.1",
+        "uniq": "^1.0.1",
+        "util-deprecate": "^1.0.2"
+      }
+    },
+    "postcss-value-parser": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+      "dev": true
+    },
+    "pretty-hrtime": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
+      "dev": true
+    },
+    "purgecss": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-2.3.0.tgz",
+      "integrity": "sha512-BE5CROfVGsx2XIhxGuZAT7rTH9lLeQx/6M0P7DTXQH4IUc3BBzs9JUzt4yzGf3JrH9enkeq6YJBe9CTtkm1WmQ==",
+      "dev": true,
+      "requires": {
+        "commander": "^5.0.0",
+        "glob": "^7.0.0",
+        "postcss": "7.0.32",
+        "postcss-selector-parser": "^6.0.2"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+          "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -1792,6 +2377,24 @@
         "safe-buffer": "^5.1.0"
       }
     },
+    "reduce-css-calc": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz",
+      "integrity": "sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA==",
+      "dev": true,
+      "requires": {
+        "css-unit-converter": "^1.1.1",
+        "postcss-value-parser": "^3.3.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -1886,6 +2489,12 @@
         "path-parse": "^1.0.6"
       }
     },
+    "resolve-from": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
+      "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
+      "dev": true
+    },
     "rollup": {
       "version": "2.35.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.35.1.tgz",
@@ -1896,13 +2505,14 @@
       }
     },
     "rollup-plugin-svelte": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-7.0.0.tgz",
-      "integrity": "sha512-cw4yv/5v1NQV3nPbpOJtikgkB+9mfSJaqKUdq7x5fVQJnwLtcdc2JOszBs5pBY+SemTs5pmJbdEMseEavbUtjQ==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-6.1.1.tgz",
+      "integrity": "sha512-ijnm0pH1ScrY4uxwaNXBpNVejVzpL2769hIEbAlnqNUWZrffLspu5/k9/l/Wsj3NrEHLQ6wCKGagVJonyfN7ow==",
       "dev": true,
       "requires": {
         "require-relative": "^0.8.7",
-        "rollup-pluginutils": "^2.8.2"
+        "rollup-pluginutils": "^2.8.2",
+        "sourcemap-codec": "^1.4.8"
       }
     },
     "rollup-plugin-terser": {
@@ -1982,6 +2592,23 @@
       "integrity": "sha512-5YOyQqYkOFSkPFnpS87De6BYzDiZBc8FS4/aTuGZiST+WmXSwWRoaNRHqyVOeEpSx9wlgYWg9WYfCuzD/11/qA==",
       "dev": true
     },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      },
+      "dependencies": {
+        "is-arrayish": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+          "dev": true
+        }
+      }
+    },
     "sirv": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.10.tgz",
@@ -2022,12 +2649,27 @@
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
       "dev": true
     },
+    "sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "dev": true
+    },
     "string-hash": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
       "integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=",
       "dev": true
     },
+    "strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "requires": {
+        "min-indent": "^1.0.0"
+      }
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -2043,6 +2685,179 @@
       "integrity": "sha512-r+n8UJkDqoQm1b+3tA3Lh6mHXKpcfOSOuEuIo5gE2W9wQYi64RYX/qE6CZBDDsP/H4M+N426JwY7XGH4xASvGQ==",
       "dev": true
     },
+    "svelte-preprocess": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.6.1.tgz",
+      "integrity": "sha512-s7KdhR2pOsffyOzZIMEb315f6pfgeDnOWN47m6YKFeSEx3NMf/79Znc3vuG/Ai79SL/vsi86WDrjFPLGRfDesg==",
+      "dev": true,
+      "requires": {
+        "@types/pug": "^2.0.4",
+        "@types/sass": "^1.16.0",
+        "detect-indent": "^6.0.0",
+        "strip-indent": "^3.0.0"
+      }
+    },
+    "tailwindcss": {
+      "version": "1.9.6",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.9.6.tgz",
+      "integrity": "sha512-nY8WYM/RLPqGsPEGEV2z63riyQPcHYZUJpAwdyBzVpxQHOHqHE+F/fvbCeXhdF1+TA5l72vSkZrtYCB9hRcwkQ==",
+      "dev": true,
+      "requires": {
+        "@fullhuman/postcss-purgecss": "^2.1.2",
+        "autoprefixer": "^9.4.5",
+        "browserslist": "^4.12.0",
+        "bytes": "^3.0.0",
+        "chalk": "^3.0.0 || ^4.0.0",
+        "color": "^3.1.2",
+        "detective": "^5.2.0",
+        "fs-extra": "^8.0.0",
+        "html-tags": "^3.1.0",
+        "lodash": "^4.17.20",
+        "node-emoji": "^1.8.1",
+        "normalize.css": "^8.0.1",
+        "object-hash": "^2.0.3",
+        "postcss": "^7.0.11",
+        "postcss-functions": "^3.0.0",
+        "postcss-js": "^2.0.0",
+        "postcss-nested": "^4.1.1",
+        "postcss-selector-parser": "^6.0.0",
+        "postcss-value-parser": "^4.1.0",
+        "pretty-hrtime": "^1.0.3",
+        "reduce-css-calc": "^2.1.6",
+        "resolve": "^1.14.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          },
+          "dependencies": {
+            "ansi-styles": {
+              "version": "3.2.1",
+              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+              "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+              "dev": true,
+              "requires": {
+                "color-convert": "^1.9.0"
+              }
+            },
+            "chalk": {
+              "version": "2.4.2",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+              "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+              "dev": true,
+              "requires": {
+                "ansi-styles": "^3.2.1",
+                "escape-string-regexp": "^1.0.5",
+                "supports-color": "^5.3.0"
+              },
+              "dependencies": {
+                "supports-color": {
+                  "version": "5.5.0",
+                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+                  "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+                  "dev": true,
+                  "requires": {
+                    "has-flag": "^3.0.0"
+                  }
+                }
+              }
+            },
+            "color-convert": {
+              "version": "1.9.3",
+              "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+              "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+              "dev": true,
+              "requires": {
+                "color-name": "1.1.3"
+              }
+            },
+            "color-name": {
+              "version": "1.1.3",
+              "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+              "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+              "dev": true
+            },
+            "has-flag": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+              "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+              "dev": true
+            },
+            "supports-color": {
+              "version": "6.1.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+              "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+              "dev": true,
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            }
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "terser": {
       "version": "5.5.1",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.5.1.tgz",
@@ -2115,12 +2930,30 @@
       "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==",
       "dev": true
     },
+    "uniq": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
+      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
+      "dev": true
+    },
+    "universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true
+    },
     "upper-case": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz",
       "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=",
       "dev": true
     },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -2131,6 +2964,12 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
       "dev": true
+    },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "dev": true
     }
   }
 }
diff --git a/package.json b/package.json
index a74d716e..182a3a34 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "TODO",
-  "description": "TODO",
+  "name": "Unidiscuss",
+  "description": "Unidiscuss",
   "version": "0.0.1",
   "scripts": {
     "dev": "sapper dev",
@@ -23,12 +23,15 @@
     "@rollup/plugin-commonjs": "^14.0.0",
     "@rollup/plugin-node-resolve": "^8.0.0",
     "@rollup/plugin-replace": "^2.2.0",
-    "@rollup/plugin-url": "^5.0.0",
     "carbon-icons-svelte": "^10.21.0",
+    "postcss": "^8.0.9",
+    "postcss-load-config": "^2.1.0",
     "rollup": "^2.3.4",
-    "rollup-plugin-svelte": "^7.0.0",
+    "rollup-plugin-svelte": "^6.0.0",
     "rollup-plugin-terser": "^7.0.0",
     "sapper": "^0.28.0",
-    "svelte": "^3.17.3"
+    "svelte": "^3.17.3",
+    "svelte-preprocess": "^4.3.0",
+    "tailwindcss": "^1.8.10"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 00000000..4808626f
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('tailwindcss')],
+};
diff --git a/rollup.config.js b/rollup.config.js
index 3171fa6e..4a34f91c 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,120 +1,122 @@
-import path from 'path';
-import resolve from '@rollup/plugin-node-resolve';
-import replace from '@rollup/plugin-replace';
-import commonjs from '@rollup/plugin-commonjs';
-import url from '@rollup/plugin-url';
-import svelte from 'rollup-plugin-svelte';
-import babel from '@rollup/plugin-babel';
-import { terser } from 'rollup-plugin-terser';
-import config from 'sapper/config/rollup.js';
-import pkg from './package.json';
+import resolve from "@rollup/plugin-node-resolve";
+import replace from "@rollup/plugin-replace";
+import commonjs from "@rollup/plugin-commonjs";
+import svelte from "rollup-plugin-svelte";
+import babel from "@rollup/plugin-babel";
+import { terser } from "rollup-plugin-terser";
+import config from "sapper/config/rollup.js";
+import sveltePreprocess from "svelte-preprocess";
+
+import pkg from "./package.json";
 
 const mode = process.env.NODE_ENV;
-const dev = mode === 'development';
+const dev = mode === "development";
 const legacy = !!process.env.SAPPER_LEGACY_BUILD;
 
 const onwarn = (warning, onwarn) =>
-	(warning.code === 'MISSING_EXPORT' && /'preload'/.test(warning.message)) ||
-	(warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) ||
-	onwarn(warning);
+  (warning.code === "MISSING_EXPORT" && /'preload'/.test(warning.message)) ||
+  (warning.code === "CIRCULAR_DEPENDENCY" &&
+    /[/\\]@sapper[/\\]/.test(warning.message)) ||
+  onwarn(warning);
+
+const preprocess = sveltePreprocess({ postcss: true });
 
 export default {
-	client: {
-		input: config.client.input(),
-		output: config.client.output(),
-		plugins: [
-			replace({
-				'process.browser': true,
-				'process.env.NODE_ENV': JSON.stringify(mode)
-			}),
-			svelte({
-				compilerOptions: {
-					dev,
-					hydratable: true
-				}
-			}),
-			url({
-				sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
-				publicPath: '/client/'
-			}),
-			resolve({
-				browser: true,
-				dedupe: ['svelte']
-			}),
-			commonjs(),
+  client: {
+    input: config.client.input(),
+    output: config.client.output(),
+    plugins: [
+      replace({
+        "process.browser": true,
+        "process.env.NODE_ENV": JSON.stringify(mode)
+      }),
+      svelte({
+        preprocess,
+        dev,
+        hydratable: true,
+        emitCss: true
+      }),
+      resolve({
+        browser: true,
+        dedupe: ["svelte"]
+      }),
+      commonjs(),
 
-			legacy && babel({
-				extensions: ['.js', '.mjs', '.html', '.svelte'],
-				babelHelpers: 'runtime',
-				exclude: ['node_modules/@babel/**'],
-				presets: [
-					['@babel/preset-env', {
-						targets: '> 0.25%, not dead'
-					}]
-				],
-				plugins: [
-					'@babel/plugin-syntax-dynamic-import',
-					['@babel/plugin-transform-runtime', {
-						useESModules: true
-					}]
-				]
-			}),
+      legacy &&
+        babel({
+          extensions: [".js", ".mjs", ".html", ".svelte"],
+          babelHelpers: "runtime",
+          exclude: ["node_modules/@babel/**"],
+          presets: [
+            [
+              "@babel/preset-env",
+              {
+                targets: "> 0.25%, not dead"
+              }
+            ]
+          ],
+          plugins: [
+            "@babel/plugin-syntax-dynamic-import",
+            [
+              "@babel/plugin-transform-runtime",
+              {
+                useESModules: true
+              }
+            ]
+          ]
+        }),
 
-			!dev && terser({
-				module: true
-			})
-		],
+      !dev &&
+        terser({
+          module: true
+        })
+    ],
 
-		preserveEntrySignatures: false,
-		onwarn,
-	},
+    preserveEntrySignatures: false,
+    onwarn
+  },
 
-	server: {
-		input: config.server.input(),
-		output: config.server.output(),
-		plugins: [
-			replace({
-				'process.browser': false,
-				'process.env.NODE_ENV': JSON.stringify(mode)
-			}),
-			svelte({
-				compilerOptions: {
-					dev,
-					generate: 'ssr',
-					hydratable: true
-				},
-				emitCss: false
-			}),
-			url({
-				sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
-				publicPath: '/client/',
-				emitFiles: false // already emitted by client build
-			}),
-			resolve({
-				dedupe: ['svelte']
-			}),
-			commonjs()
-		],
-		external: Object.keys(pkg.dependencies).concat(require('module').builtinModules),
+  server: {
+    input: config.server.input(),
+    output: config.server.output(),
+    plugins: [
+      replace({
+        "process.browser": false,
+        "process.env.NODE_ENV": JSON.stringify(mode)
+      }),
+      svelte({
+        preprocess,
+        generate: "ssr",
+        hydratable: true,
+        dev
+      }),
+      resolve({
+        dedupe: ["svelte"]
+      }),
+      commonjs()
+    ],
+    external: Object.keys(pkg.dependencies).concat(
+      require("module").builtinModules
+    ),
 
-		preserveEntrySignatures: 'strict',
-		onwarn,
-	},
+    preserveEntrySignatures: "strict",
+    onwarn
+  },
 
-	serviceworker: {
-		input: config.serviceworker.input(),
-		output: config.serviceworker.output(),
-		plugins: [
-			resolve(),
-			replace({
-				'process.browser': true,
-				'process.env.NODE_ENV': JSON.stringify(mode)
-			}),
-			commonjs(),
-			!dev && terser()
-		],
+  serviceworker: {
+    input: config.serviceworker.input(),
+    output: config.serviceworker.output(),
+    plugins: [
+      resolve(),
+      replace({
+        "process.browser": true,
+        "process.env.NODE_ENV": JSON.stringify(mode)
+      }),
+      commonjs(),
+      !dev && terser()
+    ],
 
-		preserveEntrySignatures: false,
-		onwarn,
-	}
+    preserveEntrySignatures: false,
+    onwarn
+  }
 };
diff --git a/scripts/setupTypeScript.js b/scripts/setupTypeScript.js
index 45fb5963..d6af0bf5 100644
--- a/scripts/setupTypeScript.js
+++ b/scripts/setupTypeScript.js
@@ -5,233 +5,222 @@
  */
 
 // @ts-check
-const fs = require('fs');
-const path = require('path');
-const { argv } = require('process');
+const fs = require("fs");
+const path = require("path");
+const { argv } = require("process");
 
-const projectRoot = argv[2] || path.join(__dirname, '..');
-
-const isRollup = fs.existsSync(path.join(projectRoot, "rollup.config.js"));
+const projectRoot = argv[2] || path.join(__dirname, "..");
 
 function warn(message) {
-	console.warn('Warning: ' + message);
+  console.warn("Warning: " + message);
 }
 
 function replaceInFile(fileName, replacements) {
-	if (fs.existsSync(fileName)) {
-		let contents = fs.readFileSync(fileName, 'utf8');
-		let hadUpdates = false;
+  if (fs.existsSync(fileName)) {
+    let contents = fs.readFileSync(fileName, "utf8");
+    let hadUpdates = false;
 
-		replacements.forEach(([from, to]) => {
-			const newContents = contents.replace(from, to);
+    replacements.forEach(([from, to]) => {
+      const newContents = contents.replace(from, to);
 
-			const isAlreadyApplied = typeof to !== 'string' || contents.includes(to);
+      const isAlreadyApplied = typeof to !== "string" || contents.includes(to);
 
-			if (newContents !== contents) {
-				contents = newContents;
-				hadUpdates = true;
-			} else if (!isAlreadyApplied) {
-				warn(`Wanted to update "${from}" in ${fileName}, but did not find it.`);
-			}
-		});
+      if (newContents !== contents) {
+        contents = newContents;
+        hadUpdates = true;
+      } else if (!isAlreadyApplied) {
+        warn(`Wanted to update "${from}" in ${fileName}, but did not find it.`);
+      }
+    });
 
-		if (hadUpdates) {
-			fs.writeFileSync(fileName, contents);
-		} else {
-			console.log(`${fileName} had already been updated.`);
-		}
-	} else {
-		warn(`Wanted to update ${fileName} but the file did not exist.`);
-	}
+    if (hadUpdates) {
+      fs.writeFileSync(fileName, contents);
+    } else {
+      console.log(`${fileName} had already been updated.`);
+    }
+  } else {
+    warn(`Wanted to update ${fileName} but the file did not exist.`);
+  }
 }
 
 function createFile(fileName, contents) {
-	if (fs.existsSync(fileName)) {
-		warn(`Wanted to create ${fileName}, but it already existed. Leaving existing file.`);
-	} else {
-		fs.writeFileSync(fileName, contents);
-	}
+  if (fs.existsSync(fileName)) {
+    warn(
+      `Wanted to create ${fileName}, but it already existed. Leaving existing file.`
+    );
+  } else {
+    fs.writeFileSync(fileName, contents);
+  }
 }
 
 function addDepsToPackageJson() {
-	const pkgJSONPath = path.join(projectRoot, 'package.json');
-	const packageJSON = JSON.parse(fs.readFileSync(pkgJSONPath, 'utf8'));
-	packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, {
-		...(isRollup ? { '@rollup/plugin-typescript': '^6.0.0' } : { 'ts-loader': '^8.0.4' }),
-		'@tsconfig/svelte': '^1.0.10',
-		'@types/compression': '^1.7.0',
-		'@types/node': '^14.11.1',
-		'@types/polka': '^0.5.1',
-		'svelte-check': '^1.0.46',
-		'svelte-preprocess': '^4.3.0',
-		tslib: '^2.0.1',
-		typescript: '^4.0.3'
-	});
+  const pkgJSONPath = path.join(projectRoot, "package.json");
+  const packageJSON = JSON.parse(fs.readFileSync(pkgJSONPath, "utf8"));
+  packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, {
+    "@rollup/plugin-typescript": "^6.0.0",
+    "@tsconfig/svelte": "^1.0.10",
+    "@types/compression": "^1.7.0",
+    "@types/node": "^14.11.1",
+    "@types/polka": "^0.5.1",
+    "svelte-check": "^1.0.46",
+    "svelte-preprocess": "^4.3.0",
+    tslib: "^2.0.1",
+    typescript: "^4.0.3"
+  });
 
-	// Add script for checking
-	packageJSON.scripts = Object.assign(packageJSON.scripts, {
-		validate: 'svelte-check --ignore src/node_modules/@sapper'
-	});
+  // Add script for checking
+  packageJSON.scripts = Object.assign(packageJSON.scripts, {
+    validate: "svelte-check --ignore src/node_modules/@sapper"
+  });
 
-	// Write the package JSON
-	fs.writeFileSync(pkgJSONPath, JSON.stringify(packageJSON, null, '  '));
+  // Write the package JSON
+  fs.writeFileSync(pkgJSONPath, JSON.stringify(packageJSON, null, "  "));
 }
 
 function changeJsExtensionToTs(dir) {
-	const elements = fs.readdirSync(dir, { withFileTypes: true });
+  const elements = fs.readdirSync(dir, { withFileTypes: true });
 
-	for (let i = 0; i < elements.length; i++) {
-		if (elements[i].isDirectory()) {
-			changeJsExtensionToTs(path.join(dir, elements[i].name));
-		} else if (elements[i].name.match(/^[^_]((?!json).)*js$/)) {
-			fs.renameSync(path.join(dir, elements[i].name), path.join(dir, elements[i].name).replace('.js', '.ts'));
-		}
-	}
+  for (let i = 0; i < elements.length; i++) {
+    if (elements[i].isDirectory()) {
+      changeJsExtensionToTs(path.join(dir, elements[i].name));
+    } else if (elements[i].name.match(/^((?!json).)*js$/)) {
+      fs.renameSync(
+        path.join(dir, elements[i].name),
+        path.join(dir, elements[i].name).replace(".js", ".ts")
+      );
+    }
+  }
 }
 
 function updateSingleSvelteFile({ view, vars, contextModule }) {
-	replaceInFile(path.join(projectRoot, 'src', `${view}.svelte`), [
-		[/(?:<script)(( .*?)*?)>/gm, (m, attrs) => `<script${attrs}${!attrs.includes('lang="ts"') ? ' lang="ts"' : ''}>`],
-		...(vars ? vars.map(({ name, type }) => [`export let ${name};`, `export let ${name}: ${type};`]) : []),
-		...(contextModule ? contextModule.map(({ js, ts }) => [js, ts]) : [])
-	]);
+  replaceInFile(path.join(projectRoot, "src", `${view}.svelte`), [
+    [
+      /(?:<script)(( .*?)*?)>/gm,
+      (m, attrs) =>
+        `<script${attrs}${!attrs.includes('lang="ts"') ? ' lang="ts"' : ""}>`
+    ],
+    ...(vars
+      ? vars.map(({ name, type }) => [
+          `export let ${name};`,
+          `export let ${name}: ${type};`
+        ])
+      : []),
+    ...(contextModule ? contextModule.map(({ js, ts }) => [js, ts]) : [])
+  ]);
 }
 
 // Switch the *.svelte file to use TS
 function updateSvelteFiles() {
-	[
-		{
-			view: 'components/Nav',
-			vars: [{ name: 'segment', type: 'string' }]
-		},
-		{
-			view: 'routes/_layout',
-			vars: [{ name: 'segment', type: 'string' }]
-		},
-		{
-			view: 'routes/_error',
-			vars: [
-				{ name: 'status', type: 'number' },
-				{ name: 'error', type: 'Error' }
-			]
-		},
-		{
-			view: 'routes/blog/index',
-			vars: [{ name: 'posts', type: '{ slug: string; title: string, html: any }[]' }],
-			contextModule: [
-				{
-					js: '.then(r => r.json())',
-					ts: '.then((r: { json: () => any; }) => r.json())'
-				},
-				{
-					js: '.then(posts => {',
-					ts: '.then((posts: { slug: string; title: string, html: any }[]) => {'
-				}
-			]
-		},
-		{
-			view: 'routes/blog/[slug]',
-			vars: [{ name: 'post', type: '{ slug: string; title: string, html: any }' }]
-		}
-	].forEach(updateSingleSvelteFile);
+  [
+    {
+      view: "components/Nav",
+      vars: [{ name: "segment", type: "string" }]
+    },
+    {
+      view: "routes/_layout",
+      vars: [{ name: "segment", type: "string" }]
+    },
+    {
+      view: "routes/_error",
+      vars: [
+        { name: "status", type: "number" },
+        { name: "error", type: "Error" }
+      ]
+    },
+    {
+      view: "routes/blog/index",
+      vars: [
+        { name: "posts", type: "{ id: string; title: string, html: any }[]" }
+      ],
+      contextModule: [
+        {
+          js: ".then(r => r.json())",
+          ts: ".then((r: { json: () => any; }) => r.json())"
+        },
+        {
+          js: ".then(posts => {",
+          ts: ".then((posts: { id: string; title: string, html: any }[]) => {"
+        }
+      ]
+    },
+    {
+      view: "routes/blog/[id]",
+      vars: [
+        { name: "post", type: "{ id: string; title: string, html: any }" }
+      ]
+    }
+  ].forEach(updateSingleSvelteFile);
 }
 
 function updateRollupConfig() {
-	// Edit rollup config
-	replaceInFile(path.join(projectRoot, 'rollup.config.js'), [
-		// Edit imports
-		[
-			/'rollup-plugin-terser';\n(?!import sveltePreprocess)/,
-			`'rollup-plugin-terser';
+  // Edit rollup config
+  replaceInFile(path.join(projectRoot, "rollup.config.js"), [
+    // Edit imports
+    [
+      /'rollup-plugin-terser';\n(?!import sveltePreprocess)/,
+      `'rollup-plugin-terser';
 import sveltePreprocess from 'svelte-preprocess';
-import typescript from '@rollup/plugin-typescript';
-`
-		],
-		// Edit inputs
-		[
-			/(?<!THIS_IS_UNDEFINED[^\n]*\n\s*)onwarn\(warning\);/,
-			`(warning.code === 'THIS_IS_UNDEFINED') ||\n\tonwarn(warning);`
-		],
-		[/input: config.client.input\(\)(?!\.replace)/, `input: config.client.input().replace(/\\.js$/, '.ts')`],
-		[
-			/input: config.server.input\(\)(?!\.replace)/,
-			`input: { server: config.server.input().server.replace(/\\.js$/, ".ts") }`
-		],
-		[
-			/input: config.serviceworker.input\(\)(?!\.replace)/,
-			`input: config.serviceworker.input().replace(/\\.js$/, '.ts')`
-		],
-		// Add preprocess
-		[/compilerOptions/g, 'preprocess: sveltePreprocess(),\n\t\t\t\tcompilerOptions'],
-		// Add TypeScript
-		[/commonjs\(\)(?!,\n\s*typescript)/g, 'commonjs(),\n\t\t\ttypescript({ sourceMap: dev })']
-	]);
-}
-
-function updateWebpackConfig() {
-	// Edit webpack config
-	replaceInFile(path.join(projectRoot, 'webpack.config.js'), [
-		// Edit imports
-		[
-			/require\('webpack-modules'\);\n(?!const sveltePreprocess)/,
-			`require('webpack-modules');\nconst sveltePreprocess = require('svelte-preprocess');\n`
-		],
-		// Edit extensions
-		[
-			/\['\.mjs', '\.js', '\.json', '\.svelte', '\.html'\]/,
-			`['.mjs', '.js', '.ts', '.json', '.svelte', '.html']`
-		],
-		// Edit entries
-		[
-			/entry: config\.client\.entry\(\)/,
-			`entry: { main: config.client.entry().main.replace(/\\.js$/, '.ts') }`
-		],
-		[
-			/entry: config\.server\.entry\(\)/,
-			`entry: { server: config.server.entry().server.replace(/\\.js$/, '.ts') }`
-		],
-		[
-			/entry: config\.serviceworker\.entry\(\)/,
-			`entry: { 'service-worker': config.serviceworker.entry()['service-worker'].replace(/\\.js$/, '.ts') }`
-		],
-		// Add preprocess to the svelte config, this is tricky because there's no easy signifier.
-		// Instead we look for 'hydratable: true,'
-		[
-			/hydratable: true(?!,\n\s*preprocess)/g,
-			'hydratable: true,\n\t\t\t\t\t\t\tpreprocess: sveltePreprocess()'
-		],
-		// Add TypeScript rules for client and server
-		[
-			/module: {\n\s*rules: \[\n\s*(?!{\n\s*test: \/\\\.ts\$\/)/g,
-			`module: {\n\t\t\trules: [\n\t\t\t\t{\n\t\t\t\t\ttest: /\\.ts$/,\n\t\t\t\t\tloader: 'ts-loader'\n\t\t\t\t},\n\t\t\t\t`
-		],
-		// Add TypeScript rules for serviceworker
-		[
-			/output: config\.serviceworker\.output\(\),\n\s*(?!module)/,
-			`output: config.serviceworker.output(),\n\t\tmodule: {\n\t\t\trules: [\n\t\t\t\t{\n\t\t\t\t\ttest: /\\.ts$/,\n\t\t\t\t\tloader: 'ts-loader'\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\t`
-		],
-		// Edit outputs
-		[
-			/output: config\.serviceworker\.output\(\),\n\s*(?!resolve)/,
-			`output: config.serviceworker.output(),\n\t\tresolve: { extensions: ['.mjs', '.js', '.ts', '.json'] },\n\t\t`
-		]
-	]);
+import typescript from '@rollup/plugin-typescript';`
+    ],
+    // Edit inputs
+    [
+      /(?<!THIS_IS_UNDEFINED[^\n]*\n\s*)onwarn\(warning\);/,
+      `(warning.code === 'THIS_IS_UNDEFINED') ||\n\tonwarn(warning);`
+    ],
+    [
+      /input: config.client.input\(\)(?!\.replace)/,
+      `input: config.client.input().replace(/\.js$/, '.ts')`
+    ],
+    [
+      /input: config.server.input\(\)(?!\.replace)/,
+      `input: { server: config.server.input().server.replace(/\.js$/, ".ts") }`
+    ],
+    [
+      /input: config.serviceworker.input\(\)(?!\.replace)/,
+      `input: config.serviceworker.input().replace(/\.js$/, '.ts')`
+    ],
+    // Add preprocess to the svelte config, this is tricky because there's no easy signifier.
+    // Instead we look for 'hydratable: true,'
+    [
+      /hydratable: true(?!,\n\s*preprocess)/g,
+      "hydratable: true,\n\t\t\t\tpreprocess: sveltePreprocess()"
+    ],
+    // Add TypeScript
+    [
+      /commonjs\(\)(?!,\n\s*typescript)/g,
+      "commonjs(),\n\t\t\ttypescript({ sourceMap: dev })"
+    ]
+  ]);
 }
 
 function updateServiceWorker() {
-	replaceInFile(path.join(projectRoot, 'src', 'service-worker.ts'), [
-		[`shell.concat(files);`, `(shell as string[]).concat(files as string[]);`],
-		[`self.skipWaiting();`, `((self as any) as ServiceWorkerGlobalScope).skipWaiting();`],
-		[`self.clients.claim();`, `((self as any) as ServiceWorkerGlobalScope).clients.claim();`],
-		[`fetchAndCache(request)`, `fetchAndCache(request: Request)`],
-		[`self.addEventListener('activate', event =>`, `self.addEventListener('activate', (event: ExtendableEvent) =>`],
-		[`self.addEventListener('install', event =>`, `self.addEventListener('install', (event: ExtendableEvent) =>`],
-		[`addEventListener('fetch', event =>`, `addEventListener('fetch', (event: FetchEvent) =>`],
-	]);
+  replaceInFile(path.join(projectRoot, "src", "service-worker.ts"), [
+    [`shell.concat(files);`, `(shell as string[]).concat(files as string[]);`],
+    [
+      `'install', event =>`,
+      `'install', <EventType extends ExtendableEvent>(event: EventType) =>`
+    ],
+    [
+      `self.skipWaiting();`,
+      `((self as any) as ServiceWorkerGlobalScope).skipWaiting();`
+    ],
+    [
+      `'activate', event =>`,
+      `'activate', <EventType extends ExtendableEvent>(event: EventType) =>`
+    ],
+    [
+      `self.clients.claim();`,
+      `((self as any) as ServiceWorkerGlobalScope).clients.claim();`
+    ],
+    [
+      `'fetch', event =>`,
+      `'fetch', <EventType extends FetchEvent>(event: EventType) =>`
+    ]
+  ]);
 }
 
 function createTsConfig() {
-	const tsconfig = `{
+  const tsconfig = `{
 		"extends": "@tsconfig/svelte/tsconfig.json",
 		"compilerOptions": {
 			"lib": ["DOM", "ES2017", "WebWorker"]
@@ -240,49 +229,48 @@ function createTsConfig() {
 		"exclude": ["node_modules/*", "__sapper__/*", "static/*"]
 	}`;
 
-	createFile(path.join(projectRoot, 'tsconfig.json'), tsconfig);
+  createFile(path.join(projectRoot, "tsconfig.json"), tsconfig);
 }
 
 // Adds the extension recommendation
 function configureVsCode() {
-	const dir = path.join(projectRoot, '.vscode');
+  const dir = path.join(projectRoot, ".vscode");
 
-	if (!fs.existsSync(dir)) {
-		fs.mkdirSync(dir);
-	}
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir);
+  }
 
-	createFile(path.join(projectRoot, '.vscode', 'extensions.json'), `{"recommendations": ["svelte.svelte-vscode"]}`);
+  createFile(
+    path.join(projectRoot, ".vscode", "extensions.json"),
+    `{"recommendations": ["svelte.svelte-vscode"]}`
+  );
 }
 
 function deleteThisScript() {
-	fs.unlinkSync(path.join(__filename));
+  fs.unlinkSync(path.join(__filename));
 
-	// Check for Mac's DS_store file, and if it's the only one left remove it
-	const remainingFiles = fs.readdirSync(path.join(__dirname));
-	if (remainingFiles.length === 1 && remainingFiles[0] === '.DS_store') {
-		fs.unlinkSync(path.join(__dirname, '.DS_store'));
-	}
+  // Check for Mac's DS_store file, and if it's the only one left remove it
+  const remainingFiles = fs.readdirSync(path.join(__dirname));
+  if (remainingFiles.length === 1 && remainingFiles[0] === ".DS_store") {
+    fs.unlinkSync(path.join(__dirname, ".DS_store"));
+  }
 
-	// Check if the scripts folder is empty
-	if (fs.readdirSync(path.join(__dirname)).length === 0) {
-		// Remove the scripts folder
-		fs.rmdirSync(path.join(__dirname));
-	}
+  // Check if the scripts folder is empty
+  if (fs.readdirSync(path.join(__dirname)).length === 0) {
+    // Remove the scripts folder
+    fs.rmdirSync(path.join(__dirname));
+  }
 }
 
-console.log(`Adding TypeScript with ${isRollup ? "Rollup" : "webpack" }...`);
+console.log("Adding TypeScript with Rollup...");
 
 addDepsToPackageJson();
 
-changeJsExtensionToTs(path.join(projectRoot, 'src'));
+changeJsExtensionToTs(path.join(projectRoot, "src"));
 
 updateSvelteFiles();
 
-if (isRollup) {
-	updateRollupConfig();
-} else {
-	updateWebpackConfig();
-}
+updateRollupConfig();
 
 updateServiceWorker();
 
@@ -292,15 +280,11 @@ configureVsCode();
 
 // Delete this script, but not during testing
 if (!argv[2]) {
-	deleteThisScript();
+  deleteThisScript();
 }
 
-console.log('Converted to TypeScript.');
+console.log("Converted to TypeScript.");
 
-if (fs.existsSync(path.join(projectRoot, 'node_modules'))) {
-	console.log(`
-Next:
-1. run 'npm install' again to install TypeScript dependencies
-2. run 'npm run build' for the @sapper imports in your project to work
-`);
+if (fs.existsSync(path.join(projectRoot, "node_modules"))) {
+  console.log(`\nYou will need to re-run 'npm install' to get started.`);
 }
diff --git a/src/components/Chip.svelte b/src/components/Chip.svelte
index 02eaaaa1..2ef206ad 100644
--- a/src/components/Chip.svelte
+++ b/src/components/Chip.svelte
@@ -17,5 +17,6 @@
     background-color: #d1d5da80;
     border: 1px solid transparent;
     border-radius: 2em;
+    margin: 6px 0 0;
   }
 </style>
\ No newline at end of file
diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index 5d0d7e6e..51505ae1 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -1,4 +1,5 @@
 <script>
+	import Space from "./Space.svelte";
 	export let segment;
 </script>
 
@@ -37,7 +38,7 @@
 		content: '';
 		width: calc(100% - 1em);
 		height: 2px;
-		background-color: rgb(255,62,0);
+		background-color: #3182ce;
 		display: block;
 		bottom: -1px;
 	}
@@ -47,19 +48,15 @@
 		padding: 1em 0.5em;
 		display: block;
 	}
-
-	.actions {
-		flex-grow: 1;
-	}
 </style>
 
 <nav>
 	<ul>
 		<li><a aria-current="{segment === undefined ? 'page' : undefined}" href=".">UniDiscuss</a></li>
 	</ul>
-	<div class="actions"></div>
+	<Space/>
 	<ul>
-		<li><a aria-current="{segment === 'ask' ? 'page' : undefined}" href="ask">Ask</a></li>
+		<!-- <li><a aria-current="{segment === 'ask' ? 'page' : undefined}" href="ask">Ask</a></li> -->
 		<li><a aria-current="{segment === 'profile' ? 'page' : undefined}" href="profile">Profile</a></li>
 	</ul>
 </nav>
diff --git a/src/components/NewQuestion.svelte b/src/components/NewQuestion.svelte
new file mode 100644
index 00000000..79561c60
--- /dev/null
+++ b/src/components/NewQuestion.svelte
@@ -0,0 +1,15 @@
+<script>
+    import AddComment20 from "carbon-icons-svelte/lib/AddComment20";
+
+</script>
+
+<style>
+  .root {
+    height: fit-content;
+  }
+</style>
+
+<button class="root bg-blue-600 hover:bg-blue-900 text-white font-bold py-2 px-4 rounded inline-flex items-center float-right">
+  <AddComment20  class="fill-current w-4 h-4 mr-2" />
+  <a href="/ask">Спросить</a>
+</button>
\ No newline at end of file
diff --git a/src/components/SideBar.svelte b/src/components/SideBar.svelte
new file mode 100644
index 00000000..00784928
--- /dev/null
+++ b/src/components/SideBar.svelte
@@ -0,0 +1,69 @@
+<script>
+  // your script goes here
+  const contributors = [
+    {
+      name: 'Koskting'
+    },
+    {
+      name: 'Koskting'
+    },
+    {
+      name: 'Koskting'
+    },
+    {
+      name: 'Koskting'
+    },
+    {
+      name: 'Koskting'
+    },
+  ];
+</script>
+
+<style>
+  .sidebar-root {
+    padding: 16px;
+    border: 1px solid #e1e4e8;
+    border-radius: 6px;
+    width: 200px;
+    height: fit-content;
+  }
+
+  h4 {
+    font-size: 14px;
+    font-weight: 600;
+    border-bottom: 1px solid #e1e4e8;
+    padding-bottom: 10px;
+  }
+
+  .avatar {
+    border-radius: 50%;
+    display: inline-block;
+    overflow: hidden;
+    line-height: 1;
+    vertical-align: middle;
+    border-radius: 6px;
+    margin-right: 10px;
+  }
+
+  .contributer-link {
+    display: flex;
+    padding: 8px 0;
+  }
+</style>
+
+<!-- markup (zero or more items) goes here -->
+<div class="sidebar-root">
+  <h4>Most helpful</h4>
+  {#each contributors as contributor}
+    <a class="contributer-link" href="/{contributor.name}">
+      <img
+        class="avatar"
+        src="https://avatars0.githubusercontent.com/u/2854919?s=40&amp;v=4"
+        width="20"
+        height="20"
+        alt="@jamesmosier"
+      >
+      <span>{contributor.name}</span>
+    </a>
+	{/each}
+</div>
diff --git a/src/components/Space.svelte b/src/components/Space.svelte
new file mode 100644
index 00000000..b4a48ca4
--- /dev/null
+++ b/src/components/Space.svelte
@@ -0,0 +1,9 @@
+
+<style>
+	.actions {
+		flex-grow: 1;
+	}
+</style>
+
+	<div class="actions"></div>
+
diff --git a/src/components/Tailwindcss.svelte b/src/components/Tailwindcss.svelte
new file mode 100644
index 00000000..2ef9624e
--- /dev/null
+++ b/src/components/Tailwindcss.svelte
@@ -0,0 +1,5 @@
+<style global>
+  @tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+</style>
diff --git a/src/components/Vote.svelte b/src/components/Vote.svelte
new file mode 100644
index 00000000..b37c784c
--- /dev/null
+++ b/src/components/Vote.svelte
@@ -0,0 +1,23 @@
+<script>
+	import ArrowUp16 from "carbon-icons-svelte/lib/ArrowUp16";
+	import Chip from "./Chip.svelte";
+
+	export let value = 0;
+</script>
+
+
+<div class="vote">
+  <ArrowUp16 />
+  <Chip value="{value}" />
+</div>
+
+<style>
+	.vote {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: 56px;
+		justify-content: center;
+		margin-right: 10px;
+	}
+</style>
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index 8432299e..5b984c85 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -1,22 +1,35 @@
 <script>
+	import Tailwindcss from '../components/Tailwindcss.svelte';
 	import Nav from '../components/Nav.svelte';
+  import SideBar from "../components/SideBar.svelte";
 
 	export let segment;
 </script>
 
 <style>
 	main {
-		position: relative;
-		max-width: 56em;
+    display: flex;
 		background-color: white;
-		padding: 2em;
+		padding: 15px 2em;
 		margin: 0 auto;
 		box-sizing: border-box;
 	}
+
+  @media only screen and (max-width : 768px) {
+    main {
+      flex-direction: column;
+      align-items: center;
+      padding: 10px;
+    }
+  }
 </style>
 
+<Tailwindcss />
+
 <Nav {segment}/>
 
 <main>
-	<slot></slot>
-</main>
\ No newline at end of file
+  <slot></slot>
+	<SideBar />
+</main>
+
diff --git a/src/routes/blog/[slug].json.js b/src/routes/blog/[slug].json.js
deleted file mode 100644
index 176890d8..00000000
--- a/src/routes/blog/[slug].json.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import posts from './_posts.js';
-
-const lookup = new Map();
-posts.forEach(post => {
-	lookup.set(post.slug, JSON.stringify(post));
-});
-
-export function get(req, res, next) {
-	// the `slug` parameter is available because
-	// this file is called [slug].json.js
-	const { slug } = req.params;
-
-	if (lookup.has(slug)) {
-		res.writeHead(200, {
-			'Content-Type': 'application/json'
-		});
-
-		res.end(lookup.get(slug));
-	} else {
-		res.writeHead(404, {
-			'Content-Type': 'application/json'
-		});
-
-		res.end(JSON.stringify({
-			message: `Not found`
-		}));
-	}
-}
diff --git a/src/routes/blog/[slug].svelte b/src/routes/blog/[slug].svelte
deleted file mode 100644
index 84e80844..00000000
--- a/src/routes/blog/[slug].svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script context="module">
-	export async function preload({ params }) {
-		// the `slug` parameter is available because
-		// this file is called [slug].svelte
-		const res = await this.fetch(`blog/${params.slug}.json`);
-		const data = await res.json();
-
-		if (res.status === 200) {
-			return { post: data };
-		} else {
-			this.error(res.status, data.message);
-		}
-	}
-</script>
-
-<script>
-	export let post;
-</script>
-
-<style>
-	/*
-		By default, CSS is locally scoped to the component,
-		and any unused styles are dead-code-eliminated.
-		In this page, Svelte can't know which elements are
-		going to appear inside the {{{post.html}}} block,
-		so we have to use the :global(...) modifier to target
-		all elements inside .content
-	*/
-	.content :global(h2) {
-		font-size: 1.4em;
-		font-weight: 500;
-	}
-
-	.content :global(pre) {
-		background-color: #f9f9f9;
-		box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.05);
-		padding: 0.5em;
-		border-radius: 2px;
-		overflow-x: auto;
-	}
-
-	.content :global(pre) :global(code) {
-		background-color: transparent;
-		padding: 0;
-	}
-
-	.content :global(ul) {
-		line-height: 1.5;
-	}
-
-	.content :global(li) {
-		margin: 0 0 0.5em 0;
-	}
-</style>
-
-<svelte:head>
-	<title>{post.title}</title>
-</svelte:head>
-
-<h1>{post.title}</h1>
-
-<div class="content">
-	{@html post.html}
-</div>
diff --git a/src/routes/blog/_posts.js b/src/routes/blog/_posts.js
deleted file mode 100644
index 7791a21e..00000000
--- a/src/routes/blog/_posts.js
+++ /dev/null
@@ -1,92 +0,0 @@
-// Ordinarily, you'd generate this data from markdown files in your
-// repo, or fetch them from a database of some kind. But in order to
-// avoid unnecessary dependencies in the starter template, and in the
-// service of obviousness, we're just going to leave it here.
-
-// This file is called `_posts.js` rather than `posts.js`, because
-// we don't want to create an `/blog/posts` route — the leading
-// underscore tells Sapper not to do that.
-
-const posts = [
-	{
-		title: 'What is Sapper?',
-		slug: 'what-is-sapper',
-		html: `
-			<p>First, you have to know what <a href='https://svelte.dev'>Svelte</a> is. Svelte is a UI framework with a bold new idea: rather than providing a library that you write code with (like React or Vue, for example), it's a compiler that turns your components into highly optimized vanilla JavaScript. If you haven't already read the <a href='https://svelte.dev/blog/frameworks-without-the-framework'>introductory blog post</a>, you should!</p>
-
-			<p>Sapper is a Next.js-style framework (<a href='blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>
-
-			<ul>
-				<li>Code-splitting, dynamic imports and hot module replacement, powered by webpack</li>
-				<li>Server-side rendering (SSR) with client-side hydration</li>
-				<li>Service worker for offline support, and all the PWA bells and whistles</li>
-				<li>The nicest development experience you've ever had, or your money back</li>
-			</ul>
-
-			<p>It's implemented as Express middleware. Everything is set up and waiting for you to get started, but you keep complete control over the server, service worker, webpack config and everything else, so it's as flexible as you need it to be.</p>
-		`
-	},
-
-	{
-		title: 'How to use Sapper',
-		slug: 'how-to-use-sapper',
-		html: `
-			<h2>Step one</h2>
-			<p>Create a new project, using <a href='https://github.com/Rich-Harris/degit'>degit</a>:</p>
-
-			<pre><code>npx degit "sveltejs/sapper-template#rollup" my-app
-			cd my-app
-			npm install # or yarn!
-			npm run dev
-			</code></pre>
-
-			<h2>Step two</h2>
-			<p>Go to <a href='http://localhost:3000'>localhost:3000</a>. Open <code>my-app</code> in your editor. Edit the files in the <code>src/routes</code> directory or add new ones.</p>
-
-			<h2>Step three</h2>
-			<p>...</p>
-
-			<h2>Step four</h2>
-			<p>Resist overdone joke formats.</p>
-		`
-	},
-
-	{
-		title: 'Why the name?',
-		slug: 'why-the-name',
-		html: `
-			<p>In war, the soldiers who build bridges, repair roads, clear minefields and conduct demolitions — all under combat conditions — are known as <em>sappers</em>.</p>
-
-			<p>For web developers, the stakes are generally lower than those for combat engineers. But we face our own hostile environment: underpowered devices, poor network connections, and the complexity inherent in front-end engineering. Sapper, which is short for <strong>S</strong>velte <strong>app</strong> mak<strong>er</strong>, is your courageous and dutiful ally.</p>
-		`
-	},
-
-	{
-		title: 'How is Sapper different from Next.js?',
-		slug: 'how-is-sapper-different-from-next',
-		html: `
-			<p><a href='https://github.com/zeit/next.js'>Next.js</a> is a React framework from <a href='https://vercel.com/'>Vercel</a>, and is the inspiration for Sapper. There are a few notable differences, however:</p>
-
-			<ul>
-				<li>It's powered by <a href='https://svelte.dev'>Svelte</a> instead of React, so it's faster and your apps are smaller</li>
-				<li>Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is <code>src/routes/blog/[slug].svelte</code></li>
-				<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one <a href='blog/how-is-sapper-different-from-next.json'>powering this very page</a></li>
-				<li>Links are just <code>&lt;a&gt;</code> elements, rather than framework-specific <code>&lt;Link&gt;</code> components. That means, for example, that <a href='blog/how-can-i-get-involved'>this link right here</a>, despite being inside a blob of HTML, works with the router as you'd expect.</li>
-			</ul>
-		`
-	},
-
-	{
-		title: 'How can I get involved?',
-		slug: 'how-can-i-get-involved',
-		html: `
-			<p>We're so glad you asked! Come on over to the <a href='https://github.com/sveltejs/svelte'>Svelte</a> and <a href='https://github.com/sveltejs/sapper'>Sapper</a> repos, and join us in the <a href='https://svelte.dev/chat'>Discord chatroom</a>. Everyone is welcome, especially you!</p>
-		`
-	}
-];
-
-posts.forEach(post => {
-	post.html = post.html.replace(/^\t{3}/gm, '');
-});
-
-export default posts;
diff --git a/src/routes/blog/index.json.js b/src/routes/blog/index.json.js
deleted file mode 100644
index bfd9389a..00000000
--- a/src/routes/blog/index.json.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import posts from './_posts.js';
-
-const contents = JSON.stringify(posts.map(post => {
-	return {
-		title: post.title,
-		slug: post.slug
-	};
-}));
-
-export function get(req, res) {
-	res.writeHead(200, {
-		'Content-Type': 'application/json'
-	});
-
-	res.end(contents);
-}
\ No newline at end of file
diff --git a/src/routes/blog/index.svelte b/src/routes/blog/index.svelte
deleted file mode 100644
index 2b7d64ce..00000000
--- a/src/routes/blog/index.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script context="module">
-	export function preload() {
-		return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
-			return { posts };
-		});
-	}
-</script>
-
-<script>
-	export let posts;
-</script>
-
-<style>
-	ul {
-		margin: 0 0 1em 0;
-		line-height: 1.5;
-	}
-</style>
-
-<svelte:head>
-	<title>Blog</title>
-</svelte:head>
-
-<h1>Recent posts</h1>
-
-<ul>
-	{#each posts as post}
-		<!-- we're using the non-standard `rel=prefetch` attribute to
-				tell Sapper to load the data for the page as soon as
-				the user hovers over the link or taps it, instead of
-				waiting for the 'click' event -->
-		<li><a rel="prefetch" href="blog/{post.slug}">{post.title}</a></li>
-	{/each}
-</ul>
diff --git a/src/routes/discussion/[id].json.js b/src/routes/discussion/[id].json.js
new file mode 100644
index 00000000..93580551
--- /dev/null
+++ b/src/routes/discussion/[id].json.js
@@ -0,0 +1,30 @@
+import _discussions from './_discussions.js';
+
+const lookup = new Map();
+_discussions.forEach(discussion => {
+	lookup.set(`${discussion.id}`, JSON.stringify(discussion));
+});
+
+export function get(req, res, next) {
+	// the `id` parameter is available because
+	// this file is called [id].json.js
+	const { id } = req.params;
+
+  if (lookup.has(id)) {
+    res.writeHead(200, {
+      "Content-Type": "application/json"
+    });
+
+    res.end(lookup.get(id));
+  } else {
+    res.writeHead(404, {
+      "Content-Type": "application/json"
+    });
+
+    res.end(
+      JSON.stringify({
+        message: `Not found`
+      })
+    );
+  }
+}
diff --git a/src/routes/discussion/[id].svelte b/src/routes/discussion/[id].svelte
new file mode 100644
index 00000000..57651652
--- /dev/null
+++ b/src/routes/discussion/[id].svelte
@@ -0,0 +1,66 @@
+<script context="module">
+	export async function preload({ params }) {
+		// the `id` parameter is available because
+		// this file is called [id].svelte
+    const res = await this.fetch(`discussion/${params.id}.json`);
+		const data = await res.json();
+
+		if (res.status === 200) {
+			return { discussion: data };
+		} else {
+			this.error(res.status, data.message);
+		}
+	}
+</script>
+
+<script>
+	export let discussion;
+</script>
+
+<style>
+
+</style>
+
+<svelte:head>
+	<title>{discussion.title}</title>
+</svelte:head>
+
+<h1>{discussion.title}</h1>
+
+<div class="my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3">
+  <!-- Article -->
+  <article class="overflow-hidden rounded-lg shadow-lg">
+
+      <a href="#">
+          <img alt="Placeholder" class="block h-auto w-full" src="https://picsum.photos/600/400/?random">
+      </a>
+
+      <header class="flex items-center justify-between leading-tight p-2 md:p-4">
+          <h1 class="text-lg">
+              <a class="no-underline hover:underline text-black" href="#">
+                  Article Title
+              </a>
+          </h1>
+        <p class="text-grey-darker text-sm">
+            14/4/19
+          </p>
+        </header>
+
+        <footer class="flex items-center justify-between leading-none p-2 md:p-4">
+            <a class="flex items-center no-underline hover:underline text-black" href="#">
+                <img alt="Placeholder" class="block rounded-full" src="https://picsum.photos/32/32/?random">
+                <p class="ml-2 text-sm">
+                    Author Name
+                </p>
+            </a>
+            <a class="no-underline text-grey-darker hover:text-red-dark" href="#">
+                <span class="hidden">Like</span>
+                <i class="fa fa-heart"></i>
+            </a>
+        </footer>
+
+    </article>
+    <!-- END Article -->
+
+</div>
+<!-- END Column -->
diff --git a/src/routes/discussion/_discussions.js b/src/routes/discussion/_discussions.js
new file mode 100644
index 00000000..e999288d
--- /dev/null
+++ b/src/routes/discussion/_discussions.js
@@ -0,0 +1,150 @@
+// Ordinarily, you'd generate this data from markdown files in your
+// repo, or fetch them from a database of some kind. But in order to
+// avoid unnecessary dependencies in the starter template, and in the
+// service of obviousness, we're just going to leave it here.
+
+// This file is called `_discussions.js` rather than `posts.js`, because
+// we don't want to create an `/blog/posts` route — the leading
+// underscore tells Sapper not to do that.
+
+export default [
+  {
+    title: "What is Sapper?",
+    id: 1,
+    author: {
+      name: "babdraa",
+      avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4"
+    },
+    question: "Hello, I was thinking… Is there a way to get static props for non-page components without passing props from page component? Eg. navigation which is shared across many pages.",
+      createdAt: Date.now(),
+    comments: [
+      {
+        name: "babdraa",
+        avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4",
+        comment:
+          "getStaticProps must always be called from a page located in pages/*"
+      },
+      {
+        name: "crana",
+        avatar: "https://avatars1.githubusercontent.com/u/31749594?s=60&v=4",
+        comment:
+          "Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though."
+      },
+      {
+        name: "loris",
+        avatar: "https://avatars3.githubusercontent.com/u/11896398?s=60&v=4",
+        comment:
+          "getStaticProps must always be called from a page located in pages/*"
+      }
+    ]
+  },
+
+  {
+    title: "How to use Sapper",
+    id: 2,
+
+    author: {
+      name: "babdraa",
+      avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4"
+    },
+      question:
+        "Hello, I was thinking… Is there a way to get static props for non-page components without passing props from page component? Eg. navigation which is shared across many pages.",
+      createdAt: Date.now(),
+    comments: [
+      {
+        name: "rawe",
+        avatar: "https://avatars1.githubusercontent.com/u/31749594?s=60&v=4",
+        comment:
+          "Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though."
+      },
+      {
+        name: "hlaow",
+        avatar: "https://avatars3.githubusercontent.com/u/11896398?s=60&v=4",
+        comment:
+          "getStaticProps must always be called from a page located in pages/*"
+      }
+    ]
+  },
+
+  {
+    title: "Why the name?",
+    id: 3,
+    author: {
+      name: "babdraa",
+      avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4"
+    },
+    question:
+        "Hello, I was thinking… Is there a way to get static props for non-page components without passing props from page component? Eg. navigation which is shared across many pages.",
+      createdAt: Date.now(),
+    comments: [
+      {
+        name: "babdraa",
+        avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4",
+        comment:
+          "getStaticProps must always be called from a page located in pages/*"
+      },
+      {
+        name: "crana",
+        avatar: "https://avatars1.githubusercontent.com/u/31749594?s=60&v=4",
+        comment:
+          "Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though."
+      },
+      {
+        name: "loris",
+        avatar: "https://avatars3.githubusercontent.com/u/11896398?s=60&v=4",
+        comment:
+          "getStaticProps must always be called from a page located in pages/*"
+      }
+    ]
+  },
+
+  {
+    title: "How is Sapper different from Next.js?",
+    id: 4,
+    author: {
+      name: "babdraa",
+      avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4"
+    },
+    question: "Hello, I was thinking… Is there a way to get static props for non-page components without passing props from page component? Eg. navigation which is shared across many pages.",
+      createdAt: Date.now(),
+    comments: [
+      {
+        name: "babdraa",
+        avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4",
+        comment:
+          "getStaticProps must always be called from a page located in pages/*"
+      },
+      {
+        name: "crana",
+        avatar: "https://avatars1.githubusercontent.com/u/31749594?s=60&v=4",
+        comment:
+          "Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though."
+      },
+      {
+        name: "loris",
+        avatar: "https://avatars3.githubusercontent.com/u/11896398?s=60&v=4",
+        comment:
+          "getStaticProps must always be called from a page located in pages/*"
+      }
+    ]
+  },
+
+  {
+    title: "How can I get involved?",
+    id: 5,
+    author: {
+      name: "living",
+      avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4"
+    },
+    question: "Hello, I was thinking… Is there a way to get static props for non-page components without passing props from page component? Eg. navigation which is shared across many pages.",
+      createdAt: Date.now(),
+    comments: [
+      {
+        name: "gbenga",
+        avatar: "https://avatars3.githubusercontent.com/u/11896398?s=60&v=4",
+        comment:
+          "getStaticProps must always be called from a page located in pages/*"
+      }
+    ]
+  }
+];
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 7847a20e..c3649063 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,6 +1,9 @@
 <script>
-	import ArrowUp16 from "carbon-icons-svelte/lib/ArrowUp16";
-	import Chip from "../components/Chip.svelte";
+  import AddComment20 from "carbon-icons-svelte/lib/AddComment20";
+	import Vote from "../components/Vote.svelte";
+	import Space from "../components/Space.svelte";
+	import NewQuestion from "../components/NewQuestion.svelte";
+
 	const discussions = [
 		{
 			id: 1,
@@ -12,7 +15,8 @@
 				'ибэит', 'икс'
 			],
 			answered: false,
-			comments: 10
+			comments: 10,
+			votes: 10,
 		},
 		{
 			id: 2,
@@ -24,7 +28,8 @@
 				'иибрт', 'иее'
 			],
 			answered: false,
-			comments: 2
+			comments: 2,
+			votes: 2,
 		},
 		{
 			id: 3,
@@ -36,7 +41,8 @@
 				'ибэит', 'иее', 'иибрт', 'ИПИГ'
 			],
 			answered: false,
-			comments: 10
+			comments: 10,
+			votes: 10,
 		},
 		{
 			id: 4,
@@ -48,38 +54,97 @@
 				'ИЭКСУ', 'ИМБТ', 'ИМИ', 'ИПТДМ', 'ИИИР', 'ГФ', 'ХТФ', 'ИДЗО', 'УИИ', 'УНИ'
 			],
 			answered: false,
-			comments: 10
+			comments: 15,
+			votes: 15,
+    },
+    {
+			id: 1,
+			title: 'How do I pass Anicimov?',
+			author: {
+				name: 'rotimibest',
+			},
+			tags: [
+				'ибэит', 'икс'
+			],
+			answered: false,
+			comments: 7,
+			votes: 7,
+		},
+		{
+			id: 2,
+			title: 'Where do I find the nearest restaurant?',
+			author: {
+				name: 'attronaldo',
+			},
+			tags: [
+				'иибрт', 'иее'
+			],
+			answered: false,
+			comments: 4,
+			votes: 4,
+		},
+		{
+			id: 3,
+			title: 'Who is Nikolenko?',
+			author: {
+				name: 'donald',
+			},
+			tags: [
+				'ибэит', 'иее', 'иибрт', 'ИПИГ'
+			],
+			answered: false,
+			comments: 100,
+			votes: 100,
+		},
+		{
+			id: 4,
+			title: 'Archive discussion button',
+			author: {
+				name: 'acharlesvv',
+			},
+			tags: [
+				'ИЭКСУ', 'ИМБТ', 'ИМИ', 'ИПТДМ', 'ИИИР', 'ГФ', 'ХТФ', 'ИДЗО', 'УИИ', 'УНИ'
+			],
+			answered: false,
+			comments: 5,
+			votes: 5,
 		}
-	]
+	];
 </script>
 
 <svelte:head>
 	<title>Unidiscuss - Help students in your university</title>
 </svelte:head>
 <div class="root">
+  <div class="flex justify-end mb-5">
+    <NewQuestion />
+  </div>
 	{#each discussions as discussion}
 		<div class="discussion-box">
-			<div class="discussion-vote">
-				<ArrowUp16 />
-				<Chip value="{discussion.comments}" />
-			</div>
+      <Vote value="{discussion.votes}" />
 			<div class="discussion-topic-author">
-				<h4><a rel="prefetch" href="blog/{discussion.id}">{discussion.title}</a></h4>
+				<h4><a rel="prefetch" href="discussion/{discussion.id}">{discussion.title}</a></h4>
 				<span>{discussion.author.name} asked 1 day ago</span>
-			</div>
+      </div>
+      <Space />
+      <div class="discussion-comments">
+        <AddComment20 />
+        <span>{discussion.comments}</span>
+      </div>
 		</div>
 	{/each}
 </div>
 
 <style>
 	.root {
-		margin: 0 auto;
+    margin: 0 auto 20px;
+    width: 600px;
 	}
 
 	.discussion-box {
-		border-bottom: 1px solid #eaecef;
+		border-top: 1px solid #eaecef;
 		display: flex;
-		align-items: center;
+		align-items: flex-start;
 		padding: 16px;
 	}
 
@@ -91,17 +156,21 @@
 		margin: 0;
 	}
 
-	.discussion-vote {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		width: 56px;
-		justify-content: center;
-		margin-right: 10px;
-	}
-
+  .discussion-topic-author {
+    margin-right: 20px;
+  }
 	.discussion-topic-author span{
 		color: #586069;
 		font-size: 12px;;
-	}
+  }
+
+  .discussion-comments {
+    display: flex;
+  }
+
+  @media only screen and (max-width : 768px) {
+    .root {
+      width: 100%;
+    }
+  }
 </style>
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 00000000..4ee70407
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+  purge: {
+    mode: 'all',
+    content: ['./**/**/*.html', './**/**/*.svelte'],
+
+    options: {
+      whitelistPatterns: [/svelte-/],
+    },
+  },
+
+  theme: {
+    extend: {},
+  },
+  variants: {},
+  plugins: [],
+};