diff --git a/src/App.tsx b/src/App.tsx
index e9a7eaa..ea67310 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 import { Suspense, lazy } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { CONFIG } from './config/config';
 const Portfolio = lazy(() => import('./pages/Portfolio'));
 const Resume = lazy(() => import('./pages/Resume'));
 const NotFound = lazy(() => import('./pages/NotFound'));
@@ -9,20 +10,13 @@ import './App.scss';
 
 const router = createBrowserRouter([
   {
-    path: '/',
-    element: <Portfolio />,
-    // children: [
-    // {index: true, element:}
-    // ],
-  },
-  {
-    path: '/resume',
-    element: <Resume />,
-  },
-  {
-    path: '*',
-    element: <NotFound />,
+    path: `/${CONFIG.VITE_REACT_APP_BASE_URL}`,
+    children: [
+      { index: true, element: <Portfolio /> },
+      { path: 'resume', element: <Resume /> },
+    ],
   },
+  { path: '*', element: <NotFound /> },
 ]);
 
 const queryClient = new QueryClient();
diff --git a/src/components/Portfolio/Experiences.tsx b/src/components/Portfolio/Experiences.tsx
index 84a647e..e52721e 100644
--- a/src/components/Portfolio/Experiences.tsx
+++ b/src/components/Portfolio/Experiences.tsx
@@ -33,7 +33,7 @@ function Experiences() {
           <LinkIcon
             isAnchor={false}
             linkProps={{
-              href: '/resume',
+              href: 'resume',
               whileHover: 'hover',
               animate: 'rest',
               variants: ResumeVariants,
diff --git a/src/components/Portfolio/Header.tsx b/src/components/Portfolio/Header.tsx
index e49f928..93997f5 100644
--- a/src/components/Portfolio/Header.tsx
+++ b/src/components/Portfolio/Header.tsx
@@ -26,7 +26,7 @@ function Header() {
   return (
     <header className="header">
       <div>
-        <Link to="/" onClick={handleOnClick}>
+        <Link to={`${CONFIG.VITE_REACT_APP_BASE_URL}`} onClick={handleOnClick}>
           <h1 className="name">{headerInfo.name}</h1>
         </Link>
         <h2 className="role">{headerInfo.role}</h2>
diff --git a/src/components/shared/Navigation/NavBar.tsx b/src/components/shared/Navigation/NavBar.tsx
index 6b8c64b..9a3e9ca 100644
--- a/src/components/shared/Navigation/NavBar.tsx
+++ b/src/components/shared/Navigation/NavBar.tsx
@@ -1,6 +1,7 @@
 import { Link, useNavigate } from 'react-router-dom';
 import { NavBarProps } from '../../../models/interfaces/shared/Navigation/NavBarProps';
 import { useCallback, useEffect, useState } from 'react';
+import { CONFIG } from '../../../config/config';
 
 import './styles/NavBar.scss';
 
@@ -68,7 +69,7 @@ function NavBar(props: NavBarProps) {
 
     changeActiveBar(`#${location[1]}`);
 
-    navigate(`/#${location[1]}`);
+    navigate(`${CONFIG.VITE_REACT_APP_BASE_URL}#${location[1]}`);
   };
 
   return (
diff --git a/src/components/shared/UI/Icons/LinkIcon.tsx b/src/components/shared/UI/Icons/LinkIcon.tsx
index f25dd4a..19b4d55 100644
--- a/src/components/shared/UI/Icons/LinkIcon.tsx
+++ b/src/components/shared/UI/Icons/LinkIcon.tsx
@@ -2,6 +2,7 @@ import { motion } from 'framer-motion';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { LinkIconProps } from '../../../../models/interfaces/shared/UI/Icons/LinkIconProps';
 import { Link } from 'react-router-dom';
+import { CONFIG } from '../../../../config/config';
 
 import './styles/LinkIcon.scss';
 
@@ -34,7 +35,7 @@ function LinkIcon(props: LinkIconProps) {
       ) : (
         <MotionLink
           className={`link-icon ${linkProps.className}`}
-          to={linkProps.href}
+          to={`${CONFIG.VITE_REACT_APP_BASE_URL}${linkProps.href}`}
           whileHover={linkProps.whileHover}
           animate={linkProps.animate}
           onHoverStart={linkProps.onHoverStart}
diff --git a/src/config/config.ts b/src/config/config.ts
index d5a2649..514b385 100644
--- a/src/config/config.ts
+++ b/src/config/config.ts
@@ -2,4 +2,5 @@ export const CONFIG = {
   VITE_REACT_APP_USE_SERVER:
     import.meta.env.VITE_REACT_APP_USE_SERVER === 'true',
   VITE_REACT_APP_WEB_TITLE: import.meta.env.VITE_REACT_APP_WEB_TITLE,
+  VITE_REACT_APP_BASE_URL: import.meta.env.VITE_REACT_APP_BASE_URL,
 };
diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx
index 2cb4f57..9dd2f71 100644
--- a/src/pages/NotFound.tsx
+++ b/src/pages/NotFound.tsx
@@ -4,6 +4,7 @@ import Button from '../components/shared/UI/Buttons/Button';
 import { ButtonVariants } from '../utils/variants/variants';
 import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { CONFIG } from '../config/config';
 
 import './styles/NotFound.scss';
 
@@ -13,7 +14,7 @@ function NotFound() {
   const handleOnClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
 
-    navigate('/');
+    navigate(`${CONFIG.VITE_REACT_APP_BASE_URL}`);
   };
   return (
     <>
diff --git a/src/pages/Resume.tsx b/src/pages/Resume.tsx
index 0753c06..9219479 100644
--- a/src/pages/Resume.tsx
+++ b/src/pages/Resume.tsx
@@ -6,6 +6,7 @@ import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import { ButtonVariants } from '../utils/variants/variants';
 import { ResumeLocation } from '../models/interfaces/pages/ResumeLocation';
 import Cursor from '../components/shared/Common/Cursor';
+import { CONFIG } from '../config/config';
 
 import './styles/Resume.scss';
 
@@ -23,7 +24,7 @@ function Resume() {
 
     if (state?.prevPath) {
       navigate(-1);
-    } else navigate('/');
+    } else navigate(`${CONFIG.VITE_REACT_APP_BASE_URL}`);
   };
 
   return (
diff --git a/vite.config.ts b/vite.config.ts
index 46166a9..08dce8b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,16 +1,20 @@
 /// <reference types="vitest" />
 /// <reference types="vite/client" />
 
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-  test: {
-    globals: true,
-    environment: 'jsdom',
-    setupFiles: ['./test/setupTests.ts'],
-  },
-  base: '/portfolio-frontend/',
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '');
+
+  return {
+    plugins: [react()],
+    test: {
+      globals: true,
+      environment: 'jsdom',
+      setupFiles: ['./test/setupTests.ts'],
+    },
+    base: env.VITE_REACT_APP_BASE_URL,
+  };
 });