diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index de974502..00000000
--- a/.babelrc
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-    "presets": [
-        [
-            "env",
-            {
-                "targets": {
-                    "node": "8.5.0"
-                }
-            }
-        ]
-    ],
-    "plugins": [
-        "transform-react-jsx",
-        "@babel/plugin-proposal-object-rest-spread",
-        "transform-class-properties"
-    ]
-}
\ No newline at end of file
diff --git a/next-env.d.ts b/next-env.d.ts
new file mode 100644
index 00000000..7b7aa2c7
--- /dev/null
+++ b/next-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
diff --git a/package-lock.json b/package-lock.json
index f53f6aa5..a8851f08 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1529,27 +1529,124 @@
       }
     },
     "@babel/plugin-transform-typescript": {
-      "version": "7.5.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.5.2.tgz",
-      "integrity": "sha512-r4zJOMbKY5puETm8+cIpaa0RQZG/sSASW1u0pj8qYklcERgVIbxVbP2wyJA7zI1//h7lEagQmXi9IL9iI5rfsA==",
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.6.3.tgz",
+      "integrity": "sha512-aiWINBrPMSC3xTXRNM/dfmyYuPNKY/aexYqBgh0HBI5Y+WO5oRAqW/oROYeYHrF4Zw12r9rK4fMk/ZlAmqx/FQ==",
       "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.5.0",
+        "@babel/helper-create-class-features-plugin": "^7.6.0",
         "@babel/helper-plugin-utils": "^7.0.0",
         "@babel/plugin-syntax-typescript": "^7.2.0"
       },
       "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz",
+          "integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==",
+          "requires": {
+            "@babel/highlight": "^7.0.0"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.6.4",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.6.4.tgz",
+          "integrity": "sha512-jsBuXkFoZxk0yWLyGI9llT9oiQ2FeTASmRFE32U+aaDTfoE92t78eroO7PTpU/OrYq38hlcDM6vbfLDaOLy+7w==",
+          "requires": {
+            "@babel/types": "^7.6.3",
+            "jsesc": "^2.5.1",
+            "lodash": "^4.17.13",
+            "source-map": "^0.5.0"
+          }
+        },
         "@babel/helper-create-class-features-plugin": {
-          "version": "7.5.0",
-          "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.5.0.tgz",
-          "integrity": "sha512-EAoMc3hE5vE5LNhMqDOwB1usHvmRjCDAnH8CD4PVkX9/Yr3W/tcz8xE8QvdZxfsFBDICwZnF2UTHIqslRpvxmA==",
+          "version": "7.6.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.6.0.tgz",
+          "integrity": "sha512-O1QWBko4fzGju6VoVvrZg0RROCVifcLxiApnGP3OWfWzvxRZFCoBD81K5ur5e3bVY2Vf/5rIJm8cqPKn8HUJng==",
           "requires": {
             "@babel/helper-function-name": "^7.1.0",
-            "@babel/helper-member-expression-to-functions": "^7.0.0",
+            "@babel/helper-member-expression-to-functions": "^7.5.5",
             "@babel/helper-optimise-call-expression": "^7.0.0",
             "@babel/helper-plugin-utils": "^7.0.0",
-            "@babel/helper-replace-supers": "^7.4.4",
+            "@babel/helper-replace-supers": "^7.5.5",
             "@babel/helper-split-export-declaration": "^7.4.4"
           }
+        },
+        "@babel/helper-member-expression-to-functions": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.5.5.tgz",
+          "integrity": "sha512-5qZ3D1uMclSNqYcXqiHoA0meVdv+xUEex9em2fqMnrk/scphGlGgg66zjMrPJESPwrFJ6sbfFQYUSa0Mz7FabA==",
+          "requires": {
+            "@babel/types": "^7.5.5"
+          }
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.5.5.tgz",
+          "integrity": "sha512-XvRFWrNnlsow2u7jXDuH4jDDctkxbS7gXssrP4q2nUD606ukXHRvydj346wmNg+zAgpFx4MWf4+usfC93bElJg==",
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.5.5",
+            "@babel/helper-optimise-call-expression": "^7.0.0",
+            "@babel/traverse": "^7.5.5",
+            "@babel/types": "^7.5.5"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.6.4",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.6.4.tgz",
+          "integrity": "sha512-D8RHPW5qd0Vbyo3qb+YjO5nvUVRTXFLQ/FsDxJU2Nqz4uB5EnUN0ZQSEYpvTIbRuttig1XbHWU5oMeQwQSAA+A=="
+        },
+        "@babel/traverse": {
+          "version": "7.6.3",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.6.3.tgz",
+          "integrity": "sha512-unn7P4LGsijIxaAJo/wpoU11zN+2IaClkQAxcJWBNCMS6cmVh802IyLHNkAjQ0iYnRS3nnxk5O3fuXW28IMxTw==",
+          "requires": {
+            "@babel/code-frame": "^7.5.5",
+            "@babel/generator": "^7.6.3",
+            "@babel/helper-function-name": "^7.1.0",
+            "@babel/helper-split-export-declaration": "^7.4.4",
+            "@babel/parser": "^7.6.3",
+            "@babel/types": "^7.6.3",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.13"
+          }
+        },
+        "@babel/types": {
+          "version": "7.6.3",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.6.3.tgz",
+          "integrity": "sha512-CqbcpTxMcpuQTMhjI37ZHVgjBkysg5icREQIEZ0eG1yCNwg3oy+5AaLiOKmjsCj6nqOsa6Hf0ObjRVwokb7srA==",
+          "requires": {
+            "esutils": "^2.0.2",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "debug": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "globals": {
+          "version": "11.12.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+          "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
+        },
+        "jsesc": {
+          "version": "2.5.2",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+          "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        },
+        "to-fast-properties": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
         }
       }
     },
@@ -1720,12 +1817,13 @@
       }
     },
     "@babel/preset-typescript": {
-      "version": "7.3.3",
-      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.3.3.tgz",
-      "integrity": "sha512-mzMVuIP4lqtn4du2ynEfdO0+RYcslwrZiJHXu4MGaC1ctJiW2fyaeDrtjJGs7R/KebZ1sgowcIoWf4uRpEfKEg==",
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.6.0.tgz",
+      "integrity": "sha512-4xKw3tTcCm0qApyT6PqM9qniseCE79xGHiUnNdKGdxNsGUc2X7WwZybqIpnTmoukg3nhPceI5KPNzNqLNeIJww==",
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/plugin-transform-typescript": "^7.3.2"
+        "@babel/plugin-transform-typescript": "^7.6.0"
       }
     },
     "@babel/register": {
@@ -1862,12 +1960,187 @@
         }
       }
     },
+    "@types/accepts": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/accepts/-/accepts-1.3.5.tgz",
+      "integrity": "sha512-jOdnI/3qTpHABjM5cx1Hc0sKsPoYCp+DP/GJRGtDlPd7fiV9oXGGIcjW/ZOxLIvjGz8MA+uMZI9metHlgqbgwQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/body-parser": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.17.1.tgz",
+      "integrity": "sha512-RoX2EZjMiFMjZh9lmYrwgoP9RTpAjSHiJxdp4oidAQVO02T7HER3xj9UKue5534ULWeqVEkujhWcyvUce+d68w==",
+      "dev": true,
+      "requires": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/bson": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/bson/-/bson-4.0.0.tgz",
+      "integrity": "sha512-pq/rqJwJWkbS10crsG5bgnrisL8pML79KlMKQMoQwLUjlPAkrUHMvHJ3oGwE7WHR61Lv/nadMwXVAD2b+fpD8Q==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/classnames": {
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.9.tgz",
+      "integrity": "sha512-MNl+rT5UmZeilaPxAVs6YaPC2m6aA8rofviZbhbxpPpl61uKodfdQVsBtgJGTqGizEf02oW3tsVe7FYB8kK14A==",
+      "dev": true
+    },
+    "@types/connect": {
+      "version": "3.4.32",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.32.tgz",
+      "integrity": "sha512-4r8qa0quOvh7lGD0pre62CAb1oni1OO6ecJLGCezTmhQ8Fz50Arx9RUszryR8KlgK6avuSXvviL6yWyViQABOg==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/cookies": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@types/cookies/-/cookies-0.7.4.tgz",
+      "integrity": "sha512-oTGtMzZZAVuEjTwCjIh8T8FrC8n/uwy+PG0yTvQcdZ7etoel7C7/3MSd7qrukENTgQtotG7gvBlBojuVs7X5rw==",
+      "dev": true,
+      "requires": {
+        "@types/connect": "*",
+        "@types/express": "*",
+        "@types/keygrip": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/express": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.1.tgz",
+      "integrity": "sha512-VfH/XCP0QbQk5B5puLqTLEeFgR8lfCJHZJKkInZ9mkYd+u8byX0kztXEQxEk4wZXJs8HI+7km2ALXjn4YKcX9w==",
+      "dev": true,
+      "requires": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "@types/express-serve-static-core": {
+      "version": "4.16.9",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.16.9.tgz",
+      "integrity": "sha512-GqpaVWR0DM8FnRUJYKlWgyARoBUAVfRIeVDZQKOttLFp5SmhhF9YFIYeTPwMd/AXfxlP7xVO2dj1fGu0Q+krKQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "@types/range-parser": "*"
+      }
+    },
+    "@types/http-assert": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@types/http-assert/-/http-assert-1.5.1.tgz",
+      "integrity": "sha512-PGAK759pxyfXE78NbKxyfRcWYA/KwW17X290cNev/qAsn9eQIxkH4shoNBafH37wewhDG/0p1cHPbK6+SzZjWQ==",
+      "dev": true
+    },
+    "@types/keygrip": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@types/keygrip/-/keygrip-1.0.1.tgz",
+      "integrity": "sha1-/1QEYtL7TQqIRBzq8n0oewHD2Hg=",
+      "dev": true
+    },
+    "@types/koa": {
+      "version": "2.0.50",
+      "resolved": "https://registry.npmjs.org/@types/koa/-/koa-2.0.50.tgz",
+      "integrity": "sha512-TcgOD2lh0EISSadAk1DOBYw7kNoY9XdeB3vEMOKiDDaTMYm+V54nyPsU7Ulb/htb5OBIR79RgTeCWntCcophLw==",
+      "dev": true,
+      "requires": {
+        "@types/accepts": "*",
+        "@types/cookies": "*",
+        "@types/http-assert": "*",
+        "@types/keygrip": "*",
+        "@types/koa-compose": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/koa-compose": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@types/koa-compose/-/koa-compose-3.2.4.tgz",
+      "integrity": "sha512-ioou0rxkuWL+yBQYsHUQAzRTfVxAg8Y2VfMftU+Y3RA03/MzuFL0x/M2sXXj3PkfnENbHsjeHR1aMdezLYpTeA==",
+      "dev": true,
+      "requires": {
+        "@types/koa": "*"
+      }
+    },
+    "@types/koa-route": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@types/koa-route/-/koa-route-3.2.4.tgz",
+      "integrity": "sha512-jB4I4/HppiHiSFMqQvMC2Px5Zm8CExA7Bw7xW+o60xh4v0LrNTfKV7LMCGuJNRuUuTTiRcJvF1rbq5mINgQ1UQ==",
+      "dev": true,
+      "requires": {
+        "@types/koa": "*",
+        "path-to-regexp": "^1.7.0"
+      }
+    },
+    "@types/mime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.1.tgz",
+      "integrity": "sha512-FwI9gX75FgVBJ7ywgnq/P7tw+/o1GUbtP0KzbtusLigAOgIgNISRK0ZPl4qertvXSIE8YbsVJueQ90cDt9YYyw==",
+      "dev": true
+    },
+    "@types/mongodb": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/@types/mongodb/-/mongodb-3.3.6.tgz",
+      "integrity": "sha512-bPv0lGnkL/iOoA+GSAcS5ad9QyPc/rW547vrF5j+AKX4spaMZgpaCWQ4D6ipVSN6OKuks3ueCFEPinyJJSk2zA==",
+      "dev": true,
+      "requires": {
+        "@types/bson": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/node": {
+      "version": "12.7.12",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.7.12.tgz",
+      "integrity": "sha512-KPYGmfD0/b1eXurQ59fXD1GBzhSQfz6/lKBxkaHX9dKTzjXbK68Zt7yGUxUsCS1jeTy/8aL+d9JEr+S54mpkWQ==",
+      "dev": true
+    },
+    "@types/prop-types": {
+      "version": "15.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
+      "dev": true
+    },
     "@types/q": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
       "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==",
       "dev": true
     },
+    "@types/range-parser": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.3.tgz",
+      "integrity": "sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA==",
+      "dev": true
+    },
+    "@types/react": {
+      "version": "16.9.5",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.5.tgz",
+      "integrity": "sha512-jQ12VMiFOWYlp+j66dghOWcmDDwhca0bnlcTxS4Qz/fh5gi6wpaZDthPEu/Gc/YlAuO87vbiUXL8qKstFvuOaA==",
+      "dev": true,
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^2.2.0"
+      }
+    },
+    "@types/serve-static": {
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.3.tgz",
+      "integrity": "sha512-oprSwp094zOglVrXdlo/4bAHtKTAxX6VT8FOZlBKrmyLbNvE1zxZyJ6yikMVtHIvwP45+ZQGJn+FdXGKTozq0g==",
+      "dev": true,
+      "requires": {
+        "@types/express-serve-static-core": "*",
+        "@types/mime": "*"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.8.5",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
@@ -2282,6 +2555,12 @@
         "readable-stream": "^2.0.6"
       }
     },
+    "arg": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.1.tgz",
+      "integrity": "sha512-SlmP3fEA88MBv0PypnXZ8ZfJhwmDeIE3SP71j37AiXQBXYosPV0x6uISAaHYSlSVhmHOVkomen0tbGk6Anlebw==",
+      "dev": true
+    },
     "argparse": {
       "version": "1.0.9",
       "resolved": "http://storage.mds.yandex.net/get-npm/69187/argparse-1.0.9.tgz",
@@ -2559,9 +2838,9 @@
       },
       "dependencies": {
         "is-buffer": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
-          "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw=="
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
+          "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
         }
       }
     },
@@ -5235,6 +5514,12 @@
         }
       }
     },
+    "csstype": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.7.tgz",
+      "integrity": "sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ==",
+      "dev": true
+    },
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "http://storage.mds.yandex.net/get-npm/38095/currently-unhandled-0.4.1.tgz",
@@ -8415,6 +8700,12 @@
         }
       }
     },
+    "make-error": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.5.tgz",
+      "integrity": "sha512-c3sIjNUow0+8swNwVpqoH4YCShKNFkMaw6oH1mNS2haDZQqkeZFlHS3dhoeEbKKmJB4vXpJucU6oH75aDYeE9g==",
+      "dev": true
+    },
     "mamacro": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/mamacro/-/mamacro-0.0.3.tgz",
@@ -9346,6 +9637,15 @@
         "worker-farm": "1.7.0"
       },
       "dependencies": {
+        "@babel/preset-typescript": {
+          "version": "7.3.3",
+          "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.3.3.tgz",
+          "integrity": "sha512-mzMVuIP4lqtn4du2ynEfdO0+RYcslwrZiJHXu4MGaC1ctJiW2fyaeDrtjJGs7R/KebZ1sgowcIoWf4uRpEfKEg==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.0.0",
+            "@babel/plugin-transform-typescript": "^7.3.2"
+          }
+        },
         "acorn": {
           "version": "6.2.0",
           "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.2.0.tgz",
@@ -15541,6 +15841,43 @@
       "integrity": "sha1-OTvnMKlEb9Hq1tpZoBQwjzbCics=",
       "dev": true
     },
+    "ts-node": {
+      "version": "8.4.1",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-8.4.1.tgz",
+      "integrity": "sha512-5LpRN+mTiCs7lI5EtbXmF/HfMeCjzt7DH9CZwtkr6SywStrNQC723wG+aOWFiLNn7zT3kD/RnFqi3ZUfr4l5Qw==",
+      "dev": true,
+      "requires": {
+        "arg": "^4.1.0",
+        "diff": "^4.0.1",
+        "make-error": "^1.1.1",
+        "source-map-support": "^0.5.6",
+        "yn": "^3.0.0"
+      },
+      "dependencies": {
+        "diff": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.1.tgz",
+          "integrity": "sha512-s2+XdvhPCOF01LRQBC8hf4vhbVmI2CGS5aZnxLJlT5FtdhPCDFq80q++zK2KlrVorVDdL5BOGZ/VfLrVtYNF+Q==",
+          "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
+        },
+        "source-map-support": {
+          "version": "0.5.13",
+          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
+          "integrity": "sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==",
+          "dev": true,
+          "requires": {
+            "buffer-from": "^1.0.0",
+            "source-map": "^0.6.0"
+          }
+        }
+      }
+    },
     "tslib": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
@@ -15594,6 +15931,12 @@
       "resolved": "http://storage.mds.yandex.net/get-npm/35308/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "typescript": {
+      "version": "3.6.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.6.4.tgz",
+      "integrity": "sha512-unoCll1+l+YK4i4F8f22TaNVPRHcD9PA3yCuZ8g5e0qGqlVlJ/8FSateOLLSagn+Yg5+ZwuPkL8LFUc0Jcvksg==",
+      "dev": true
+    },
     "ua-parser-js": {
       "version": "0.7.14",
       "resolved": "http://storage.mds.yandex.net/get-npm/66641/ua-parser-js-0.7.14.tgz",
@@ -15785,6 +16128,11 @@
         }
       }
     },
+    "use-media": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/use-media/-/use-media-1.4.0.tgz",
+      "integrity": "sha512-XsgyUAf3nhzZmEfhc5MqLHwyaPjs78bgytpVJ/xDl0TF4Bptf3vEpBNBBT/EIKOmsOc8UbuECq3mrP3mt1QANA=="
+    },
     "util": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
@@ -16617,6 +16965,12 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ylru/-/ylru-1.2.1.tgz",
       "integrity": "sha512-faQrqNMzcPCHGVC2aaOINk13K+aaBDUPjGWl0teOXywElLjyVAB6Oe2jj62jHYtwsU49jXhScYbvPENK+6zAvQ=="
+    },
+    "yn": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+      "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
+      "dev": true
     }
   }
 }
diff --git a/package.json b/package.json
index 60c7800a..47399832 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
     "main": "src/bin/www.js",
     "scripts": {
         "start": "NODE_ENV=production node src/server.js",
-        "dev": "node src/server.js",
+        "dev": "ts-node --project server.tsconfig.json src/server.ts",
+        "next-dev": "next dev",
         "build": "next build && next export -o dist && npm run sitemap && npm run feed && npm run robots-txt",
         "robots-txt": "node scripts/robots-txt.js",
         "sitemap": "node scripts/sitemap.js",
@@ -44,7 +45,8 @@
         "redux-thunk": "^2.2.0",
         "request-promise": "^2.0.1",
         "sitemap": "^1.5.0",
-        "thunkify": "^2.1.2"
+        "thunkify": "^2.1.2",
+        "use-media": "^1.4.0"
     },
     "devDependencies": {
         "@babel/cli": "^7.4.4",
@@ -54,7 +56,14 @@
         "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
         "@babel/polyfill": "^7.0.0-beta.47",
         "@babel/preset-env": "^7.4.5",
+        "@babel/preset-typescript": "^7.6.0",
         "@babel/register": "^7.0.0-beta.47",
+        "@types/classnames": "^2.2.9",
+        "@types/koa": "^2.0.50",
+        "@types/koa-route": "^3.2.4",
+        "@types/mongodb": "^3.3.6",
+        "@types/node": "^12.7.12",
+        "@types/react": "^16.9.5",
         "@zeit/next-css": "^1.0.1",
         "@zeit/next-sass": "^1.0.1",
         "autoprefixer": "^6.3.6",
@@ -73,6 +82,8 @@
         "mocha": "^6.1.4",
         "node-sass": "^4.12.0",
         "should": "^8.2.2",
+        "ts-node": "^8.4.1",
+        "typescript": "^3.6.4",
         "webpack": "^4.32.2"
     }
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
new file mode 100644
index 00000000..1d9e87d6
--- /dev/null
+++ b/pages/_app.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import App, { Container } from 'next/app'
+
+class MyApp extends App {
+    render() {
+        const { Component, pageProps } = this.props
+
+        return (
+            <Container>
+                <style global jsx>{`
+                    @media (max-width: 31.25em) {
+                        :root {
+                            --smaller-font-size: 0.9rem;
+                            --normal-font-size: 1rem;
+                            --bigger-font-size: 1.1rem;
+                            --big-font-size: 1.3rem;
+                            --biggest-font-size: 2rem;
+
+                            --font-size-h1: 1.75rem;
+                            --font-size-h2: 1.5rem;
+                            --font-size-h3: 1.25rem;
+
+                            --content-thin: 90%;
+                            --content-wide: 90%;
+                        }
+                    }
+
+                    .noscroll { 
+                        overflow: hidden;
+                    }
+
+                    #__next {
+                        height: 100%;
+                    }
+                `}</style>
+
+                <Component {...pageProps} />
+            </Container>
+        )
+    }
+}
+
+export default MyApp
\ No newline at end of file
diff --git a/pages/_document.jsx b/pages/_document.jsx
index 09b8725c..cfd2420d 100644
--- a/pages/_document.jsx
+++ b/pages/_document.jsx
@@ -63,8 +63,6 @@ export default class MyDocument extends Document {
                 <body className="custom_class">
                     <Main />
                     <NextScript />
-
-                    <script src="/static/app.js" />
                 </body>
             </Html>
         );
diff --git a/pages/album/[album].jsx b/pages/album/[album].jsx
index b688845c..b6199f7e 100644
--- a/pages/album/[album].jsx
+++ b/pages/album/[album].jsx
@@ -12,21 +12,20 @@ const Page = (props) => (
         menu={buildMenu(props.pageUrl, menuModel)}
         showAuthor={true}
         menuPadding={true}
+        layout={'thin'}
     >
         <Head>
             <title>{props.album.title}</title>
         </Head>
-        <div className="content content_thin">
-            <Article
-                title={props.album.title}
-                date={props.album.date}
-                shareable={true}
-            >
-                <Html
-                    html={props.album.post}
-                />
-            </Article>
-        </div>
+        <Article
+            title={props.album.title}
+            date={props.album.date}
+            shareable={true}
+        >
+            <Html
+                html={props.album.post}
+            />
+        </Article>
     </App>
 )
 
diff --git a/pages/api/articles/[article].js b/pages/api/articles/[article].ts
similarity index 54%
rename from pages/api/articles/[article].js
rename to pages/api/articles/[article].ts
index d298b1c0..c54b0990 100644
--- a/pages/api/articles/[article].js
+++ b/pages/api/articles/[article].ts
@@ -1,10 +1,9 @@
-import { connect } from '../../../src/core/db'
+import { NextApiRequest, NextApiResponse } from 'next'
 import Article from '../../../src/core/Article'
-import { encodeArticle } from '../../../src/api/articles'
-
-export default async (req, res) => {
-    await connect()
+import { encodeArticle } from '../../../src/server/articles'
+import { withMiddleware } from '../../../src/middlewares/withMiddleware'
 
+export default withMiddleware(async (req: NextApiRequest, res: NextApiResponse) => {
     const {
         query: { article: id }
     } = req;
@@ -19,4 +18,4 @@ export default async (req, res) => {
             error: `Article ${id} not found`
         })
     }
-}
+})
diff --git a/pages/api/articles/index.js b/pages/api/articles/index.ts
similarity index 70%
rename from pages/api/articles/index.js
rename to pages/api/articles/index.ts
index 35347033..3592a507 100644
--- a/pages/api/articles/index.js
+++ b/pages/api/articles/index.ts
@@ -1,10 +1,7 @@
-import { connect } from '../../../src/core/db'
-import { findArticles } from '../../../src/api/articles'
+import { findArticles } from '../../../src/server/articles'
 import { withMiddleware } from '../../../src/middlewares/withMiddleware'
 
 export default withMiddleware(async (req, res) => {
-    await connect()
-
     const { query } = req
     const page = parseInt(query.page)
     const pageSize = parseInt(query.pageSize)
@@ -16,7 +13,7 @@ export default withMiddleware(async (req, res) => {
     } else {
         res.status(404)
         res.json({
-            error: `Article ${id} not found`
+            error: `Articles not found`
         })
     }
 })
diff --git a/pages/api/image.js b/pages/api/image.js
index b7c2d270..d6ef8c08 100644
--- a/pages/api/image.js
+++ b/pages/api/image.js
@@ -1,11 +1,8 @@
-import { connect } from '../../src/core/db'
 import Image from '../../src/core/Image'
 import { encodeImage } from '../../src/api/image'
 import { withMiddleware } from '../../src/middlewares/withMiddleware'
 
 export default withMiddleware(async (req, res) => {
-    await connect()
-
     const file = req.query.file
     const image = await Image.findByFile(file)
     
diff --git a/pages/api/pages/index.js b/pages/api/pages/index.js
index 2977f0d2..05950b09 100644
--- a/pages/api/pages/index.js
+++ b/pages/api/pages/index.js
@@ -1,10 +1,7 @@
-import { connect } from '../../../src/core/db'
 import Page from '../../../src/core/Page'
 import { withMiddleware } from '../../../src/middlewares/withMiddleware'
 
 export default withMiddleware(async (req, res) => {
-    await connect()
-
     const items = await Page.find({})
 
     if (items) {
diff --git a/pages/api/schedule.js b/pages/api/schedule.js
index 00b0a11c..170648ad 100644
--- a/pages/api/schedule.js
+++ b/pages/api/schedule.js
@@ -1,13 +1,11 @@
-import { connect } from '../../src/core/db'
-import { findSchedule } from '../../src/core/schedule'
+import { findSchedule } from '../../src/server/schedule'
 import { withMiddleware } from '../../src/middlewares/withMiddleware'
 
 export default withMiddleware(async (req, res) => {
-    await connect()
 
     const period = req.query.period
     const semester = req.query.semester
-    const data = await findSchedule(period, semester)
+    const data = await findSchedule(req.collection, period, semester)
 
     if (data) {
         res.json(data)
diff --git a/pages/article/[article].jsx b/pages/article/[article].jsx
index dfad639e..84a92733 100644
--- a/pages/article/[article].jsx
+++ b/pages/article/[article].jsx
@@ -15,23 +15,22 @@ const Page = (props) => (
         menu={buildMenu(props.pageUrl, menuModel)}
         showAuthor={true}
         menuPadding={true}
+        layout={'thin'}
     >
         <Head>
             <title>{props.article.title}</title>
             <Meta meta={props.meta} />
         </Head>
-        <div className={'content content_thin'}>
-            <Article
-                title={props.article.title}
-                date={props.article.date}
-                tags={props.article.tags}
-                shareable={true}
-            >
-                <Html
-                    html={props.article.post}
-                />
-            </Article>
-        </div>
+        <Article
+            title={props.article.title}
+            date={props.article.date}
+            tags={props.article.tags}
+            shareable={true}
+        >
+            <Html
+                html={props.article.post}
+            />
+        </Article>
     </App>
 )
 
diff --git a/pages/articles/[page].jsx b/pages/articles/[page].jsx
index 555c3ad1..744da190 100644
--- a/pages/articles/[page].jsx
+++ b/pages/articles/[page].jsx
@@ -13,18 +13,17 @@ const Page = (props) => (
         menu={buildMenu(props.pageUrl, menuModel)}
         showAuthor={true}
         menuPadding={true}
+        layout={'wide'}
     >
         <Head>
             <title>{props.title}</title>
             <Meta meta={props.meta} />
         </Head>
-        <div className="content content_wide">
-            <ArticleCardList
-                articles={props.articles}
-                prevPage={props.prevPage}
-                nextPage={props.nextPage}
-            />
-        </div>
+        <ArticleCardList
+            articles={props.articles}
+            prevPage={props.prevPage}
+            nextPage={props.nextPage}
+        />
     </App>
 )
 
diff --git a/pages/collective.jsx b/pages/collective.jsx
index 4371a0a2..cf613e2f 100644
--- a/pages/collective.jsx
+++ b/pages/collective.jsx
@@ -4,7 +4,7 @@ import { get } from 'lodash'
 import { App } from '../src/components/App'
 import { Meta } from '../src/components/Meta'
 import { CollectiveImage } from '../src/components/CollectiveImage'
-import PersonCard from '../src/components/PersonCard'
+import { PersonCard } from '../src/components/PersonCard'
 import { CardList } from '../src/components/CardList'
 import menuModel from '../src/models/menu'
 import { buildMenu } from '../src/lib/menu'
@@ -16,35 +16,34 @@ const Page = (props) => (
         menu={buildMenu(props.pageUrl, menuModel)}
         showAuthor={true}
         menuPadding={true}
+        layout={'wide'}
     >
         <Head>
             <title>{props.title}</title>
             <Meta meta={props.meta} />
         </Head>
 
-        <div className="content content_semi-wide">
-            {!props.image ? null : (
-                <CollectiveImage
-                    data={props.image}
-                    style={{
-                        marginBottom: 'var(--double-margin)',
-                    }}
+        {!props.image ? null : (
+            <CollectiveImage
+                data={props.image}
+                style={{
+                    marginBottom: 'var(--double-margin)',
+                }}
+            />
+        )}
+
+        <CardList
+            items={props.persons}
+            renderItem={(person, index) => (
+                <PersonCard
+                    key={index}
+                    profile={person}
+                    picture={person.picture}
+                    url={person.url}
+                    name={person.name}
                 />
             )}
-
-            <CardList
-                items={props.persons}
-                renderItem={(person, index) => (
-                    <PersonCard
-                        key={index}
-                        profile={person}
-                        picture={person.picture}
-                        url={person.url}
-                        name={person.name}
-                    />
-                )}
-            />
-        </div>
+        />
     </App>
 )
 
@@ -56,7 +55,7 @@ Page.getInitialProps = wrapInitialProps(async (ctx) => {
     const title = 'Преподаватели Шлиссельбургской ДХШ'
     const imageFile = 'Images/HudozkaCollective2017.jpg'
     const resImage = await requestGet(createApiUrl(ctx.req, `/api/image?file=${imageFile}`), null)
-    const image = get(resImage, 'data.artifacts.large', null)
+    const image = get(resImage, 'artifacts.large', null)
 
     return {
         persons,
diff --git a/pages/document/[document].jsx b/pages/document/[document].jsx
index 6c9ecc45..47bb7748 100644
--- a/pages/document/[document].jsx
+++ b/pages/document/[document].jsx
@@ -2,7 +2,7 @@ import React from 'react'
 import Head from 'next/head'
 import { App } from '../../src/components/App'
 import Document from '../../src/components/Document'
-import Share from '../../src/components/Share'
+import { Share } from '../../src/components/Share'
 import menuModel from '../../src/models/menu'
 import { buildMenu } from '../../src/lib/menu'
 import { meta } from '../../src/lib/meta'
@@ -14,15 +14,14 @@ const Page = (props) => (
         menu={buildMenu(props.pageUrl, menuModel)}
         showAuthor={true}
         menuPadding={true}
+        layout={'wide'}
     >
         <Head>
             <title>{props.file.title}</title>
             <Meta meta={props.meta} />
         </Head>
-        <div className="content content_wide">
-            <Document {...props.file} />
-            <Share />
-        </div>
+        <Document {...props.file} />
+        <Share />
     </App>
 )
 
diff --git a/pages/documents.jsx b/pages/documents.tsx
similarity index 72%
rename from pages/documents.jsx
rename to pages/documents.tsx
index 618a6c9c..29104f3e 100644
--- a/pages/documents.jsx
+++ b/pages/documents.tsx
@@ -5,12 +5,19 @@ import { Meta } from '../src/components/Meta'
 import menuModel from '../src/models/menu'
 import { buildMenu } from '../src/lib/menu'
 import { meta } from '../src/lib/meta'
+import { IDocument } from '../src/types'
 
-import DocumentList from '../src/components/DocumentList'
+import { DocumentList } from '../src/components/DocumentList'
 import { unique } from '../src/utils/common'
-import { createApiUrl, requestGet, wrapInitialProps } from '../src/next-lib'
+import { createApiUrl, requestGet, wrapInitialProps, IResponseItems } from '../src/next-lib'
+import { NextPage } from 'next'
 
-function getSorted(documents) {
+interface IDocumentCategory {
+    name: string
+    items: IDocument[]
+}
+
+function getSorted(documents: IDocument[]): IDocumentCategory[] {
     const compose = (...fns) => value => fns
         .map(fn => fn)
         .reverse()
@@ -23,7 +30,7 @@ function getSorted(documents) {
 
     const subtract = (a, b) => a - b
 
-    const uniqueCategories = unique(i => i.category)
+    const uniqueCategories = unique<IDocument, string>(i => i.category)
 
     const priority = {
         'Основные документы': [
@@ -53,13 +60,16 @@ function getSorted(documents) {
         'Документы для поступления',
     ]
 
-    const sortBy = fn => (a, b) => [a, b]
-        .map(fn)
-        .reduce(subtract)
+    function sortBy<T>(fn: (value: T) => number): (a: T, b: T) => number {
+        return (a, b) => [a, b].map(fn).reduce(subtract)
+    }
 
-    const getPriorityFn = (m, list) => value => list.includes(value)
-        ? list.indexOf(value)
-        : m
+    function getPriorityFn<T>(m: number, list: T[]): (value: T) => number {
+        return (value: T) => {
+            const has = list.includes(value)
+            return has ? list.indexOf(value) : m
+        }
+    }
 
     const safeSelect = (d, store, key) => key in store
         ? store[key]
@@ -84,33 +94,39 @@ function getSorted(documents) {
         }], [])
 }
 
-const Page = (props) => (
+interface IProps {
+    collections: IDocumentCategory[]
+    pageUrl: string
+    title: string
+    meta: any
+}
+
+const Page: NextPage<IProps> = props => (
     <App
         menu={buildMenu(props.pageUrl, menuModel)}
         showAuthor={true}
         menuPadding={true}
+        layout={'thin'}
     >
         <Head>
             <title>{props.title}</title>
             <Meta meta={props.meta} />
         </Head>
 
-        <div className="content content_thin">
-            {props.collections.map(({ name, items }, index) => (
-                <DocumentList
-                    key={index}
-                    name={name}
-                    documents={items}
-                />
-            ))}
-        </div>
+        {props.collections.map((collection, index) => (
+            <DocumentList
+                key={index}
+                name={collection.name}
+                documents={collection.items}
+            />
+        ))}
     </App>
 )
 
 Page.getInitialProps = wrapInitialProps(async (ctx) => {
     const pageUrl = '/documents'
-    const res = await requestGet(createApiUrl(ctx.req, '/api/files'), {})
-    const files = res.items || []
+    const res = await requestGet<IResponseItems<IDocument>>(createApiUrl(ctx.req, '/api/files'), { items: [] })
+    const files = res.items
     const title = 'Документы'
     const collections = getSorted(files)
 
diff --git a/pages/gallery.jsx b/pages/gallery.tsx
similarity index 78%
rename from pages/gallery.jsx
rename to pages/gallery.tsx
index 7006780b..83efd772 100644
--- a/pages/gallery.jsx
+++ b/pages/gallery.tsx
@@ -1,14 +1,14 @@
 import React from 'react'
 import Head from 'next/head'
 import { App } from '../src/components/App'
-// import Album from '../src/components/Album'
-import Article from '../src/components/Article'
 import { Meta } from '../src/components/Meta'
 import menuModel from '../src/models/menu'
 import { buildMenu } from '../src/lib/menu'
 import { splitBy } from '../src/lib/array'
 import { meta } from '../src/lib/meta'
 import { createApiUrl, requestGet, wrapInitialProps } from '../src/next-lib'
+import { NextPage } from 'next'
+import { PageHeader } from '../src/components/PageHeader'
 
 const albumsByYear = splitBy(album => new Date(album.date).getFullYear())
 
@@ -63,39 +63,42 @@ const ACollection = ({ title, albums }) => (
     </div>
 )
 
+interface IProps {
+    meta: any
+    pageUrl: string
+    title: string
+    collections: any[]
+}
 
-const Page = (props) => (
+const Page: NextPage<IProps> = props => (
     <App
         menu={buildMenu(props.pageUrl, menuModel)}
         showAuthor={true}
         menuPadding={true}
+        layout={'wide'}
     >
         <Head>
             <title>{props.title}</title>
             <Meta meta={props.meta} />
         </Head>
 
-        <div className="content content_semi-wide">
-            <Article
-                // title={meta.title}
-                title={'Галерея'}
-            >
-                {props.collections.map(([year, albums], index) => (
-                    <ACollection
-                        key={index}
-                        title={year}
-                        albums={albums}
-                    />
-                ))
-                }
-            </Article>
-        </div>
+        <PageHeader
+            title={props.title}
+        />
+
+        {props.collections.map(([year, albums], index) => (
+            <ACollection
+                key={index}
+                title={year}
+                albums={albums}
+            />
+        ))}
     </App>
 )
 
 Page.getInitialProps = wrapInitialProps(async (ctx) => {
     const pageUrl = ctx.req.url
-    const res = await requestGet(createApiUrl(ctx.req, `/api/albums`), {})
+    const res = await requestGet<any>(createApiUrl(ctx.req, `/api/albums`), {})
     const items = res.items || []
     const albumCollections = albumsByYear(items)
     const title = 'Галерея'
@@ -111,4 +114,4 @@ Page.getInitialProps = wrapInitialProps(async (ctx) => {
     }
 })
 
-export default Page
\ No newline at end of file
+export default Page
diff --git a/pages/index.jsx b/pages/index.tsx
similarity index 73%
rename from pages/index.jsx
rename to pages/index.tsx
index df3e7fa4..d3265270 100644
--- a/pages/index.jsx
+++ b/pages/index.tsx
@@ -8,27 +8,36 @@ import menuModel from '../src/models/menu'
 import { meta } from '../src/lib/meta'
 import { buildMenu } from '../src/lib/menu'
 import { createApiUrl, requestGet, wrapInitialProps } from '../src/next-lib'
+import { NextPage } from 'next'
 
-const Page = (props) => (
+interface IProps {
+    pageUrl: string
+    title: string
+    meta: any
+    prevPage: number
+    nextPage: number
+    articles: any[]
+}
+
+const Page: NextPage<IProps> = props => (
     <App
         menu={buildMenu(props.pageUrl, menuModel)}
         showAuthor={true}
         menuPadding={true}
+        layout={'wide'}
     >
         <Head>
             <title>{props.title}</title>
             <Meta meta={props.meta} />
         </Head>
 
-        <div className="content content_wide">
-            <HudozkaTitle />
+        <HudozkaTitle />
 
-            <ArticleCardList
-                articles={props.articles}
-                prevPage={props.prevPage}
-                nextPage={props.nextPage}
-            />
-        </div>
+        <ArticleCardList
+            articles={props.articles}
+            prevPage={props.prevPage}
+            nextPage={props.nextPage}
+        />
     </App>
 )
 
@@ -36,7 +45,7 @@ Page.getInitialProps = wrapInitialProps(async (ctx) => {
     const pageUrl = '/'
     const page = 1
     const pageSize = ctx.query.pageSize || 15
-    const res = await requestGet(createApiUrl(ctx.req, `/api/articles?page=${page}&pageSize=${pageSize}`), {})
+    const res = await requestGet(createApiUrl(ctx.req, `/api/articles?page=${page}&pageSize=${pageSize}`), {}) as any
     const articles = res.items || []
     const nextPage = res.nextPage
     const prevPage = res.prevPage
diff --git a/pages/next.jsx b/pages/next.jsx
index d806899a..abbd9630 100644
--- a/pages/next.jsx
+++ b/pages/next.jsx
@@ -1,37 +1,36 @@
 import React from 'react'
 import Head from 'next/head'
+
 import { App } from '../src/components/App'
-import Page from '../src/components/Page'
+import { Page } from '../src/components/Page'
 import menuModel from '../src/models/menu'
 import { buildMenu } from '../src/lib/menu'
 import { Meta } from '../src/components/Meta'
 import { meta } from '../src/lib/meta'
 import { createApiUrl, requestGet, wrapInitialProps } from '../src/next-lib'
 
-const Index = (props) => (
+const Index = props => (
     <App
         menu={buildMenu(props.pageUrl, menuModel)}
         showAuthor={true}
         menuPadding={true}
+        layout={'thin'}
     >
         <Head>
             <title>{props.title}</title>
             <Meta meta={props.meta} />
         </Head>
 
-        <div className={'content content_thin'}>
-            <Page
-                shareable={true}
-            >
-                {props.content}
-            </Page>
-        </div>
+        <Page
+            showSocialShare={true}
+        >
+            {props.content}
+        </Page>
     </App>
 )
 
 Index.getInitialProps = wrapInitialProps(async (ctx) => {
     const pageUrl = ctx.req.url
-    // // const pageUrl = '/neighbors/2018'
     const page = await requestGet(createApiUrl(ctx.req, `/api/page?page=${pageUrl}`), {})
     const image = page.preview ? page.preview.artifacts.fb : {}
 
@@ -48,4 +47,4 @@ Index.getInitialProps = wrapInitialProps(async (ctx) => {
     }
 })
 
-export default Index
\ No newline at end of file
+export default Index
diff --git a/pages/schedule.jsx b/pages/schedule.jsx
index 37aaac6a..a26929cc 100644
--- a/pages/schedule.jsx
+++ b/pages/schedule.jsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import Head from 'next/head'
 import { App } from '../src/components/App'
-import Schedule from '../src/components/Schedule'
-import Share from '../src/components/Share'
+import { Schedule } from '../src/components/Schedule'
+import { Share } from '../src/components/Share'
 import menuModel from '../src/models/menu'
 import { buildMenu } from '../src/lib/menu'
 import { createApiUrl, requestGet, wrapInitialProps } from '../src/next-lib'
@@ -12,18 +12,17 @@ const Page = (props) => (
         menu={buildMenu(props.pageUrl, menuModel)}
         showAuthor={true}
         menuPadding={true}
+        layout={'wide'}
     >
         <Head>
             <title>{props.title}</title>
         </Head>
 
-        <div className="content content_wide">
-            {/*<ScheduleList schedules={schedules}/>*/}
+        {/*<ScheduleList schedules={schedules}/>*/}
 
-            <Schedule {...props.schedule} />
+        <Schedule {...props.schedule} />
 
-            <Share />
-        </div>
+        <Share />
     </App>
 )
 
diff --git a/pages/teacher/[person].jsx b/pages/teacher/[person].jsx
index 3ad105eb..89865c51 100644
--- a/pages/teacher/[person].jsx
+++ b/pages/teacher/[person].jsx
@@ -1,8 +1,7 @@
 import React from 'react'
-import axios from 'axios'
 import Head from 'next/head'
 import { App } from '../../src/components/App'
-import Page from '../../src/components/Page'
+import { Page } from '../../src/components/Page'
 import { Meta } from '../../src/components/Meta'
 import menuModel from '../../src/models/menu'
 import { buildMenu } from '../../src/lib/menu'
@@ -14,16 +13,15 @@ const Index = (props) => (
         menu={buildMenu(props.pageUrl, menuModel)}
         showAuthor={true}
         menuPadding={true}
+        layout={'wide'}
     >
         <Head>
             <title>{props.title}</title>
             <Meta meta={props.meta} />
         </Head>
-        <div className="content content_thin">
-            <Page shareable={true}>
-                {props.person.post}
-            </Page>
-        </div>
+        <Page shareable={true}>
+            {props.person.post}
+        </Page>
     </App>
 )
 
diff --git a/server.tsconfig.json b/server.tsconfig.json
new file mode 100644
index 00000000..22bafc4f
--- /dev/null
+++ b/server.tsconfig.json
@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "noEmitOnError": false,
+        "target": "es5", 
+        "module": "commonjs", 
+        "jsx": "preserve", 
+        "outDir": "./build", 
+        "strict": false, 
+        "esModuleInterop": true 
+    },
+    "include": [
+        "src/**/*.ts"
+    ]
+}
\ No newline at end of file
diff --git a/src/components/App.js b/src/components/App.js
deleted file mode 100644
index f95f9c31..00000000
--- a/src/components/App.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react'
-import Menu from './Menu'
-import Footer from './Footer'
-import Comments from './Comments'
-
-import '../style/style.scss'
-
-export const App = ({children, menu, showAuthor, menuPadding}) => (
-	<div className="body-wrapper theme-default">
-		<header>
-			<div className="navigation">
-				<div className="navigation__body">
-					<Menu items={menu.items}/>
-				</div>
-			</div>
-		</header>
-
-		<main className="body-wrapper__content">
-			<section className={`content content_full ${menuPadding ? 'content--padding-top--menu' : ''}`}>
-				{children}
-			</section>
-
-			<Comments/>
-		</main>
-
-		<Footer showAuthor={showAuthor}
-				address=" г. Шлиссельбург ул. 18 января д. 3"
-				telephone="+7 (81362) 76-312"
-				email="hudozka@gmail.com"
-		/>
-	</div>
-)
diff --git a/src/components/App/Header.tsx b/src/components/App/Header.tsx
new file mode 100644
index 00000000..3dc82dc7
--- /dev/null
+++ b/src/components/App/Header.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react'
+import { Navigation } from '../Navigation'
+
+const Header: React.FC<any> = props => (
+    <Navigation items={props.menuItems} />
+)
+
+export default Header
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
new file mode 100644
index 00000000..7a3d3fc5
--- /dev/null
+++ b/src/components/App/index.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react'
+import dynamic from 'next/dynamic'
+import cx from 'classnames'
+
+import { Footer } from '../Footer'
+import Comments from '../Comments'
+import { useReducedMotion } from '../../hooks/useReducedMotion'
+
+const Header = dynamic(() => import('./Header'), {
+    ssr: false,
+})
+
+import '../../style/style.scss'
+
+export interface IAppProps {
+    menu: any
+    showAuthor: boolean
+    menuPadding: boolean
+    layout: 'full' | 'wide' | 'thin'
+}
+
+export const App: React.FC<IAppProps> = props => {
+    const motionDisabled = useReducedMotion()
+    
+    return (
+        <div className="body-wrapper theme-default">
+            <header>
+                <div className="navigation">
+                    <div className="navigation__body">
+                        <Header
+                            menuItems={props.menu.items}
+                        />
+                    </div>
+                </div>
+            </header>
+
+            <main className="body-wrapper__content">
+                <section className={cx('content', `content_${props.layout}`, {
+                    'content--padding-top--menu': props.menuPadding,
+                    'reduced-motion': motionDisabled,
+                })}>
+                    {props.children}
+                </section>
+
+                <Comments />
+            </main>
+
+            <Footer
+                showAuthor={props.showAuthor}
+                address=" г. Шлиссельбург ул. 18 января д. 3"
+                telephone="+7 (81362) 76-312"
+                email="hudozka@gmail.com"
+            />
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/Article.js b/src/components/Article.js
index 058223b8..7e71c0bb 100644
--- a/src/components/Article.js
+++ b/src/components/Article.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import { dateFormat } from '../lib/date'
+import { Share } from './Share'
 
 const Tag = ({ children }) => (
     <li className="ArticleTags-Item">
@@ -29,15 +30,6 @@ const Head = ({ date, tags = [], children }) => (
     </header>
 )
 
-const Share = () => (
-    <div className="likely">
-        <div className="vkontakte">Поделиться</div>
-        <div className="facebook">Поделиться</div>
-        <div className="telegram">Отправить</div>
-        <div className="twitter">Твитнуть</div>
-    </div>
-)
-
 const Article = ({ children, date, tags, title, shareable }) => (
     <article className="Article">
         <Head
diff --git a/src/components/ArticleCard/Date.tsx b/src/components/ArticleCard/Date.tsx
new file mode 100644
index 00000000..754e4714
--- /dev/null
+++ b/src/components/ArticleCard/Date.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { dateFormat } from '../../lib/date'
+
+export const Date: React.FC<{ children: string }> = ({ children }) => (
+    <p>
+        <style jsx>{`
+            p {
+                color: #ccc;
+                font-size: small;
+            }
+        `}</style>
+        {dateFormat(children)}
+    </p>
+)
diff --git a/src/components/ArticleCard.jsx b/src/components/ArticleCard/index.tsx
similarity index 67%
rename from src/components/ArticleCard.jsx
rename to src/components/ArticleCard/index.tsx
index 407120ec..82191af1 100644
--- a/src/components/ArticleCard.jsx
+++ b/src/components/ArticleCard/index.tsx
@@ -1,13 +1,20 @@
-import React from 'react'
-import { Image } from './Image'
-import { dateFormat } from '../lib/date'
+import * as React from 'react'
+import cx from 'classnames'
+import { Date } from './Date'
 
-const Date = ({ children }) => (
-    <p className="date">{dateFormat(children)}</p>
-)
+interface IImage {
+    alt: string
+    src: string
+    srcSet: Array<{ url: string, density: number }>
+}
 
-export const ArticleCard = ({ article }) => (
-    <article className="ArticleCard">
+export interface IArticleCardProps {
+    article: any
+    preview?: IImage
+}
+
+export const ArticleCard: React.FC<IArticleCardProps> = ({ article, ...props }) => (
+    <section className="ArticleCard">
         <style jsx>{`
             .ArticleCard {
                 --article-card-width: 30%;
@@ -19,8 +26,8 @@ export const ArticleCard = ({ article }) => (
 
                 margin: var(--article-card-margin);
                 width: var(--article-card-width);
-                min-width: 10em;
-                max-width: 30em;
+                min-width: 15em;
+                max-width: 20em;
 
                 border-radius: 10px;
 
@@ -29,8 +36,8 @@ export const ArticleCard = ({ article }) => (
             }
 
             .ArticleCard > a {
-                    display: block;
-                    position: relative;
+                display: block;
+                position: relative;
             }
 
             .ArticleCard-image {
@@ -64,11 +71,6 @@ export const ArticleCard = ({ article }) => (
                 padding: .75em 1em;
             }
 
-            .ArticleCard .date {
-                color: #ccc;
-                font-size: small;
-            }
-
             .ArticleCard:hover img {
                 width: 105%;
                 height: 105%;
@@ -78,20 +80,14 @@ export const ArticleCard = ({ article }) => (
             }
 
             // Tablet
-
             @media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) {
                 .ArticleCard {
                     --article-card-image-height: 12em;
                 }
-
-                @media screen and (orientation: portrait) {
-                }
             }
 
-
             // Mobile
-
-            @media (max-width: var(--mobile-width)) {
+            @media (max-width: 31.25em) {
                 .ArticleCard {
                     --article-card-width: 100%;
                     --article-card-margin: var(--single-margin) 0;
@@ -101,12 +97,15 @@ export const ArticleCard = ({ article }) => (
 
         <a className="invisible" href={article.url}>
             <div className="ArticleCard-image">
-                {!article.preview ? null : (
-                    <Image
-                        data={article.preview}
-                        alt={article.title}
-                        opa={false}
-                    />
+                {!props.preview ? null : (
+                    <picture>
+                        <img
+                            className={cx({ opa: false })}
+                            alt={props.preview.alt}
+                            src={props.preview.src}
+                            srcSet={props.preview.srcSet.map(({ url, density }) => `${url} ${density}x`).join(' ')}
+                        />
+                    </picture >
                 )}
             </div>
 
@@ -114,9 +113,11 @@ export const ArticleCard = ({ article }) => (
                 {article.title}
 
                 {!article.date ? null : (
-                    <Date>{article.date}</Date>
+                    <Date>
+                        {article.date}
+                    </Date>
                 )}
             </div>
         </a>
-    </article>
+    </section>
 )
diff --git a/src/components/ArticleCardList.jsx b/src/components/ArticleCardList.jsx
index bb4ca866..ed33db27 100644
--- a/src/components/ArticleCardList.jsx
+++ b/src/components/ArticleCardList.jsx
@@ -3,18 +3,36 @@ import Paginator from './Paginator'
 import { ArticleCard } from './ArticleCard'
 
 export const ArticleCardList = ({ articles, nextPage, prevPage }) => (
-    <div className="ArticleCardList">
+    <div>
+        <style jsx>{`
+            .body {
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                flex-wrap: wrap;
+            }
+        `}</style>
+
         {!prevPage ? null : (
             <Paginator url={`/articles/${prevPage}`} type="top" />
         )}
 
-        <div className="ArticleCardList-body">
-            {articles.map((article, i) => (
-                <ArticleCard
-                    key={i}
-                    article={article}
-                />
-            ))}
+        <div className={'body'}>
+            {articles.map((article, i) => {
+                const preview = {
+                    alt: article.title,
+                    src: article.preview.src,
+                    srcSet: article.preview.set,
+                }
+
+                return (
+                    <ArticleCard
+                        key={i}
+                        article={article}
+                        preview={preview}
+                    />
+                )
+            })}
         </div>
 
         {!nextPage ? null : (
diff --git a/src/components/CollectiveImage.jsx b/src/components/CollectiveImage.jsx
index 54a3d72d..47fcf719 100644
--- a/src/components/CollectiveImage.jsx
+++ b/src/components/CollectiveImage.jsx
@@ -1,25 +1,22 @@
 import React from 'react'
-import Image from './Image'
+import { Image } from './Image'
 
 export const CollectiveImage = (props) => (
     <div
-        className="CollectiveImage"
         style={props.style}
     >
-        <style jsx>{`
-            .CollectiveImage {
-                margin - bottom: var(--double-margin);
-            }
-
-            img {
-                width: 100%;
-                border-radius: 10px;
-            }
-        `}</style>
-
         <Image
-            data={props.data}
+            src={props.data.src}
+            alt={props.data.alt}
+            set={props.data.set}
             opa={false}
+            style={{
+                marginBottom: 'var(--double-margin)',
+            }}
+            imgStyle={{
+                width: '100%',
+                borderRadius: '10px',
+            }}
         />
-	</div>
+    </div>
 )
diff --git a/src/components/DocumentList.js b/src/components/DocumentList.js
deleted file mode 100644
index bc33069d..00000000
--- a/src/components/DocumentList.js
+++ /dev/null
@@ -1,18 +0,0 @@
-const React = require('react')
-const Document = require('./DocumentListItem')
-
-const DocumentList = ({documents, name}) => (
-	<div className="documents-container">
-		<div className="documents-container__head">
-			<h2>{name}</h2>
-		</div>
-
-		<div className="documents-container__body">
-			{documents.map((d, i) => (
-				<Document key={i} {...d}/>
-			))}
-		</div>
-	</div>
-)
-
-module.exports = DocumentList
diff --git a/src/components/DocumentList/index.tsx b/src/components/DocumentList/index.tsx
new file mode 100644
index 00000000..541e1d12
--- /dev/null
+++ b/src/components/DocumentList/index.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { IDocument } from '../../types'
+import { DocumentListItem } from '../DocumentListItem'
+
+export interface IDocumentListProps {
+    documents: IDocument[]
+    name: string
+}
+
+export const DocumentList: React.FC<IDocumentListProps> = props => (
+    <div className="documents-container">
+        <div className="documents-container__head">
+            <h2>{props.name}</h2>
+        </div>
+
+        <div className="documents-container__body">
+            {props.documents.map((d, i) => (
+                <DocumentListItem key={i} {...d} />
+            ))}
+        </div>
+    </div>
+)
diff --git a/src/components/DocumentListItem.js b/src/components/DocumentListItem.js
deleted file mode 100644
index 21ef96d2..00000000
--- a/src/components/DocumentListItem.js
+++ /dev/null
@@ -1,23 +0,0 @@
-const React = require('react')
-const {ext, size} = require('../lib/file')
-const {titleCase} = require('../lib/string')
-
-const Document = ({title, url, imageUrl, fileUrl, fileName, fileSize}) => (
-	<div className="document-row">
-		<a href={url} className="invisible">
-			<div className="document-row__image">
-				<img src={imageUrl} alt={title}/>
-			</div>
-		</a>
-
-		<div className="document-row__file">
-			<a href={url}>{titleCase(title)}</a>
-		</div>
-
-		<div className="document-row__file-info">
-			<a href={fileUrl} target="_blank">{ext(fileName)} ({size(fileSize)})</a>
-		</div>
-	</div>
-)
-
-module.exports = Document
diff --git a/src/components/DocumentListItem/index.tsx b/src/components/DocumentListItem/index.tsx
new file mode 100644
index 00000000..04090a36
--- /dev/null
+++ b/src/components/DocumentListItem/index.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { ext, size } from '../../lib/file'
+import { titleCase } from '../../lib/string'
+
+export interface IDocumentListItemProps {
+    title: string
+    url: string
+    imageUrl: string
+    fileUrl: string
+    fileName: string
+    fileSize: number
+}
+
+export const DocumentListItem: React.FC<IDocumentListItemProps> = props => (
+    <div className="document-row">
+        <a href={props.url} className="invisible">
+            <div className="document-row__image">
+                <img src={props.imageUrl} alt={props.title} />
+            </div>
+        </a>
+
+        <div className="document-row__file">
+            <a href={props.url}>{titleCase(props.title)}</a>
+        </div>
+
+        <div className="document-row__file-info">
+            <a href={props.fileUrl} target="_blank">{ext(props.fileName)} ({size(props.fileSize)})</a>
+        </div>
+    </div>
+)
diff --git a/src/components/Footer.js b/src/components/Footer.js
deleted file mode 100644
index 07a7e01a..00000000
--- a/src/components/Footer.js
+++ /dev/null
@@ -1,44 +0,0 @@
-const React = require('react')
-
-const mailto = email => `mailto:${email}`
-const currentYear = () => (new Date()).getFullYear()
-
-const Footer = ({children, address, telephone, email, showAuthor}) => (
-	<footer>
-		<div className="contacts">
-			<div>
-				<h4>Контактная информация</h4>
-				<p>Адрес: {address}</p>
-				<p>Телефон: {telephone}</p>
-				<p>Почта: <a href={mailto(email)}>{email}</a></p>
-				<p>Вконтакте: <a href="https://vk.com/shlisselburghudozka">shlisselburghudozka</a></p>
-				<p>Инстаграм: <a href="https://www.instagram.com/hudozka/">hudozka</a></p>
-			</div>
-		</div>
-
-		<div className="copyright">
-            <Copyright
-                yearStart={2012}
-                yearEnd={currentYear()}
-            />
-			{!showAuthor ? null : (
-                <Author/>
-			)}
-		</div>
-	</footer>
-)
-
-const Author = () => (
-    <span>
-		Разработка и поддержка сайта —
-		<a href="http://tmshv.ru?utm_source=artshburg&utm_medium=developer&utm_campaign=tmshv_ru">
-			www.tmshv.ru
-		</a>
-	</span>
-)
-
-const Copyright = ({yearStart, yearEnd}) => (
-    <span>©&nbsp;{yearStart}—{yearEnd} Шлиссельбургская детская художественная школа</span>
-)
-
-module.exports = Footer
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
new file mode 100644
index 00000000..a3e69d0a
--- /dev/null
+++ b/src/components/Footer/index.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react'
+
+const mailto = email => `mailto:${email}`
+const currentYear = () => (new Date()).getFullYear()
+
+export interface IFooterProps {
+    address: string
+    telephone: string
+    email: string
+    showAuthor: boolean
+}
+
+export const Footer: React.FC<IFooterProps> = props => (
+    <footer>
+        <div className="contacts">
+            <div>
+                <h4>Контактная информация</h4>
+                <p>Адрес: {props.address}</p>
+                <p>Телефон: {props.telephone}</p>
+                <p>Почта: <a href={mailto(props.email)}>{props.email}</a></p>
+                <p>Вконтакте: <a href="https://vk.com/shlisselburghudozka">shlisselburghudozka</a></p>
+                <p>Инстаграм: <a href="https://www.instagram.com/hudozka/">hudozka</a></p>
+            </div>
+        </div>
+
+        <div className="copyright">
+            <Copyright
+                yearStart={2012}
+                yearEnd={currentYear()}
+            />
+            {!props.showAuthor ? null : (
+                <Author />
+            )}
+        </div>
+    </footer>
+)
+
+const Author = () => (
+    <span>
+        Разработка и поддержка сайта —
+		<a href="http://tmshv.ru?utm_source=artshburg&utm_medium=developer&utm_campaign=tmshv_ru">
+            www.tmshv.ru
+		</a>
+    </span>
+)
+
+const Copyright = ({ yearStart, yearEnd }) => (
+    <span>©&nbsp;{yearStart}—{yearEnd} Шлиссельбургская детская художественная школа</span>
+)
diff --git a/src/components/HudozkaTitle.jsx b/src/components/HudozkaTitle.jsx
deleted file mode 100644
index 81aa00d9..00000000
--- a/src/components/HudozkaTitle.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react'
-
-export const HudozkaTitle = () => (
-	<div className="HudozkaTitle">
-		<p>МБУДО</p>
-		<h1>Шлиссельбургская детская художественная школа</h1>
-	</div>
-)
diff --git a/src/components/HudozkaTitle/index.tsx b/src/components/HudozkaTitle/index.tsx
new file mode 100644
index 00000000..d0660097
--- /dev/null
+++ b/src/components/HudozkaTitle/index.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react'
+
+export const HudozkaTitle: React.FC = React.memo(() => (
+    <div>
+        <style jsx>{`
+            div {
+                --padding: var(--double-margin) 0;
+
+                padding: var(--padding);
+                text-align: center;
+            }
+
+            p {
+                color: var(--text-color-second);
+                margin-top: var(--single-margin);
+                font-size: var(--font-size-second);
+            }
+
+            h1 {
+                margin-top: var(--single-margin);
+            }
+
+            @media (max-width: 31.25em) {
+                div {
+                    --padding: 0 0 var(--double-margin);
+                }
+            }
+        `}</style>
+
+        <p>МБУДО</p>
+        <h1>Шлиссельбургская <br /> детская художественная школа</h1>
+    </div>
+))
diff --git a/src/components/Image.jsx b/src/components/Image.jsx
deleted file mode 100644
index 7f38d1a2..00000000
--- a/src/components/Image.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import className from 'classnames'
-
-export const Image = ({data, alt, opa = true}) => (
-    <picture>
-        <style jsx>{`
-            picture img {
-                display: block;
-            }
-        `}</style>
-
-		<img
-            className={className({ opa })}
-			alt={alt}
-			src={data.src}
-			srcSet={data.set.map(({url, density}) => `${url} ${density}x`)}
-		/>
-	</picture >
-)
-
-export default Image
\ No newline at end of file
diff --git a/src/components/Image/index.tsx b/src/components/Image/index.tsx
new file mode 100644
index 00000000..68d75eea
--- /dev/null
+++ b/src/components/Image/index.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react'
+import cx from 'classnames'
+
+export interface IImageProps {
+    style?: React.CSSProperties
+    imgStyle?: React.CSSProperties
+    src: string
+    alt: string
+    opa: boolean
+    set: Array<{
+        url: string
+        density: number
+    }>
+}
+
+export const Image: React.FC<IImageProps> = React.memo(props => {
+    const srcSet = props.set
+        .map(({ url, density }) => `${url} ${density}x`)
+        .join(' ')
+
+    return (
+        <picture style={props.style}>
+            <style jsx>{`
+                picture img {
+                    display: block;
+                }
+            `}</style>
+
+            <img
+                style={props.imgStyle}
+                className={cx({
+                    opa: props.opa
+                })}
+                alt={props.alt}
+                src={props.src}
+                srcSet={srcSet}
+            />
+        </picture >
+    )
+})
diff --git a/src/components/Menu.js b/src/components/Menu.js
deleted file mode 100644
index 39308008..00000000
--- a/src/components/Menu.js
+++ /dev/null
@@ -1,58 +0,0 @@
-const React = require('react')
-const getPathWithNoTrailingSlas = require('../lib/url').getPathWithNoTrailingSlash
-
-const hasSubmenu = item => !!item.items
-const doDrawSubmenu = item => false //item.active && hasSubmenu(item)
-const itemUrl = url => getPathWithNoTrailingSlas(url)
-
-const selectedClassName = flag => flag
-	? 'selected'
-	: ''
-
-const hmenuCurClassName = flag => flag
-	? 'HMenu__item--cur'
-	: ''
-
-const MenuItem = ({active, text, url}) => (active
-		? <span>{text}</span>
-		: <a href={itemUrl(url)}>{text}</a>
-)
-
-const MenuToggle = () => (
-	<div className="HMenu__toggle">
-		<a href="#"></a>
-	</div>
-)
-
-const Menu = ({items}) => {
-	const content = items.map((item, index) => (
-		<li key={index}
-			className={`HMenu__item ${hmenuCurClassName(item.highlighted)} ${item.color} ${selectedClassName(item.highlighted)}`}
-		>
-			<MenuItem {...item}/>
-
-			{!doDrawSubmenu(item) ? null : (
-				<Submenu key={index} items={item.items}/>
-			)}
-		</li>
-	))
-	return (
-		<menu className="main-menu HMenu" data-toggle-width="1024">
-			<MenuToggle/>
-
-			{content}
-		</menu>
-	)
-}
-
-const Submenu = ({items}) => (
-	<menu className="main-menu__submenu">
-		{items.map((item, index) => (
-			<li key={index} className={`${item.color} ${selectedClassName(item.active)}`}>
-				<MenuItem {...item}/>
-			</li>
-		))}
-	</menu>
-)
-
-module.exports = Menu
diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx
new file mode 100644
index 00000000..cc6bd5ab
--- /dev/null
+++ b/src/components/Menu/MenuItem.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react'
+
+export interface IMenuItemProps {
+    active: boolean
+    text: string
+    url: string
+}
+
+export const MenuItem: React.FC<IMenuItemProps> = ({ active, text, url }) => (
+   <>
+        <style jsx>{`
+            a {
+                color: var(--dark-color);
+            }
+
+            a:visited {
+                color: var(--dark-color);
+            }
+
+            a:hover {
+                border-color: var(--dark-color);
+            }
+        `}</style>
+
+        {active
+            ? (
+                <span>{text}</span>
+            ) : (
+                <a href={url}>{text}</a>
+            )
+        }
+    </>
+)
\ No newline at end of file
diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
new file mode 100644
index 00000000..cc2a7d10
--- /dev/null
+++ b/src/components/Menu/index.tsx
@@ -0,0 +1,125 @@
+import * as React from 'react'
+import cx from 'classnames'
+import { getPathWithNoTrailingSlash } from '../../lib/url'
+import { MenuItem } from './MenuItem'
+
+const itemUrl = (url: string) => getPathWithNoTrailingSlash(url)
+
+export interface IMenuProps {
+    layout: 'desktop' | 'mobile'
+    items: any[]
+}
+
+export const Menu: React.FC<IMenuProps> = props => (
+    <div className={cx('menu', props.layout)}>
+        <style jsx>{`
+            .menu {
+                display: flex;
+                align-items: flex-start;
+
+                list-style: none;
+            }
+
+            div.desktop {
+                flex-direction: row;
+                flex-wrap: wrap;
+            }
+
+            div.mobile {
+                flex-direction: column;
+            }
+            
+            li{
+                position: relative;
+                border-top: var(--menu-colored-mark-thickness) solid rgba(0, 0, 0, 0);
+            }
+
+            li.desktop {
+                padding: 0.3em 0.2em 0;
+                margin-right: 1em;
+
+                font-size: var(--normal-font-size);
+            }
+
+            li.mobile {
+                padding: 0.3em 0.5em;
+                margin-bottom: var(--half-margin);
+
+                font-size: 1.25em;
+                color: white;
+            }
+
+            li:last-child {
+                margin-right: 0;
+            }
+
+            li.selected {
+                font-weight: bold;
+            }
+
+            li.desktop.selected.blue {
+                border-top-color: var(--blue-color);
+            }
+
+            li.desktop.selected.orange {
+                border-top-color: var(--orange-color);
+            }
+
+            li.desktop.selected.green {
+                border-top-color: var(--green-color);
+            }
+
+            li.desktop.selected.yellow {
+                border-top-color: var(--yellow-color);
+            }
+
+            li.desktop.selected.pink {
+                border-top-color: var(--pink-color);
+            }
+
+            li.desktop.selected.red {
+                border-top-color: var(--red-color);
+            }
+
+            li.mobile.selected.blue {
+                background-color: var(--blue-color);
+            }
+
+            li.mobile.selected.orange {
+                background-color: var(--orange-color);
+            }
+
+            li.mobile.selected.green {
+                background-color: var(--green-color);
+            }
+
+            li.mobile.selected.yellow {
+                background-color: var(--yellow-color);
+            }
+
+            li.mobile.selected.pink {
+                background-color: var(--pink-color);
+            }
+
+            li.mobile.selected.red {
+                background-color: var(--red-color);
+            }
+        `}</style>
+
+        {props.items.map((item, index) => (
+            <li key={index}
+                className={cx(
+                    props.layout,
+                    item.color, {
+                    selected: item.highlighted,
+                })}
+            >
+                <MenuItem
+                    url={itemUrl(item.url)}
+                    text={item.text}
+                    active={item.active}
+                />
+            </li>
+        ))}
+    </div>
+)
diff --git a/src/components/MenuToggle/index.tsx b/src/components/MenuToggle/index.tsx
new file mode 100644
index 00000000..ca64be54
--- /dev/null
+++ b/src/components/MenuToggle/index.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react'
+import cx from 'classnames'
+
+export interface IMenuToggleProps {
+    style?: React.CSSProperties
+    open: boolean
+    position: 'left' | 'right'
+    onClick: () => void
+}
+
+export const MenuToggle: React.FC<IMenuToggleProps> = props => {
+    return (
+        <div
+            className={cx(props.position, {
+                open: props.open,
+                close: !props.open,
+            })}
+            style={props.style}
+        >
+            <style jsx>{`
+                div {
+                    --hmenu-margin: 6px;
+                    --hmenu-icon-width: 32px;
+                    --hmenu-icon-height: 32px;
+
+                    position: absolute;
+                    height: var(--hmenu-icon-height);
+                    margin: var(--hmenu-margin);
+                }
+
+                div.right {
+                    top: 0;
+                    right: 0;
+                }
+
+                div.left {
+                    top: 0;
+                    left: 0;
+                }
+
+                a {
+                    display: block;
+                    text-decoration: none;
+                    border: none;
+
+                    width: var(--hmenu-icon-width);
+                    height: var(--hmenu-icon-height);
+                    background-size: 100%;
+                }
+
+                a:hover {
+                    text-decoration: none;
+                    border: none;
+                }
+
+                div.open a {
+                    background-image: url(/static/graphics/hmenu-close-b.png);
+                }
+
+                div.open a:hover {
+                    background-image: url(/static/graphics/hmenu-close-hover-b.png);
+                }
+
+                div.close a {
+                    background-image: url(/static/graphics/hmenu-b.png);
+                }
+
+                div.close a:hover {
+                    background-image: url(/static/graphics/hmenu-hover-b.png);
+                }
+            `}</style>
+
+            <a
+                href="#"
+                onClick={props.onClick}
+            ></a>
+        </div>
+    )
+}
diff --git a/src/components/Meta.jsx b/src/components/Meta/index.tsx
similarity index 87%
rename from src/components/Meta.jsx
rename to src/components/Meta/index.tsx
index 378b1f4c..102936eb 100644
--- a/src/components/Meta.jsx
+++ b/src/components/Meta/index.tsx
@@ -1,7 +1,12 @@
-import React from 'react'
+import * as React from 'react'
+import { IMeta } from '../../types'
 
-export const Meta = ({ meta }) => (
-    <React.Fragment>
+export interface IMetaProps {
+    meta: IMeta
+}
+
+export const Meta: React.FC<IMetaProps> = ({ meta }) => (
+    <>
         {/* Search Engine */}
         <meta name="description" content={meta.description} />
         <meta name="image" content={meta.image} />
@@ -15,8 +20,8 @@ export const Meta = ({ meta }) => (
         <meta property="og:title" content={meta.title} />
         <meta property="og:description" content={meta.description} />
         <meta property="og:image" content={meta.image} />
-        <meta property="og:image:width" content={meta.imageWidth} />
-        <meta property="og:image:height" content={meta.imageHeight} />
+        <meta property="og:image:width" content={meta.imageWidth.toString()} />
+        <meta property="og:image:height" content={meta.imageHeight.toString()} />
         <meta property="og:url" content={meta.url} />
         <meta property="og:site_name" content={meta.siteName} />
         <meta property="og:locale" content={meta.locale} />
@@ -31,5 +36,5 @@ export const Meta = ({ meta }) => (
         <meta name="twitter:url" content={meta.url} />
         <meta name="twitter:site" content={meta.twitterSite} />
         <meta name="twitter:creator" content={meta.twitterCreator} />
-    </React.Fragment>
-)
\ No newline at end of file
+    </>
+)
diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx
new file mode 100644
index 00000000..31c639f0
--- /dev/null
+++ b/src/components/Navigation/index.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react'
+import { MenuToggle } from '../MenuToggle'
+import { useScreenType } from '../../hooks/useScreenType'
+import { Menu } from '../Menu'
+import { Overlay } from '../Overlay'
+
+export interface INavigationProps {
+    items: any[]
+}
+
+export const Navigation: React.FC<INavigationProps> = props => {
+    const isMobile = useScreenType(['phone', 'tablet'])
+    const [open, setOpen] = React.useState(false)
+    const onClick = React.useCallback(
+        () => {
+            setOpen(!open)
+        },
+        [open]
+    )
+
+    return (
+        <nav>
+            <style jsx>{`
+                nav {
+                    display: flex;
+                    align-items: flex-start;
+                    margin-left: 1em;
+                    margin-right: 1em;
+
+                    font-size: var(--normal-font-size);
+                    list-style: none;
+                }
+            `}</style>
+
+            {isMobile ? (
+                <MenuToggle
+                    open={open}
+                    position={'right'}
+                    onClick={onClick}
+                    style={{
+                        zIndex: 1000001,
+                    }}
+                />
+            ) : (
+                    <Menu
+                        layout={'desktop'}
+                        items={props.items}
+                    />
+                )}
+
+            <Overlay
+                show={open}
+                onClickOverlay={onClick}
+            >
+                <div style={{
+                    width: '50%',
+                    margin: '50px auto',
+                }}>
+                    <Menu
+                        layout={'mobile'}
+                        items={props.items}
+                    />
+                </div>
+            </Overlay>
+        </nav>
+    )
+}
diff --git a/src/components/Overlay/Transition.tsx b/src/components/Overlay/Transition.tsx
new file mode 100644
index 00000000..a071fca0
--- /dev/null
+++ b/src/components/Overlay/Transition.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react'
+
+export interface ITransitionProps {
+    duration: number
+    extraStyle?: React.CSSProperties
+    show: boolean
+}
+
+export const Transition: React.FC<ITransitionProps> = props => {
+    const [mounted, setMounted] = React.useState(props.show)
+    const [opacity, setOpacity] = React.useState(0)
+    const onTransitionEnd = React.useCallback(() => {
+        if (opacity === 0) {
+            setMounted(false)
+        }
+    }, [opacity])
+    const transition = React.useMemo(
+        () => `all ${props.duration}ms`,
+    [props.duration])
+
+    React.useEffect(() => {
+        if (!props.show) {
+            setOpacity(0)
+            return
+        }
+
+        setMounted(true)
+        let t = setTimeout(() => {
+            setOpacity(1)
+        }, 16)
+
+        return () => {
+            clearTimeout(t)
+        }
+    }, [props.show])
+
+    return mounted && (
+        <div
+            style={{
+                ...props.extraStyle,
+                opacity,
+                transition,
+            }}
+            onTransitionEnd={onTransitionEnd}
+        >
+            {props.children}
+        </div>
+    )
+}
diff --git a/src/components/Overlay/index.tsx b/src/components/Overlay/index.tsx
new file mode 100644
index 00000000..b48d1f9c
--- /dev/null
+++ b/src/components/Overlay/index.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react'
+import { Transition } from './Transition'
+import { useReducedMotion } from '../../hooks/useReducedMotion'
+
+export interface IOverlayProps {
+    show: boolean
+    onClickOverlay: () => void
+}
+
+export const Overlay: React.FC<IOverlayProps> = props => {
+    const motionDisabled = useReducedMotion()
+    const duration = motionDisabled ? 0 : 250
+
+    const onClick = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+        if (event.target === event.currentTarget) {
+            props.onClickOverlay()
+        }
+    }, [props.onClickOverlay])
+
+    React.useEffect(() => {
+        document.body.classList.toggle('noscroll', props.show)
+    }, [props.show])
+
+    return (
+        <Transition
+            duration={duration}
+            show={props.show}
+            extraStyle={{
+                zIndex: 1000000,
+            }}
+        >
+            <div
+                onClick={onClick}
+            >
+                <style jsx>{`
+                    div {
+                        position: fixed;
+                        width: 100%;
+                        height: 100%;
+                        top: 0;
+                        left: 0;
+
+                        background-color: rgb(255, 255, 255);
+                    }
+                `}</style>
+
+                {props.children}
+            </div>
+        </Transition>
+    )
+}
diff --git a/src/components/Page.js b/src/components/Page.js
deleted file mode 100644
index 35a7c13f..00000000
--- a/src/components/Page.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-import Share from './Share'
-import Html from './Html'
-
-export default function Page({ children, shareable }) {
-    return (
-        <div className={'Article Article--cloud'}>
-            <div className={'Article-Body'}>                
-                <Html
-                    html={children}
-                />
-            </div>
-
-            {!shareable ? null : (
-                <Share />
-            )}
-        </div>
-    )
-}
diff --git a/src/components/Page/index.tsx b/src/components/Page/index.tsx
new file mode 100644
index 00000000..ef73cc09
--- /dev/null
+++ b/src/components/Page/index.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { Share } from '../Share'
+import Html from '../Html'
+
+export interface IPageProps {
+    showSocialShare: boolean
+}
+
+export const Page: React.FC<IPageProps> = props => (
+    <div className={'Article Article--cloud'}>
+        <div className={'Article-Body'}>
+            <Html
+                html={props.children}
+            />
+        </div>
+
+        {!props.showSocialShare ? null : (
+            <Share />
+        )}
+    </div>
+)
diff --git a/src/components/PageHeader/index.tsx b/src/components/PageHeader/index.tsx
new file mode 100644
index 00000000..6dbcd894
--- /dev/null
+++ b/src/components/PageHeader/index.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { dateFormat } from '../../lib/date'
+
+export interface IPageHeaderProps {
+    tags?: string[]
+    date?: Date
+    title: string
+}
+
+export const PageHeader: React.FC<IPageHeaderProps> = props => (
+    <header className="Article-Head">
+        <h1>{props.title}</h1>
+
+        {!props.date ? null : (
+            <p className="date">{dateFormat(props.date)}</p>
+        )}
+
+        {/* {!(tags.length) ? null : (
+            <TagList tags={tags} />
+        )} */}
+    </header>
+)
diff --git a/src/components/PersonCard.jsx b/src/components/PersonCard.jsx
index f41ec159..02d113cd 100644
--- a/src/components/PersonCard.jsx
+++ b/src/components/PersonCard.jsx
@@ -1,7 +1,8 @@
 import React from 'react'
+import cx from 'classnames'
 import { Image } from './Image'
 
-module.exports = ({ picture, name, url, profile }) => (
+export const PersonCard = ({ picture, name, url, profile }) => (
     <div className="PersonCard">
         <style jsx>{`
             .PersonCard {
@@ -84,7 +85,7 @@ module.exports = ({ picture, name, url, profile }) => (
 
             // Mobile
 
-            @media (max-width: var(--mobile-width)) {
+            @media (max-width: 31.25em) {
                 .PersonCard {
                     --person-card-width: 100%;
                 }
@@ -93,10 +94,14 @@ module.exports = ({ picture, name, url, profile }) => (
 
         <a className="invisible" href={url}>
             <div className="PersonCard-Picture">
-                <Image
-                    data={picture}
-                    opa={false}
-                />
+                <picture>
+                    <img
+                        className={cx({ opa: false })}
+                        alt={''}
+                        src={picture.src}
+                        srcSet={picture.set.map(({ url, density }) => `${url} ${density}x`)}
+                    />
+                </picture >
             </div>
 
             <div className="PersonCard-Title">
diff --git a/src/components/Schedule.js b/src/components/Schedule.js
deleted file mode 100644
index 17aaadd9..00000000
--- a/src/components/Schedule.js
+++ /dev/null
@@ -1,123 +0,0 @@
-const React = require('react')
-
-const {getDates} = require('../utils/date')
-const {shortName} = require('../models/collective')
-
-const now = new Date()
-const dates = getDates(now)
-
-const isToday = weekDayIndex => (now.getDay() - 1) === weekDayIndex
-const weekDay = weekDayIndex => dates[weekDayIndex]
-const short = shortName
-
-const todayClass = i => isToday(i)
-	? 'current'
-	: ''
-
-const HeadDay = ({i, children}) => (
-	<div className={`schedule-table__head-record ${todayClass(i)}`}>
-		<p className="day">{children}</p>
-		<p className="date">{weekDay(i)}</p>
-	</div>
-)
-
-const days = [
-	'Понедельник',
-	'Вторник',
-	'Среда',
-	'Четверг',
-	'Пятница',
-	'Суббота',
-]
-
-const Schedule = ({groups}) => (
-	<div className="schedule-table">
-		<div className="schedule-table__body">
-			<div className="schedule-table__body-row">
-				<div className="schedule-table__body-group">Гр.</div>
-
-				{days.map((day, index) => (
-					<HeadDay i={index}>{day}</HeadDay>
-				))}
-			</div>
-
-			{groups.map((group, index) => (
-				<GroupRow key={index} {...group}/>
-			))}
-		</div>
-	</div>
-)
-
-const GroupRow = ({name, time, week}) => (
-	<div className="schedule-table__body-row">
-		<div className="schedule-table__body-group">
-			<p className="name">{name}</p>
-			<p className="time">{time}</p>
-		</div>
-
-		{week.map((day, index) => (
-			<Group key={index} day={day} dayIndex={index}/>
-		))}
-	</div>
-)
-
-const Group = ({day, dayIndex}) => (
-	<div className={`schedule-table__record ${todayClass(dayIndex)}`}>
-		{day.map((lesson, index) => (
-			<Cell key={index} {...lesson}/>
-		))}
-	</div>
-)
-
-const Cell = ({course, teacher, time}) => (
-	<div className="schedule-table__course">
-		<Lesson {...course}/>
-		<Teacher {...teacher}/>
-
-		{time
-			.map(range => ({range}))
-			.map((range, index) => (
-			<TimeRange key={index} {...range}/>
-		))}
-	</div>
-)
-
-const Lesson = ({title, url}) => (
-	<p className="lesson">
-		{url
-			? (
-				<a href={url}>
-					{title}
-				</a>
-			)
-			: (
-				<span>
-					{title}
-				</span>
-			)
-		}
-	</p>
-)
-
-const Teacher = ({name, url}) => (
-	<p className="teacher">
-		{url
-			? (
-				<a href={url}>
-					{short(name)}
-				</a>
-			)
-			: (
-				<span>
-					{short(name)}
-				</span>
-			)
-		}
-	</p>
-)
-
-const TimeRange = ({range}) => (
-	<p className="time">{(range || []).join(' — ')}</p>
-)
-
-module.exports = Schedule
diff --git a/src/components/Schedule.jsx b/src/components/Schedule.jsx
new file mode 100644
index 00000000..e1b1ae95
--- /dev/null
+++ b/src/components/Schedule.jsx
@@ -0,0 +1,126 @@
+import React from 'react'
+
+const { getDates } = require('../utils/date')
+const { shortName } = require('../models/collective')
+
+const now = new Date()
+const dates = getDates(now)
+
+const isToday = weekDayIndex => (now.getDay() - 1) === weekDayIndex
+const weekDay = weekDayIndex => dates[weekDayIndex]
+const short = shortName
+
+const todayClass = i => isToday(i)
+    ? 'current'
+    : ''
+
+const HeadDay = ({ i, children }) => (
+    <div className={`schedule-table__head-record ${todayClass(i)}`}>
+        <p className="day">{children}</p>
+        <p className="date">{weekDay(i)}</p>
+    </div>
+)
+
+const days = [
+    'Понедельник',
+    'Вторник',
+    'Среда',
+    'Четверг',
+    'Пятница',
+    'Суббота',
+]
+
+export const Schedule = ({ groups }) => (
+    <div className="schedule-table">
+        <div className="schedule-table__body">
+            <div className="schedule-table__body-row">
+                <div className="schedule-table__body-group">Гр.</div>
+
+                {days.map((day, index) => (
+                    <HeadDay
+                        key={index}
+                        i={index}
+                    >
+                        {day}
+                    </HeadDay>
+                ))}
+            </div>
+
+            {groups.map((group, index) => (
+                <GroupRow key={index} {...group} />
+            ))}
+        </div>
+    </div>
+)
+
+const GroupRow = ({ name, time, week }) => (
+    <div className="schedule-table__body-row">
+        <div className="schedule-table__body-group">
+            <p className="name">{name}</p>
+            <p className="time">{time}</p>
+        </div>
+
+        {week.map((day, index) => (
+            <Group key={index} day={day} dayIndex={index} />
+        ))}
+    </div>
+)
+
+const Group = ({ day, dayIndex }) => (
+    <div className={`schedule-table__record ${todayClass(dayIndex)}`}>
+        {day.map((lesson, index) => (
+            <Cell key={index} {...lesson} />
+        ))}
+    </div>
+)
+
+const Cell = ({ course, teacher, time }) => (
+    <div className="schedule-table__course">
+        <Lesson {...course} />
+        <Teacher {...teacher} />
+
+        {time
+            .map(range => ({ range }))
+            .map((range, index) => (
+                <TimeRange key={index} {...range} />
+            ))}
+    </div>
+)
+
+const Lesson = ({ title, url }) => (
+    <p className="lesson">
+        {url
+            ? (
+                <a href={url}>
+                    {title}
+                </a>
+            )
+            : (
+                <span>
+                    {title}
+                </span>
+            )
+        }
+    </p>
+)
+
+const Teacher = ({ name, url }) => (
+    <p className="teacher">
+        {url
+            ? (
+                <a href={url}>
+                    {short(name)}
+                </a>
+            )
+            : (
+                <span>
+                    {short(name)}
+                </span>
+            )
+        }
+    </p>
+)
+
+const TimeRange = ({ range }) => (
+    <p className="time">{(range || []).join(' — ')}</p>
+)
diff --git a/src/components/ScheduleList.js b/src/components/ScheduleList.js
index 36fc648a..36f953e3 100644
--- a/src/components/ScheduleList.js
+++ b/src/components/ScheduleList.js
@@ -1,5 +1,5 @@
 const React = require('react')
-const text = require('../core/schedule').text
+const text = require('../server/schedule').text
 
 const ScheduleList = ({schedules}) => (
 	<div className="schedule-selector">
diff --git a/src/components/Share.js b/src/components/Share/index.tsx
similarity index 76%
rename from src/components/Share.js
rename to src/components/Share/index.tsx
index 5489c466..8153da47 100644
--- a/src/components/Share.js
+++ b/src/components/Share/index.tsx
@@ -1,6 +1,6 @@
-const React = require('react')
+import * as React from 'react'
 
-const Share = () => (
+export const Share: React.FC = () => (
 	<div className="likely">
 		<div className="vkontakte">Поделиться</div>
 		<div className="facebook">Поделиться</div>
@@ -8,5 +8,3 @@ const Share = () => (
 		<div className="twitter">Твитнуть</div>
 	</div>
 )
-
-module.exports = Share
diff --git a/src/components/TeacherProfile.js b/src/components/TeacherProfile.js
deleted file mode 100644
index 41e6304b..00000000
--- a/src/components/TeacherProfile.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const React = require('react')
-const Share = require('./Share')
-const getHtml = require('../lib/component').getHtml
-
-const Head = ({url, children}) => (
-	!url
-		? <h1>{children}</h1>
-		: <a href={url}><h2>{children}</h2></a>
-)
-
-const TeacherProfile = ({picture, name, url, profile, biography, shareable}) => (
-	<div className="teacher-profile">
-		<div className="teacher-profile__picture">
-			<img src={picture.url}/>
-		</div>
-
-		<div className="teacher-profile__info">
-			<div className="teacher-profile__biography">
-				{getHtml(biography)}
-			</div>
-		</div>
-
-		{!shareable ? null : (
-			<Share/>
-		)}
-	</div>
-)
-
-module.exports = TeacherProfile
diff --git a/src/core/Album.js b/src/core/Album.js
deleted file mode 100644
index 010811b0..00000000
--- a/src/core/Album.js
+++ /dev/null
@@ -1,65 +0,0 @@
-const Data = require('./Data')
-const Image = require('./Image')
-const ImageArtifactType = require('./ImageArtifactType')
-const {find, findOne} = require('../lib/store')
-
-const previewTypes = [
-	ImageArtifactType.SMALL,
-	ImageArtifactType.MEDIUM,
-	ImageArtifactType.BIG,
-	ImageArtifactType.ORIGIN,
-]
-const store = () => Data.getStore(Album)
-
-class Album {
-	static async find(query, options = {}) {
-		const items = await find(store(), query, options)
-
-		return Promise.all(items.map(processAlbum))
-	}
-
-	static async findById(id) {
-		const item = await findOne(store(), {id})
-
-		return !item
-			? null
-			: processAlbum(item)
-	}
-}
-
-const previewFromImage = (imgs = []) => imgs.length
-	? imgs[0]
-	: null
-
-const processAlbum = async album => {
-	let preview = {}
-    // {
-    // 	data: [
-    // 		{
-    // 			url: null,
-    // 			width: 0,
-    // 			height: 0,
-    // 		}
-    // 	]
-    // }
-
-	const previewImageId = album.preview ? album.preview : previewFromImage(album.images)
-	if (previewImageId) {
-		const image = await Image.findById(previewImageId)
-		if (image) {
-            // const imageArtifacts = image.findArtifact(previewTypes)
-            // if (imageArtifacts) {
-            // 	preview = imageArtifacts
-            // }
-			preview = image.getPicture(ImageArtifactType.SMALL)
-		}
-	}
-
-	return {
-		...album,
-		preview,
-		url: `/album/${album.id}`,
-	}
-}
-
-module.exports = Album
diff --git a/src/core/Album.ts b/src/core/Album.ts
new file mode 100644
index 00000000..d8dad494
--- /dev/null
+++ b/src/core/Album.ts
@@ -0,0 +1,63 @@
+import Data from './Data'
+import Image from './Image'
+import ImageArtifactType from './ImageArtifactType'
+import { find, findOne } from '../lib/store'
+
+const previewTypes = [
+    ImageArtifactType.SMALL,
+    ImageArtifactType.MEDIUM,
+    ImageArtifactType.BIG,
+    ImageArtifactType.ORIGIN,
+]
+const store = () => Data.getStore('Album')
+
+export default class Album {
+    static async find(query, options = {}) {
+        const items = await find(store(), query, options as any)
+
+        return Promise.all(items.map(processAlbum))
+    }
+
+    static async findById(id) {
+        const item = await findOne(store(), { id })
+
+        return !item
+            ? null
+            : processAlbum(item)
+    }
+}
+
+const previewFromImage = (imgs = []) => imgs.length
+    ? imgs[0]
+    : null
+
+const processAlbum = async album => {
+    let preview = {}
+    // {
+    // 	data: [
+    // 		{
+    // 			url: null,
+    // 			width: 0,
+    // 			height: 0,
+    // 		}
+    // 	]
+    // }
+
+    const previewImageId = album.preview ? album.preview : previewFromImage(album.images)
+    if (previewImageId) {
+        const image = await Image.findById(previewImageId)
+        if (image) {
+            // const imageArtifacts = image.findArtifact(previewTypes)
+            // if (imageArtifacts) {
+            // 	preview = imageArtifacts
+            // }
+            preview = image.getPicture(ImageArtifactType.SMALL)
+        }
+    }
+
+    return {
+        ...album,
+        preview,
+        url: `/album/${album.id}`,
+    }
+}
diff --git a/src/core/Article.js b/src/core/Article.js
deleted file mode 100644
index 7336dc91..00000000
--- a/src/core/Article.js
+++ /dev/null
@@ -1,117 +0,0 @@
-const Data = require('./Data')
-const Image = require('./Image')
-const Config = require('./Config')
-const {find, findOne, total} = require('../lib/store')
-
-const store = () => Data.getStore(Article)
-
-function make(C) {
-	return x => new C(x)
-}
-
-class Article {
-	static async find(query, options = {}) {
-		const items = await find(store(), query, options)
-
-		return Promise.all(items.map(processArticle))
-	}
-
-	static async findById(id) {
-		const item = await findOne(store(), {id})
-
-		return !item
-			? null
-			: processArticle(item)
-	}
-
-	static async total(query = {}) {
-		return total(store(), query)
-	}
-
-	static async findPinned() {
-		const now = new Date()
-		const query = {until: {$gte: now}}
-
-		return Article.find(query, {
-			sort: {date: -1},
-		})
-	}
-
-	constructor(data) {
-		this.id = data.id
-		this.images = data.images
-		this.post = data.post
-		this.folder = data.folder
-		this.date = data.date
-		this.title = data.title
-		this.until = data.until
-		this.tags = (data.tags || []).map(make(Tag))
-		this.content = data.content
-		this.hash = data.hash
-		this.type = data.type
-		this.origin = data.origin
-		this.file = data.file
-		this.version = data.version
-		this.preview = data.preview
-
-		this.url = `/article/${this.id}`
-	}
-
-	plain() {
-		return {
-			id: this.id,
-			images: this.images,
-			post: this.post,
-			folder: this.folder,
-			date: this.date,
-			title: this.title,
-			until: this.until,
-			tags: this.tags,
-			content: this.content,
-			hash: this.hash,
-			type: this.type,
-			origin: this.origin,
-			file: this.file,
-			version: this.version,
-			preview: this.preview,
-			url: this.url,
-		}
-	}
-}
-
-class Tag {
-	constructor(tag) {
-		this.name = tag;
-	}
-}
-
-const previewFromImage = (imgs = []) => imgs.length
-	? imgs[0]
-	: null
-
-async function resolveDefaultPreview() {
-	const config = await Config.findConfig()
-	if (!config) return null
-
-	return Image.findByFile(config.articleCardDefaultPreview)
-}
-
-async function processArticle(article) {
-	let preview = null
-	const previewId = article.preview
-		? article.preview
-		: previewFromImage(article.images)
-
-	if (previewId) {
-		preview = await Image.findById(previewId)
-	} else {
-		preview = await resolveDefaultPreview()
-	}
-
-	return new Article({
-		...article,
-		preview,
-	})
-}
-
-module.exports = Article
diff --git a/src/core/Article.ts b/src/core/Article.ts
new file mode 100644
index 00000000..c279f325
--- /dev/null
+++ b/src/core/Article.ts
@@ -0,0 +1,134 @@
+import Data from './Data'
+import Image from './Image'
+import Config from './Config'
+import { find, findOne, total } from '../lib/store'
+
+const store = () => Data.getStore<Article>('Article')
+
+function make(C) {
+    return x => new C(x)
+}
+
+export default class Article {
+    static async find(query, options = {}): Promise<Article[]> {
+        const items = await find(store(), query, options as any)
+
+        return Promise.all(items.map(processArticle))
+    }
+
+    static async findById(id) {
+        const item = await findOne(store(), { id })
+
+        return !item
+            ? null
+            : processArticle(item)
+    }
+
+    static async total(query = {}) {
+        return total(store(), query)
+    }
+
+    static async findPinned() {
+        const now = new Date()
+        const query = { until: { $gte: now } }
+
+        return Article.find(query, {
+            sort: { date: -1 },
+        })
+    }
+
+    public id: any
+    public images: any
+    public post: any
+    public folder: any
+    public date: any
+    public title: any
+    public until: any
+    public tags: any
+    public content: any
+    public hash: any
+    public type: any
+    public origin: any
+    public file: any
+    public version: any
+    public preview: any
+    public url: any
+
+    constructor(data) {
+        this.id = data.id
+        this.images = data.images
+        this.post = data.post
+        this.folder = data.folder
+        this.date = data.date
+        this.title = data.title
+        this.until = data.until
+        this.tags = (data.tags || []).map(make(Tag))
+        this.content = data.content
+        this.hash = data.hash
+        this.type = data.type
+        this.origin = data.origin
+        this.file = data.file
+        this.version = data.version
+        this.preview = data.preview
+
+        this.url = `/article/${this.id}`
+    }
+
+    plain() {
+        return {
+            id: this.id,
+            images: this.images,
+            post: this.post,
+            folder: this.folder,
+            date: this.date,
+            title: this.title,
+            until: this.until,
+            tags: this.tags,
+            content: this.content,
+            hash: this.hash,
+            type: this.type,
+            origin: this.origin,
+            file: this.file,
+            version: this.version,
+            preview: this.preview,
+            url: this.url,
+        }
+    }
+}
+
+class Tag {
+    public name: string
+
+    constructor(tag) {
+        this.name = tag;
+    }
+}
+
+const previewFromImage = (imgs = []) => imgs.length
+    ? imgs[0]
+    : null
+
+async function resolveDefaultPreview() {
+    const config = await Config.findConfig()
+    if (!config) return null
+
+    return Image.findByFile(config.articleCardDefaultPreview)
+}
+
+async function processArticle(article) {
+    let preview = null
+    const previewId = article.preview
+        ? article.preview
+        : previewFromImage(article.images)
+
+    if (previewId) {
+        preview = await Image.findById(previewId)
+    } else {
+        preview = await resolveDefaultPreview()
+    }
+
+    return new Article({
+        ...article,
+        preview,
+    })
+}
diff --git a/src/core/Config.js b/src/core/Config.js
deleted file mode 100644
index bb900cc9..00000000
--- a/src/core/Config.js
+++ /dev/null
@@ -1,37 +0,0 @@
-const Data = require('./Data')
-const {findOne} = require('../lib/store')
-
-class Config {
-	static get store() {
-		return Data.getStore(Config)
-	}
-
-	static async findConfig() {
-		const config = await Config.findById('settings')
-		return config || new Config({})
-	}
-
-	static async findById(id) {
-		const data = await findOne(Config.store, {id})
-		if (!data) return null
-
-		return new Config(data)
-	}
-
-	constructor({hash, file, ...data}) {
-		this.hash = hash
-		this.file = file
-		this.server = data.server
-		this.articlesPerPage = data.articlesPerPage || 5
-		this.collectiveOrder = data.collectiveOrder || []
-		this.articleCardDefaultPreview = data.articleCardDefaultPreview
-		this.collectiveImage = data.collectiveImage
-
-		const redirect = data.redirect || {}
-		this.redirect = new Map(Object
-			.entries(redirect)
-		)
-	}
-}
-
-module.exports = Config
diff --git a/src/core/Config.ts b/src/core/Config.ts
new file mode 100644
index 00000000..db3188ff
--- /dev/null
+++ b/src/core/Config.ts
@@ -0,0 +1,42 @@
+import Data from './Data'
+import { findOne } from '../lib/store'
+
+const store = () => Data.getStore('Settings')
+
+export default class Config {
+    static async findConfig() {
+        const config = await Config.findById('settings')
+        return config || new Config({} as any)
+    }
+
+    static async findById(id: string) {
+        const data = await findOne(store(), { id })
+        if (!data) return null
+
+        return new Config(data)
+    }
+
+    public hash: any
+    public file: any
+    public server: any
+    public articlesPerPage: any
+    public collectiveOrder: any
+    public articleCardDefaultPreview: any
+    public collectiveImage: any
+    public redirect: any
+
+    constructor({ hash, file, ...data }) {
+        this.hash = hash
+        this.file = file
+        this.server = data.server
+        this.articlesPerPage = data.articlesPerPage || 5
+        this.collectiveOrder = data.collectiveOrder || []
+        this.articleCardDefaultPreview = data.articleCardDefaultPreview
+        this.collectiveImage = data.collectiveImage
+
+        const redirect = data.redirect || {}
+        this.redirect = new Map(Object
+            .entries(redirect)
+        )
+    }
+}
diff --git a/src/core/Data.js b/src/core/Data.js
deleted file mode 100644
index 70388deb..00000000
--- a/src/core/Data.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const db = require('./db')
-
-const store = new Map()
-
-class Data {
-    static setStore(Class, collection) {
-        store.set(Class, collection)
-    }
-
-    static getStore(Class) {
-        return store.get(Class)
-    }
-
-    static getCollection(name) {
-        return db.collection(name)
-    }
-}
-
-module.exports = Data
diff --git a/src/core/Data.ts b/src/core/Data.ts
new file mode 100644
index 00000000..e32c4103
--- /dev/null
+++ b/src/core/Data.ts
@@ -0,0 +1,18 @@
+import { Collection } from 'mongodb'
+import * as db from './db'
+
+const store = new Map<string, Collection>()
+
+export default class Data {
+    static setStore(key: string, collection: Collection) {
+        store.set(key, collection)
+    }
+
+    static getStore<T>(key: string): Collection<T> {
+        return store.get(key)
+    }
+
+    static getCollection(name: string): Collection {
+        return db.collection(name)
+    }
+}
diff --git a/src/core/Document.js b/src/core/Document.ts
similarity index 68%
rename from src/core/Document.js
rename to src/core/Document.ts
index 27e9e558..6c19aae1 100644
--- a/src/core/Document.js
+++ b/src/core/Document.ts
@@ -1,12 +1,12 @@
-const Data = require('./Data')
-const Image = require('./Image')
-const { find, findOne } = require('../lib/store')
+import Data from './Data'
+import Image from './Image'
+import { find, findOne } from '../lib/store'
 
-const store = () => Data.getStore(Document)
+const store = () => Data.getStore('Document')
 
-class Document {
+export default class Document {
     static async find(query, options = {}) {
-        const items = await find(store(), query, options)
+        const items = await find(store(), query, options as any)
 
         return Promise.all(items.map(processDocument))
     }
@@ -18,6 +18,17 @@ class Document {
         return processDocument(data)
     }
 
+    public id: any
+    public hash: any
+    public file: any
+    public fileInfo: any
+    public type: any
+    public title: any
+    public category: any
+    public url: any
+    public preview: any
+    public viewUrl: any
+
     constructor(data) {
         this.id = data.id
         this.hash = data.hash
@@ -37,6 +48,9 @@ class Document {
 }
 
 class DocumentFile {
+    public name: any
+    public size: any
+
     constructor(data) {
         this.name = data.name
         this.size = data.size
@@ -52,5 +66,3 @@ const processDocument = async data => {
         preview,
     })
 }
-
-module.exports = Document
diff --git a/src/core/Image.js b/src/core/Image.js
deleted file mode 100644
index 2936f19e..00000000
--- a/src/core/Image.js
+++ /dev/null
@@ -1,75 +0,0 @@
-const Data = require('./Data')
-const ImageArtifactType = require('./ImageArtifactType')
-const {findOne} = require('../lib/store')
-const { mapOf } = require('../server/lib')
-
-const store = () => Data.getStore(Image)
-
-class Image {
-	static async findById(id) {
-		const data = await findOne(store(), {_id: id})
-		if (!data) return null
-
-		const artifacts = data.data
-		return new Image({...data, artifacts})
-	}
-
-	static async findByFile(file) {
-		const data = await findOne(store(), {file})
-		if (!data) return null
-
-		const artifacts = data.data
-		return new Image({...data, artifacts})
-	}
-
-	constructor({hash, file, artifacts}) {
-		this.hash = hash
-		this.file = file
-
-		this.artifacts = mapOf(ImageArtifact, artifacts)
-	}
-
-	getArtifact(size) {
-		return this.artifacts.get(size)
-	}
-
-	findArtifact(sizes) {
-		for (let size of sizes) {
-			const a = this.getArtifact(size)
-			if (a) return a
-		}
-
-		return null
-	}
-
-	getPicture(size) {
-		const retinaSize = ImageArtifactType.retina(size)
-
-		const a = this.getArtifact(size)
-		const a2 = this.getArtifact(retinaSize)
-		const srcset = !a2
-			? []
-			: [{
-				url: a2.url,
-				density: ImageArtifactType.RETINA_DENSITY,
-			}]
-
-		return {
-			src: a.url,
-			width: a.width,
-			height: a.height,
-			set: srcset,
-		}
-	}
-}
-
-class ImageArtifact {
-	constructor({url, size, width, height}) {
-		this.url = url
-		this.size = size
-		this.width = width
-		this.height = height
-	}
-}
-
-module.exports = Image
diff --git a/src/core/Image.ts b/src/core/Image.ts
new file mode 100644
index 00000000..3e1608f2
--- /dev/null
+++ b/src/core/Image.ts
@@ -0,0 +1,81 @@
+import Data from './Data'
+import ImageArtifactType from './ImageArtifactType'
+import { findOne } from '../lib/store'
+import { mapOf } from '../server/lib'
+
+const store = () => Data.getStore('Image')
+
+export default class Image {
+    static async findById(id) {
+        const data = await findOne(store(), { _id: id })
+        if (!data) return null
+
+        const artifacts = data.data
+        return new Image({ ...data, artifacts })
+    }
+
+    static async findByFile(file: string) {
+        const data = await findOne(store(), { file })
+        if (!data) return null
+
+        const artifacts = data.data
+        return new Image({ ...data, artifacts })
+    }
+    public hash: any
+    public file: any
+    public artifacts: any
+
+    constructor({ hash, file, artifacts }) {
+        this.hash = hash
+        this.file = file
+
+        this.artifacts = mapOf(ImageArtifact, artifacts)
+    }
+
+    getArtifact(size) {
+        return this.artifacts.get(size)
+    }
+
+    findArtifact(sizes) {
+        for (let size of sizes) {
+            const a = this.getArtifact(size)
+            if (a) return a
+        }
+
+        return null
+    }
+
+    getPicture(size) {
+        const retinaSize = ImageArtifactType.retina(size)
+
+        const a = this.getArtifact(size)
+        const a2 = this.getArtifact(retinaSize)
+        const srcset = !a2
+            ? []
+            : [{
+                url: a2.url,
+                density: ImageArtifactType.RETINA_DENSITY,
+            }]
+
+        return {
+            src: a.url,
+            width: a.width,
+            height: a.height,
+            set: srcset,
+        }
+    }
+}
+
+class ImageArtifact {
+    public url: any
+    public size: any
+    public width: any
+    public height: any
+
+    constructor({ url, size, width, height }) {
+        this.url = url
+        this.size = size
+        this.width = width
+        this.height = height
+    }
+}
diff --git a/src/core/Page.js b/src/core/Page.js
deleted file mode 100644
index 388800a9..00000000
--- a/src/core/Page.js
+++ /dev/null
@@ -1,93 +0,0 @@
-const Data = require('./Data')
-const Image = require('./Image')
-const Config = require('./Config')
-const {find, findOne, total} = require('../lib/store')
-
-const store = () => Data.getStore(Page)
-
-class Page {
-	static async find(query, options = {}) {
-		const items = await find(store(), query, options)
-
-		return Promise.all(items.map(processPage))
-	}
-
-	static async findById(id) {
-		const item = await findOne(store(), {id})
-
-		return !item
-			? null
-			: processPage(item)
-	}
-
-	static async findByUrl(url) {
-		const item = await findOne(store(), {url})
-
-		return !item
-			? null
-			: processPage(item)
-	}
-
-	static async total(query = {}) {
-		return total(store(), query)
-	}
-
-	constructor(data) {
-		this.id = data.id
-		this.hash = data.hash
-		this.file = data.file
-		this.url = data.url
-		this.content = data.content
-		this.title = data.title
-		this.data = data.data
-		this.images = data.images
-		this.documents = data.documents
-		this.preview = data.preview
-	}
-
-	plain() {
-		return {
-			id: this.id,
-			images: this.images,
-			documents: this.documents,
-			data: this.data,
-			title: this.title,
-			content: this.content,
-			hash: this.hash,
-			file: this.file,
-			preview: this.preview,
-			url: this.url,
-		}
-	}
-}
-
-const previewFromImage = (imgs = []) => imgs.length
-	? imgs[0]
-	: null
-
-async function resolveDefaultPreview() {
-	const config = await Config.findConfig()
-	if (!config) return null
-
-	return Image.findByFile(config.articleCardDefaultPreview)
-}
-
-async function processPage(article) {
-	let preview = null
-	const previewId = article.preview
-		? article.preview
-		: previewFromImage(article.images)
-
-	if (previewId) {
-		preview = await Image.findById(previewId)
-	} else {
-		preview = await resolveDefaultPreview()
-	}
-
-	return new Page({
-		...article,
-		preview,
-	})
-}
-
-module.exports = Page
diff --git a/src/core/Page.ts b/src/core/Page.ts
new file mode 100644
index 00000000..996cb490
--- /dev/null
+++ b/src/core/Page.ts
@@ -0,0 +1,102 @@
+import Data from './Data'
+import { find as storeFind, findOne, total } from '../lib/store'
+import Image from './Image'
+import Config from './Config'
+
+const store = () => Data.getStore('Page')
+
+export default class Page {
+    static async find(query, options = {}): Promise<Page[]> {
+        const items = await storeFind(store(), query, options as any)
+
+        return Promise.all(items.map(processPage))
+    }
+
+    static async findById(id) {
+        const item = await findOne(store(), { id })
+
+        return !item
+            ? null
+            : processPage(item)
+    }
+
+    static async findByUrl(url) {
+        const item = await findOne(store(), { url })
+
+        return !item
+            ? null
+            : processPage(item)
+    }
+
+    static async total(query = {}) {
+        return total(store(), query)
+    }
+
+    public id: any
+    public hash: any
+    public file: any
+    public url: string
+    public content: any
+    public title: any
+    public data: any
+    public images: any
+    public documents: any
+    public preview: any
+
+    constructor(data) {
+        this.id = data.id
+        this.hash = data.hash
+        this.file = data.file
+        this.url = data.url
+        this.content = data.content
+        this.title = data.title
+        this.data = data.data
+        this.images = data.images
+        this.documents = data.documents
+        this.preview = data.preview
+    }
+
+    plain() {
+        return {
+            id: this.id,
+            images: this.images,
+            documents: this.documents,
+            data: this.data,
+            title: this.title,
+            content: this.content,
+            hash: this.hash,
+            file: this.file,
+            preview: this.preview,
+            url: this.url,
+        }
+    }
+}
+
+const previewFromImage = (imgs = []) => imgs.length
+    ? imgs[0]
+    : null
+
+async function resolveDefaultPreview() {
+    const config = await Config.findConfig()
+    if (!config) return null
+
+    return Image.findByFile(config.articleCardDefaultPreview)
+}
+
+async function processPage(article) {
+    let preview = null
+    const previewId = article.preview
+        ? article.preview
+        : previewFromImage(article.images)
+
+    if (previewId) {
+        preview = await Image.findById(previewId)
+    } else {
+        preview = await resolveDefaultPreview()
+    }
+
+    return new Page({
+        ...article,
+        preview,
+    })
+}
diff --git a/src/core/Teacher.js b/src/core/Teacher.js
deleted file mode 100644
index 08883ba1..00000000
--- a/src/core/Teacher.js
+++ /dev/null
@@ -1,76 +0,0 @@
-const Data = require('./Data')
-const Image = require('./Image')
-const {find, findOne} = require('../lib/store')
-
-const store = () => Data.getStore(Teacher)
-
-class Teacher {
-	static async find(query, options = {}) {
-		const items = await find(store(), query, options)
-
-		return Promise.all(items.map(processProfile))
-	}
-
-	static async findById(id) {
-		const data = await findOne(store(), {id})
-		if (!data) return null
-
-		return processProfile(data)
-	}
-
-	constructor(data) {
-		this.id = data.id
-		this.post = data.post
-		this.file = data.file
-		this.edu = data.edu
-		this.picture = data.picture
-		this.preview = data.preview
-		this.diploma = data.diploma
-		this.position = data.position
-		this.name = data.name
-		this.status = data.status
-		this.hash = data.hash
-
-		this.url = `/teacher/${this.id}`
-	}
-
-	/**
-	 *
-	 * "First Middle Last" -> "F. M. Last"
-	 *
-	 * @returns {string}
-	 */
-	shortName() {
-		const f = i => i.replace(/^(.).+/, '$1')
-		const [first, middle, last] = this.splitName()
-
-		return `${f(first)}. ${f(middle)}. ${last}`
-	}
-
-	/**
-	 *
-	 * "First Middle Last" -> ["First", "Middle", "Last"]
-	 *
-	 * @returns {Array|{index: number, input: string}}
-	 */
-	splitName() {
-		const name = this.name
-		const m = /(.+)\s(.+)\s(.+)/.exec(name)
-		return m.slice(1)
-	}
-}
-
-const processProfile = async profile => {
-	const imageId = profile.picture
-	const previewId = profile.preview
-	const picture = await Image.findById(imageId)
-	const preview = await Image.findById(previewId)
-
-	return new Teacher({
-		...profile,
-		picture,
-		preview,
-	})
-}
-
-module.exports = Teacher
diff --git a/src/core/Teacher.ts b/src/core/Teacher.ts
new file mode 100644
index 00000000..b02fe967
--- /dev/null
+++ b/src/core/Teacher.ts
@@ -0,0 +1,87 @@
+import Data from './Data'
+import Image from './Image'
+import { find, findOne } from '../lib/store'
+
+const store = () => Data.getStore('Teacher')
+
+export default class Teacher {
+    static async find(query, options = {}) {
+        const items = await find(store(), query, options as any)
+
+        return Promise.all(items.map(processProfile))
+    }
+
+    static async findById(id) {
+        const data = await findOne(store(), { id })
+        if (!data) return null
+
+        return processProfile(data)
+    }
+
+    public id: any
+    public post: any
+    public file: any
+    public edu: any
+    public picture: any
+    public preview: any
+    public diploma: any
+    public position: any
+    public name: any
+    public status: any
+    public hash: any
+    public url: any
+
+    constructor(data) {
+        this.id = data.id
+        this.post = data.post
+        this.file = data.file
+        this.edu = data.edu
+        this.picture = data.picture
+        this.preview = data.preview
+        this.diploma = data.diploma
+        this.position = data.position
+        this.name = data.name
+        this.status = data.status
+        this.hash = data.hash
+
+        this.url = `/teacher/${this.id}`
+    }
+
+	/**
+	 *
+	 * "First Middle Last" -> "F. M. Last"
+	 *
+	 * @returns {string}
+	 */
+    shortName() {
+        const f = i => i.replace(/^(.).+/, '$1')
+        const [first, middle, last] = this.splitName()
+
+        return `${f(first)}. ${f(middle)}. ${last}`
+    }
+
+	/**
+	 *
+	 * "First Middle Last" -> ["First", "Middle", "Last"]
+	 *
+	 * @returns {Array|{index: number, input: string}}
+	 */
+    splitName() {
+        const name = this.name
+        const m = /(.+)\s(.+)\s(.+)/.exec(name)
+        return m.slice(1)
+    }
+}
+
+const processProfile = async profile => {
+    const imageId = profile.picture
+    const previewId = profile.preview
+    const picture = await Image.findById(imageId)
+    const preview = await Image.findById(previewId)
+
+    return new Teacher({
+        ...profile,
+        picture,
+        preview,
+    })
+}
diff --git a/src/core/collective.js b/src/core/collective.js
deleted file mode 100644
index e802cc6c..00000000
--- a/src/core/collective.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import {c} from '../core/db';
-
-export async function getCollective(query={}) {
-    return await c('collective')
-        .find(query)
-        .toArray();
-}
-
-/**
- * Find a person by it's id
- *
- * @param id
- * @returns {Promise|*}
- */
-export async function getPerson(id){
-    return await c('collective').findOne({id: id});
-}
diff --git a/src/core/db.js b/src/core/db.js
deleted file mode 100644
index 1b5d8c1f..00000000
--- a/src/core/db.js
+++ /dev/null
@@ -1,52 +0,0 @@
-const Data = require('./Data')
-const Page = require('./Page')
-const Article = require('./Article')
-const Album = require('./Album')
-const Teacher = require('./Teacher')
-const Document = require('./Document')
-const Image = require('./Image')
-const Settings = require('./Config')
-const getConfig = require('next/config').default
-
-const { MongoClient, ObjectId } = require('mongodb')
-
-var db
-
-async function connect() {
-    if (db) {
-        return db
-    }
-    const mongoUri = getConfig().serverRuntimeConfig.dbUri
-    const connection = await MongoClient.connect(mongoUri)
-    db = init(connection)
-    return db
-}
-
-function collection(name) {
-    return db.collection(name)
-}
-
-function id(i) {
-    if (typeof i === 'string') return ObjectId(i)
-    else if (i instanceof ObjectId) return i
-    else if (i instanceof Object) return '_id' in i ? ObjectId(i._id) : null
-    return null
-}
-
-function init(db) {
-    // Data.setStore('Page', db.collection('pages'))
-    Data.setStore(Page, db.collection('pages'))
-    Data.setStore(Article, db.collection('articles'))
-    Data.setStore(Album, db.collection('albums'))
-    Data.setStore(Image, db.collection('images'))
-    Data.setStore(Teacher, db.collection('collective'))
-    Data.setStore(Document, db.collection('documents'))
-    Data.setStore(Settings, db.collection('settings'))
-
-    return db
-}
-
-exports.connect = connect
-exports.collection = collection
-exports.c = collection
-exports.id = id
\ No newline at end of file
diff --git a/src/core/db.ts b/src/core/db.ts
new file mode 100644
index 00000000..4c4b5acb
--- /dev/null
+++ b/src/core/db.ts
@@ -0,0 +1,48 @@
+import Data from './Data'
+import Page from './Page'
+import Article from './Article'
+const Album = require('./Album')
+const Teacher = require('./Teacher')
+const Document = require('./Document')
+const Image = require('./Image')
+import Settings from './Config'
+const getConfig = require('next/config').default
+
+const { MongoClient, ObjectId } = require('mongodb')
+
+var db
+
+export async function connect() {
+    if (db) {
+        return db
+    }
+    const mongoUri = getConfig().serverRuntimeConfig.dbUri
+    const connection = await MongoClient.connect(mongoUri)
+    db = init(connection)
+    return db
+}
+
+export function collection(name) {
+    return db.collection(name)
+}
+
+export function id(i) {
+    if (typeof i === 'string') return ObjectId(i)
+    else if (i instanceof ObjectId) return i
+    else if (i instanceof Object) return '_id' in i ? ObjectId(i._id) : null
+    return null
+}
+
+function init(db) {
+    console.log('INIT DB')
+
+    Data.setStore('Page', db.collection('pages'))
+    Data.setStore('Article', db.collection('articles'))
+    Data.setStore('Album', db.collection('albums'))
+    Data.setStore('Image', db.collection('images'))
+    Data.setStore('Teacher', db.collection('collective'))
+    Data.setStore('Document', db.collection('documents'))
+    Data.setStore('Settings', db.collection('settings'))
+
+    return db
+}
diff --git a/src/hooks/useReducedMotion.ts b/src/hooks/useReducedMotion.ts
new file mode 100644
index 00000000..25e1f917
--- /dev/null
+++ b/src/hooks/useReducedMotion.ts
@@ -0,0 +1,5 @@
+import useMedia from 'use-media'
+
+export function useReducedMotion(): boolean {
+    return useMedia('(prefers-reduced-motion: reduce)')
+}
diff --git a/src/hooks/useScreenType.ts b/src/hooks/useScreenType.ts
new file mode 100644
index 00000000..33743ed7
--- /dev/null
+++ b/src/hooks/useScreenType.ts
@@ -0,0 +1,15 @@
+import * as React from 'react'
+import useMedia from 'use-media'
+
+export type Type = 'phone' | 'tablet' | 'laptop' | 'desktop'
+
+export function useScreenType(types: Type[]): boolean {
+    const isPhone = useMedia('(max-width: 31.25em)')
+    const [match, setMatch] = React.useState(false)
+
+    React.useEffect(() => {
+        setMatch(isPhone && types.includes('phone'))
+    }, [isPhone])
+
+    return match
+}
diff --git a/src/lib/component.js b/src/lib/component.js
deleted file mode 100644
index 6da5df89..00000000
--- a/src/lib/component.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-import {renderToStaticMarkup} from 'react-dom/server'
-
-import App from '../components/App'
-
-function renderApp({component, ...options}) {
-	const app = (
-		<App {...options}>
-			{component}
-		</App>
-	)
-	return renderToStaticMarkup(app)
-}
-
-exports.renderApp = renderApp
diff --git a/src/lib/date.js b/src/lib/date.js
deleted file mode 100644
index 126af346..00000000
--- a/src/lib/date.js
+++ /dev/null
@@ -1,18 +0,0 @@
-const moment = require('moment')
-moment.locale('ru')
-
-/**
- *
- * Date -> DD.MM.YYYY
- *
- * @param date
- */
-exports.dateFormat = date => moment(date).format('L')
-
-/**
- *
- * Date -> Unix time
- *
- * @param date
- */
-exports.timestamp = date => date.getTime()
diff --git a/src/lib/date.ts b/src/lib/date.ts
new file mode 100644
index 00000000..2d5b7473
--- /dev/null
+++ b/src/lib/date.ts
@@ -0,0 +1,18 @@
+import moment from 'moment'
+moment.locale('ru')
+
+/**
+ *
+ * Date -> DD.MM.YYYY
+ *
+ * @param date
+ */
+export const dateFormat = (date: string | Date) => moment(date).format('L')
+
+/**
+ *
+ * Date -> Unix time
+ *
+ * @param date
+ */
+export const timestamp = (date: Date) => date.getTime()
diff --git a/src/lib/file.js b/src/lib/file.js
deleted file mode 100644
index 4079f9b8..00000000
--- a/src/lib/file.js
+++ /dev/null
@@ -1,27 +0,0 @@
-function ext(filname) {
-	let getExt = name => /\.(\w+)$/.exec(name)[1]
-	let defaultExt = ext => ext.toUpperCase()
-
-	const exts = ['png', 'pdf', 'jpg', 'jpeg', 'gif', 'doc']
-	const extd = ['ПНГ', 'ПДФ', 'ЖПГ', 'ЖПГ', 'ГИФ', 'ДОК']
-
-	let ext = getExt(filname)
-	const i = exts.indexOf(ext)
-
-	return i > -1
-		? extd[i]
-		: defaultExt(ext)
-}
-
-function size(bytes, precision = 1) {
-	if (isNaN(parseFloat(bytes)) || !isFinite(bytes)) return ''
-
-	const units = ['байт', 'КБ', 'МБ', 'ГБ', 'ТБ', 'ПБ']
-	const number = Math.floor(Math.log(bytes) / Math.log(1024))
-
-	const size = (bytes / Math.pow(1024, Math.floor(number))).toFixed(precision)
-	return `${size} ${units[number]}`
-}
-
-exports.ext = ext
-exports.size = size
diff --git a/src/lib/file.ts b/src/lib/file.ts
new file mode 100644
index 00000000..504cc26d
--- /dev/null
+++ b/src/lib/file.ts
@@ -0,0 +1,23 @@
+const getExt = (name: string) => /\.(\w+)$/.exec(name)[1]
+const defaultExt = (ext: string) => ext.toUpperCase()
+const exts = ['png', 'pdf', 'jpg', 'jpeg', 'gif', 'doc']
+const extd = ['ПНГ', 'ПДФ', 'ЖПГ', 'ЖПГ', 'ГИФ', 'ДОК']
+const units = ['байт', 'КБ', 'МБ', 'ГБ', 'ТБ', 'ПБ']
+
+export function ext(filname: string): string {
+    const ext = getExt(filname)
+    const i = exts.indexOf(ext)
+
+    return i > -1
+        ? extd[i]
+        : defaultExt(ext)
+}
+
+export function size(bytes: any, precision = 1): string {
+    if (isNaN(parseFloat(bytes)) || !isFinite(bytes)) return ''
+
+    const number = Math.floor(Math.log(bytes) / Math.log(1024))
+    const size = (bytes / Math.pow(1024, Math.floor(number))).toFixed(precision)
+
+    return `${size} ${units[number]}`
+}
diff --git a/src/lib/store.js b/src/lib/store.ts
similarity index 52%
rename from src/lib/store.js
rename to src/lib/store.ts
index 1b06b64e..309848bd 100644
--- a/src/lib/store.js
+++ b/src/lib/store.ts
@@ -1,4 +1,4 @@
-async function find(collection, query, {sort, skip, limit}) {
+export async function find(collection, query, {sort, skip, limit}) {
 	const cursor = collection.find(query)
 
 	if (sort) cursor.sort(sort)
@@ -8,16 +8,12 @@ async function find(collection, query, {sort, skip, limit}) {
 	return cursor.toArray()
 }
 
-async function findOne(collection, query) {
+export async function findOne(collection, query) {
 	return collection.findOne(query)
 }
 
-async function total(collection, query) {
+export async function total(collection, query) {
 	return collection
 		.find(query)
 		.count()
 }
-
-exports.find = find
-exports.findOne = findOne
-exports.total = total
diff --git a/src/middlewares/withCollection.js b/src/middlewares/withCollection.js
new file mode 100644
index 00000000..0fcd5b57
--- /dev/null
+++ b/src/middlewares/withCollection.js
@@ -0,0 +1,20 @@
+// import { MongoClient } from 'mongodb';
+// const { connect, collection } = require('../../src/core/db')
+import {collection, connect} from '../core/db'
+
+// const client = new MongoClient(process.env.MONGODB_URI, { useNewUrlParser: true });
+
+export const withCollection = handler => async (req, res) => {
+    await connect()
+
+    req.collection = collection
+
+    // if (!client.isConnected()) {
+    //     return client.connect().then(() => {
+    //         req.db = client.db('nextjsmongodbapp');
+    //         return handler(req, res);
+    //     });
+    // }
+    // req.db = client.db('nextjsmongodbapp');
+    return handler(req, res)
+}
diff --git a/src/middlewares/withMiddleware.js b/src/middlewares/withMiddleware.js
index 925e3849..ce50ce6a 100644
--- a/src/middlewares/withMiddleware.js
+++ b/src/middlewares/withMiddleware.js
@@ -1,3 +1,3 @@
-export const withMiddleware = handler => async (req, res) => {
-   return handler(req, res);
-};
+import { withCollection } from './withCollection'
+
+export const withMiddleware = handler => withCollection(handler)
diff --git a/src/models/TimelinePostInstagram.js b/src/models/TimelinePostInstagram.js
deleted file mode 100644
index 7ad90352..00000000
--- a/src/models/TimelinePostInstagram.js
+++ /dev/null
@@ -1,73 +0,0 @@
-export default class TimelinePostInstagram {
-    constructor(date, image, url, username, userpic, text) {
-        this.type = 'instagram';
-
-        this.date = date;
-        this.image = image;
-        this.url = url;
-        this.username = username;
-        this.userpic = userpic;
-        this.text = text;
-    }
-}
-
-export function fromInstagram1(post) {
-    //var author_id = personByInstagram(team.team, post.data.author);
-    //var name = author_id ? team.short(author_id) : post.data.author;
-
-    const name = post.data.author || 'hudozka';
-    const userpic = 'https://igcdn-photos-a-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-19/11357496_464997000344800_2124591831_a.jpg';
-    return new TimelinePostInstagram(
-        post.date,
-        post.data.image.standard_resolution.url,
-        post.data.url,
-        name,
-        userpic,
-        post.body
-    );
-}
-
-export function fromInstagram2(post) {
-    const caption = safe(post => post.data.caption.text, '');
-    const username = safe(post => post.data.user['username'], '');
-    const userpic = safe(post => post.data.user['profile_picture'], '');
-    const image = safe(post => post.data.images['standard_resolution'].url, '');
-
-    return new TimelinePostInstagram(
-        post.date,
-        image(post),
-        post.data.link,
-        username(post),
-        userpic(post),
-        caption(post)
-    );
-}
-
-export const types = {
-    'instagram-1': fromInstagram1,
-    'instagram-2': fromInstagram2
-};
-
-export function createInstance(post) {
-    if(post.type in types) {
-        let fn = types[post.type];
-        
-        try{
-            return fn(post);           
-        }catch(e){
-            return null;
-        }
-    }
-    return null;
-}
-
-function safe(fn, defaultValue=null){
-    return function(){
-        try{
-            let i = fn.apply(undefined, arguments);
-            return i ? i : defaultValue;
-        }catch(e){
-            return defaultValue
-        }
-    }
-}
diff --git a/src/models/schedule.js b/src/models/schedule.js
index 76435652..7acdde25 100644
--- a/src/models/schedule.js
+++ b/src/models/schedule.js
@@ -38,9 +38,7 @@ export function getPeriod(i){
  * @param i
  * @returns {*}
  */
-function getPeriodString(i) {
+export function getPeriodString(i) {
 	return getPeriod(i)
 		.join('-')
 }
-
-exports.getPeriodString = getPeriodString
diff --git a/src/next-lib.js b/src/next-lib.ts
similarity index 81%
rename from src/next-lib.js
rename to src/next-lib.ts
index 3694918b..626adb36 100644
--- a/src/next-lib.js
+++ b/src/next-lib.ts
@@ -1,8 +1,12 @@
 import axios from 'axios'
 
-export async function requestGet(url, defaultResponse) {
+export interface IResponseItems<T> {
+    items: T[]
+}
+
+export async function requestGet<T>(url: string, defaultResponse: T): Promise<T> {
     try {
-        const res = await axios.get(url)
+        const res = await axios.get<T>(url)
 
         return res.data
     } catch (e) {
@@ -19,7 +23,7 @@ export async function requestGet(url, defaultResponse) {
 export function wrapInitialProps(fn) {
     return async ctx => {
         if (process.env.NODE_ENV === 'production' && process.browser) {
-            return __NEXT_DATA__.props.pageProps;
+            return window['__NEXT_DATA__'].props.pageProps;
         }
 
         return fn(ctx)
diff --git a/src/server.js b/src/server.ts
similarity index 83%
rename from src/server.js
rename to src/server.ts
index 890b1e4c..f6f2fbc9 100644
--- a/src/server.js
+++ b/src/server.ts
@@ -1,8 +1,8 @@
-const Koa = require('koa')
-const next = require('next')
-const { get } = require('koa-route')
-const { connect } = require('./core/db')
-const Page = require('./core/Page')
+import Koa from 'koa'
+import next from 'next'
+import { get } from 'koa-route'
+import { connect } from './core/db'
+import Page from './core/Page'
 
 const dev = process.env.NODE_ENV !== 'production'
 const app = next({ dev })
@@ -29,7 +29,7 @@ app.prepare().then(async () => {
 
     server.use(get('*', async ctx => {
         const url = ctx.req.url
-        
+
         if (pagesUrls.includes(url)) {
             await app.render(ctx.req, ctx.res, '/next', ctx.query)
         } else {
@@ -43,4 +43,3 @@ app.prepare().then(async () => {
         console.log(`> Ready on http://localhost:${port}`)
     })
 })
-
diff --git a/src/api/articles.js b/src/server/articles.ts
similarity index 93%
rename from src/api/articles.js
rename to src/server/articles.ts
index 9870652b..70131abe 100644
--- a/src/api/articles.js
+++ b/src/server/articles.ts
@@ -2,7 +2,7 @@ import Article from '../core/Article'
 import ImageArtifactType from '../core/ImageArtifactType'
 import { sortBy } from '../utils/sort'
 import { timestamp } from '../lib/date'
-import { encodeImage } from './image'
+import { encodeImage } from '../api/image'
 
 export const sortArticleByDate = sortBy(
     x => timestamp(new Date(x.date))
@@ -20,7 +20,7 @@ export async function findArticlesNin(nin, skip, limit, sort) {
     })
 }
 
-export async function findArticles(page, pageSize) {
+export async function findArticles(page: number, pageSize: number) {
     const limit = pageSize
     const skip = (page - 1) * pageSize
 
diff --git a/src/server/collective.js b/src/server/collective.js
new file mode 100644
index 00000000..93c48d6e
--- /dev/null
+++ b/src/server/collective.js
@@ -0,0 +1,18 @@
+const { collection } = require('../core/db')
+// import { collection } from '../core/db'
+
+export async function getCollective(query = {}) {
+    return await collection('collective')
+        .find(query)
+        .toArray();
+}
+
+/**
+ * Find a person by it's id
+ *
+ * @param id
+ * @returns {Promise|*}
+ */
+export async function getPerson(id) {
+    return await collection('collective').findOne({ id: id });
+}
diff --git a/src/server/lib.js b/src/server/lib.ts
similarity index 83%
rename from src/server/lib.js
rename to src/server/lib.ts
index 49261bd7..898a1080 100644
--- a/src/server/lib.js
+++ b/src/server/lib.ts
@@ -5,7 +5,7 @@
  * @param Class
  * @param object
  */
-exports.mapOf = function mapOf(Class, object) {
+export function mapOf(Class, object) {
     return Object
         .entries(object)
         .reduce((map, i) => (
diff --git a/src/core/schedule.js b/src/server/schedule.js
similarity index 86%
rename from src/core/schedule.js
rename to src/server/schedule.js
index 3e89b0dd..981acb5e 100644
--- a/src/core/schedule.js
+++ b/src/server/schedule.js
@@ -1,4 +1,5 @@
-import {c} from '../core/db'
+// import {collection} from '../core/db'
+// const {collection} = require('../core/db')
 import {createMap} from '../utils/common'
 import {getCollective} from './collective'
 
@@ -10,8 +11,8 @@ const sortBy = require('../lib/sort').sortBy
 
 const SCHEDULES = 'schedules'
 
-async function findSchedule(period, semester) {
-	const schedule = await c(SCHEDULES).findOne({
+export async function findSchedule(collection, period, semester) {
+	const schedule = await collection(SCHEDULES).findOne({
 		$or: [
 			{period: period},
 			{period: schedulePeriod(period)}
@@ -23,7 +24,7 @@ async function findSchedule(period, semester) {
 }
 
 async function findAllScheduleParams() {
-	const schedules = await c(SCHEDULES)
+	const schedules = await collection(SCHEDULES)
 		.find({}, {
 			period: 1,
 			semester: 1,
@@ -142,7 +143,7 @@ async function migrate20to30(schedule) {
 	})
 }
 
-exports.findSchedule = findSchedule
-exports.findAllScheduleParams = findAllScheduleParams
-exports.findDefaultScheduleParams = findDefaultScheduleParams
-exports.text = text
+// exports.findSchedule = findSchedule
+// exports.findAllScheduleParams = findAllScheduleParams
+// exports.findDefaultScheduleParams = findDefaultScheduleParams
+// exports.text = text
diff --git a/src/style/components/ArticleCardList.scss b/src/style/components/ArticleCardList.scss
deleted file mode 100644
index c77ade41..00000000
--- a/src/style/components/ArticleCardList.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.ArticleCardList-body {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
diff --git a/src/style/components/HudozkaTitle.scss b/src/style/components/HudozkaTitle.scss
deleted file mode 100644
index d5820304..00000000
--- a/src/style/components/HudozkaTitle.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.HudozkaTitle {
-  --padding: var(--double-margin) 0;
-
-  padding: var(--padding);
-  text-align: center;
-
-  p {
-    color: var(--text-color-second);
-    margin-top: var(--single-margin);
-    font-size: var(--font-size-second);
-  }
-
-  h1 {
-    margin-top: var(--single-margin);
-  }
-}
-
-@media (max-width: var(--mobile-width)) {
-  .HudozkaTitle {
-    --padding: 0 0 var(--double-margin);
-  }
-}
diff --git a/src/style/components/accessibility-control.scss b/src/style/components/accessibility-control.scss
deleted file mode 100644
index 47e01a0d..00000000
--- a/src/style/components/accessibility-control.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-.accessibility-control {
-  width: 100%;
-
-  padding: var(--single-margin);
-
-  span {
-    margin-right: var(--single-margin);
-  }
-
-  span.active {
-    font-weight: bold;
-  }
-
-  &__block {
-    margin-bottom: var(--half-margin);
-  }
-
-  ul li {
-    display: inline;
-    margin-right: var(--single-margin);
-  }
-
-  ul {
-    display: inline;
-  }
-}
-
-.accessibility .accessibility-control {
-  a {
-    border-bottom-style: dashed;
-  }
-}
\ No newline at end of file
diff --git a/src/style/components/main-menu.scss b/src/style/components/main-menu.scss
deleted file mode 100644
index 7e1d8385..00000000
--- a/src/style/components/main-menu.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-.main-menu {
-  font-size: var(--normal-font-size);
-
-  list-style: none;
-
-  .main-menu__submenu {
-    background-color: rgba(255, 255, 255, 0.95);
-
-    display: block;
-    position: absolute;
-    top: 100%;
-    left: -1em;
-
-    padding: 0 0.5em 0.5em;
-
-    & > li {
-      display: block;
-      padding: 0.3em 0.2em 0.5em;
-      margin: 0 0.5em;
-    }
-  }
-
-  & > li {
-    display: inline-block;
-    padding: 0.3em 0.2em 0;
-    margin: 0 0.5em;
-
-    position: relative;
-
-    &:first-child {
-      margin-left: 1em;
-    }
-  }
-
-  a {
-    color: var(--dark-color);
-    border-color: var(--dark-color);
-
-    &:hover {
-      border-color: var(--dark-color);
-    }
-  }
-
-  .selected {
-    font-weight: bold;
-    border-top: var(--menu-colored-mark-thickness) solid var(--light-color);
-
-    &.blue {
-      border-top: var(--menu-colored-mark-thickness) solid var(--blue-color);
-    }
-
-    &.orange {
-      border-top: var(--menu-colored-mark-thickness) solid var(--orange-color);
-    }
-
-    &.green {
-      border-top: var(--menu-colored-mark-thickness) solid var(--green-color);
-    }
-
-    &.yellow {
-      border-top: var(--menu-colored-mark-thickness) solid var(--yellow-color);
-    }
-
-    &.pink {
-      border-top: var(--menu-colored-mark-thickness) solid var(--pink-color);
-    }
-
-    &.red {
-      border-top: var(--menu-colored-mark-thickness) solid var(--red-color);
-    }
-  }
-}
-
-@media (max-width: var(--mobile-width)) {
-  .main-menu{
-    font-size: 1em;
-  }
-}
diff --git a/src/style/content.scss b/src/style/content.scss
index eafb4ab8..3889e7fa 100644
--- a/src/style/content.scss
+++ b/src/style/content.scss
@@ -1,109 +1,90 @@
 .content {
-  margin: 0 auto 1em;
+    margin: 0 auto 1em;
 
-  &.content_full{
-    width: var(--content-full);
-  }
+    &.content_full {
+        width: var(--content-full);
+    }
 
-  &.content_wide{
-    width: var(--content-wide);
-  }
+    &.content_wide {
+        width: var(--content-wide);
+    }
 
-  &.content_semi-wide{
-    width: var(--content-semi-wide);
-  }
+    &.content_semi-wide {
+        width: var(--content-semi-wide);
+    }
 
-  &.content_thin{
-    width: var(--content-thin);
-  }
+    &.content_thin {
+        width: var(--content-thin);
+    }
 
-  &.content--padding-top--menu{
-    padding-top: var(--menu-thickness);
-  }
+    &.content--padding-top--menu {
+        padding-top: var(--menu-thickness);
+    }
 }
 
-
 // Animation on load
 
 @keyframes smallSlideInFromTop {
-  0% {
-    transform: translateY(-10px);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
+    0% {
+        transform: translateY(-10px);
+        opacity: 0;
+    }
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
 }
 
 .content {
-  animation: smallSlideInFromTop 350ms ease-out;
+    animation: smallSlideInFromTop 350ms ease-out;
 }
 
-@media screen and (max-width: var(--mobile-width)) {
-  --content-mobile: 95%;
-
-  .content {
-     &.content_wide{
-       width: var(--content-mobile);
-    }
-
-    &.content_semi-wide{
-      width: var(--content-mobile);
-    }
-
-    &.content_thin{
-      width: var(--content-mobile);
-    }
-
-    &.content--padding-top--menu{
-      padding-top: var(--single-margin);
-    }
-  }
+.content.reduced-motion {
+    animation: none;
 }
 
 @media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) {
-  $thin-value: 70%;
-  $wide-value: 95%;
-  $semi-wide-value: 80%;
-
-  .content {
-    overflow-x: scroll;
-
-    &.content_wide {
-      width: $wide-value;
-    }
-
-    &.content_semi-wide {
-      width: $semi-wide-value;
-    }
-
-    &.content_thin {
-      width: $thin-value;
-    }
-
-    &.content--padding-top--menu {
-      padding-top: var(--double-margin);
-    }
-  }
-
-  @media screen and (orientation: portrait) {
-    $wide-value: 100%;
-    $thin-value: 80%;
-    $semi-wide-value: 95%;
+    $thin-value: 70%;
+    $wide-value: 95%;
+    $semi-wide-value: 80%;
 
     .content {
-      &.content_wide {
-        width: $wide-value;
-      }
+        overflow-x: scroll;
 
-      &.content_semi-wide {
-        width: $semi-wide-value;
-      }
+        &.content_wide {
+            width: $wide-value;
+        }
 
-      &.content_thin {
-        width: $thin-value;
-      }
+        &.content_semi-wide {
+            width: $semi-wide-value;
+        }
+
+        &.content_thin {
+            width: $thin-value;
+        }
+
+        &.content--padding-top--menu {
+            padding-top: var(--double-margin);
+        }
+    }
+
+    @media screen and (orientation: portrait) {
+        $wide-value: 100%;
+        $thin-value: 80%;
+        $semi-wide-value: 95%;
+
+        .content {
+            &.content_wide {
+                width: $wide-value;
+            }
+
+            &.content_semi-wide {
+                width: $semi-wide-value;
+            }
+
+            &.content_thin {
+                width: $thin-value;
+            }
+        }
     }
-  }
 }
diff --git a/src/style/hmenu.scss b/src/style/hmenu.scss
deleted file mode 100644
index 789742c4..00000000
--- a/src/style/hmenu.scss
+++ /dev/null
@@ -1,186 +0,0 @@
-.no-scroll {
-  overflow: hidden;
-}
-
-.HMenu {
-  --hmenu-margin: 6px;
-  --hmenu-icon-width: 32px;
-  --hmenu-icon-height: 32px;
-
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  width: 100%;
-  //height: 100%;
-
-  position: relative;
-
-  list-style: none;
-}
-
-.HMenu a {
-  &:visited {
-    color: inherit;
-  }
-}
-
-.HMenu.HMenu--folded {
-  height: 100%;
-}
-
-.HMenu--folded.HMenu--closed {
-  li {
-    margin: 0;
-  }
-}
-
-.HMenu--folded.HMenu--open {
-  li {
-    margin: 0 0 var(--single-margin);
-  }
-}
-
-.HMenu--folded.HMenu--closed {
-  justify-content: center;
-}
-
-.HMenu--folded.HMenu--closed .HMenu__item{
-  display: none;
-}
-
-.HMenu--folded .HMenu__item.HMenu__item--cur{
-  display: block;
-}
-
-
-
-
-
-
-.HMenu__toggle {
-  position: absolute;
-  left: 0;
-  height: var(--hmenu-icon-height);
-
-  margin: var(--hmenu-margin);
-
-  display: flex;
-
-  a {
-    text-decoration: none;
-    border: none;
-
-    width: var(--hmenu-icon-width);
-    height: var(--hmenu-icon-height);
-    background-size: 100%;
-  }
-
-  a:hover {
-    text-decoration: none;
-    border: none;
-  }
-}
-
-.HMenu--folded.HMenu--closed {
-  .HMenu__toggle {
-    a {
-      background-image: url(/graphics/hmenu-b.png);
-    }
-
-    a:hover {
-      background-image: url(/graphics/hmenu-hover-b.png);
-    }
-  }
-}
-
-.HMenu--folded.HMenu--open {
-  .HMenu__toggle {
-    a {
-      background-image: url(/graphics/hmenu-close-b.png);
-    }
-
-    a:hover {
-      background-image: url(/graphics/hmenu-close-hover-b.png);
-    }
-  }
-}
-
-
-
-
-
-.HMenu--unfolded {
-  margin-left: 1em;
-
-  li {
-    margin: 0 1em .5em .5em;
-  }
-
-  .HMenu__toggle {
-    display: none;
-  }
-}
-
-
-.HMenu--folded.HMenu--open {
-  z-index: 100;
-
-  display: flex;
-  align-items: center;
-
-  width: 100%;
-  height: 100%;
-
-  position: fixed;
-  top: 0;
-  left: 0;
-
-  background-color: #ffffff;
-
-  flex-direction: column;
-  text-align: center;
-
-  overflow-y: auto;
-
-  font-size: 1.5rem;
-
-  /*transition: opacity 0.5s ease-in-out;*/
-  /*-webkit-transition: opacity 0.5s ease-in-out;*/
-}
-
-
-
-._HMenu--folded li:last-child {
-  margin-bottom: 2em;
-}
-
-@media (max-width: var(--mobile-width)) {
-  .HMenu--folded .HMenu__item {
-    max-width: 10em;
-  }
-
-  .HMenu--folded.HMenu--closed {
-    .HMenu__toggle {
-      a {
-        background-image: url(/graphics/hmenu-b.png);
-      }
-
-      a:hover {
-        background-image: url(/graphics/hmenu-b.png);
-      }
-    }
-  }
-
-  .HMenu--folded.HMenu--open {
-    .HMenu__toggle {
-      a {
-        background-image: url(/graphics/hmenu-close-b.png);
-      }
-
-      a:hover {
-        background-image: url(/graphics/hmenu-close-b.png);
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/style/main.scss b/src/style/main.scss
index b2fb398d..5d9b8853 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -1,44 +1,45 @@
 * {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 }
 
-html, body {
-  height: 100%;
+html,
+body {
+    height: 100%;
 }
 
 body {
-  min-width: 320px;
+    min-width: 320px;
 
-  color: var(--text-color);
+    color: var(--text-color);
 }
 
 h1 {
-  text-align: center;
-  font-size: var(--font-size-h1);
+    text-align: center;
+    font-size: var(--font-size-h1);
 
-  hyphens: none;
+    hyphens: none;
 }
 
-h2{
-  margin: var(--single-margin) 0;
-  font-size: var(--font-size-h2);
+h2 {
+    margin: var(--single-margin) 0;
+    font-size: var(--font-size-h2);
 
-  hyphens: none;
+    hyphens: none;
 }
 
-h3{
-  margin: var(--single-margin) 0;
+h3 {
+    margin: var(--single-margin) 0;
 
-  font-size: var(--font-size-h3);
+    font-size: var(--font-size-h3);
 
-  hyphens: none;
+    hyphens: none;
 }
 
 .actor {
-  border-bottom: 1px dashed black;
+    border-bottom: 1px dashed black;
 
-  &:hover {
-    border-bottom: 2px solid black;
-  }
-}
\ No newline at end of file
+    &:hover {
+        border-bottom: 2px solid black;
+    }
+}
diff --git a/src/style/page.scss b/src/style/page.scss
deleted file mode 100644
index 8e2fcda6..00000000
--- a/src/style/page.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.page {
-  width: 100%;
-
-  &.ng-leave {}
-  &.ng-enter {}
-}
\ No newline at end of file
diff --git a/src/style/style.scss b/src/style/style.scss
index b7a123cc..313efee1 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -3,7 +3,6 @@
 @import "components/document";
 @import "components/document-row";
 @import "components/documents-container";
-@import "components/main-menu";
 @import "components/navigation";
 @import "components/breadcrumbs";
 @import "components/timeline";
@@ -15,21 +14,17 @@
 @import "components/Paginator";
 @import "components/album";
 @import "components/parallax";
-@import "components/accessibility-control";
 
 @import "components/page-schedule";
 @import "components/page-collective";
 
-@import "components/ArticleCardList";
 @import "components/ArticleTags";
 
 @import "main";
 @import "body-wrapper";
-@import "page";
 @import "content";
 @import "page-animation";
 @import "main-image";
-@import "components/HudozkaTitle";
 //@import "vertical-image";
 
 @import "schedule-selector";
@@ -42,17 +37,8 @@
 // THEMES
 
 @import "themes/theme-default";
-//@import "themes/theme-accessibility-black-white";
-//@import "themes/theme-accessibility-white-black";
-//@import "themes/theme-accessibility-font-big";
-//@import "themes/theme-accessibility-font-biggest";
-//@import "themes/theme-accessibility-font-sans";
-//@import "themes/theme-accessibility-font-serif";
-//@import "themes/theme-accessibility-no-image";
-//@import "themes/theme-accessibility-kerning-big";
 
 @import "marker/MarkerTable";
 
 @import "kazimir/video";
 @import "kazimir/image";
-@import "hmenu";
diff --git a/src/style/themes/theme-accessibility-black-white.scss b/src/style/themes/theme-accessibility-black-white.scss
deleted file mode 100644
index 0c3ccd5f..00000000
--- a/src/style/themes/theme-accessibility-black-white.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-@import "../variables";
-
-.theme-accessibility-black-white {
-  background-color: $darker-color;
-  color: $lighter-color;
-
-  a {
-    color: $lighter-color;
-    text-decoration: none;
-    border-bottom: 1px solid $lighter-color;
-
-    &:hover {
-      border-width: 4px;
-    }
-  }
-
-  .accessibility-control{
-    color: $darker-color;
-  }
-
-  .main-menu {
-    a {
-      color: $dark-color;
-      border-bottom: 1px solid $dark-color;
-
-      &:hover {
-        border-width: 4px;
-      }
-    }
-
-    .selected {
-      border-top: $menu-colored-mark-thickness solid $dark-color;
-
-      a:link, a:visited {
-        color: $dark-color;
-      }
-    }
-  }
-
-  .content {
-    &.content--padding-top--menu {
-      padding-top: $menu-thickness + $double-margin + 8em;
-      padding-bottom: $single-margin;
-    }
-  }
-
-  .navigation {
-    background-color: $lighter-color;
-  }
-
-  .parallax {
-    &__end {
-      background-color: $darker-color;
-    }
-  }
-
-  .article {
-    &__head {
-      .date {
-        color: $lighter-color;
-      }
-    }
-  }
-
-  .schedule-table {
-    .current {
-      border-color: $lighter-color;
-    }
-  }
-
-  footer {
-    color: $lighter-color;
-    background-color: $darker-color;
-
-    font-size: $normal-font-size;
-  }
-}
diff --git a/src/style/themes/theme-accessibility-font-big.scss b/src/style/themes/theme-accessibility-font-big.scss
deleted file mode 100644
index 6c137b84..00000000
--- a/src/style/themes/theme-accessibility-font-big.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@import "../variables";
-
-.theme-accessibility-font-big {
-  font-size: 16pt;
-
-  .main-menu {
-    font-size: $bigger-font-size;
-  }
-
-  footer {
-    font-size: $bigger-font-size;
-  }
-}
diff --git a/src/style/themes/theme-accessibility-font-biggest.scss b/src/style/themes/theme-accessibility-font-biggest.scss
deleted file mode 100644
index 85ee732b..00000000
--- a/src/style/themes/theme-accessibility-font-biggest.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@import "../variables";
-
-.theme-accessibility-font-biggest {
-  font-size: 18pt;
-
-  a {
-    &:hover {
-      border-width: 8px;
-    }
-  }
-
-  .main-menu {
-    font-size: $big-font-size;
-  }
-
-  footer {
-    font-size: $big-font-size;
-  }
-}
diff --git a/src/style/themes/theme-accessibility-font-sans.scss b/src/style/themes/theme-accessibility-font-sans.scss
deleted file mode 100644
index 27a9c9a3..00000000
--- a/src/style/themes/theme-accessibility-font-sans.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import "../variables";
-
-.theme-accessibility-font-sans {
-  font-family: sans-serif;
-}
diff --git a/src/style/themes/theme-accessibility-font-serif.scss b/src/style/themes/theme-accessibility-font-serif.scss
deleted file mode 100644
index a5fa83bd..00000000
--- a/src/style/themes/theme-accessibility-font-serif.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import "../variables";
-
-.theme-accessibility-font-serif {
-  font-family: serif;
-}
diff --git a/src/style/themes/theme-accessibility-kerning-big.scss b/src/style/themes/theme-accessibility-kerning-big.scss
deleted file mode 100644
index 0009ed92..00000000
--- a/src/style/themes/theme-accessibility-kerning-big.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import "../variables";
-
-.theme-accessibility-kerning-big {
-  line-height: 2rem;
-  letter-spacing: .5rem;
-}
diff --git a/src/style/themes/theme-accessibility-no-image.scss b/src/style/themes/theme-accessibility-no-image.scss
deleted file mode 100644
index 142c439d..00000000
--- a/src/style/themes/theme-accessibility-no-image.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@import "../variables";
-
-.theme-accessibility-no-image {
-  img {
-    display: none;
-  }
-
-  video {
-    display: none;
-  }
-
-  .html5-video-player {
-    display: none;
-  }
-
-  .main-image{
-    display: none;
-  }
-}
diff --git a/src/style/themes/theme-accessibility-white-black.scss b/src/style/themes/theme-accessibility-white-black.scss
deleted file mode 100644
index b34a4d3c..00000000
--- a/src/style/themes/theme-accessibility-white-black.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-@import "../variables";
-
-.theme-accessibility-white-black {
-  background-color: $lighter-color;
-  color: $darker-color;
-
-  a {
-    color: $darker-color;
-    text-decoration: none;
-    border-bottom: 1px solid $darker-color;
-
-    &:hover {
-      border-width: 4px;
-    }
-  }
-
-  .accessibility-control{
-    color: $darker-color;
-  }
-
-  .main-menu {
-    a {
-      color: $darker-color;
-      border-bottom: 1px solid $darker-color;
-
-      &:hover {
-        border-width: 4px;
-      }
-    }
-
-    .selected {
-      border-top: $menu-colored-mark-thickness solid $darker-color;
-
-      a:link, a:visited {
-        color: $darker-color;
-      }
-    }
-
-  }
-
-  .content {
-    &.content--padding-top--menu {
-      padding-top: $menu-thickness + $double-margin + 5em;
-      padding-bottom: $single-margin;
-    }
-  }
-
-  .navigation {
-    background-color: $lighter-color;
-  }
-
-  .parallax {
-    &__end {
-      background-color: $lighter-color;
-    }
-  }
-
-  .article {
-    &__head {
-      .date {
-        color: $darker-color;
-      }
-    }
-  }
-
-  .schedule-table {
-    .current {
-      border-color: $darker-color;
-    }
-  }
-
-  footer {
-    color: $darker-color;
-    background-color: $lighter-color;
-
-    font-size: $normal-font-size;
-  }
-}
diff --git a/src/style/variables.scss b/src/style/variables.scss
index 45cb8574..6dec6c08 100644
--- a/src/style/variables.scss
+++ b/src/style/variables.scss
@@ -1,94 +1,77 @@
 :root {
-  //SHADOW
-  --white-shadow: 0 .1em 0.3em rgba(0, 0, 0, 0.2);
+    //SHADOW
+    --white-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.2);
 
-  //FONTS
-  --title-font: "PT Serif", Georgia, serif;
-  --text-font: "PT Sans", Arial, sans-serif;
-
-  --smaller-font-size: 0.9rem;
-  --normal-font-size: 1.0rem;
-  --bigger-font-size: 1.2rem;
-  --big-font-size: 1.5rem;
-  --biggest-font-size: 2.25rem;
-
-  //MENU
-  --menu-thickness: 2.5em;
-  --menu-colored-mark-thickness: 4px;
-  --menu-inactive-item-color: hsl(0, 0%, 50%);
-
-  //ANIMATION
-  $short-duration: 0.3s;
-
-  //SIZE
-  --mobile-width: 31.25em;
-  --desktop-width: 59.99999em;
-
-  --tablet-min-width: 31.25em;
-  --tablet-max-width: 64em;
-
-  --content-full: 100%;
-  --content-wide: 90%;
-  --content-semi-wide: 70%;
-  --content-thin: 60%;
-
-  --embed-video-ratio: 56.25%;
-
-  --text-color: #303030;
-  --text-color-second: #ccc;
-
-  //FONTS
-  --font-size-default: 14pt;
-  --font-size-second: 0.9rem;
-
-  --font-size-h1: 3.0rem;
-  --font-size-h2: 2.0rem;
-  --font-size-h3: 1.5rem;
-
-  //COLOR
-  --dark-color: hsl(0, 0%, 20%);
-  --darker-color: hsl(0, 0%, 10%);
-  --light-color: hsl(0, 0%, 80%);
-  --lighter-color: hsl(0, 0%, 100%);
-  --link-color: hsl(0, 0%, 80%);
-
-  --blue-color: rgb(63, 156, 234);
-  --orange-color: rgb(240, 160, 65);
-  --green-color: rgb(92, 190, 64);
-  --yellow-color: rgb(255, 238, 0);
-  --pink-color: rgb(246, 85, 160);
-  --magenta-color: rgb(214, 39, 246);
-  --red-color: rgb(246, 27, 20);
-  --gray-color: rgb(153, 154, 160);
-
-  --inactive-link-color: var(--light-color);
-
-  --schedule-row-color: hsl(210, 55%, 90%);
-
-
-
-  //MARGINS
-  --small-margin: .2em;
-  --half-margin: .5em;
-  --single-margin: 1.0em;
-  --double-margin: 2.0em;
-  --post-margin: 5.0em;
-
-  //OTHER
-  --block-border-radius: 3px;
-}
-
-@media (max-width: var(--mobile-width)) {
-  :root {
     //FONTS
-    --smaller-font-size: 0.9rem;
-    --normal-font-size: 1.0rem;
-    --bigger-font-size: 1.1rem;
-    --big-font-size: 1.3rem;
-    --biggest-font-size: 2.0rem;
+    --title-font: 'PT Serif', Georgia, serif;
+    --text-font: 'PT Sans', Arial, sans-serif;
 
-    --font-size-h1: 1.75rem;
-    --font-size-h2: 1.50rem;
-    --font-size-h3: 1.25rem;
-  }
+    --smaller-font-size: 0.9rem;
+    --normal-font-size: 1rem;
+    --bigger-font-size: 1.2rem;
+    --big-font-size: 1.5rem;
+    --biggest-font-size: 2.25rem;
+
+    //MENU
+    --menu-thickness: 2.5em;
+    --menu-colored-mark-thickness: 4px;
+    --menu-inactive-item-color: hsl(0, 0%, 50%);
+
+    //ANIMATION
+    $short-duration: 0.3s;
+
+    //SIZE
+    --mobile-width: 31.25em;
+    --desktop-width: 59.99999em;
+
+    --tablet-min-width: 31.25em;
+    --tablet-max-width: 64em;
+
+    --content-full: 100%;
+    --content-wide: 90%;
+    --content-semi-wide: 70%;
+    --content-thin: 60%;
+
+    --embed-video-ratio: 56.25%;
+
+    --text-color: #303030;
+    --text-color-second: #ccc;
+
+    //FONTS
+    --font-size-default: 14pt;
+    --font-size-second: 0.9rem;
+
+    --font-size-h1: 3rem;
+    --font-size-h2: 2rem;
+    --font-size-h3: 1.5rem;
+
+    //COLOR
+    --dark-color: hsl(0, 0%, 20%);
+    --darker-color: hsl(0, 0%, 10%);
+    --light-color: hsl(0, 0%, 80%);
+    --lighter-color: hsl(0, 0%, 100%);
+    --link-color: hsl(0, 0%, 80%);
+
+    --blue-color: rgb(63, 156, 234);
+    --orange-color: rgb(240, 160, 65);
+    --green-color: rgb(92, 190, 64);
+    --yellow-color: rgb(255, 238, 0);
+    --pink-color: rgb(246, 85, 160);
+    --magenta-color: rgb(214, 39, 246);
+    --red-color: rgb(246, 27, 20);
+    --gray-color: rgb(153, 154, 160);
+
+    --inactive-link-color: var(--light-color);
+
+    --schedule-row-color: hsl(210, 55%, 90%);
+
+    //MARGINS
+    --small-margin: 0.2em;
+    --half-margin: 0.5em;
+    --single-margin: 1em;
+    --double-margin: 2em;
+    --post-margin: 5em;
+
+    //OTHER
+    --block-border-radius: 3px;
 }
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 00000000..7bd31cff
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,25 @@
+export interface IDocument {
+    category: string
+    fileName: string
+    fileSize: number
+    fileUrl: string
+    imageUrl: string
+    title: string
+    url: string
+}
+
+export interface IMeta {
+    url: string
+    siteName: string
+    locale: string
+    type: string
+    description: string
+    domain: string
+    title: string
+    image: string
+    imageWidth: number
+    imageHeight: number
+    twitterCard: string
+    twitterSite: string
+    twitterCreator: string
+}
diff --git a/src/utils/common.js b/src/utils/common.ts
similarity index 82%
rename from src/utils/common.js
rename to src/utils/common.ts
index ee15c886..a2ec4754 100644
--- a/src/utils/common.js
+++ b/src/utils/common.ts
@@ -40,7 +40,7 @@ export function indexEquals(withNumber) {
  * @param map
  */
 export function select(byCondition, map = i => i) {
-    return (result, item) => byCondition(item) ? map(item): map(result)
+    return (result, item) => byCondition(item) ? map(item) : map(result)
 }
 
 /**
@@ -49,19 +49,21 @@ export function select(byCondition, map = i => i) {
  * @param selector
  * @returns {*}
  */
-export function choise(scope, selector){
+export function choise(scope, selector) {
     return scope.reduce(selector, null);
 }
 
-export function unique(fn) {
-    return list => [...new Set(list.map(fn))];
+export function unique<T, U>(fn: (value: T) => U): (list: T[]) => U[] {
+    return list => Array.from(
+        new Set(list.map(fn))
+    )
 }
 
 export function branch(fn) {
     let keys = unique(fn);
 
     return list => keys(list)
-        .reduce((dict, key) => {
+        .reduce((dict: any, key: any) => {
             dict[key] = list.filter(
                 i => fn(i) === key
             );
@@ -71,7 +73,7 @@ export function branch(fn) {
 
 }
 
-export function assign(dict, key, value){
+export function assign(dict, key, value) {
     dict[key] = value;
     return dict;
 }
@@ -88,7 +90,7 @@ export function map(v, fn) {
  * @param selector
  * @returns {*}
  */
-export function createMap(selector, list){
+export function createMap(selector, list) {
     return list.reduce((map, i) => map.set(selector(i), i), new Map());
 }
 
@@ -99,6 +101,6 @@ export function createMap(selector, list){
  * @param {function} fn
  * @returns {function(*=): null}
  */
-export function nullSafe(fn){
+export function nullSafe(fn) {
     return i => i ? fn(i) : null;
 }
diff --git a/static/app.js b/static/app.js
deleted file mode 100644
index df274137..00000000
--- a/static/app.js
+++ /dev/null
@@ -1,124 +0,0 @@
-const body = document.querySelector('body')
-
-function isFoldedState(element) {
-	const w = body.clientWidth
-	const toggleWidth = getToggleWidth(element)
-
-	return w <= toggleWidth
-}
-
-function isFolded(element) {
-	return element.classList.contains('HMenu--folded')
-}
-
-function isUnfolded(element) {
-	return element.classList.contains('HMenu--unfolded')
-}
-
-function isOpen(element) {
-	return element.classList.contains('HMenu--open')
-}
-
-function isClosed(element) {
-	return element.classList.contains('HMenu--closed')
-}
-
-function foldMenu(element) {
-	element.classList.remove('HMenu--unfolded')
-	element.classList.add('HMenu--folded')
-
-	return element
-}
-
-function unfoldMenu(element) {
-	element.classList.remove('HMenu--folded')
-	element.classList.add('HMenu--unfolded')
-
-	return element
-}
-
-function openMenu(element) {
-	body.classList.add('no-scroll')
-	element.classList.remove('HMenu--closed')
-	element.classList.add('HMenu--open')
-
-	setTimeout(() => {
-		document.querySelector('main').style.display = 'none'
-	}, 100)
-
-	return element
-}
-
-function closeMenu(element) {
-	body.classList.remove('no-scroll')
-	element.classList.remove('HMenu--open')
-	element.classList.add('HMenu--closed')
-
-	document.querySelector('main').style.display = 'block'
-
-	return element
-}
-
-function toggleMenu(element) {
-	if (isOpen(element)) {
-		closeMenu(element)
-	} else {
-		openMenu(element)
-	}
-}
-
-function createToggle() {
-	return `
-    <div>
-      <a class="HMenu__toggle" href="#">✕</a>
-    </div>
-    `
-}
-
-function getToggleWidth(element) {
-	const value = element.dataset.toggleWidth
-	if (value) return Number(value)
-
-	return 700
-}
-
-function runHmenu() {
-	const menus = [...document.querySelectorAll('.HMenu')]
-
-	function initMenus() {
-		return menus
-			.map(menu => {
-				const toggle = menu.querySelector('.HMenu__toggle')
-				toggle.addEventListener('click', e => {
-					e.preventDefault()
-					toggleMenu(menu)
-				})
-
-				if (isFoldedState(menu)) {
-					return foldMenu(menu)
-				} else {
-					return unfoldMenu(menu)
-				}
-			})
-			.map(menu => closeMenu(menu))
-	}
-
-	function handleMenus() {
-		return menus.map(menu => {
-			const foldedState = isFoldedState(menu)
-
-			if (foldedState && !isFolded(menu)) {
-				return foldMenu(menu)
-			} else if (!foldedState && isFolded(menu)) {
-				return unfoldMenu(menu)
-			} else {
-				return menu
-			}
-		})
-	}
-
-	initMenus()
-	window.addEventListener('resize', handleMenus)
-}
-
-runHmenu()
diff --git a/src/assets/graphics/hmenu-b.png b/static/graphics/hmenu-b.png
similarity index 100%
rename from src/assets/graphics/hmenu-b.png
rename to static/graphics/hmenu-b.png
diff --git a/src/assets/graphics/hmenu-close-b.png b/static/graphics/hmenu-close-b.png
similarity index 100%
rename from src/assets/graphics/hmenu-close-b.png
rename to static/graphics/hmenu-close-b.png
diff --git a/src/assets/graphics/hmenu-close-hover-b.png b/static/graphics/hmenu-close-hover-b.png
similarity index 100%
rename from src/assets/graphics/hmenu-close-hover-b.png
rename to static/graphics/hmenu-close-hover-b.png
diff --git a/src/assets/graphics/hmenu-hover-b.png b/static/graphics/hmenu-hover-b.png
similarity index 100%
rename from src/assets/graphics/hmenu-hover-b.png
rename to static/graphics/hmenu-hover-b.png
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..48ca14af
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ]
+}
diff --git a/utils/Sync/sync.py b/utils/Sync/sync.py
index ee8e0022..be97324e 100644
--- a/utils/Sync/sync.py
+++ b/utils/Sync/sync.py
@@ -56,54 +56,61 @@ async def run(run_interval=0):
         provider=io(settings.provider_root),
         model=Page,
     )
+    sync_pages.set_options(True, True, True)
 
     sync_persons = Sync(
         provider=io(settings.provider_root),
         model=Person,
     )
+    sync_persons.set_options(True, True, True)
     sync_persons.validate_urls = False
 
     sync_articles = Sync(
         provider=io(settings.provider_root),
         model=Article,
     )
+    sync_articles.set_options(True, True, True)
     sync_articles.validate_urls = False
 
     sync_schedules = Sync(
         provider=io(settings.provider_root),
         model=Schedule,
     )
+    sync_schedules.set_options(True, True, True)
     sync_schedules.validate_urls = False
 
     sync_albums = Sync(
         provider=io(settings.provider_root),
         model=Album,
     )
+    sync_albums.set_options(True, True, True)
     sync_albums.validate_urls = False
 
     sync_settings = Sync(
         provider=io(settings.provider_root),
         model=Settings,
     )
+    sync_settings.set_options(True, True, True)
     sync_settings.validate_urls = False
 
     sync_images = Sync(
         provider=io(settings.provider_root),
         model=Image,
     )
+    sync_images.set_options(True, True, True)
     sync_images.strict_origin = True
     sync_images.validate_urls = False
 
     while True:
         await asyncio.wait([
-            run_sync(sync_documents, skip_changed=False, update=True, remove=True),
-            run_sync(sync_pages, skip_changed=False, update=True, remove=True),
-            run_sync(sync_persons, skip_changed=False, update=True, remove=True),
-            run_sync(sync_articles, skip_changed=False, update=True, remove=True),
-            run_sync(sync_schedules, skip_changed=False, update=True, remove=True),
-            run_sync(sync_albums, skip_changed=False, update=True, remove=True),
-            run_sync(sync_settings, skip_changed=False, update=True, remove=True),
-            run_sync(sync_images, skip_changed=False, update=True, remove=True),
+            run_sync(sync_documents),
+            run_sync(sync_pages),
+            run_sync(sync_persons),
+            run_sync(sync_articles),
+            run_sync(sync_schedules),
+            run_sync(sync_albums),
+            run_sync(sync_settings),
+            run_sync(sync_images),
         ])
 
         if run_interval == 0:
diff --git a/utils/Sync/sync/core/__init__.py b/utils/Sync/sync/core/__init__.py
index a13369a9..22edc4d9 100644
--- a/utils/Sync/sync/core/__init__.py
+++ b/utils/Sync/sync/core/__init__.py
@@ -30,15 +30,28 @@ class Sync:
         self.model = model
         self.filter_item_fn = filter_item_fn if filter_item_fn else lambda x: True
 
+        self.skip_unchanged = True
+        self.update_enabled = True
+        self.delete_enabled = True
+
+    def set_options(self, su: bool, u: bool, d: bool):
+        self.skip_unchanged = su
+        self.update_enabled = u
+        self.delete_enabled = d
+        return self
+
     async def clean(self):
         pass
 
-    async def update(self, item):
+    async def build(self, item):
         args = self._get_build_args()
-
         await item.build(**args)
+        return item
+
+    async def update(self, item):
         await item.upload()
         await item.save()
+        return item
 
     def _get_build_args(self):
         return {
@@ -60,7 +73,7 @@ class Sync:
 
         return query
 
-    async def run(self, skip_changed=False, update=True, remove=True):
+    async def run(self):
         """
         # Get scope files
         # Validate these files. Raise an error
@@ -87,19 +100,23 @@ class Sync:
             self.check_urls_uniqueness(items)
 
         # SKIP UNTOUCHED DOCUMENTS
-        changed_items = items
-        if not skip_changed:
-            changed_items = await untouched(items)
-        self.logger.info(f'Ready to process {len(changed_items)} item(s)')
+        if self.skip_unchanged:
+            items = await untouched(items)
+        self.logger.info(f'Ready to process {len(items)} item(s)')
+
+        # BUILDING
+        for item in items:
+            self.logger.info(f'Build Item {item}')
+            await self.build(item)
 
         # UPDATING
-        if update:
-            for item in changed_items:
+        if self.update_enabled:
+            for item in items:
                 await self.update(item)
                 self.logger.info('Updated Item {}'.format(item))
 
         # DELETING
-        if remove:
+        if self.delete_enabled:
             obsolete_items = await self.model.find(self.__items_to_delete_query(items))
             obsolete_items = list(obsolete_items)
 
diff --git a/utils/Sync/sync/models/Image.py b/utils/Sync/sync/models/Image.py
index ab5afbc5..ebbfbe90 100644
--- a/utils/Sync/sync/models/Image.py
+++ b/utils/Sync/sync/models/Image.py
@@ -199,7 +199,7 @@ async def create_image(file: str, sizes: [()], url_fn, output_dir: str) -> Optio
         else:
             image = await read_image(file)
         if not image:
-            logger.warning('Failed to process image {}'.format(file))
+            logger.warning(f'Failed to process image {file}')
             return None
         width, height = image.size