diff --git a/docs/src/example_components.js b/docs/src/example_components.js
index 707fa73..685733b 100644
--- a/docs/src/example_components.js
+++ b/docs/src/example_components.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import hljs from 'highlight.js';
 import CodeExampleComponent from './code_example_component';
-import Highlight from 'react-syntax-highlight';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
 import Default from './examples/default';
 import Jalaali from './examples/jalaali';
@@ -56,7 +57,11 @@ export default class ExampleComponents extends React.Component {
       <CodeExampleComponent key={`example-${index}`} id={index} title={example.title}>
         <div className="row">
           <div className="column">
-            <Highlight lang="jsx" value={example.code} />
+            {/* <Highlight lang="jsx" value={example.code} /> */}
+            <SyntaxHighlighter lang="javascript" style={docco}>
+
+            {example.code}
+            </SyntaxHighlighter>
           </div>
           <div className="column">{<example.component />}</div>
         </div>
diff --git a/package.json b/package.json
index 7cb001b..f09a536 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
   "scripts": {
     "cypress": "cypress open",
     "test": "jest --runInBand --detectOpenHandles --no-cache --config ./jest.config.js --coverage && minicat coverage/lcov.info | coveralls",
-    "start": "webpack-dev-server --mode development --config webpack.config.dev.js",
+    "start": "webpack serve --mode development --config webpack.config.dev.js",
     "build": "npm-run-all build:dist build:docs",
     "build:dist": "npm run build:css && npm run build:js",
     "build:docs": "webpack --config webpack.config.docs.js",
@@ -45,97 +45,35 @@
     "moment-range": "^4.0.2",
     "prop-types": "^15.7.2",
     "rc-trigger": "3.0.0",
-    "react-onclickoutside": "^6.8.0",
-    "react-tether": "^2.0.0",
-    "react-with-styles": "4.1.0"
+    "react-onclickoutside": "^6.10.0",
+    "react-tether": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.4.4",
-    "@babel/core": "^7.4.5",
-    "@babel/plugin-external-helpers": "^7.2.0",
-    "@babel/plugin-proposal-class-properties": "^7.4.4",
-    "@babel/plugin-proposal-decorators": "^7.4.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
-    "@babel/plugin-transform-modules-commonjs": "^7.4.4",
-    "@babel/plugin-transform-object-assign": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.4.4",
-    "@babel/preset-env": "^7.4.5",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/preset-stage-0": "^7.0.0",
-    "@babel/runtime": "^7.4.5",
-    "autoprefixer": "^9.5.1",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-module-resolver": "^3.2.0",
-    "babel-plugin-transform-decorators-legacy": "^1.3.5",
-    "babel-polyfill": "^6.23.0",
-    "babel-preset-es2015": "^6.24.0",
-    "babel-preset-es2016": "^6.22.0",
-    "babel-preset-next": "^1.2.0",
-    "babel-preset-stage-0": "^6.22.0",
-    "babel-runtime": "^6.23.0",
-    "clean-css-cli": "^4.3.0",
-    "coveralls": "^2.12.0",
-    "css-loader": "^2.1.1",
-    "cypress": "^5.0.0",
-    "enzyme": "^2.9.1",
-    "enzyme-adapter-react-16": "^1.13.1",
-    "eslint": "^5.16.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^4.3.0",
-    "eslint-plugin-import": "^2.17.3",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-react": "^7.13.0",
-    "file-loader": "^3.0.1",
-    "highlight.js": "^9.10.0",
-    "html-webpack-plugin": "^3.2.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^24.8.0",
-    "jest-enzyme": "^7.0.2",
-    "jscoverage": "^0.6.0",
-    "mini-css-extract-plugin": "^0.6.0",
-    "minicat": "^1.0.0",
-    "moment": "^2.18.1",
-    "node-sass": "^4.12.0",
-    "nodeunit": "^0.11.0",
-    "npm-run-all": "^4.1.5",
-    "path": "^0.12.7",
-    "postcss-cli": "^6.1.2",
-    "postcss-loader": "^3.0.0",
-    "prettier": "^1.18.2",
-    "react": "^16.8.4",
-    "react-addons-test-utils": "^15.4.2",
-    "react-dom": "^16.8.4",
-    "react-parallax": "^2.2.0",
+    "@babel/plugin-transform-runtime": "^7.14.2",
+    "@babel/preset-env": "^7.14.2",
+    "@babel/preset-react": "^7.13.13",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-transform-export-extensions": "^6.22.0",
+    "css-loader": "^5.2.4",
+    "file-loader": "^6.2.0",
+    "highlight.js": "^10.7.2",
+    "html-webpack-plugin": "^5.3.1",
+    "node-sass": "^6.0.0",
+    "react-parallax": "^3.3.0",
     "react-sticky": "^6.0.3",
-    "react-switch": "^4.1.0",
-    "react-syntax-highlight": "^15.3.1",
-    "react-test-renderer": "^16.8.4",
-    "rollup": "2.6.0",
-    "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-commonjs": "10.1.0",
-    "rollup-plugin-filesize": "^6.2.1",
-    "rollup-plugin-local-resolve": "^1.0.7",
-    "rollup-plugin-node-globals": "^1.4.0",
-    "rollup-plugin-node-resolve": "5.2.0",
-    "rollup-plugin-peer-deps-external": "^2.2.0",
-    "rollup-plugin-postcss": "^2.0.3",
-    "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-terser": "^5.1.3",
-    "sass-loader": "^7.1.0",
-    "style-loader": "^0.23.1",
-    "webpack": "^4.32.2",
-    "webpack-cli": "^3.3.2",
-    "webpack-dev-server": "^3.4.1",
-    "webpack-node-externals": "^1.7.2"
+    "react-switch": "^6.0.0",
+    "react-syntax-highlighter": "^15.4.3",
+    "sass-loader": "^11.1.1",
+    "style-loader": "^2.0.0",
+    "webpack": "^5.2.0",
+    "webpack-cli": "^4.7.0",
+    "webpack-dev-server": "^3.11.2"
   },
   "peerDependencies": {
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "browserslist": [
     "last 2 versions"
   ]
-}
\ No newline at end of file
+}