diff --git a/package-lock.json b/package-lock.json
index a42a042..28258b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -760,6 +760,33 @@
         "@types/babel-types": "*"
       }
     },
+    "@types/classnames": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.7.tgz",
+      "integrity": "sha512-rzOhiQ55WzAiFgXRtitP/ZUT8iVNyllEpylJ5zHzR4vArUvMB39GTk+Zon/uAM0JxEFAWnwsxC2gH8s+tZ3Myg=="
+    },
+    "@types/prop-types": {
+      "version": "15.5.8",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.5.8.tgz",
+      "integrity": "sha512-3AQoUxQcQtLHsK25wtTWIoIpgYjH3vSDroZOUr7PpCHw/jLY1RB9z9E8dBT/OSmwStVgkRNvdh+ZHNiomRieaw=="
+    },
+    "@types/react": {
+      "version": "16.8.2",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.2.tgz",
+      "integrity": "sha512-6mcKsqlqkN9xADrwiUz2gm9Wg4iGnlVGciwBRYFQSMWG6MQjhOZ/AVnxn+6v8nslFgfYTV8fNdE6XwKu6va5PA==",
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^2.2.0"
+      }
+    },
+    "@types/react-dom": {
+      "version": "16.8.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.8.0.tgz",
+      "integrity": "sha512-Jp4ufcEEjVJEB0OHq2MCZcE1u3KYUKO6WnSuiU/tZeYeiZxUoQavfa/TZeiIT+1XoN6l0lQVNM30VINZFDeolQ==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.5.13",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.5.13.tgz",
@@ -1233,6 +1260,12 @@
       "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
       "dev": true
     },
+    "arg": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.0.tgz",
+      "integrity": "sha512-ZWc51jO3qegGkVh8Hwpv636EkbesNV5ZNQPCtRa+0qytRYPEs9IYT9qITY9buezqUH5uqyzlWLcufrzU2rffdg==",
+      "dev": true
+    },
     "argparse": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
@@ -1449,6 +1482,79 @@
         }
       }
     },
+    "awesome-typescript-loader": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/awesome-typescript-loader/-/awesome-typescript-loader-5.2.1.tgz",
+      "integrity": "sha512-slv66OAJB8orL+UUaTI3pKlLorwIvS4ARZzYR9iJJyGsEgOqueMfOMdKySWzZ73vIkEe3fcwFgsKMg4d8zyb1g==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.1",
+        "enhanced-resolve": "^4.0.0",
+        "loader-utils": "^1.1.0",
+        "lodash": "^4.17.5",
+        "micromatch": "^3.1.9",
+        "mkdirp": "^0.5.1",
+        "source-map-support": "^0.5.3",
+        "webpack-log": "^1.2.0"
+      },
+      "dependencies": {
+        "enhanced-resolve": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz",
+          "integrity": "sha512-F/7vkyTtyc/llOIn8oWclcB25KdRaiPBpZYDgJHgh/UHtpgT2p2eldQgtQnLtUvfMKPKxbRaQM/hHkvLHt1Vng==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "memory-fs": "^0.4.0",
+            "tapable": "^1.0.0"
+          }
+        },
+        "memory-fs": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
+          "integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=",
+          "dev": true,
+          "requires": {
+            "errno": "^0.1.3",
+            "readable-stream": "^2.0.1"
+          }
+        },
+        "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.10",
+          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.10.tgz",
+          "integrity": "sha512-YfQ3tQFTK/yzlGJuX8pTwa4tifQj4QS2Mj7UegOu8jAz59MqIiMGPXxQhVQiIMNzayuUSF/jEuVnfFF5JqybmQ==",
+          "dev": true,
+          "requires": {
+            "buffer-from": "^1.0.0",
+            "source-map": "^0.6.0"
+          }
+        },
+        "tapable": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.1.tgz",
+          "integrity": "sha512-9I2ydhj8Z9veORCw5PRm4u9uebCn0mcCa6scWoNcbZ6dAtoo2618u9UUzxgmsCOreJpqDDuv61LvwofW7hLcBA==",
+          "dev": true
+        },
+        "webpack-log": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-1.2.0.tgz",
+          "integrity": "sha512-U9AnICnu50HXtiqiDxuli5gLB5PGBo7VvcHx36jRZHwK4vzOYLbImqT4lwWwoMHdQWwEKw736fCHEekokTEKHA==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.1.0",
+            "log-symbols": "^2.1.0",
+            "loglevelnext": "^1.0.1",
+            "uuid": "^3.1.0"
+          }
+        }
+      }
+    },
     "aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
@@ -4115,12 +4221,26 @@
         "source-map": "^0.5.3"
       }
     },
+    "csstype": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.2.tgz",
+      "integrity": "sha512-Rl7PvTae0pflc1YtxtKbiSqq20Ts6vpIYOD5WBafl4y123DyHUeLrRdQP66sQW8/6gmX8jrYJLXwNeMqYVJcow=="
+    },
     "cyclist": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",
       "integrity": "sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=",
       "dev": true
     },
+    "d": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
+      "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
+      "dev": true,
+      "requires": {
+        "es5-ext": "^0.10.9"
+      }
+    },
     "damerau-levenshtein": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz",
@@ -4709,6 +4829,38 @@
         "is-symbol": "^1.0.1"
       }
     },
+    "es5-ext": {
+      "version": "0.10.47",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.47.tgz",
+      "integrity": "sha512-/1TItLfj+TTfWoeRcDn/0FbGV6SNo4R+On2GGVucPU/j3BWnXE2Co8h8CTo4Tu34gFJtnmwS9xiScKs4EjZhdw==",
+      "dev": true,
+      "requires": {
+        "es6-iterator": "~2.0.3",
+        "es6-symbol": "~3.1.1",
+        "next-tick": "1"
+      }
+    },
+    "es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
+      "dev": true,
+      "requires": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "es6-symbol": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
+      "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
+      "dev": true,
+      "requires": {
+        "d": "1",
+        "es5-ext": "~0.10.14"
+      }
+    },
     "escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -6740,6 +6892,12 @@
       "integrity": "sha512-3ToOva++HaW+eCpgqZrCfN51IPB+7bJNVT6CUATzueB5Heb8o6Nam0V3HG5dlDvZU1Gn5QLcbahiKw/XVk5JJw==",
       "dev": true
     },
+    "has-symbols": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.0.tgz",
+      "integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=",
+      "dev": true
+    },
     "has-to-string-tag-x": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/has-to-string-tag-x/-/has-to-string-tag-x-1.4.1.tgz",
@@ -8760,6 +8918,16 @@
       "integrity": "sha1-4PyVEztu8nbNyIh82vJKpvFW+Po=",
       "dev": true
     },
+    "loglevelnext": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/loglevelnext/-/loglevelnext-1.0.5.tgz",
+      "integrity": "sha512-V/73qkPuJmx4BcBF19xPBr+0ZRVBhc4POxvZTZdMeXpJ4NItXSJ/MSwuFT0kQJlCbXvdlZoQQ/418bS1y9Jh6A==",
+      "dev": true,
+      "requires": {
+        "es6-symbol": "^3.1.1",
+        "object.assign": "^4.1.0"
+      }
+    },
     "long": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/long/-/long-3.2.0.tgz",
@@ -8810,6 +8978,12 @@
         "pify": "^3.0.0"
       }
     },
+    "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",
@@ -9327,6 +9501,12 @@
       "integrity": "sha512-vdqTKI9GBIYcAEbFAcpKPErKINfPF5zIuz3/niBfq8WUZjpT2tytLlFVrBgWdOtqI4uaA/Rb6No0hux39XXDuw==",
       "dev": true
     },
+    "next-tick": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
+      "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
+      "dev": true
+    },
     "nice-try": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.4.tgz",
@@ -9589,6 +9769,18 @@
         "isobject": "^3.0.0"
       }
     },
+    "object.assign": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz",
+      "integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.2",
+        "function-bind": "^1.1.1",
+        "has-symbols": "^1.0.0",
+        "object-keys": "^1.0.11"
+      }
+    },
     "object.getownpropertydescriptors": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz",
@@ -12979,6 +13171,37 @@
       "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=",
       "dev": true
     },
+    "ts-node": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-8.0.2.tgz",
+      "integrity": "sha512-MosTrinKmaAcWgO8tqMjMJB22h+sp3Rd1i4fdoWY4mhBDekOwIAKI/bzmRi7IcbCmjquccYg2gcF6NBkLgr0Tw==",
+      "dev": true,
+      "requires": {
+        "arg": "^4.1.0",
+        "diff": "^3.1.0",
+        "make-error": "^1.1.1",
+        "source-map-support": "^0.5.6",
+        "yn": "^3.0.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "source-map-support": {
+          "version": "0.5.10",
+          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.10.tgz",
+          "integrity": "sha512-YfQ3tQFTK/yzlGJuX8pTwa4tifQj4QS2Mj7UegOu8jAz59MqIiMGPXxQhVQiIMNzayuUSF/jEuVnfFF5JqybmQ==",
+          "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",
@@ -13045,6 +13268,17 @@
       "resolved": "https://registry.npmjs.org/typeface-pt-sans/-/typeface-pt-sans-0.0.54.tgz",
       "integrity": "sha512-uvf3OIiTRXBly8iXD09iNZcLndJ89iGCyzWh4YzxdL+OMXPZxROupW8OR4JYo1RRfhzCdvebE6W/KrKDnAbdmw=="
     },
+    "typesafe-actions": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/typesafe-actions/-/typesafe-actions-3.0.0.tgz",
+      "integrity": "sha512-NLpRc/FY+jPfWL0aUXQzjxPyF0Xug2om6akaoRLQ18KGwP2yYNBJu9vkv2q1q+Cx/+edy2Qf6O8xXnYY/xwz1A=="
+    },
+    "typescript": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.3.3.tgz",
+      "integrity": "sha512-Y21Xqe54TBVp+VDSNbuDYdGw0BpoR/Q6wo/+35M8PAU0vipahnyduJWirxxdxjsAkS7hue53x2zp8gz7F05u0A==",
+      "dev": true
+    },
     "ua-parser-js": {
       "version": "0.7.18",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz",
@@ -14752,6 +14986,12 @@
           }
         }
       }
+    },
+    "yn": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/yn/-/yn-3.0.0.tgz",
+      "integrity": "sha512-+Wo/p5VRfxUgBUGy2j/6KX2mj9AYJWOHuhMjMcbBFc3y54o9/4buK1ksBvuiK01C3kby8DH9lSmJdSxw+4G/2Q==",
+      "dev": true
     }
   }
 }
diff --git a/package.json b/package.json
index 744513a..42a0652 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   "license": "ISC",
   "keywords": [],
   "devDependencies": {
+    "awesome-typescript-loader": "^5.2.1",
     "@babel/cli": "^7.0.0-rc.1",
     "@babel/preset-env": "^7.0.0-rc.1",
     "babel-core": "^6.26.0",
@@ -45,9 +46,15 @@
     "uglifyjs-webpack-plugin": "^1.3.0",
     "webpack": "^4.6.0",
     "webpack-cli": "^2.0.15",
-    "webpack-dev-server": "^3.1.11"
+    "webpack-dev-server": "^3.1.11",
+    "ts-node": "^8.0.1",
+    "typescript": "^3.2.4"
   },
   "dependencies": {
+    "@types/classnames": "^2.2.7",
+    "@types/react": "^16.7.20",
+    "@types/react-dom": "^16.0.11",
+    "typesafe-actions": "^3.0.0",
     "axios": "^0.18.0",
     "babel-runtime": "^6.26.0",
     "bluebird": "^3.5.3",
diff --git a/src/index.js b/src/index.tsx
similarity index 97%
rename from src/index.js
rename to src/index.tsx
index 1b7035b..b0181c7 100644
--- a/src/index.js
+++ b/src/index.tsx
@@ -61,8 +61,8 @@
   done stickers drag on rotate bug
  */
 
-import React from 'react';
-import ReactDOM from 'react-dom';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 
 import { App } from '$containers/App';
 import '$styles/main.less';
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..24600d6
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "allowSyntheticDefaultImports": true,
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "noImplicitAny": false,
+    "allowSyntheticDefaultImports": true,
+    "module": "commonjs",
+    "target": "es5",
+    "jsx": "react",
+    "lib": [ "es2015", "DOM" ],
+    "baseUrl": ".",
+    "paths": {
+      "$components/*": [ "src/components/*" ],
+      "$containers/*": [ "src/containers/*" ],
+      "$constants/*": [ "src/constants/*" ],
+      "$sprites/*": [ "src/sprites/*" ],
+      "$config/*": [ "./config/*" ],
+      "$styles/*": [ "src/styles/*" ],
+      "$redux/*": [ "src/redux/*" ],
+      "$utils/*": [ "src/utils/*" ],
+      "$modules/*": [ "src/modules/*" ],
+      "custom_modules/*": [
+        "src/custom_modules/*"
+      ]
+    }
+  },
+  "include": [
+    "./src/**/*",
+    "./backend/**/*",
+  ]
+}
diff --git a/webpack.config.js b/webpack.config.js
index dba1b88..4f3d145 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -42,7 +42,7 @@ const resolve = {
     $modules: join(__dirname, 'src/modules'),
   },
 
-  extensions: ['*', '.js', '.jsx', '.json']
+  extensions: ['*', '.ts', '.tsx', '.js', '.jsx', '.json']
 };
 
 /* Configuration */
@@ -76,12 +76,13 @@ module.exports = () => {
           ]
         },
         {
-          test: /\.(js|jsx)$/,
+          test: /\.(ts|tsx|js|jsx)$/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader'
           }
         },
+        { test: /\.(ts|tsx)?$/, loader: 'awesome-typescript-loader' },
         {
           test: /\.(eot|ttf|woff|woff2|otf)$/,
           use: {
@@ -105,7 +106,7 @@ module.exports = () => {
     resolve,
     plugins,
     entry: {
-      app: './src/index.js',
+      app: './src/index.tsx',
     },
     output: {
       publicPath: '/',