diff --git a/internal/api/project_handler.go b/internal/api/project_handler.go
index 0dff92e..e8869f4 100644
--- a/internal/api/project_handler.go
+++ b/internal/api/project_handler.go
@@ -3,6 +3,7 @@ package api
 import (
 	"database/sql"
 	"duhweb/internal/store"
+	"fmt"
 	"html/template"
 	"net/http"
 )
@@ -20,25 +21,35 @@ func (h *ProjectHandler) Render(w http.ResponseWriter, tmpl string, data interfa
 }
 
 func NewProjectHandler(db *sql.DB) *ProjectHandler {
+	tmpl := template.Must(template.New("").ParseGlob("views/*.html"))
+	template.Must(tmpl.ParseGlob("views/partials/*.html"))
+
 	return &ProjectHandler{
-		Templates:    template.Must(template.ParseGlob("views/*.html")),
+		Templates:    tmpl,
 		ProjectStore: store.NewSQLiteProjectStore(db),
 	}
 }
 
 func (h *ProjectHandler) InitPage(w http.ResponseWriter, r *http.Request) {
-	h.Render(w, "index", nil)
-}
-
-func (h *ProjectHandler) AboutPage(w http.ResponseWriter, r *http.Request) {
-	h.Render(w, "about", nil)
+	var hxRequest = r.Header.Get("HX-Request")
+	if hxRequest != "true" {
+		h.Render(w, "index", nil)
+		return
+	}
+	h.Render(w, "about-partial", nil)
 }
 
 func (h *ProjectHandler) ProjectsPage(w http.ResponseWriter, r *http.Request) {
+	var hxRequest = r.Header.Get("HX-Request")
+	fmt.Println(hxRequest)
 	projects, err := h.ProjectStore.GetAllProjects()
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
 		return
 	}
-	h.Render(w, "projects", projects)
+	if hxRequest != "true" {
+		h.Render(w, "projects", projects)
+		return
+	}
+	h.Render(w, "projects-partial", projects)
 }
diff --git a/internal/routes/routes.go b/internal/routes/routes.go
index 4f7542b..ecc1237 100644
--- a/internal/routes/routes.go
+++ b/internal/routes/routes.go
@@ -10,7 +10,6 @@ func SetupRoutes(app *app.Application) *chi.Mux {
 	r := chi.NewRouter()
 
 	r.Get("/", app.ProjectHandler.InitPage)
-	r.Get("/about", app.ProjectHandler.AboutPage)
 	r.Get("/projects", app.ProjectHandler.ProjectsPage)
 	return r
-}
\ No newline at end of file
+}
diff --git a/views/footer.html b/views/footer.html
new file mode 100644
index 0000000..8b30d8c
--- /dev/null
+++ b/views/footer.html
@@ -0,0 +1,28 @@
+{{ block "footer" .}}
+<footer id="contact" class="bg-gray-100 mt-auto py-10">
+  <div class="container mx-auto text-center">
+    <h2 class="text-2xl font-bold mb-4">Get in Touch</h2>
+    <p class="mb-6">
+      Feel free to reach out via email or connect on my socials.
+    </p>
+    <div class="flex justify-center gap-6">
+      <a href="mailto:your@email.com" class="text-blue-600 hover:underline"
+        >Email</a
+      >
+      <a
+        href="https://linkedin.com/in/yourprofile"
+        target="_blank"
+        class="text-blue-600 hover:underline"
+        >LinkedIn</a
+      >
+      <a
+        href="https://github.com/yourusername"
+        target="_blank"
+        class="text-blue-600 hover:underline"
+        >GitHub</a
+      >
+    </div>
+    <p class="mt-6 text-gray-500 text-sm">© 2025 Your Name</p>
+  </div>
+</footer>
+{{ end }}
diff --git a/views/header.html b/views/header.html
new file mode 100644
index 0000000..f6f332f
--- /dev/null
+++ b/views/header.html
@@ -0,0 +1,33 @@
+{{ block "header" .}}
+<header class="bg-white shadow-md">
+  <nav class="container mx-auto flex justify-between items-center py-4 px-6">
+    <a href="#" class="text-xl font-bold text-blue-600">Your Name</a>
+    <div class="space-x-6">
+      <a
+        id="aboutNavLink"
+        hx-get="/"
+        hx-target="#content"
+        hx-push-url="true"
+        class="nav-link active"
+        >About</a
+      >
+      <a
+        id="projectsNavLink"
+        hx-get="/projects"
+        hx-target="#content"
+        hx-push-url="true"
+        class="nav-link"
+        >Projects</a
+      >
+      <a
+        id="experiencesNavLink"
+        hx-get="/experience"
+        hx-target="#content"
+        hx-push-url="true"
+        class="nav-link"
+        >Experience</a
+      >
+    </div>
+  </nav>
+</header>
+{{ end }}
diff --git a/views/index.html b/views/index.html
index bc8a862..e7f22d0 100644
--- a/views/index.html
+++ b/views/index.html
@@ -11,159 +11,13 @@
   </head>
 
   <body class="bg-gray-50 text-gray-900 flex flex-col min-h-screen">
-    <!-- Navbar -->
-    <header class="bg-white shadow-md">
-      <nav
-        class="container mx-auto flex justify-between items-center py-4 px-6"
-      >
-        <a href="#" class="text-xl font-bold text-blue-600">Your Name</a>
-        <div class="space-x-6">
-          <a
-            id="aboutNavLink"
-            hx-get="/about"
-            hx-target="#content"
-            hx-push-url="/"
-            class="nav-link active"
-            >About</a
-          >
-          <a
-            id="projectsNavLink"
-            hx-get="/projects"
-            hx-target="#content"
-            hx-push-url="true"
-            class="nav-link"
-            >Projects</a
-          >
-          <a
-            id="experiencesNavLink"
-            hx-get="/experience"
-            hx-target="#content"
-            hx-push-url="true"
-            class="nav-link"
-            >Experience</a
-          >
-        </div>
-      </nav>
-    </header>
-
-    <script>
-      document.querySelectorAll('.nav-link').forEach((link) => {
-        link.addEventListener('click', function (e) {
-          document
-            .querySelectorAll('.nav-link')
-            .forEach((l) => l.classList.remove('active'));
-          this.classList.add('active');
-        });
-      });
-    </script>
-
-    <div id="content" class="flex-grow">{{ template "about" . }}</div>
-
-    <!-- Contact Section -->
-    <footer id="contact" class="bg-gray-100 mt-auto py-10">
-      <div class="container mx-auto text-center">
-        <h2 class="text-2xl font-bold mb-4">Get in Touch</h2>
-        <p class="mb-6">
-          Feel free to reach out via email or connect on my socials.
-        </p>
-        <div class="flex justify-center gap-6">
-          <a href="mailto:your@email.com" class="text-blue-600 hover:underline"
-            >Email</a
-          >
-          <a
-            href="https://linkedin.com/in/yourprofile"
-            target="_blank"
-            class="text-blue-600 hover:underline"
-            >LinkedIn</a
-          >
-          <a
-            href="https://github.com/yourusername"
-            target="_blank"
-            class="text-blue-600 hover:underline"
-            >GitHub</a
-          >
-        </div>
-        <p class="mt-6 text-gray-500 text-sm">© 2025 Your Name</p>
-      </div>
-    </footer>
+    <!-- Header Section -->
+    {{ template "header" }}
+    <!-- About Section -->
+    <div id="content" class="flex-grow">{{ template "about-partial" . }}</div>
+    <!-- Footer Section -->
+    {{ template "footer" }}
   </body>
-
-  <script>
-    function updateActiveNav() {
-      const url = window.location.pathname;
-      console.log(url);
-      document.querySelectorAll('.nav-link').forEach((link) => {
-        link.classList.remove('active');
-        if (
-          link.getAttribute('hx-get') === url ||
-          (url == '/' && link.id == 'aboutNavLink')
-        ) {
-          console.log('Innnnnn', link.id);
-          link.classList.add('active');
-          // e.preventDefault();
-          // e.stopImmediatePropagation();
-        }
-      });
-    }
-    document.addEventListener('DOMContentLoaded', (event) => {
-      document.body.addEventListener('htmx:pushedIntoHistory', function (evt) {
-        console.log('htmx:pushedIntoHistory', evt);
-        updateActiveNav();
-      });
-
-      document.body.addEventListener('htmx:historyRestore', function () {
-        console.log('htmx:historyRestore');
-        updateActiveNav();
-      });
-    });
-  </script>
+  {{ template "script" }}
 </html>
-{{ end }} {{ block "about" . }}
-<!-- Hero Section -->
-<section
-  class="flex flex-col items-center justify-center text-center flex-grow py-16 px-6 bg-gradient-to-b from-blue-50 to-white"
->
-  <h1 class="text-4xl md:text-6xl font-bold mb-4">
-    Hi, I'm <span class="text-blue-600">Your Name</span>
-  </h1>
-  <p class="text-lg md:text-xl mb-6 max-w-2xl">
-    A <span class="font-semibold">[Your Role]</span> who loves building
-    [something about what you do].
-  </p>
-  <div class="flex gap-4">
-    <a
-      id="projectButton"
-      hx-get="/projects"
-      hx-target="#content"
-      hx-push-url="true"
-      class="px-6 py-3 bg-blue-600 text-white rounded-lg shadow hover:bg-blue-700 transition cursor:pointer"
-      >View Projects</a
-    >
-    <a
-      href="#contact"
-      class="px-6 py-3 border border-blue-600 text-blue-600 rounded-lg shadow hover:bg-blue-50 transition"
-      >Contact Me</a
-    >
-  </div>
-</section>
-
-<!-- About Section -->
-<section id="about" class="container mx-auto py-16 px-6">
-  <h2 class="text-3xl font-bold mb-6">About Me</h2>
-  <p class="text-lg leading-relaxed max-w-3xl">
-    I’m a [Your Profession] with experience in [key skills]. I enjoy solving
-    problems, learning new technologies, and building applications that make an
-    impact. Currently exploring
-    <span class="text-blue-600 font-semibold">Go</span>,
-    <span class="text-blue-600 font-semibold">htmx</span>, and modern web tools.
-  </p>
-</section>
-{{ end }} {{ block "projects" . }}
-<h2 class="text-3xl font-bold mb-6">Projects</h2>
-{{ range . }} {{ template "project" . }} {{ end}} {{ end }} {{ block "project" .
-}}
-<div class="mb-4">
-  <a href="{{ .Link }}" class="text-blue-600 hover:underline">{{ .Title }}</a> -
-  {{ .Description }}
-</div>
 {{ end }}
diff --git a/views/partials/about-partial.html b/views/partials/about-partial.html
new file mode 100644
index 0000000..d093d4d
--- /dev/null
+++ b/views/partials/about-partial.html
@@ -0,0 +1,41 @@
+{{ block "about-partial" . }}
+<!-- Hero Section -->
+<section
+  class="flex flex-col items-center justify-center text-center flex-grow py-16 px-6 bg-gradient-to-b from-blue-50 to-white"
+>
+  <h1 class="text-4xl md:text-6xl font-bold mb-4">
+    Hi, I'm <span class="text-blue-600">Your Name</span>
+  </h1>
+  <p class="text-lg md:text-xl mb-6 max-w-2xl">
+    A <span class="font-semibold">[Your Role]</span> who loves building
+    [something about what you do].
+  </p>
+  <div class="flex gap-4">
+    <a
+      id="projectButton"
+      hx-get="/projects"
+      hx-target="#content"
+      hx-push-url="true"
+      class="px-6 py-3 bg-blue-600 text-white rounded-lg shadow hover:bg-blue-700 transition cursor:pointer"
+      >View Projects</a
+    >
+    <a
+      href="#contact"
+      class="px-6 py-3 border border-blue-600 text-blue-600 rounded-lg shadow hover:bg-blue-50 transition"
+      >Contact Me</a
+    >
+  </div>
+</section>
+
+<!-- About Section -->
+<section id="about" class="container mx-auto py-16 px-6">
+  <h2 class="text-3xl font-bold mb-6">About Me</h2>
+  <p class="text-lg leading-relaxed max-w-3xl">
+    I’m a [Your Profession] with experience in [key skills]. I enjoy solving
+    problems, learning new technologies, and building applications that make an
+    impact. Currently exploring
+    <span class="text-blue-600 font-semibold">Go</span>,
+    <span class="text-blue-600 font-semibold">htmx</span>, and modern web tools.
+  </p>
+</section>
+{{ end }}
diff --git a/views/partials/projects-partial.html b/views/partials/projects-partial.html
new file mode 100644
index 0000000..061bb67
--- /dev/null
+++ b/views/partials/projects-partial.html
@@ -0,0 +1,9 @@
+{{ block "projects-partial" . }}
+<h2 class="text-3xl font-bold mb-6">Projects</h2>
+{{ range . }} {{ template "project-partial-range" . }} {{ end}} {{ end }} {{
+block "project-partial-range" . }}
+<div class="mb-4">
+  <a href="{{ .Link }}" class="text-blue-600 hover:underline">{{ .Title }}</a> -
+  {{ .Description }}
+</div>
+{{ end }}
diff --git a/views/projects.html b/views/projects.html
new file mode 100644
index 0000000..aa0cf7f
--- /dev/null
+++ b/views/projects.html
@@ -0,0 +1,23 @@
+{{ block "projects" . }}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My CV Website</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/htmx.org@1.9.2"></script>
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body class="bg-gray-50 text-gray-900 flex flex-col min-h-screen">
+    <!-- Header Section -->
+    {{ template "header" }}
+    <!-- Projects Section -->
+    <div id="content" class="flex-grow">{{ template "projects-partial" .}}</div>
+    <!-- Footer Section -->
+    {{ template "footer" }}
+  </body>
+  {{ template "script" }}
+</html>
+{{ end }}
diff --git a/views/script.html b/views/script.html
new file mode 100644
index 0000000..01d4c9a
--- /dev/null
+++ b/views/script.html
@@ -0,0 +1,35 @@
+{{ block "script" .}}
+<script>
+  function updateActiveNav() {
+    const url = window.location.pathname;
+    document.querySelectorAll('.nav-link').forEach((link) => {
+      link.classList.remove('active');
+      if (link.getAttribute('hx-get') === url) {
+        link.classList.add('active');
+      }
+    });
+  }
+  document.addEventListener('DOMContentLoaded', (event) => {
+    updateActiveNav();
+    document.body.addEventListener('htmx:pushedIntoHistory', function (evt) {
+      updateActiveNav();
+    });
+
+    document.body.addEventListener('htmx:historyRestore', function () {
+      updateActiveNav();
+    });
+
+    document.body.addEventListener('htmx:beforeRequest', function (evt) {
+      const elt = evt.target;
+      if (
+        elt.classList &&
+        elt.classList.contains('nav-link') &&
+        elt.classList.contains('active')
+      ) {
+        evt.preventDefault();
+        evt.stopPropagation();
+      }
+    });
+  });
+</script>
+{{ end }}