diff --git a/README.md b/README.md
index 9a95865..4b59bad 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,7 @@ CUBETIQ React App Template for general use in react application.
 - Create React App: 4.0.3
 - React: 17.0.0
 - TypeScript: 4.1.2
+- Craco: 6.1.2 | Craco less: 1.17.1
 
 # Contributors
 
diff --git a/craco.config.js b/craco.config.js
index ff7940b..e4e748f 100644
--- a/craco.config.js
+++ b/craco.config.js
@@ -1,9 +1,16 @@
-const path = require('path')
+const path = require('path');
 
 module.exports = {
-  resolve: {
+  webpack: {
     alias: {
-      '@': path.resolve(__dirname, './src'),
-    },
+      '@': path.resolve(__dirname, 'src/')
+    }
   },
-}
+  jest: {
+    configure: {
+      moduleNameMapper: {
+        '^@(.*)$': '<rootDir>/src$1'
+      }
+    }
+  }
+};
\ No newline at end of file
diff --git a/src/app/App.css b/src/app/App.less
similarity index 100%
rename from src/app/App.css
rename to src/app/App.less
diff --git a/src/app/App.tsx b/src/app/App.tsx
index a0eba27..53e2f89 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
+import AppProvider from '@/provider/AppProvider'
 import RouterView from '../routes'
-import './App.css'
+import './App.less'
 
 const App = () => {
   return (
-    <RouterView />
+    <AppProvider><RouterView /></AppProvider>
   )
 }
 
diff --git a/src/index.css b/src/index.less
similarity index 100%
rename from src/index.css
rename to src/index.less
diff --git a/src/index.tsx b/src/index.tsx
index fd37fd8..265cf5a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import './index.css'
-import App from './app/App'
+import './index.less'
+import App from '@/app/App'
 import reportWebVitals from './reportWebVitals'
 
 ReactDOM.render(
diff --git a/src/pages/About/index.tsx b/src/pages/About/index.tsx
index 616ce5b..6a9c4fb 100644
--- a/src/pages/About/index.tsx
+++ b/src/pages/About/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import './index.less'
 
 export default function About() {
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index b3488b1..72f6dfd 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import './index.less'
 
 export default function Home() {
diff --git a/src/provider/AppProvider.tsx b/src/provider/AppProvider.tsx
new file mode 100644
index 0000000..1f66a82
--- /dev/null
+++ b/src/provider/AppProvider.tsx
@@ -0,0 +1,5 @@
+const AppProvider = (props: any) => {
+    return <>{props.children}</>
+}
+
+export default AppProvider
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index d655576..504534b 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
 import { routes } from './routes'
 
diff --git a/tsconfig.json b/tsconfig.json
index 9d379a3..7c2232b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -16,5 +20,8 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src"]
+  "extends": "./tsconfig.paths.json",
+  "include": [
+    "src"
+  ]
 }
diff --git a/tsconfig.paths.json b/tsconfig.paths.json
new file mode 100644
index 0000000..96c46e6
--- /dev/null
+++ b/tsconfig.paths.json
@@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+        "baseUrl": "./",
+        "paths": {
+            "@/*": ["src/*"]
+        }
+    }
+}