diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..96c46e6
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+        "baseUrl": "./",
+        "paths": {
+            "@/*": ["src/*"]
+        }
+    }
+}
diff --git a/src/App.jsx b/src/App.jsx
index 34610d5..347bf62 100755
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,5 @@
+import Home from "@/pages";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
-import Home from "./pages";
 
 export default function App() {
     return (
diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx
index 5544523..ab559d7 100755
--- a/src/components/Footer/index.jsx
+++ b/src/components/Footer/index.jsx
@@ -1,6 +1,3 @@
-import { FaLinkedin } from "react-icons/fa";
-import { FaSquareXTwitter } from "react-icons/fa6";
-import { animateScroll as scroll } from "react-scroll";
 import {
     FooterContainer,
     FooterWrap,
@@ -10,7 +7,10 @@ import {
     SocialMedia,
     SocialMediaWrap,
     WebsiteRights,
-} from "./FooterElements";
+} from "@/components/Footer/FooterElements";
+import { FaLinkedin } from "react-icons/fa";
+import { FaSquareXTwitter } from "react-icons/fa6";
+import { animateScroll as scroll } from "react-scroll";
 
 const images = [
     "https://freepik.com/free-vector/hand-coding-concept-illustration_21864184.htm#query=coding&position=17&from_view=search&track=sph&uuid=5896d847-38e4-4cb9-8fe1-103041c7c933",
diff --git a/src/components/HeroSection/index.jsx b/src/components/HeroSection/index.jsx
index 4576a78..9a9721b 100755
--- a/src/components/HeroSection/index.jsx
+++ b/src/components/HeroSection/index.jsx
@@ -1,4 +1,3 @@
-import img from "../../images/F23.prince.learning.turquoise.jpg";
 import {
     HeroCitationBlock,
     HeroCitationTitle,
@@ -18,7 +17,8 @@ import {
     HeroRow,
     Img,
     UDLLink,
-} from "./HeroElements";
+} from "@/components/HeroSection/HeroElements";
+import img from "@/images/F23.prince.learning.turquoise.jpg";
 
 export default function HeroSection() {
     const citation = `
diff --git a/src/components/Instructors/index.jsx b/src/components/Instructors/index.jsx
index e1bdf08..ee377d4 100644
--- a/src/components/Instructors/index.jsx
+++ b/src/components/Instructors/index.jsx
@@ -1,4 +1,3 @@
-import img from "../../images/instructor.svg";
 import {
     Column1,
     Column2,
@@ -14,7 +13,8 @@ import {
     Subtitle,
     TextWrapper,
     TopLine,
-} from "./InstructorsElements";
+} from "@/components/Instructors/InstructorsElements";
+import img from "@/images/instructor.svg";
 
 const fullSlides = [
     {
diff --git a/src/components/Media/index.jsx b/src/components/Media/index.jsx
index 4050b65..caf2d41 100644
--- a/src/components/Media/index.jsx
+++ b/src/components/Media/index.jsx
@@ -1,4 +1,3 @@
-import img from "../../images/media.svg";
 import {
     Column1,
     Column2,
@@ -15,7 +14,8 @@ import {
     TextWrapper,
     TopLine,
     VideoFrame,
-} from "./MediaElements";
+} from "@/components/Media/MediaElements";
+import img from "@/images/media.svg";
 
 const interviews = [
     {
diff --git a/src/components/More/index.jsx b/src/components/More/index.jsx
index 09de6f3..ce2d2ea 100644
--- a/src/components/More/index.jsx
+++ b/src/components/More/index.jsx
@@ -1,4 +1,3 @@
-import img from "../../images/more.svg";
 import {
     Column1,
     Column2,
@@ -16,7 +15,8 @@ import {
     Subtitle,
     TextWrapper,
     TopLine,
-} from "./MoreElements";
+} from "@/components/More/MoreElements";
+import img from "@/images/more.svg";
 
 const book = [
     {
diff --git a/src/components/NavBar/index.jsx b/src/components/NavBar/index.jsx
index 4654e59..af101e1 100755
--- a/src/components/NavBar/index.jsx
+++ b/src/components/NavBar/index.jsx
@@ -1,7 +1,3 @@
-import { useEffect, useState } from "react";
-import { FaBars } from "react-icons/fa";
-import { IconContext } from "react-icons/lib";
-import { animateScroll as scroll } from "react-scroll";
 import {
     MobileIcon,
     Nav,
@@ -10,7 +6,11 @@ import {
     NavLinks,
     NavLogo,
     NavMenu,
-} from "./NavbarElements";
+} from "@/components/NavBar/NavbarElements";
+import { useEffect, useState } from "react";
+import { FaBars } from "react-icons/fa";
+import { IconContext } from "react-icons/lib";
+import { animateScroll as scroll } from "react-scroll";
 
 export default function NavBar({ toggle }) {
     const [scrollNav, setScrollNav] = useState(false);
diff --git a/src/components/Notebooks/index.jsx b/src/components/Notebooks/index.jsx
index 40d847a..b722410 100644
--- a/src/components/Notebooks/index.jsx
+++ b/src/components/Notebooks/index.jsx
@@ -1,4 +1,3 @@
-import img from "../../images/coding.svg";
 import {
     Column1,
     Column2,
@@ -12,7 +11,8 @@ import {
     Subtitle,
     TextWrapper,
     TopLine,
-} from "./NotebookElements";
+} from "@/components/Notebooks/NotebookElements";
+import img from "@/images/coding.svg";
 
 const notebooks = [
     {
diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx
index e3e10fe..716eb2c 100755
--- a/src/components/Sidebar/index.jsx
+++ b/src/components/Sidebar/index.jsx
@@ -5,7 +5,7 @@ import {
     SidebarLink,
     SidebarMenu,
     SidebarWrapper,
-} from "./SidebarElements";
+} from "@/components/Sidebar/SidebarElements";
 
 export default function Sidebar({ isOpen, toggle }) {
     return (
diff --git a/src/index.jsx b/src/index.jsx
index 2c28dfe..c3b2d7f 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,7 +1,7 @@
+import App from "@/App";
+import "@/styles/globals.css";
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App";
-import "./styles/globals.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
     <React.StrictMode>
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 71ae0d1..8af23c2 100755
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -1,12 +1,12 @@
+import Footer from "@/components/Footer";
+import HeroSection from "@/components/HeroSection";
+import InstructorsSection from "@/components/Instructors";
+import MediaSection from "@/components/Media";
+import MoreSection from "@/components/More";
+import Navbar from "@/components/NavBar";
+import NotebookSection from "@/components/Notebooks";
+import Sidebar from "@/components/Sidebar";
 import { useState } from "react";
-import Footer from "../components/Footer";
-import HeroSection from "../components/HeroSection";
-import InstructorsSection from "../components/Instructors";
-import MediaSection from "../components/Media";
-import MoreSection from "../components/More";
-import Navbar from "../components/NavBar";
-import NotebookSection from "../components/Notebooks";
-import Sidebar from "../components/Sidebar";
 
 export default function Home() {
     const [isOpen, setIsOpen] = useState(false);
diff --git a/src/pages/signin.jsx b/src/pages/signin.jsx
index f54c1a1..20d7fda 100644
--- a/src/pages/signin.jsx
+++ b/src/pages/signin.jsx
@@ -1,5 +1,5 @@
-import ScrollToTop from "../components/ScrollToTop";
-import SignIn from "../components/SignIn";
+import ScrollToTop from "@/components/ScrollToTop";
+import SignIn from "@/components/SignIn";
 
 export default function SigninPage() {
     return (
diff --git a/vite.config.js b/vite.config.js
index c708a7a..0e64769 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,9 +1,15 @@
 import react from "@vitejs/plugin-react-swc";
+import path from "node:path";
 import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [react()],
+    resolve: {
+        alias: {
+            "@": path.resolve(__dirname, "./src"),
+        },
+    },
     server: {
         port: 3000,
     },