diff --git a/frontend/jsconfig.json b/frontend/jsconfig.json
index cffec6289..c8cc81fdb 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 2b8a645b3..558e8ae3f 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 23e25a358..34ec0cff7 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 f5e9475e9..72002ab29 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 081ce1726..ca29b4700 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 109da0e4f..73b8a5df8 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 454ab5f98..52bbbfd89 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 883b6e8ef..7e9e8a8b6 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 8adad7e50..846c37837 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 0e6a890ad..d9ca3f297 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 fb4850404..4afd0faee 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 7ca949b26..ed2b83304 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 89c71df30..e599ee2b2 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 fe14bf9f2..cefd6b977 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 a31a1b72b..9e0e126c6 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 553b7d4e0..733dcb1e7 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 cbee14ae6..ac92f4830 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 6a549f820..8bfc1b934 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 6155e7627..f0605a372 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 a65eebd5f..a219f1202 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 22dbdf320..14daff809 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 0096aadfe..34ae8de9a 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 98a77a425..3e129c2a6 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 e4ecd5e87..f03d20981 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 c3feb04bb..2a753dce9 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 76206a405..bb415f3a7 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 ade884d58..0798a3e73 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 c5f3e3c4b..d36fb8592 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 f69636a42..2ef4eebbf 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 2990e5541..aa0b9f744 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 68408d7e7..56ebf7dc9 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 81205f20d..54ae7e076 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 699fa76e4..cf5b38d37 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 4f77ba24a..c4c1b9ebd 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 8282070eb..d8c26d1e3 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 6b25f42ac..4c3c2686a 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 5964b6bdf..d734759fc 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 c1facda61..b59bbe576 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 de33e4db2..21d9faed4 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 108b9bbfe..052f845b4 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 6b181d4cd..8c8969622 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 e2217e4b6..c29c92ac2 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 29657f3f3..6b970bf3e 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 665e78f41..a4095ae9c 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 66026ed5b..5ee5fd0a3 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 107e57cae..e823dd0b7 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 96c3970d5..23fc39d9a 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 fbf041a06..d925232c3 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 32efaa986..0edcb1816 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 bd4c254e7..b6a9a608c 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 b3b1bdf4c..80fe1c575 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 3183dabfc..4c4cfc0a7 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 f8b437439..1635fef8b 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 398411909..0733a3602 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 1ed25e799..e44ff2359 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 d7d80926b..ec5950cbe 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 5d79c5cab..d0b3cbf8c 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 ed5c55799..496a4ff4f 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 c9fb442e9..3c9949f89 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 ebb9ae1ec..2a29e5670 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 501c88ef0..1f44c463b 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 eec16bc8f..84b232d74 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 675e88591..71310abfc 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 c1f8b7302..4504288e6 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 99c42f1b2..16ee9aa53 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 0839635c2..106f7cbae 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 5f8985f49..7db652a92 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 7c12c5ea8..5ce17d5ae 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 7166d50a9..a7e6ac01d 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",