diff --git a/frontend/jsconfig.json b/frontend/jsconfig.json
index cffec62896576101011aa997f7c0d466eb76c183..c8cc81fdbe7b371d7ae17b7fb3ccb773e1a23d84 100644
--- a/frontend/jsconfig.json
+++ b/frontend/jsconfig.json
@@ -2,6 +2,11 @@
   "compilerOptions": {
     "module": "commonjs",
     "target": "esnext",
-    "jsx": "react"
+    "jsx": "react",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+    }
   }
 }
\ No newline at end of file
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 2b8a645b3ad06cbe6e1f5703ed3af3e19fe436bb..558e8ae3f78621cfbefe0ebfbb9921fcf4fcb2e2 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,42 +1,40 @@
 import React, { lazy, Suspense } from "react";
 import { Routes, Route } from "react-router-dom";
-import { ContextWrapper } from "./AuthContext";
+import { ContextWrapper } from "@/AuthContext";
 import PrivateRoute, {
   AdminRoute,
   ManagerRoute,
-} from "./components/PrivateRoute";
+} from "@/components/PrivateRoute";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
-import Login from "./pages/Login";
+import Login from "@/pages/Login";
 
-const Main = lazy(() => import("./pages/Main"));
-const InvitePage = lazy(() => import("./pages/Invite"));
-const WorkspaceChat = lazy(() => import("./pages/WorkspaceChat"));
-const AdminUsers = lazy(() => import("./pages/Admin/Users"));
-const AdminInvites = lazy(() => import("./pages/Admin/Invitations"));
-const AdminWorkspaces = lazy(() => import("./pages/Admin/Workspaces"));
-const AdminSystem = lazy(() => import("./pages/Admin/System"));
-const GeneralChats = lazy(() => import("./pages/GeneralSettings/Chats"));
+const Main = lazy(() => import("@/pages/Main"));
+const InvitePage = lazy(() => import("@/pages/Invite"));
+const WorkspaceChat = lazy(() => import("@/pages/WorkspaceChat"));
+const AdminUsers = lazy(() => import("@/pages/Admin/Users"));
+const AdminInvites = lazy(() => import("@/pages/Admin/Invitations"));
+const AdminWorkspaces = lazy(() => import("@/pages/Admin/Workspaces"));
+const AdminSystem = lazy(() => import("@/pages/Admin/System"));
+const GeneralChats = lazy(() => import("@/pages/GeneralSettings/Chats"));
 const GeneralAppearance = lazy(() =>
-  import("./pages/GeneralSettings/Appearance")
+  import("@/pages/GeneralSettings/Appearance")
 );
-const GeneralApiKeys = lazy(() => import("./pages/GeneralSettings/ApiKeys"));
-
+const GeneralApiKeys = lazy(() => import("@/pages/GeneralSettings/ApiKeys"));
 const GeneralLLMPreference = lazy(() =>
-  import("./pages/GeneralSettings/LLMPreference")
+  import("@/pages/GeneralSettings/LLMPreference")
 );
 const GeneralEmbeddingPreference = lazy(() =>
-  import("./pages/GeneralSettings/EmbeddingPreference")
+  import("@/pages/GeneralSettings/EmbeddingPreference")
 );
 const GeneralVectorDatabase = lazy(() =>
-  import("./pages/GeneralSettings/VectorDatabase")
+  import("@/pages/GeneralSettings/VectorDatabase")
 );
 const GeneralExportImport = lazy(() =>
-  import("./pages/GeneralSettings/ExportImport")
+  import("@/pages/GeneralSettings/ExportImport")
 );
-const GeneralSecurity = lazy(() => import("./pages/GeneralSettings/Security"));
-
-const OnboardingFlow = lazy(() => import("./pages/OnboardingFlow"));
+const GeneralSecurity = lazy(() => import("@/pages/GeneralSettings/Security"));
+const OnboardingFlow = lazy(() => import("@/pages/OnboardingFlow"));
 
 export default function App() {
   return (
diff --git a/frontend/src/AuthContext.jsx b/frontend/src/AuthContext.jsx
index 23e25a358e492cb14fb6a6469eb5d97892ecb1fe..34ec0cff7e6aeec212e11508b9cf6331d0c168b6 100644
--- a/frontend/src/AuthContext.jsx
+++ b/frontend/src/AuthContext.jsx
@@ -1,5 +1,5 @@
 import React, { useState, createContext } from "react";
-import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "./utils/constants";
+import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "@/utils/constants";
 
 export const AuthContext = createContext(null);
 export function ContextWrapper(props) {
diff --git a/frontend/src/components/ChatBubble/index.jsx b/frontend/src/components/ChatBubble/index.jsx
index f5e9475e9627c588e654ceee39ae6ec55844adc4..72002ab292e435214172392b05e38603414ad2d2 100644
--- a/frontend/src/components/ChatBubble/index.jsx
+++ b/frontend/src/components/ChatBubble/index.jsx
@@ -1,10 +1,7 @@
 import React from "react";
 import Jazzicon from "../UserIcon";
-import { userFromStorage } from "../../utils/request";
-import {
-  AI_BACKGROUND_COLOR,
-  USER_BACKGROUND_COLOR,
-} from "../../utils/constants";
+import { userFromStorage } from "@/utils/request";
+import { AI_BACKGROUND_COLOR, USER_BACKGROUND_COLOR } from "@/utils/constants";
 
 export default function ChatBubble({ message, type, popMsg }) {
   const isUser = type === "user";
diff --git a/frontend/src/components/DefaultChat/index.jsx b/frontend/src/components/DefaultChat/index.jsx
index 081ce172673c1cb6b41f73646094f5aae9b7c432..ca29b4700e9b789faa8574f3a231f8917c4db7e7 100644
--- a/frontend/src/components/DefaultChat/index.jsx
+++ b/frontend/src/components/DefaultChat/index.jsx
@@ -5,21 +5,17 @@ import {
   EnvelopeSimple,
   Plus,
 } from "@phosphor-icons/react";
-
 import NewWorkspaceModal, {
   useNewWorkspaceModal,
 } from "../Modals/NewWorkspace";
-import paths from "../../utils/paths";
+import paths from "@/utils/paths";
 import { isMobile } from "react-device-detect";
 import { SidebarMobileHeader } from "../Sidebar";
 import ChatBubble from "../ChatBubble";
-import System from "../../models/system";
+import System from "@/models/system";
 import Jazzicon from "../UserIcon";
-import { userFromStorage } from "../../utils/request";
-import {
-  AI_BACKGROUND_COLOR,
-  USER_BACKGROUND_COLOR,
-} from "../../utils/constants";
+import { userFromStorage } from "@/utils/request";
+import { AI_BACKGROUND_COLOR, USER_BACKGROUND_COLOR } from "@/utils/constants";
 
 export default function DefaultChatContainer() {
   const [mockMsgs, setMockMessages] = useState([]);
diff --git a/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
index 109da0e4f92fa770d8e7fc2b082ae80ce1915634..73b8a5df892e5db72ab57d15bcdd8c06f81d137a 100644
--- a/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import System from "../../../models/system";
+import System from "@/models/system";
 
 export default function LocalAiOptions({ settings }) {
   const [basePathValue, setBasePathValue] = useState(
diff --git a/frontend/src/components/LLMSelection/AnthropicAiOptions/index.jsx b/frontend/src/components/LLMSelection/AnthropicAiOptions/index.jsx
index 454ab5f985b981b12fd65980861e74ae0389e409..52bbbfd8977168cd1572db142fa2d6fe52271d8b 100644
--- a/frontend/src/components/LLMSelection/AnthropicAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/AnthropicAiOptions/index.jsx
@@ -1,5 +1,5 @@
 import { Info } from "@phosphor-icons/react";
-import paths from "../../../utils/paths";
+import paths from "@/utils/paths";
 
 export default function AnthropicAiOptions({ settings, showAlert = false }) {
   return (
diff --git a/frontend/src/components/LLMSelection/LMStudioOptions/index.jsx b/frontend/src/components/LLMSelection/LMStudioOptions/index.jsx
index 883b6e8ef9eb758c1e7f425fecd7c6ef06048044..7e9e8a8b6d608c17dc4cc4073f331156e96beda7 100644
--- a/frontend/src/components/LLMSelection/LMStudioOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/LMStudioOptions/index.jsx
@@ -1,5 +1,5 @@
 import { Info } from "@phosphor-icons/react";
-import paths from "../../../utils/paths";
+import paths from "@/utils/paths";
 
 export default function LMStudioOptions({ settings, showAlert = false }) {
   return (
diff --git a/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx b/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx
index 8adad7e50e383eb6b08b9443db8db201ae2d8716..846c378374edd3effbf3ca9534db0af8320cc5a5 100644
--- a/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { Info } from "@phosphor-icons/react";
-import paths from "../../../utils/paths";
-import System from "../../../models/system";
+import paths from "@/utils/paths";
+import System from "@/models/system";
 
 export default function LocalAiOptions({ settings, showAlert = false }) {
   const [basePathValue, setBasePathValue] = useState(settings?.LocalAiBasePath);
diff --git a/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx b/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx
index 0e6a890ade32de2fbff8419d47b6f29ea99632f8..d9ca3f29708fca47fe6eefa0a78b165c95339627 100644
--- a/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import System from "../../../models/system";
+import System from "@/models/system";
 
 export default function OpenAiOptions({ settings }) {
   const [inputValue, setInputValue] = useState(settings?.OpenAiKey);
diff --git a/frontend/src/components/Modals/NewWorkspace.jsx b/frontend/src/components/Modals/NewWorkspace.jsx
index fb485040451c5e0efff026488e2a7627a780ec41..4afd0faeeb1b2af1cc332ed877bc2ad90419cf7a 100644
--- a/frontend/src/components/Modals/NewWorkspace.jsx
+++ b/frontend/src/components/Modals/NewWorkspace.jsx
@@ -1,7 +1,7 @@
 import React, { useRef, useState } from "react";
 import { X } from "@phosphor-icons/react";
-import Workspace from "../../models/workspace";
-import paths from "../../utils/paths";
+import Workspace from "@/models/workspace";
+import paths from "@/utils/paths";
 
 const noop = () => false;
 export default function NewWorkspaceModal({ hideModal = noop }) {
diff --git a/frontend/src/components/PrivateRoute/index.jsx b/frontend/src/components/PrivateRoute/index.jsx
index 7ca949b26aa0574979253f3ce874d774a3d1f865..ed2b833045618f54d8369fd3c1e9721f1bba0da1 100644
--- a/frontend/src/components/PrivateRoute/index.jsx
+++ b/frontend/src/components/PrivateRoute/index.jsx
@@ -1,11 +1,11 @@
 import { useEffect, useState } from "react";
 import { Navigate } from "react-router-dom";
 import { FullScreenLoader } from "../Preloader";
-import validateSessionTokenForUser from "../../utils/session";
-import paths from "../../utils/paths";
-import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "../../utils/constants";
-import { userFromStorage } from "../../utils/request";
-import System from "../../models/system";
+import validateSessionTokenForUser from "@/utils/session";
+import paths from "@/utils/paths";
+import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "@/utils/constants";
+import { userFromStorage } from "@/utils/request";
+import System from "@/models/system";
 import UserMenu from "../UserMenu";
 
 // Used only for Multi-user mode only as we permission specific pages based on auth role.
diff --git a/frontend/src/components/SettingsSidebar/index.jsx b/frontend/src/components/SettingsSidebar/index.jsx
index 89c71df30a8808e9131c3c3337ca98ca66f05777..e599ee2b20938ba2f25b78bead79399d085637e9 100644
--- a/frontend/src/components/SettingsSidebar/index.jsx
+++ b/frontend/src/components/SettingsSidebar/index.jsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useRef, useState } from "react";
 // import IndexCount from "../Sidebar/IndexCount";
 // import LLMStatus from "../Sidebar/LLMStatus";
-import paths from "../../utils/paths";
-import useLogo from "../../hooks/useLogo";
+import paths from "@/utils/paths";
+import useLogo from "@/hooks/useLogo";
 import {
   DiscordLogo,
   EnvelopeSimple,
@@ -23,8 +23,8 @@ import {
   List,
   FileCode,
 } from "@phosphor-icons/react";
-import useUser from "../../hooks/useUser";
-import { USER_BACKGROUND_COLOR } from "../../utils/constants";
+import useUser from "@/hooks/useUser";
+import { USER_BACKGROUND_COLOR } from "@/utils/constants";
 
 export default function SettingsSidebar() {
   const { logo } = useLogo();
diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
index fe14bf9f2ca6b58f8396c9a4de22c15bbc9a1aff..cefd6b977793abd55056e3c1a1a96bfbc8253b08 100644
--- a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
+++ b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
@@ -1,15 +1,15 @@
 import React, { useState, useEffect, useCallback } from "react";
 import * as Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
-import Workspace from "../../../models/workspace";
+import Workspace from "@/models/workspace";
 import ManageWorkspace, {
   useManageWorkspaceModal,
 } from "../../Modals/MangeWorkspace";
-import paths from "../../../utils/paths";
+import paths from "@/utils/paths";
 import { useParams } from "react-router-dom";
 import { GearSix, SquaresFour } from "@phosphor-icons/react";
 import truncate from "truncate";
-import useUser from "../../../hooks/useUser";
+import useUser from "@/hooks/useUser";
 
 export default function ActiveWorkspaces() {
   const { slug } = useParams();
diff --git a/frontend/src/components/Sidebar/IndexCount.jsx b/frontend/src/components/Sidebar/IndexCount.jsx
index a31a1b72b60db48f3cfacb0d3b36116ffb421e23..9e0e126c605d52fed581a8e729a1f679c440d3f7 100644
--- a/frontend/src/components/Sidebar/IndexCount.jsx
+++ b/frontend/src/components/Sidebar/IndexCount.jsx
@@ -1,7 +1,7 @@
 import pluralize from "pluralize";
 import React, { useEffect, useState } from "react";
-import System from "../../models/system";
-import { numberWithCommas } from "../../utils/numbers";
+import System from "@/models/system";
+import { numberWithCommas } from "@/utils/numbers";
 
 export default function IndexCount() {
   const [indexes, setIndexes] = useState(null);
diff --git a/frontend/src/components/Sidebar/LLMStatus.jsx b/frontend/src/components/Sidebar/LLMStatus.jsx
index 553b7d4e027d858bb9a80a76e8a1c2ac7e9a8692..733dcb1e773fe720becc62389ddc60b21062b44a 100644
--- a/frontend/src/components/Sidebar/LLMStatus.jsx
+++ b/frontend/src/components/Sidebar/LLMStatus.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { WarningCircle, Circle } from "@phosphor-icons/react";
-import System from "../../models/system";
+import System from "@/models/system";
 
 export default function LLMStatus() {
   const [status, setStatus] = useState(null);
diff --git a/frontend/src/components/Sidebar/index.jsx b/frontend/src/components/Sidebar/index.jsx
index cbee14ae607e2d024a27918acf124590b6a39c62..ac92f4830f3dc42fe1841b92532656f6869e9703 100644
--- a/frontend/src/components/Sidebar/index.jsx
+++ b/frontend/src/components/Sidebar/index.jsx
@@ -12,10 +12,10 @@ import NewWorkspaceModal, {
   useNewWorkspaceModal,
 } from "../Modals/NewWorkspace";
 import ActiveWorkspaces from "./ActiveWorkspaces";
-import paths from "../../utils/paths";
-import { USER_BACKGROUND_COLOR } from "../../utils/constants";
-import useLogo from "../../hooks/useLogo";
-import useUser from "../../hooks/useUser";
+import paths from "@/utils/paths";
+import { USER_BACKGROUND_COLOR } from "@/utils/constants";
+import useLogo from "@/hooks/useLogo";
+import useUser from "@/hooks/useUser";
 
 export default function Sidebar() {
   const { user } = useUser();
diff --git a/frontend/src/components/UserMenu/index.jsx b/frontend/src/components/UserMenu/index.jsx
index 6a549f82029f8b606cb92599af49c99d3f15f5f5..8bfc1b9346a4820c2f022d055fd885284ae615f0 100644
--- a/frontend/src/components/UserMenu/index.jsx
+++ b/frontend/src/components/UserMenu/index.jsx
@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useRef } from "react";
 import { isMobile } from "react-device-detect";
-import paths from "../../utils/paths";
-import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "../../utils/constants";
+import paths from "@/utils/paths";
+import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "@/utils/constants";
 import { Person, SignOut } from "@phosphor-icons/react";
-import { userFromStorage } from "../../utils/request";
+import { userFromStorage } from "@/utils/request";
 
 export default function UserMenu({ children }) {
   if (isMobile) return <>{children}</>;
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
index 6155e762720ac856704ba529661e8983aaab9a11..f0605a3721057e916ec05b760277a5201352f310 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
@@ -1,13 +1,10 @@
 import { memo, forwardRef } from "react";
 import { Warning } from "@phosphor-icons/react";
 import Jazzicon from "../../../../UserIcon";
-import renderMarkdown from "../../../../../utils/chat/markdown";
-import { userFromStorage } from "../../../../../utils/request";
+import renderMarkdown from "@/utils/chat/markdown";
+import { userFromStorage } from "@/utils/request";
 import Citations from "../Citation";
-import {
-  AI_BACKGROUND_COLOR,
-  USER_BACKGROUND_COLOR,
-} from "../../../../../utils/constants";
+import { AI_BACKGROUND_COLOR, USER_BACKGROUND_COLOR } from "@/utils/constants";
 import { v4 } from "uuid";
 
 const HistoricalMessage = forwardRef(
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx
index a65eebd5fb5455b4818c2bbc45cd0295d7753b7d..a219f1202c0be3def739a8dcc59e457b4ee7ace3 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx
@@ -1,7 +1,7 @@
 import { forwardRef, memo } from "react";
 import { Warning } from "@phosphor-icons/react";
 import Jazzicon from "../../../../UserIcon";
-import renderMarkdown from "../../../../../utils/chat/markdown";
+import renderMarkdown from "@/utils/chat/markdown";
 import Citations from "../Citation";
 
 const PromptReply = forwardRef(
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
index 22dbdf32057bfc336593a2780d3efd611deb9692..14daff8095e2a871d2c38ea94573ccec8d935cd1 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
@@ -10,7 +10,7 @@ import { isMobile } from "react-device-detect";
 import ManageWorkspace, {
   useManageWorkspaceModal,
 } from "../../../Modals/MangeWorkspace";
-import useUser from "../../../../hooks/useUser";
+import useUser from "@/hooks/useUser";
 
 export default function PromptInput({
   workspace,
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx
index 0096aadfe94dc8921b0c407b986d962e5cfdc768..34ae8de9af939f530fcd4fc47ec187f9522e32ed 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx
@@ -1,8 +1,8 @@
 import { useState, useEffect } from "react";
 import ChatHistory from "./ChatHistory";
 import PromptInput from "./PromptInput";
-import Workspace from "../../../models/workspace";
-import handleChat from "../../../utils/chat";
+import Workspace from "@/models/workspace";
+import handleChat from "@/utils/chat";
 import { isMobile } from "react-device-detect";
 import { SidebarMobileHeader } from "../../Sidebar";
 
diff --git a/frontend/src/components/WorkspaceChat/index.jsx b/frontend/src/components/WorkspaceChat/index.jsx
index 98a77a4255b906265ad629c888b38d50545e9b21..3e129c2a6a95f512b8e68ad4cc6ec6dbeb7080cb 100644
--- a/frontend/src/components/WorkspaceChat/index.jsx
+++ b/frontend/src/components/WorkspaceChat/index.jsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
-import Workspace from "../../models/workspace";
+import Workspace from "@/models/workspace";
 import LoadingChat from "./LoadingChat";
 import ChatContainer from "./ChatContainer";
-import paths from "../../utils/paths";
+import paths from "@/utils/paths";
 
 export default function WorkspaceChat({ loading, workspace }) {
   const [history, setHistory] = useState([]);
diff --git a/frontend/src/hooks/useLogo.js b/frontend/src/hooks/useLogo.js
index e4ecd5e877e96966349d1a1b0d3357c3e8d5918e..f03d20981c59f5a4e20ad2a9331d29cc3be577bc 100644
--- a/frontend/src/hooks/useLogo.js
+++ b/frontend/src/hooks/useLogo.js
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import System from "../models/system";
-import AnythingLLM from "../media/logo/anything-llm.png";
+import System from "@/models/system";
+import AnythingLLM from "@/media/logo/anything-llm.png";
 
 export default function useLogo() {
   const [logo, setLogo] = useState("");
diff --git a/frontend/src/hooks/useUser.js b/frontend/src/hooks/useUser.js
index c3feb04bb8f37f1bae161a6bc2a7ccad51af2ae1..2a753dce9344439cf86ae1452d00dfbffcf30707 100644
--- a/frontend/src/hooks/useUser.js
+++ b/frontend/src/hooks/useUser.js
@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { AuthContext } from "../AuthContext";
+import { AuthContext } from "@/AuthContext";
 
 // interface IStore {
 //   store: {
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 76206a40562fc2038064c429ca25544819f650fd..bb415f3a7ad7b2816c8f75651f5716a516d4bb41 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,8 +1,8 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter as Router } from "react-router-dom";
-import App from "./App.jsx";
-import "./index.css";
+import App from "@/App.jsx";
+import "@/index.css";
 const isDev = process.env.NODE_ENV !== "production";
 const REACTWRAP = isDev ? React.Fragment : React.StrictMode;
 
diff --git a/frontend/src/models/admin.js b/frontend/src/models/admin.js
index ade884d58fcc5c2cc5b330b785d0fbed6b0ae15a..0798a3e73c293f038931d266216ddc393590b014 100644
--- a/frontend/src/models/admin.js
+++ b/frontend/src/models/admin.js
@@ -1,5 +1,5 @@
-import { API_BASE } from "../utils/constants";
-import { baseHeaders } from "../utils/request";
+import { API_BASE } from "@/utils/constants";
+import { baseHeaders } from "@/utils/request";
 
 const Admin = {
   // User Management
diff --git a/frontend/src/models/invite.js b/frontend/src/models/invite.js
index c5f3e3c4baa4a95b6b2a7374030704f5bcf499ee..d36fb8592aed94c586b0daec74466f6f9ee4a123 100644
--- a/frontend/src/models/invite.js
+++ b/frontend/src/models/invite.js
@@ -1,4 +1,4 @@
-import { API_BASE } from "../utils/constants";
+import { API_BASE } from "@/utils/constants";
 
 const Invite = {
   checkInvite: async (inviteCode) => {
diff --git a/frontend/src/models/system.js b/frontend/src/models/system.js
index f69636a4289eed183e504048140641b239da92d4..2ef4eebbfbbe525a3ffe2cab8ab9e9d0705451de 100644
--- a/frontend/src/models/system.js
+++ b/frontend/src/models/system.js
@@ -1,5 +1,5 @@
-import { API_BASE, AUTH_TIMESTAMP } from "../utils/constants";
-import { baseHeaders } from "../utils/request";
+import { API_BASE, AUTH_TIMESTAMP } from "@/utils/constants";
+import { baseHeaders } from "@/utils/request";
 
 const System = {
   ping: async function () {
diff --git a/frontend/src/models/workspace.js b/frontend/src/models/workspace.js
index 2990e55410bcce75d109bac90706f9c8a64af64c..aa0b9f744482b4d5009baf21b32c4cedf06f0acb 100644
--- a/frontend/src/models/workspace.js
+++ b/frontend/src/models/workspace.js
@@ -1,5 +1,5 @@
-import { API_BASE } from "../utils/constants";
-import { baseHeaders } from "../utils/request";
+import { API_BASE } from "@/utils/constants";
+import { baseHeaders } from "@/utils/request";
 import { fetchEventSource } from "@microsoft/fetch-event-source";
 import { v4 } from "uuid";
 
diff --git a/frontend/src/pages/Admin/Invitations/InviteRow/index.jsx b/frontend/src/pages/Admin/Invitations/InviteRow/index.jsx
index 68408d7e75970481572d0a5f4a0bc586b62cecc5..56ebf7dc90eaec25e89d06163d7b36dee87d3782 100644
--- a/frontend/src/pages/Admin/Invitations/InviteRow/index.jsx
+++ b/frontend/src/pages/Admin/Invitations/InviteRow/index.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { titleCase } from "text-case";
-import Admin from "../../../../models/admin";
+import Admin from "@/models/admin";
 import { Trash } from "@phosphor-icons/react";
 
 export default function InviteRow({ invite }) {
diff --git a/frontend/src/pages/Admin/Invitations/NewInviteModal/index.jsx b/frontend/src/pages/Admin/Invitations/NewInviteModal/index.jsx
index 81205f20d42fb8a289ee6ea6dca1f384a7533d33..54ae7e076cd8609564f4a3a91b16b452eb08bdf5 100644
--- a/frontend/src/pages/Admin/Invitations/NewInviteModal/index.jsx
+++ b/frontend/src/pages/Admin/Invitations/NewInviteModal/index.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { X } from "@phosphor-icons/react";
-import Admin from "../../../../models/admin";
+import Admin from "@/models/admin";
 
 const DIALOG_ID = `new-invite-modal`;
 
diff --git a/frontend/src/pages/Admin/Invitations/index.jsx b/frontend/src/pages/Admin/Invitations/index.jsx
index 699fa76e4fdcfdf6df9b931441b76b162de40f60..cf5b38d376920c1be9ba02dc686a69cf779d523e 100644
--- a/frontend/src/pages/Admin/Invitations/index.jsx
+++ b/frontend/src/pages/Admin/Invitations/index.jsx
@@ -1,13 +1,11 @@
 import { useEffect, useState } from "react";
-import Sidebar, {
-  SidebarMobileHeader,
-} from "../../../components/SettingsSidebar";
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
 import * as Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 import { EnvelopeSimple } from "@phosphor-icons/react";
-import usePrefersDarkMode from "../../../hooks/usePrefersDarkMode";
-import Admin from "../../../models/admin";
+import usePrefersDarkMode from "@/hooks/usePrefersDarkMode";
+import Admin from "@/models/admin";
 import InviteRow from "./InviteRow";
 import NewInviteModal, { NewInviteModalId } from "./NewInviteModal";
 
diff --git a/frontend/src/pages/Admin/System/index.jsx b/frontend/src/pages/Admin/System/index.jsx
index 4f77ba24ae217f358c8ac22d7baec2c2932c2796..c4c1b9ebdde857fa406bfa06815faa73ccacc01e 100644
--- a/frontend/src/pages/Admin/System/index.jsx
+++ b/frontend/src/pages/Admin/System/index.jsx
@@ -1,10 +1,8 @@
 import { useEffect, useState } from "react";
-import Sidebar, {
-  SidebarMobileHeader,
-} from "../../../components/SettingsSidebar";
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
-import Admin from "../../../models/admin";
-import showToast from "../../../utils/toast";
+import Admin from "@/models/admin";
+import showToast from "@/utils/toast";
 
 export default function AdminSystem() {
   const [saving, setSaving] = useState(false);
diff --git a/frontend/src/pages/Admin/Users/NewUserModal/index.jsx b/frontend/src/pages/Admin/Users/NewUserModal/index.jsx
index 8282070eb6bc079be4f8dfe0ec6db44e9e176bbc..d8c26d1e319e3bfcd769e22ec8491b0bb3f49bee 100644
--- a/frontend/src/pages/Admin/Users/NewUserModal/index.jsx
+++ b/frontend/src/pages/Admin/Users/NewUserModal/index.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { X } from "@phosphor-icons/react";
-import Admin from "../../../../models/admin";
-import { userFromStorage } from "../../../../utils/request";
+import Admin from "@/models/admin";
+import { userFromStorage } from "@/utils/request";
 import { RoleHintDisplay } from "..";
 
 const DIALOG_ID = `new-user-modal`;
diff --git a/frontend/src/pages/Admin/Users/UserRow/EditUserModal/index.jsx b/frontend/src/pages/Admin/Users/UserRow/EditUserModal/index.jsx
index 6b25f42ac69658fe9bd33b617fe07bbb5e02ad5c..4c3c2686ae86f6a0c5e216ba282fa419db0f0a7d 100644
--- a/frontend/src/pages/Admin/Users/UserRow/EditUserModal/index.jsx
+++ b/frontend/src/pages/Admin/Users/UserRow/EditUserModal/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { X } from "@phosphor-icons/react";
-import Admin from "../../../../../models/admin";
+import Admin from "@/models/admin";
 import { RoleHintDisplay } from "../..";
 
 export const EditUserModalId = (user) => `edit-user-${user.id}-modal`;
diff --git a/frontend/src/pages/Admin/Users/UserRow/index.jsx b/frontend/src/pages/Admin/Users/UserRow/index.jsx
index 5964b6bdf446c6ada37f6a90a00e0efc58518327..d734759fc673b8db9e42c1ffff2b65b1c94043a9 100644
--- a/frontend/src/pages/Admin/Users/UserRow/index.jsx
+++ b/frontend/src/pages/Admin/Users/UserRow/index.jsx
@@ -1,6 +1,6 @@
 import { useRef, useState } from "react";
 import { titleCase } from "text-case";
-import Admin from "../../../../models/admin";
+import Admin from "@/models/admin";
 import EditUserModal, { EditUserModalId } from "./EditUserModal";
 import { DotsThreeOutline } from "@phosphor-icons/react";
 
diff --git a/frontend/src/pages/Admin/Users/index.jsx b/frontend/src/pages/Admin/Users/index.jsx
index c1facda6175056b9576f407a62fc87989da3342f..b59bbe5761b76f94b35fbc9308e47fe38cec4aa4 100644
--- a/frontend/src/pages/Admin/Users/index.jsx
+++ b/frontend/src/pages/Admin/Users/index.jsx
@@ -1,14 +1,12 @@
 import { useEffect, useState } from "react";
-import Sidebar, {
-  SidebarMobileHeader,
-} from "../../../components/SettingsSidebar";
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
 import * as Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 import { UserPlus } from "@phosphor-icons/react";
-import Admin from "../../../models/admin";
+import Admin from "@/models/admin";
 import UserRow from "./UserRow";
-import useUser from "../../../hooks/useUser";
+import useUser from "@/hooks/useUser";
 import NewUserModal, { NewUserModalId } from "./NewUserModal";
 
 export default function AdminUsers() {
diff --git a/frontend/src/pages/Admin/Workspaces/NewWorkspaceModal/index.jsx b/frontend/src/pages/Admin/Workspaces/NewWorkspaceModal/index.jsx
index de33e4db25717189672cd4a126175a34426d7375..21d9faed46d1af945ec37dac81258af3a5eaa774 100644
--- a/frontend/src/pages/Admin/Workspaces/NewWorkspaceModal/index.jsx
+++ b/frontend/src/pages/Admin/Workspaces/NewWorkspaceModal/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { X } from "@phosphor-icons/react";
-import Admin from "../../../../models/admin";
+import Admin from "@/models/admin";
 const DIALOG_ID = `new-workspace-modal`;
 
 function hideModal() {
diff --git a/frontend/src/pages/Admin/Workspaces/WorkspaceRow/EditWorkspaceUsersModal/index.jsx b/frontend/src/pages/Admin/Workspaces/WorkspaceRow/EditWorkspaceUsersModal/index.jsx
index 108b9bbfe54695b30e0be10e5368fa749b4389d7..052f845b40aed86b6a3ab531eeffe24aad096c78 100644
--- a/frontend/src/pages/Admin/Workspaces/WorkspaceRow/EditWorkspaceUsersModal/index.jsx
+++ b/frontend/src/pages/Admin/Workspaces/WorkspaceRow/EditWorkspaceUsersModal/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { X } from "@phosphor-icons/react";
-import Admin from "../../../../../models/admin";
+import Admin from "@/models/admin";
 import { titleCase } from "text-case";
 
 export const EditWorkspaceUsersModalId = (workspace) =>
diff --git a/frontend/src/pages/Admin/Workspaces/WorkspaceRow/index.jsx b/frontend/src/pages/Admin/Workspaces/WorkspaceRow/index.jsx
index 6b181d4cd6f30fa9861f2223489082474f85b6f3..8c8969622a7a03588814bef538ada1618113c2e4 100644
--- a/frontend/src/pages/Admin/Workspaces/WorkspaceRow/index.jsx
+++ b/frontend/src/pages/Admin/Workspaces/WorkspaceRow/index.jsx
@@ -1,6 +1,6 @@
 import { useRef } from "react";
-import Admin from "../../../../models/admin";
-import paths from "../../../../utils/paths";
+import Admin from "@/models/admin";
+import paths from "@/utils/paths";
 import EditWorkspaceUsersModal, {
   EditWorkspaceUsersModalId,
 } from "./EditWorkspaceUsersModal";
diff --git a/frontend/src/pages/Admin/Workspaces/index.jsx b/frontend/src/pages/Admin/Workspaces/index.jsx
index e2217e4b690d59c921077c81a290877431fda2a6..c29c92ac295ba7b1d58566103075ee48aab940d0 100644
--- a/frontend/src/pages/Admin/Workspaces/index.jsx
+++ b/frontend/src/pages/Admin/Workspaces/index.jsx
@@ -1,13 +1,11 @@
 import { useEffect, useState } from "react";
-import Sidebar, {
-  SidebarMobileHeader,
-} from "../../../components/SettingsSidebar";
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
 import * as Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 import { BookOpen } from "@phosphor-icons/react";
-import usePrefersDarkMode from "../../../hooks/usePrefersDarkMode";
-import Admin from "../../../models/admin";
+import usePrefersDarkMode from "@/hooks/usePrefersDarkMode";
+import Admin from "@/models/admin";
 import WorkspaceRow from "./WorkspaceRow";
 import NewWorkspaceModal, { NewWorkspaceModalId } from "./NewWorkspaceModal";
 
diff --git a/frontend/src/pages/GeneralSettings/ApiKeys/ApiKeyRow/index.jsx b/frontend/src/pages/GeneralSettings/ApiKeys/ApiKeyRow/index.jsx
index 29657f3f34376b49c921ca1d327ab6300a4d291b..6b970bf3ef76284a511194aeae99a8733e37c3cf 100644
--- a/frontend/src/pages/GeneralSettings/ApiKeys/ApiKeyRow/index.jsx
+++ b/frontend/src/pages/GeneralSettings/ApiKeys/ApiKeyRow/index.jsx
@@ -1,9 +1,9 @@
 import { useEffect, useRef, useState } from "react";
-import Admin from "../../../../models/admin";
-import showToast from "../../../../utils/toast";
+import Admin from "@/models/admin";
+import showToast from "@/utils/toast";
 import { Trash } from "@phosphor-icons/react";
-import { userFromStorage } from "../../../../utils/request";
-import System from "../../../../models/system";
+import { userFromStorage } from "@/utils/request";
+import System from "@/models/system";
 
 export default function ApiKeyRow({ apiKey }) {
   const rowRef = useRef(null);
diff --git a/frontend/src/pages/GeneralSettings/ApiKeys/NewApiKeyModal/index.jsx b/frontend/src/pages/GeneralSettings/ApiKeys/NewApiKeyModal/index.jsx
index 665e78f4123c01bff5698c5bd3a9f3e520bba972..a4095ae9c73e9747b62f6739927f098d6af5e5ce 100644
--- a/frontend/src/pages/GeneralSettings/ApiKeys/NewApiKeyModal/index.jsx
+++ b/frontend/src/pages/GeneralSettings/ApiKeys/NewApiKeyModal/index.jsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
 import { X } from "@phosphor-icons/react";
-import Admin from "../../../../models/admin";
-import paths from "../../../../utils/paths";
-import { userFromStorage } from "../../../../utils/request";
-import System from "../../../../models/system";
+import Admin from "@/models/admin";
+import paths from "@/utils/paths";
+import { userFromStorage } from "@/utils/request";
+import System from "@/models/system";
 
 const DIALOG_ID = `new-api-key-modal`;
 
diff --git a/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx b/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
index 66026ed5b2d5559c71f16579a567bd2acb36e0f6..5ee5fd0a39f40db2a0a533d0f902a0efcf8efbb6 100644
--- a/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
+++ b/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
@@ -1,17 +1,15 @@
 import { useEffect, useState } from "react";
-import Sidebar, {
-  SidebarMobileHeader,
-} from "../../../components/SettingsSidebar";
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
 import * as Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 import { PlusCircle } from "@phosphor-icons/react";
-import Admin from "../../../models/admin";
+import Admin from "@/models/admin";
 import ApiKeyRow from "./ApiKeyRow";
 import NewApiKeyModal, { NewApiKeyModalId } from "./NewApiKeyModal";
-import paths from "../../../utils/paths";
-import { userFromStorage } from "../../../utils/request";
-import System from "../../../models/system";
+import paths from "@/utils/paths";
+import { userFromStorage } from "@/utils/request";
+import System from "@/models/system";
 
 export default function AdminApiKeys() {
   return (
diff --git a/frontend/src/pages/GeneralSettings/Appearance/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/index.jsx
index 107e57caeaadf107b9cf95cc264edfb6dcd43f6b..e823dd0b717136c4ad49c3c9b43b83e0d1036e90 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/index.jsx
@@ -1,14 +1,12 @@
 import React, { useState, useEffect } from "react";
-import Sidebar, {
-  SidebarMobileHeader,
-} from "../../../components/SettingsSidebar";
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
-import Admin from "../../../models/admin";
-import AnythingLLM from "../../../media/logo/anything-llm.png";
-import useLogo from "../../../hooks/useLogo";
-import System from "../../../models/system";
-import EditingChatBubble from "../../../components/EditingChatBubble";
-import showToast from "../../../utils/toast";
+import Admin from "@/models/admin";
+import AnythingLLM from "@/media/logo/anything-llm.png";
+import useLogo from "@/hooks/useLogo";
+import System from "@/models/system";
+import EditingChatBubble from "@/components/EditingChatBubble";
+import showToast from "@/utils/toast";
 import { Plus } from "@phosphor-icons/react";
 
 export default function Appearance() {
diff --git a/frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx b/frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx
index 96c3970d5a4607a58fe1382d99c69eaf763e84c4..23fc39d9ae09c5d1bb8030b0138650dd9250d301 100644
--- a/frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx
@@ -1,7 +1,7 @@
 import { useRef } from "react";
 import truncate from "truncate";
 import { X, Trash } from "@phosphor-icons/react";
-import System from "../../../../models/system";
+import System from "@/models/system";
 
 export default function ChatRow({ chat }) {
   const rowRef = useRef(null);
diff --git a/frontend/src/pages/GeneralSettings/Chats/index.jsx b/frontend/src/pages/GeneralSettings/Chats/index.jsx
index fbf041a06f7597b56d485c5264114479920d268b..d925232c3d2b975819fcdeff8c47621bb08a7646 100644
--- a/frontend/src/pages/GeneralSettings/Chats/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Chats/index.jsx
@@ -1,14 +1,12 @@
 import { useEffect, useState } from "react";
-import Sidebar, {
-  SidebarMobileHeader,
-} from "../../../components/SettingsSidebar";
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
 import * as Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
-import useQuery from "../../../hooks/useQuery";
+import useQuery from "@/hooks/useQuery";
 import ChatRow from "./ChatRow";
-import showToast from "../../../utils/toast";
-import System from "../../../models/system";
+import showToast from "@/utils/toast";
+import System from "@/models/system";
 
 const PAGE_SIZE = 20;
 export default function WorkspaceChats() {
diff --git a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
index 32efaa986aaac9a7d85c446c63d3bc991a76915b..0edcb1816f8cced45bb17a4ac416bbdf96d836d4 100644
--- a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
@@ -1,21 +1,19 @@
 import React, { useEffect, useState } from "react";
-import Sidebar, {
-  SidebarMobileHeader,
-} from "../../../components/SettingsSidebar";
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
-import System from "../../../models/system";
-import showToast from "../../../utils/toast";
-import AnythingLLMIcon from "../../../media/logo/anything-llm-icon.png";
-import OpenAiLogo from "../../../media/llmprovider/openai.png";
-import AzureOpenAiLogo from "../../../media/llmprovider/azure.png";
-import LocalAiLogo from "../../../media/llmprovider/localai.png";
-import PreLoader from "../../../components/Preloader";
-import LLMProviderOption from "../../../components/LLMSelection/LLMProviderOption";
-import ChangeWarningModal from "../../../components/ChangeWarning";
-import OpenAiOptions from "../../../components/EmbeddingSelection/OpenAiOptions";
-import AzureAiOptions from "../../../components/EmbeddingSelection/AzureAiOptions";
-import LocalAiOptions from "../../../components/EmbeddingSelection/LocalAiOptions";
-import NativeEmbeddingOptions from "../../../components/EmbeddingSelection/NativeEmbeddingOptions";
+import System from "@/models/system";
+import showToast from "@/utils/toast";
+import AnythingLLMIcon from "@/media/logo/anything-llm-icon.png";
+import OpenAiLogo from "@/media/llmprovider/openai.png";
+import AzureOpenAiLogo from "@/media/llmprovider/azure.png";
+import LocalAiLogo from "@/media/llmprovider/localai.png";
+import PreLoader from "@/components/Preloader";
+import LLMProviderOption from "@/components/LLMSelection/LLMProviderOption";
+import ChangeWarningModal from "@/components/ChangeWarning";
+import OpenAiOptions from "@/components/EmbeddingSelection/OpenAiOptions";
+import AzureAiOptions from "@/components/EmbeddingSelection/AzureAiOptions";
+import LocalAiOptions from "@/components/EmbeddingSelection/LocalAiOptions";
+import NativeEmbeddingOptions from "@/components/EmbeddingSelection/NativeEmbeddingOptions";
 
 export default function GeneralEmbeddingPreference() {
   const [saving, setSaving] = useState(false);
diff --git a/frontend/src/pages/GeneralSettings/ExportImport/index.jsx b/frontend/src/pages/GeneralSettings/ExportImport/index.jsx
index bd4c254e7bba34d94c0e35f3ffbaa94245b878e2..b6a9a608c6988f609d8bf156acdaaff13db03bd3 100644
--- a/frontend/src/pages/GeneralSettings/ExportImport/index.jsx
+++ b/frontend/src/pages/GeneralSettings/ExportImport/index.jsx
@@ -1,14 +1,11 @@
-import { useEffect, useRef, useState } from "react";
-import Sidebar, {
-  SidebarMobileHeader,
-} from "../../../components/SettingsSidebar";
+import { useRef, useState } from "react";
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
-import Admin from "../../../models/admin";
-import showToast from "../../../utils/toast";
+import showToast from "@/utils/toast";
 import { CloudArrowUp, DownloadSimple } from "@phosphor-icons/react";
-import System from "../../../models/system";
-import { API_BASE } from "../../../utils/constants";
-import paths from "../../../utils/paths";
+import System from "@/models/system";
+import { API_BASE } from "@/utils/constants";
+import paths from "@/utils/paths";
 
 export default function GeneralExportImport() {
   const hostname = window?.location?.hostname;
diff --git a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
index b3b1bdf4c77660a8423dd7b82aa02703f9f74a6a..80fe1c575ec24df8f0f822f19dd2c14a56be5dcc 100644
--- a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
@@ -1,22 +1,20 @@
 import React, { useEffect, useState } from "react";
-import Sidebar, {
-  SidebarMobileHeader,
-} from "../../../components/SettingsSidebar";
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
-import System from "../../../models/system";
-import showToast from "../../../utils/toast";
-import OpenAiLogo from "../../../media/llmprovider/openai.png";
-import AzureOpenAiLogo from "../../../media/llmprovider/azure.png";
-import AnthropicLogo from "../../../media/llmprovider/anthropic.png";
-import LMStudioLogo from "../../../media/llmprovider/lmstudio.png";
-import LocalAiLogo from "../../../media/llmprovider/localai.png";
-import PreLoader from "../../../components/Preloader";
-import LLMProviderOption from "../../../components/LLMSelection/LLMProviderOption";
-import OpenAiOptions from "../../../components/LLMSelection/OpenAiOptions";
-import AzureAiOptions from "../../../components/LLMSelection/AzureAiOptions";
-import AnthropicAiOptions from "../../../components/LLMSelection/AnthropicAiOptions";
-import LMStudioOptions from "../../../components/LLMSelection/LMStudioOptions";
-import LocalAiOptions from "../../../components/LLMSelection/LocalAiOptions";
+import System from "@/models/system";
+import showToast from "@/utils/toast";
+import OpenAiLogo from "@/media/llmprovider/openai.png";
+import AzureOpenAiLogo from "@/media/llmprovider/azure.png";
+import AnthropicLogo from "@/media/llmprovider/anthropic.png";
+import LMStudioLogo from "@/media/llmprovider/lmstudio.png";
+import LocalAiLogo from "@/media/llmprovider/localai.png";
+import PreLoader from "@/components/Preloader";
+import LLMProviderOption from "@/components/LLMSelection/LLMProviderOption";
+import OpenAiOptions from "@/components/LLMSelection/OpenAiOptions";
+import AzureAiOptions from "@/components/LLMSelection/AzureAiOptions";
+import AnthropicAiOptions from "@/components/LLMSelection/AnthropicAiOptions";
+import LMStudioOptions from "@/components/LLMSelection/LMStudioOptions";
+import LocalAiOptions from "@/components/LLMSelection/LocalAiOptions";
 
 export default function GeneralLLMPreference() {
   const [saving, setSaving] = useState(false);
diff --git a/frontend/src/pages/GeneralSettings/Security/index.jsx b/frontend/src/pages/GeneralSettings/Security/index.jsx
index 3183dabfc65f2a1e6104570c4e9beb91065d3c74..4c4cfc0a7d5509848e2c78fb81f1ba3af92f133d 100644
--- a/frontend/src/pages/GeneralSettings/Security/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Security/index.jsx
@@ -1,17 +1,11 @@
 import { useEffect, useState } from "react";
-import Sidebar, {
-  SidebarMobileHeader,
-} from "../../../components/SettingsSidebar";
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
-import showToast from "../../../utils/toast";
-import System from "../../../models/system";
-import paths from "../../../utils/paths";
-import {
-  AUTH_TIMESTAMP,
-  AUTH_TOKEN,
-  AUTH_USER,
-} from "../../../utils/constants";
-import PreLoader from "../../../components/Preloader";
+import showToast from "@/utils/toast";
+import System from "@/models/system";
+import paths from "@/utils/paths";
+import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "@/utils/constants";
+import PreLoader from "@/components/Preloader";
 
 export default function GeneralSecurity() {
   return (
diff --git a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
index f8b4374399bc44a33c8504e488e2afa41ca0838e..1635fef8b89a7577ee2f740e11616bb02df7d73e 100644
--- a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
+++ b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
@@ -1,18 +1,16 @@
 import React, { useState, useEffect } from "react";
-import Sidebar, {
-  SidebarMobileHeader,
-} from "../../../components/SettingsSidebar";
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
-import System from "../../../models/system";
-import showToast from "../../../utils/toast";
-import ChromaLogo from "../../../media/vectordbs/chroma.png";
-import PineconeLogo from "../../../media/vectordbs/pinecone.png";
-import LanceDbLogo from "../../../media/vectordbs/lancedb.png";
-import WeaviateLogo from "../../../media/vectordbs/weaviate.png";
-import QDrantLogo from "../../../media/vectordbs/qdrant.png";
-import PreLoader from "../../../components/Preloader";
-import VectorDBOption from "../../../components/VectorDBOption";
-import ChangeWarningModal from "../../../components/ChangeWarning";
+import System from "@/models/system";
+import showToast from "@/utils/toast";
+import ChromaLogo from "@/media/vectordbs/chroma.png";
+import PineconeLogo from "@/media/vectordbs/pinecone.png";
+import LanceDbLogo from "@/media/vectordbs/lancedb.png";
+import WeaviateLogo from "@/media/vectordbs/weaviate.png";
+import QDrantLogo from "@/media/vectordbs/qdrant.png";
+import PreLoader from "@/components/Preloader";
+import VectorDBOption from "@/components/VectorDBOption";
+import ChangeWarningModal from "@/components/ChangeWarning";
 
 export default function GeneralVectorDatabase() {
   const [saving, setSaving] = useState(false);
diff --git a/frontend/src/pages/Invite/NewUserModal/index.jsx b/frontend/src/pages/Invite/NewUserModal/index.jsx
index 39841190956dc111c15570d3fb5af2cf8e79541c..0733a3602175c9f8d92387608f9032e48603396c 100644
--- a/frontend/src/pages/Invite/NewUserModal/index.jsx
+++ b/frontend/src/pages/Invite/NewUserModal/index.jsx
@@ -1,9 +1,9 @@
 import React, { useState } from "react";
-import Invite from "../../../models/invite";
-import paths from "../../../utils/paths";
+import Invite from "@/models/invite";
+import paths from "@/utils/paths";
 import { useParams } from "react-router-dom";
-import { AUTH_TOKEN, AUTH_USER } from "../../../utils/constants";
-import System from "../../../models/system";
+import { AUTH_TOKEN, AUTH_USER } from "@/utils/constants";
+import System from "@/models/system";
 
 export default function NewUserModal() {
   const { code } = useParams();
diff --git a/frontend/src/pages/Invite/index.jsx b/frontend/src/pages/Invite/index.jsx
index 1ed25e79993bba6531ded38e5c091dd5aafe177a..e44ff23599fe4d6ffb10ec8301ae479b54a676e4 100644
--- a/frontend/src/pages/Invite/index.jsx
+++ b/frontend/src/pages/Invite/index.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import { FullScreenLoader } from "../../components/Preloader";
-import Invite from "../../models/invite";
+import { FullScreenLoader } from "@/components/Preloader";
+import Invite from "@/models/invite";
 import NewUserModal from "./NewUserModal";
 
 export default function InvitePage() {
diff --git a/frontend/src/pages/Login/index.jsx b/frontend/src/pages/Login/index.jsx
index d7d80926b2352d87ec399cabf2d84205670c486f..ec5950cbe8bfe237aae7ca91b1b65a423d4c668c 100644
--- a/frontend/src/pages/Login/index.jsx
+++ b/frontend/src/pages/Login/index.jsx
@@ -1,8 +1,6 @@
 import React from "react";
-import PasswordModal, {
-  usePasswordModal,
-} from "../../components/Modals/Password";
-import { FullScreenLoader } from "../../components/Preloader";
+import PasswordModal, { usePasswordModal } from "@/components/Modals/Password";
+import { FullScreenLoader } from "@/components/Preloader";
 
 export default function Login() {
   const { loading, mode } = usePasswordModal();
diff --git a/frontend/src/pages/Main/index.jsx b/frontend/src/pages/Main/index.jsx
index 5d79c5cab70b8bfec0196dc136f36249125e9793..d0b3cbf8ce1e00c112aab62da8493850622cf482 100644
--- a/frontend/src/pages/Main/index.jsx
+++ b/frontend/src/pages/Main/index.jsx
@@ -1,12 +1,10 @@
 import React from "react";
-import DefaultChatContainer from "../../components/DefaultChat";
-import Sidebar from "../../components/Sidebar";
-import PasswordModal, {
-  usePasswordModal,
-} from "../../components/Modals/Password";
+import DefaultChatContainer from "@/components/DefaultChat";
+import Sidebar from "@/components/Sidebar";
+import PasswordModal, { usePasswordModal } from "@/components/Modals/Password";
 import { isMobile } from "react-device-detect";
-import { FullScreenLoader } from "../../components/Preloader";
-import UserMenu from "../../components/UserMenu";
+import { FullScreenLoader } from "@/components/Preloader";
+import UserMenu from "@/components/UserMenu";
 
 export default function Main() {
   const { loading, requiresAuth, mode } = usePasswordModal();
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/AppearanceSetup/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/AppearanceSetup/index.jsx
index ed5c5579904342dd898a91d72da85eaa0896fb49..496a4ff4febb3ea48bc5ba3af46b053d553a0a7f 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/AppearanceSetup/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/AppearanceSetup/index.jsx
@@ -1,9 +1,9 @@
 import React, { memo, useEffect, useState } from "react";
-import System from "../../../../../models/system";
-import AnythingLLM from "../../../../../media/logo/anything-llm.png";
-import useLogo from "../../../../../hooks/useLogo";
+import System from "@/models/system";
+import AnythingLLM from "@/media/logo/anything-llm.png";
+import useLogo from "@/hooks/useLogo";
 import { Plus } from "@phosphor-icons/react";
-import showToast from "../../../../../utils/toast";
+import showToast from "@/utils/toast";
 
 function AppearanceSetup({ prevStep, nextStep }) {
   const { logo: _initLogo } = useLogo();
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/CreateFirstWorkspace/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/CreateFirstWorkspace/index.jsx
index c9fb442e9917ce030deb3cd4b7ef9a0bbce29cf8..3c9949f89ba3dd26ca252db4ad5718df74f62bcd 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/CreateFirstWorkspace/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/CreateFirstWorkspace/index.jsx
@@ -1,7 +1,7 @@
 import React, { memo } from "react";
 import { useNavigate } from "react-router-dom";
-import paths from "../../../../../utils/paths";
-import Workspace from "../../../../../models/workspace";
+import paths from "@/utils/paths";
+import Workspace from "@/models/workspace";
 
 function CreateFirstWorkspace() {
   const navigate = useNavigate();
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/DataHandling/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/DataHandling/index.jsx
index ebb9ae1ecf0d4dda19f47f433461d968255ebb7e..2a29e5670a07fc92f6470b257b7140e0607c0d3a 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/DataHandling/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/DataHandling/index.jsx
@@ -1,17 +1,17 @@
 import React, { memo, useEffect, useState } from "react";
-import System from "../../../../../models/system";
-import AnythingLLMIcon from "../../../../../media/logo/anything-llm-icon.png";
-import OpenAiLogo from "../../../../../media/llmprovider/openai.png";
-import AzureOpenAiLogo from "../../../../../media/llmprovider/azure.png";
-import AnthropicLogo from "../../../../../media/llmprovider/anthropic.png";
-import LMStudioLogo from "../../../../../media/llmprovider/lmstudio.png";
-import LocalAiLogo from "../../../../../media/llmprovider/localai.png";
-import ChromaLogo from "../../../../../media/vectordbs/chroma.png";
-import PineconeLogo from "../../../../../media/vectordbs/pinecone.png";
-import LanceDbLogo from "../../../../../media/vectordbs/lancedb.png";
-import WeaviateLogo from "../../../../../media/vectordbs/weaviate.png";
-import QDrantLogo from "../../../../../media/vectordbs/qdrant.png";
-import PreLoader from "../../../../../components/Preloader";
+import System from "@/models/system";
+import AnythingLLMIcon from "@/media/logo/anything-llm-icon.png";
+import OpenAiLogo from "@/media/llmprovider/openai.png";
+import AzureOpenAiLogo from "@/media/llmprovider/azure.png";
+import AnthropicLogo from "@/media/llmprovider/anthropic.png";
+import LMStudioLogo from "@/media/llmprovider/lmstudio.png";
+import LocalAiLogo from "@/media/llmprovider/localai.png";
+import ChromaLogo from "@/media/vectordbs/chroma.png";
+import PineconeLogo from "@/media/vectordbs/pinecone.png";
+import LanceDbLogo from "@/media/vectordbs/lancedb.png";
+import WeaviateLogo from "@/media/vectordbs/weaviate.png";
+import QDrantLogo from "@/media/vectordbs/qdrant.png";
+import PreLoader from "@/components/Preloader";
 
 const LLM_SELECTION_PRIVACY = {
   openai: {
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/EmbeddingSelection/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/EmbeddingSelection/index.jsx
index 501c88ef025ebb8798249ad3e4eb8236294fc453..1f44c463bd42acb1bc94a502c0bcf6ca47be0fb5 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/EmbeddingSelection/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/EmbeddingSelection/index.jsx
@@ -1,15 +1,15 @@
 import React, { memo, useEffect, useState } from "react";
-import AnythingLLMIcon from "../../../../../media/logo/anything-llm-icon.png";
-import OpenAiLogo from "../../../../../media/llmprovider/openai.png";
-import AzureOpenAiLogo from "../../../../../media/llmprovider/azure.png";
-import LocalAiLogo from "../../../../../media/llmprovider/localai.png";
-import System from "../../../../../models/system";
-import PreLoader from "../../../../../components/Preloader";
-import LLMProviderOption from "../../../../../components/LLMSelection/LLMProviderOption";
-import OpenAiOptions from "../../../../../components/EmbeddingSelection/OpenAiOptions";
-import AzureAiOptions from "../../../../../components/EmbeddingSelection/AzureAiOptions";
-import LocalAiOptions from "../../../../../components/EmbeddingSelection/LocalAiOptions";
-import NativeEmbeddingOptions from "../../../../../components/EmbeddingSelection/NativeEmbeddingOptions";
+import AnythingLLMIcon from "@/media/logo/anything-llm-icon.png";
+import OpenAiLogo from "@/media/llmprovider/openai.png";
+import AzureOpenAiLogo from "@/media/llmprovider/azure.png";
+import LocalAiLogo from "@/media/llmprovider/localai.png";
+import System from "@/models/system";
+import PreLoader from "@/components/Preloader";
+import LLMProviderOption from "@/components/LLMSelection/LLMProviderOption";
+import OpenAiOptions from "@/components/EmbeddingSelection/OpenAiOptions";
+import AzureAiOptions from "@/components/EmbeddingSelection/AzureAiOptions";
+import LocalAiOptions from "@/components/EmbeddingSelection/LocalAiOptions";
+import NativeEmbeddingOptions from "@/components/EmbeddingSelection/NativeEmbeddingOptions";
 
 function EmbeddingSelection({ nextStep, prevStep, currentStep }) {
   const [embeddingChoice, setEmbeddingChoice] = useState("native");
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/LLMSelection/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/LLMSelection/index.jsx
index eec16bc8fe5b942f3d6cc6b38e1f06d2a5bcf440..84b232d741d8aa14403cb1ca5363eef11e0716f5 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/LLMSelection/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/LLMSelection/index.jsx
@@ -1,17 +1,17 @@
 import React, { memo, useEffect, useState } from "react";
-import OpenAiLogo from "../../../../../media/llmprovider/openai.png";
-import AzureOpenAiLogo from "../../../../../media/llmprovider/azure.png";
-import AnthropicLogo from "../../../../../media/llmprovider/anthropic.png";
-import LMStudioLogo from "../../../../../media/llmprovider/lmstudio.png";
-import LocalAiLogo from "../../../../../media/llmprovider/localai.png";
-import System from "../../../../../models/system";
-import PreLoader from "../../../../../components/Preloader";
-import LLMProviderOption from "../../../../../components/LLMSelection/LLMProviderOption";
-import OpenAiOptions from "../../../../../components/LLMSelection/OpenAiOptions";
-import AzureAiOptions from "../../../../../components/LLMSelection/AzureAiOptions";
-import AnthropicAiOptions from "../../../../../components/LLMSelection/AnthropicAiOptions";
-import LMStudioOptions from "../../../../../components/LLMSelection/LMStudioOptions";
-import LocalAiOptions from "../../../../../components/LLMSelection/LocalAiOptions";
+import OpenAiLogo from "@/media/llmprovider/openai.png";
+import AzureOpenAiLogo from "@/media/llmprovider/azure.png";
+import AnthropicLogo from "@/media/llmprovider/anthropic.png";
+import LMStudioLogo from "@/media/llmprovider/lmstudio.png";
+import LocalAiLogo from "@/media/llmprovider/localai.png";
+import System from "@/models/system";
+import PreLoader from "@/components/Preloader";
+import LLMProviderOption from "@/components/LLMSelection/LLMProviderOption";
+import OpenAiOptions from "@/components/LLMSelection/OpenAiOptions";
+import AzureAiOptions from "@/components/LLMSelection/AzureAiOptions";
+import AnthropicAiOptions from "@/components/LLMSelection/AnthropicAiOptions";
+import LMStudioOptions from "@/components/LLMSelection/LMStudioOptions";
+import LocalAiOptions from "@/components/LLMSelection/LocalAiOptions";
 
 function LLMSelection({ nextStep, prevStep, currentStep }) {
   const [llmChoice, setLLMChoice] = useState("openai");
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/MultiUserSetup/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/MultiUserSetup/index.jsx
index 675e88591949cf50177dfee6b5b4e171608d54b2..71310abfcae012dfe190a9b7ea3871a1d3a0e72b 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/MultiUserSetup/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/MultiUserSetup/index.jsx
@@ -1,10 +1,6 @@
 import React, { useState, memo } from "react";
-import System from "../../../../../models/system";
-import {
-  AUTH_TIMESTAMP,
-  AUTH_TOKEN,
-  AUTH_USER,
-} from "../../../../../utils/constants";
+import System from "@/models/system";
+import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "@/utils/constants";
 import debounce from "lodash.debounce";
 
 // Multi-user mode step
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/PasswordProtection/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/PasswordProtection/index.jsx
index c1f8b73023e70c6fc485a55540afaf9f5365313d..4504288e6a95b82695c0737daae452b515ca9d5e 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/PasswordProtection/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/PasswordProtection/index.jsx
@@ -1,10 +1,6 @@
 import React, { memo, useState } from "react";
-import System from "../../../../../models/system";
-import {
-  AUTH_TIMESTAMP,
-  AUTH_TOKEN,
-  AUTH_USER,
-} from "../../../../../utils/constants";
+import System from "@/models/system";
+import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "@/utils/constants";
 import debounce from "lodash.debounce";
 
 function PasswordProtection({ nextStep, prevStep }) {
diff --git a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/VectorDatabaseConnection/index.jsx b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/VectorDatabaseConnection/index.jsx
index 99c42f1b2f6d4a03cd60127ce67a702ed681a334..16ee9aa53b3f8cdaf571b432d5e5c37bef94a35b 100644
--- a/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/VectorDatabaseConnection/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/VectorDatabaseConnection/index.jsx
@@ -1,13 +1,13 @@
 import React, { memo, useEffect, useState } from "react";
 
-import VectorDBOption from "../../../../../components/VectorDBOption";
-import ChromaLogo from "../../../../../media/vectordbs/chroma.png";
-import PineconeLogo from "../../../../../media/vectordbs/pinecone.png";
-import LanceDbLogo from "../../../../../media/vectordbs/lancedb.png";
-import WeaviateLogo from "../../../../../media/vectordbs/weaviate.png";
-import QDrantLogo from "../../../../../media/vectordbs/qdrant.png";
-import System from "../../../../../models/system";
-import PreLoader from "../../../../../components/Preloader";
+import VectorDBOption from "@/components/VectorDBOption";
+import ChromaLogo from "@/media/vectordbs/chroma.png";
+import PineconeLogo from "@/media/vectordbs/pinecone.png";
+import LanceDbLogo from "@/media/vectordbs/lancedb.png";
+import WeaviateLogo from "@/media/vectordbs/weaviate.png";
+import QDrantLogo from "@/media/vectordbs/qdrant.png";
+import System from "@/models/system";
+import PreLoader from "@/components/Preloader";
 
 function VectorDatabaseConnection({ nextStep, prevStep, currentStep }) {
   const [vectorDB, setVectorDB] = useState("lancedb");
diff --git a/frontend/src/pages/OnboardingFlow/index.jsx b/frontend/src/pages/OnboardingFlow/index.jsx
index 0839635c25e8c53f2106b0df97e658e5ee960950..106f7cbae1f5d2d6b596a40748b63a6861693c90 100644
--- a/frontend/src/pages/OnboardingFlow/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/index.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import OnboardingModal, { OnboardingModalId } from "./OnboardingModal";
-import useLogo from "../../hooks/useLogo";
+import useLogo from "@/hooks/useLogo";
 import { isMobile } from "react-device-detect";
 
 export default function OnboardingFlow() {
diff --git a/frontend/src/pages/WorkspaceChat/index.jsx b/frontend/src/pages/WorkspaceChat/index.jsx
index 5f8985f49c93b869eb338ec81127a1fb5f4313f3..7db652a9218eb65d9ffd5b960b56fa8377ffa5f3 100644
--- a/frontend/src/pages/WorkspaceChat/index.jsx
+++ b/frontend/src/pages/WorkspaceChat/index.jsx
@@ -1,13 +1,11 @@
 import React, { useEffect, useState } from "react";
-import { default as WorkspaceChatContainer } from "../../components/WorkspaceChat";
-import Sidebar from "../../components/Sidebar";
+import { default as WorkspaceChatContainer } from "@/components/WorkspaceChat";
+import Sidebar from "@/components/Sidebar";
 import { useParams } from "react-router-dom";
-import Workspace from "../../models/workspace";
-import PasswordModal, {
-  usePasswordModal,
-} from "../../components/Modals/Password";
+import Workspace from "@/models/workspace";
+import PasswordModal, { usePasswordModal } from "@/components/Modals/Password";
 import { isMobile } from "react-device-detect";
-import { FullScreenLoader } from "../../components/Preloader";
+import { FullScreenLoader } from "@/components/Preloader";
 
 export default function WorkspaceChat() {
   const { loading, requiresAuth, mode } = usePasswordModal();
diff --git a/frontend/src/utils/toast.js b/frontend/src/utils/toast.js
index 7c12c5ea81eadae0bcb4c7d738274f87ad7b5aaa..5ce17d5aeab76438fd9b129c2be4da22ab0637f3 100644
--- a/frontend/src/utils/toast.js
+++ b/frontend/src/utils/toast.js
@@ -1,5 +1,5 @@
 import { toast } from "react-toastify";
-import usePrefersDarkMode from "../hooks/usePrefersDarkMode";
+import usePrefersDarkMode from "@/hooks/usePrefersDarkMode";
 
 // Additional Configs (opts)
 // You can also pass valid ReactToast params to override the defaults.
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 7166d50a92c8dfae9e5f32ddddd2194e11d98bbe..a7e6ac01d13168c503ce0846ebec171e897f5859 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -1,4 +1,5 @@
 import { defineConfig } from 'vite'
+import { fileURLToPath, URL } from "url";
 import postcss from './postcss.config.js'
 import react from '@vitejs/plugin-react'
 import dns from 'dns'
@@ -30,6 +31,7 @@ export default defineConfig({
   ],
   resolve: {
     alias: [
+      { find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
       {
         process: "process/browser",
         stream: "stream-browserify",