diff --git a/.github/workflows/deploy-portfolio.yml b/.github/workflows/deploy-portfolio.yml
new file mode 100644
index 0000000..8bb90ec
--- /dev/null
+++ b/.github/workflows/deploy-portfolio.yml
@@ -0,0 +1,51 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['main', 'test-deploy']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+      - name: Set up Node
+        uses: actions/setup-node@v5
+        with:
+          node-version: lts/*
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v4
+        with:
+          # Upload dist folder
+          path: './build'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/index.html b/index.html
index 0f14fd1..74936af 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,18 @@
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Walker Hsu</title>
+      <script>
+      (function(l) {
+        if (l.search[1] === '/' ) {
+          var decoded = l.search.slice(1).split('&').map(function(s) { 
+            return s.replace(/~and~/g, '&')
+          }).join('?');
+          window.history.replaceState(null, null,
+            l.pathname.slice(0, -1) + decoded + l.hash
+          );
+        }
+      }(window.location))
+    </script>
     </head>
 
     <body>
diff --git a/public/404.html b/public/404.html
new file mode 100644
index 0000000..b932cea
--- /dev/null
+++ b/public/404.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Redirecting...</title>
+    <script>
+      // Store the path that was attempted
+      var pathSegmentsToKeep = 1; // For /Personal-Portfolio/
+      
+      var l = window.location;
+      l.replace(
+        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
+        l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
+        l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
+        (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
+        l.hash
+      );
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
\ No newline at end of file
diff --git a/src/components/details/ExperienceDetail.tsx b/src/components/details/ExperienceDetail.tsx
index bb930ae..69036e8 100644
--- a/src/components/details/ExperienceDetail.tsx
+++ b/src/components/details/ExperienceDetail.tsx
@@ -24,7 +24,7 @@ export default function ExperienceDetail() {
         <Box sx={{ maxWidth: "1152px", mx: "auto", px: 3, py: 3 }}>
           <Button
             variant="text"
-            onClick={() => navigate(-1)}
+            onClick={() => navigate("/experience")}
             sx={{ textTransform: "none", color: "black", gap: 1, ml: -1.5 }}
           >
             <ArrowLeft size={16} />
diff --git a/src/components/details/ProjectDetail.tsx b/src/components/details/ProjectDetail.tsx
index 348f928..93e9b53 100644
--- a/src/components/details/ProjectDetail.tsx
+++ b/src/components/details/ProjectDetail.tsx
@@ -26,7 +26,7 @@ export default function ProjectDetail() {
         <Box sx={{ maxWidth: "1152px", mx: "auto", px: 3, py: 3 }}>
           <Button
             variant="text"
-            onClick={() => navigate(-1)}
+            onClick={() => navigate("/projects")}
             sx={{ textTransform: "none", color: "black", gap: 1, ml: -1.5 }}
           >
             <ArrowLeft size={16} />
diff --git a/src/components/details/ResearchDetail.tsx b/src/components/details/ResearchDetail.tsx
index 5ee3ff9..3727805 100644
--- a/src/components/details/ResearchDetail.tsx
+++ b/src/components/details/ResearchDetail.tsx
@@ -26,7 +26,7 @@ export default function ResearchDetail() {
         <Box sx={{ maxWidth: "1152px", mx: "auto", px: 3, py: 3 }}>
           <Button
             variant="text"
-            onClick={() => navigate(-1)}
+            onClick={() => navigate("/research")}
             sx={{ textTransform: "none", color: "black", gap: 1, ml: -1.5 }}
           >
             <ArrowLeft size={16} />
diff --git a/src/data/projects.ts b/src/data/projects.ts
index 6e2ac76..bc77a96 100644
--- a/src/data/projects.ts
+++ b/src/data/projects.ts
@@ -1,5 +1,9 @@
 import React from "react";
 import GitHubIcon from "@mui/icons-material/GitHub";
+import landsatImg from "/projects/landsat.png";
+import caRPG from "/projects/CaRPG.png";
+import llmDBMS from "/projects/LLM_DBMS.png";
+import waterIntake from "/projects/WaterIntake.png";
 
 export interface Project {
   title: string;
@@ -29,7 +33,7 @@ export const projects: Project[] = [
     period: "2024 Fall",
     description:
       "Developed a management system for Landsat Surface Reflectance Data. The project involved building a web application to visualize and analyze satellite data, receiving notifications when the satellite passes over specific regions.",
-    thumbnail: "/projects/landsat.png",
+    thumbnail: landsatImg,
     tags: [
       "Python",
       "FastAPI",
@@ -77,7 +81,7 @@ export const projects: Project[] = [
     period: "2024 Spring",
     description:
       "Created an in-car RPG game dynamically generated by LLM. The project involved a shooting gameplay with gesture detection to enhance user interaction while traveling. Developed a full-stack application integrating backend AI services with a mobile frontend.",
-    thumbnail: "/projects/CaRPG.png",
+    thumbnail: caRPG,
     tags: ["Python", "Pytorch", "PyGame", "FastAPI", "Flutter", "NLP"],
     award: "1st place of AUO Enterprise Award in MakeNTU 2024",
     role: "Team Leader | Developer",
@@ -119,7 +123,7 @@ export const projects: Project[] = [
     period: "2024 Fall",
     description:
       "Developed a system to track and encourage water intake using embedded systems and a mobile application. The project involved creating a smart device that can monitors consumption and provides reminders through the application.",
-    thumbnail: "/projects/WaterIntake.png",
+    thumbnail: waterIntake,
     tags: ["C", "Algorithm", "Embedded Systems", "Flutter"],
     role: "Software Engineer",
     client: "Course Project",
@@ -159,7 +163,7 @@ export const projects: Project[] = [
     period: "2024 Spring",
     description:
       "Developed a database management system enhanced with LLM capabilities. The project involved integrating natural language processing features to allow users to interact with the database using natural languages. Also, it allows extracting information from audios and pdfs.",
-    thumbnail: "/projects/LLM_DBMS.png",
+    thumbnail: llmDBMS,
     tags: ["Python", "LLM", "Whisper", "LangChain", "SQL", "MongoDB"],
     role: "AI Engineer",
     client: "Course Project",
diff --git a/src/data/research.ts b/src/data/research.ts
index 2a2ae71..a7fa3c4 100644
--- a/src/data/research.ts
+++ b/src/data/research.ts
@@ -1,5 +1,6 @@
 import React from "react";
 import ArticleIcon from "@mui/icons-material/Article";
+import AEGIS from "/research/AEGIS.png";
 
 export interface Research {
   title: string;
@@ -32,7 +33,7 @@ export const research: Research[] = [
     description:
       "Devised a GAN-like framework to automatically generate prompts to defend against malicious prompt injection attacks. Tested the framework on real-world articles across various LLMs, achieving a 20% in True Positive Rate (TPR) with only 2% decrease in True Negative Rate (TNR).",
     period: "2023 Fall ~ Present",
-    thumbnail: "/research/AEGIS.png",
+    thumbnail: AEGIS,
     tags: ["Python", "LLM", "GAN", "Prompt Injection"],
     role: "AI Researcher",
     client: "Academic Research",
diff --git a/src/main.tsx b/src/main.tsx
index 7bd185f..21e85c7 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,7 +4,7 @@ import App from "./App.tsx";
 import "./index.css";
 
 createRoot(document.getElementById("root")!).render(
-  <BrowserRouter>
+  <BrowserRouter basename="/Personal-Website">
     <App />
   </BrowserRouter>
 );
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 3a67cb9..d5ccad3 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,9 +1,6 @@
 import { Container, Box, Typography } from "@mui/material";
 import SchoolIcon from "@mui/icons-material/School";
-import Projects from "../components/sections/Projects";
-import Research from "../components/sections/Research";
-import Experience from "../components/sections/Experience";
-import Awards from "../components/sections/Awards";
+import backgroundImg from '/background.jpg';
 
 const HomePage = () => {
   return (
@@ -18,7 +15,7 @@ const HomePage = () => {
           justifyContent: "flex-end",
           color: "black",
           textAlign: "right",
-          backgroundImage: "url(/background.jpg)",
+          backgroundImage: `url(${backgroundImg})`,
           backgroundSize: "cover",
           backgroundPosition: "center",
           paddingTop: "40px",
diff --git a/vite.config.ts b/vite.config.ts
index 84bad06..dbff9f5 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -10,6 +10,7 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  base: "/Personal-Website/",
   build: {
     target: "esnext",
     outDir: "build",
