diff --git a/package.json b/package.json
index 966b3f2..6d110cb 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
   "dependencies": {
     "@chakra-ui/icons": "^1.1.7",
     "@chakra-ui/react": "^1.8.5",
+    "@chakra-ui/theme-tools": "^1.3.6",
     "@choc-ui/paginator": "^3.4.0",
     "@emotion/react": "^11.8.1",
     "@emotion/styled": "^11.8.1",
@@ -53,6 +54,7 @@
     "ts-md5": "^1.2.11"
   },
   "devDependencies": {
+    "@types/node": "^17.0.21",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "@types/react-router-dom": "^5.1.8",
diff --git a/src/components/overlay/index.tsx b/src/components/overlay/index.tsx
index 34f4331..b4d9868 100644
--- a/src/components/overlay/index.tsx
+++ b/src/components/overlay/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ToTop from './to-top';
 import Ss from './site-settings';
-import { Box } from '@chakra-ui/layout';
+import { Box } from '@chakra-ui/react';
 
 const Overlay = (props:any) => {
   return <Box className="overlay" zIndex="100">
diff --git a/src/components/overlay/to-top.tsx b/src/components/overlay/to-top.tsx
index 94ee8d4..34ed28b 100644
--- a/src/components/overlay/to-top.tsx
+++ b/src/components/overlay/to-top.tsx
@@ -1,4 +1,4 @@
-import { IconButton } from "@chakra-ui/button";
+import { IconButton } from "@chakra-ui/react";
 import React, { useEffect, useState } from "react";
 import { FiArrowUp } from "react-icons/fi";
 
diff --git a/src/pages/list/layout/nav.tsx b/src/pages/list/layout/nav.tsx
index 1eca8bb..05de776 100644
--- a/src/pages/list/layout/nav.tsx
+++ b/src/pages/list/layout/nav.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { useLocation } from "react-router";
+import { useLocation } from "react-router-dom";
 import {
   Breadcrumb,
   BreadcrumbItem,
diff --git a/src/pages/list/preview/markdown.tsx b/src/pages/list/preview/markdown.tsx
index 3d963db..49b99d2 100644
--- a/src/pages/list/preview/markdown.tsx
+++ b/src/pages/list/preview/markdown.tsx
@@ -1,9 +1,8 @@
 import React, { useContext, useEffect } from "react";
 import { FileProps, IContext } from "../context";
 import axios from "axios";
-import { useColorModeValue } from "@chakra-ui/color-mode";
-import { Spinner } from "@chakra-ui/spinner";
-import { Box, Center } from "@chakra-ui/layout";
+import { Spinner, useColorModeValue } from "@chakra-ui/react";
+import { Box, Center } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import useFileUrl from "../../../hooks/useFileUrl";
 import ReactMarkdown from "react-markdown";
@@ -58,7 +57,7 @@ const Markdown = ({ file, readme }: FileProps) => {
           setContent(res);
         } else {
           setContent(
-            "```" + file.name.split(".").pop() + "\n" + res + "\n" + "```"
+            "```" + file.name.split(".").pop() + "\n" + res + "\n" + "```",
           );
         }
       });
@@ -74,7 +73,9 @@ const Markdown = ({ file, readme }: FileProps) => {
       <Box w="full">
         {html && (
           <FormControl display="flex" alignItems="center" m="1">
-            <FormLabel htmlFor="render" mb="0">Render?</FormLabel>
+            <FormLabel htmlFor="render" mb="0">
+              Render?
+            </FormLabel>
             <Switch
               id="render"
               isChecked={render}
diff --git a/src/pages/list/preview/office.tsx b/src/pages/list/preview/office.tsx
index 7dd5aaf..e8ba2d8 100644
--- a/src/pages/list/preview/office.tsx
+++ b/src/pages/list/preview/office.tsx
@@ -1,6 +1,6 @@
-import { Box, Stack } from "@chakra-ui/layout";
+import { Box, Stack } from "@chakra-ui/react";
+import { useLocation } from "react-router-dom";
 import React, { lazy, useContext, useEffect } from "react";
-import { useLocation } from "react-router";
 import { FileProps, IContext } from "../context";
 import useUnfold from "../../../hooks/useUnfold";
 import request from "../../../utils/public";
@@ -33,13 +33,13 @@ const Office = ({ file }: FileProps) => {
     {
       name: "office",
       url: `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(
-        url
+        url,
       )}`,
     },
     {
       name: "google",
       url: `https://docs.google.com/gview?url=${encodeURIComponent(
-        url
+        url,
       )}&embedded=true`,
     },
   ];
@@ -107,7 +107,7 @@ const Office = ({ file }: FileProps) => {
                   src={preview.url}
                   frameBorder="0"
                 />
-              )
+              ),
           )}
         </Box>
       )}
diff --git a/src/pages/manage/login.tsx b/src/pages/manage/login.tsx
index 0a41ddb..778d055 100644
--- a/src/pages/manage/login.tsx
+++ b/src/pages/manage/login.tsx
@@ -9,7 +9,7 @@ import {
 } from "@chakra-ui/react";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router";
+import { useHistory } from "react-router-dom";
 import admin, { changeToken } from "../../utils/admin";
 
 const Login = () => {
diff --git a/src/theme.ts b/src/theme.ts
index 20e5bfe..dd0b277 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -53,7 +53,7 @@ const overrides: ThemeOverride = {
 
 const theme = extendTheme(
   overrides,
-  withDefaultColorScheme({ colorScheme: "twitter" })
+  withDefaultColorScheme({ colorScheme: "twitter" }),
 );
 
 export default theme;
diff --git a/tsconfig.json b/tsconfig.json
index 22a4fcb..ec5b436 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,7 +13,11 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react",
+    "baseUrl": "./",
+    "paths": {
+      "~/*": ["./src/*"]
+    }
   },
   "include": ["./src"]
 }
diff --git a/vite.config.ts b/vite.config.ts
index e37f35c..46f0f02 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,22 +2,31 @@ import { defineConfig } from "vite";
 import reactRefresh from "@vitejs/plugin-react-refresh";
 import pluginRewriteAll from "vite-plugin-rewrite-all";
 import { useDynamicPublicPath } from "vite-plugin-dynamic-publicpath";
+import path from "path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   base: "",
+  resolve: {
+    alias: {
+      "~": path.resolve(__dirname, "src"),
+    },
+  },
+
   plugins: [
     reactRefresh(),
     pluginRewriteAll(),
     useDynamicPublicPath(),
   ],
+
   build: {
     target: "es2015",
   },
+  
   define: {
     "process.env": {},
   },
-  server:{
-    host: "0.0.0.0"
-  }
+  server: {
+    host: "0.0.0.0",
+  },
 });