diff --git a/src/index.tsx b/src/index.tsx
index bea67b9..3fc2b57 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,9 +2,9 @@ import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { createRoot } from 'react-dom/client';
 import { MantineProvider } from '@mantine/core';
-import App from './views/App';
-import { store } from './views/store';
 import { Provider } from 'react-redux';
+import App from '@/views/App';
+import { store } from '@/views/store';
 
 const container = document.getElementById('app')!;
 const root = createRoot(container); // createRoot(container!) if you use TypeScript
diff --git a/src/views/App.tsx b/src/views/App.tsx
index 7ec8a67..4af902c 100644
--- a/src/views/App.tsx
+++ b/src/views/App.tsx
@@ -3,7 +3,7 @@ import {
     AppShell,
     useMantineTheme,
 } from '@mantine/core';
-import ChatPanel from './ChatPanel';
+import ChatPanel from '@/views/ChatPanel';
 
 export default function App() {
     const theme = useMantineTheme();
diff --git a/src/views/ChatPanel.tsx b/src/views/ChatPanel.tsx
index b462ad9..a123dab 100644
--- a/src/views/ChatPanel.tsx
+++ b/src/views/ChatPanel.tsx
@@ -5,8 +5,8 @@ import { ScrollArea } from '@mantine/core';
 import { Button } from '@mantine/core';
 import { useListState, useResizeObserver, useTimeout, useViewportSize } from '@mantine/hooks';
 import { IconPlayerStop, IconRotateDot } from '@tabler/icons-react';
-import messageUtil from '../util/MessageUtil';
-import { useAppDispatch, useAppSelector } from './hooks';
+import messageUtil from '@/util/MessageUtil';
+import { useAppDispatch, useAppSelector } from '@/views/hooks';
 
 import {
     setValue
diff --git a/src/views/CodeBlock.tsx b/src/views/CodeBlock.tsx
index ea7b5ee..4fa69c0 100644
--- a/src/views/CodeBlock.tsx
+++ b/src/views/CodeBlock.tsx
@@ -5,7 +5,7 @@ import ReactMarkdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { okaidia } from "react-syntax-highlighter/dist/esm/styles/prism";
 
-import messageUtil from '../util/MessageUtil';
+import messageUtil from '@/util/MessageUtil';
 
 const CodeBlock = (props: any) => {
     const { messageText } = props;
diff --git a/src/views/InputMessage.tsx b/src/views/InputMessage.tsx
index b221ef2..2c7a05d 100644
--- a/src/views/InputMessage.tsx
+++ b/src/views/InputMessage.tsx
@@ -3,8 +3,8 @@ import { useListState, useResizeObserver } from "@mantine/hooks";
 import { IconGitBranch, IconBook, IconX, IconSquareRoundedPlus, IconSend } from "@tabler/icons-react";
 import React, { useState, useEffect } from "react";
 import { IconGitBranchChecked, IconShellCommand, IconMouseRightClick } from "./Icons";
-import messageUtil from '../util/MessageUtil';
-import { useAppDispatch, useAppSelector } from './hooks';
+import messageUtil from '@/util/MessageUtil';
+import { useAppDispatch, useAppSelector } from '@/views/hooks';
 
 import {
     setValue,
diff --git a/src/views/MessageContainer.tsx b/src/views/MessageContainer.tsx
index 0e6330a..baa34fb 100644
--- a/src/views/MessageContainer.tsx
+++ b/src/views/MessageContainer.tsx
@@ -1,15 +1,15 @@
 import { keyframes } from "@emotion/react";
 import { Center, Text, Flex, Avatar, Accordion, Box, Stack, Container, Divider, ActionIcon, Tooltip } from "@mantine/core";
 import React from "react";
-import CodeBlock from "./CodeBlock";
+import CodeBlock from "@/views/CodeBlock";
 
 // @ts-ignore
-import SvgAvatarDevChat from './avatar_devchat.svg';
+import SvgAvatarDevChat from '@/views/avatar_devchat.svg';
 // @ts-ignore
-import SvgAvatarUser from './avatar_spaceman.png';
+import SvgAvatarUser from '@/views/avatar_spaceman.png';
 import { IconCheck, IconCopy } from "@tabler/icons-react";
 
-import { useAppDispatch, useAppSelector } from './hooks';
+import { useAppDispatch, useAppSelector } from '@/views/hooks';
 import {
     selectGenerating,
     selectResponsed,
diff --git a/src/views/chatSlice.ts b/src/views/chatSlice.ts
index 12cae32..70bd258 100644
--- a/src/views/chatSlice.ts
+++ b/src/views/chatSlice.ts
@@ -1,6 +1,6 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
-import messageUtil from '../util/MessageUtil';
-import type { RootState } from './store';
+import messageUtil from '@/util/MessageUtil';
+import type { RootState } from '@/views/store';
 
 export const fetchHistoryMessages = createAsyncThunk<{ command: string; entries: [] }>('input/fetchHistoryMessages', async () => {
     return new Promise((resolve, reject) => {
diff --git a/src/views/hooks.ts b/src/views/hooks.ts
index 313e2db..0950fd5 100644
--- a/src/views/hooks.ts
+++ b/src/views/hooks.ts
@@ -1,5 +1,5 @@
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
-import type { RootState, AppDispatch } from './store';
+import type { RootState, AppDispatch } from '@/views/store';
 
 export const useAppDispatch: () => AppDispatch = useDispatch;
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
diff --git a/src/views/inputSlice.ts b/src/views/inputSlice.ts
index 7ffebda..d2ce7af 100644
--- a/src/views/inputSlice.ts
+++ b/src/views/inputSlice.ts
@@ -1,6 +1,6 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
-import type { RootState } from './store';
-import messageUtil from '../util/MessageUtil';
+import type { RootState } from '@/views/store';
+import messageUtil from '@/util/MessageUtil';
 
 export const fetchContextMenus = createAsyncThunk('input/fetchContextMenus', async () => {
     return new Promise((resolve, reject) => {
diff --git a/src/views/store.ts b/src/views/store.ts
index daec33b..0f41c36 100644
--- a/src/views/store.ts
+++ b/src/views/store.ts
@@ -1,6 +1,6 @@
 import { configureStore } from '@reduxjs/toolkit';
-import inputReducer from './inputSlice';
-import chatReducer from './chatSlice';
+import inputReducer from '@/views/inputSlice';
+import chatReducer from '@/views/chatSlice';
 
 export const store = configureStore({
   reducer: {
diff --git a/tsconfig.json b/tsconfig.json
index 06bef2a..53ba033 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,7 +13,12 @@
 		"strict": true,
 		"jsx": "react",
 		"esModuleInterop": true,
-		"noImplicitAny": false
+		"noImplicitAny": false,
+		"paths": {
+			"@/*": [
+				"./src/*"
+			]
+		}
 	},
 	"exclude": [
 		"test"
diff --git a/webpack.config.js b/webpack.config.js
index 9762645..c5ee5b2 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -75,7 +75,10 @@ const webviewConfig = {
     filename: 'index.js',
   },
   resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.json']
+    extensions: ['.ts', '.tsx', '.js', '.json'],
+    alias: {
+      '@': path.resolve(__dirname, 'src/')
+    },
   },
   module: {
     rules: [