diff --git a/src/main/java/com/example/Portfolio/Controllers/Home.java b/src/main/java/com/example/Portfolio/Controllers/Home.java
index 6ecf9dc..f26077b 100644
--- a/src/main/java/com/example/Portfolio/Controllers/Home.java
+++ b/src/main/java/com/example/Portfolio/Controllers/Home.java
@@ -29,8 +29,8 @@ public class Home {
         //navbar links
         model.addAttribute("links", List.of(
             new Link("About", "#about"),
-            new Link("Experience", "#experience"),
-            new Link("Education", "#education"),
+            new Link("Experience", "#resume-details"),
+            new Link("Education", "#resume-details"),
             new Link("Projects", "#projects"),
             new Link("Contact", "#contact")
         ));
diff --git a/src/main/resources/static/assets/css/home.css b/src/main/resources/static/assets/css/home.css
index 0454b91..73d7ce6 100644
--- a/src/main/resources/static/assets/css/home.css
+++ b/src/main/resources/static/assets/css/home.css
@@ -1,108 +1,96 @@
 body {
     scroll-behavior: smooth;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    color: #333;
 }
 
 section {
-    padding: 4rem 0;
-    border-bottom: 1px solid var(--bs-secondary-bg-subtle);
+    padding: 5rem 0;
 }
 
-h1, h2, h3, h4, h5 {
-    letter-spacing: 0.02em;
+/* Reduced spacing for Hero */
+.intro {
+    padding: 100px 0 60px 0;
+    background: radial-gradient(circle at top right, #f8f9ff 0%, #ffffff 100%);
 }
 
-/* ---------- NAVBAR ---------- */
-.navbar {
-    backdrop-filter: blur(6px);
+.profile-img {
+    border: 8px solid #fff;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+    object-fit: cover;
+    border-radius: 50%;
 }
 
-.nav-link {
+/* Skill Badges */
+.skill-badge {
+    background: #f0f2f5;
+    color: #475569;
+    padding: 0.4rem 0.8rem;
+    border-radius: 6px;
+    font-size: 0.85rem;
+    font-weight: 500;
+    border: 1px solid rgba(0,0,0,0.05);
+}
+
+/* Timeline UI to fix "weird" wide cards */
+.timeline-card {
     position: relative;
+    padding-left: 1.5rem;
+    border-left: 2px solid #e9ecef;
+    margin-bottom: 2rem;
+    transition: 0.3s;
 }
 
-.nav-link::after {
+.timeline-card::before {
     content: "";
     position: absolute;
-    left: 0;
-    bottom: -4px;
-    width: 0;
-    height: 2px;
-    background-color: var(--bs-primary);
-    transition: width 0.3s ease;
+    left: -7px;
+    top: 4px;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: var(--bs-primary);
 }
 
-.nav-link:hover::after {
-    width: 100%;
-}
-
-/* ---------- ICON LINKS ---------- */
-.icon-link i {
-    font-size: 1.6rem;
-    transition: color 0.3s ease, transform 0.3s ease;
-}
-
-.icon-link:hover i {
-    color: var(--bs-primary);
-    transform: translateY(-3px);
-}
-
-/* ---------- INTRO / HERO ---------- */
-.intro {
-    min-height: 70vh;
-    display: flex;
-    align-items: center;
-    background: linear-gradient(180deg, var(--bs-light), #ffffff);
-}
-
-.intro img {
-    border: 4px solid var(--bs-white);
-}
-
-.skill-badge {
-    background: var(--bs-secondary-bg);
-    border-radius: 2rem;
-    padding: 0.4rem 0.9rem;
-    font-size: 0.85rem;
-}
-
-/* ---------- CARDS (GLOBAL) ---------- */
-.card,
-.project-item,
-.contact-box {
-    border-radius: 1rem;
-    border: 1px solid var(--bs-secondary-bg-subtle);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    background: var(--bs-white);
-}
-
-.card:hover,
-.project-item:hover,
-.contact-box:hover {
-    transform: translateY(-6px);
-    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.08);
-}
-
-/* ---------- SECTION HEADERS ---------- */
+/* Section Headers */
 .section-header {
-    text-align: center;
-    margin-bottom: 3rem;
+    margin-bottom: 2.5rem;
+    border-bottom: 2px solid #f0f0f0;
+    padding-bottom: 0.75rem;
 }
 
-.section-header i {
-    font-size: 2rem;
-    color: var(--bs-primary);
+/* Modern Project Cards */
+.project-item {
+    border-radius: 12px;
+    background: white;
+    border: 1px solid rgba(0,0,0,0.05);
+    transition: all 0.3s ease;
 }
 
-/* ---------- FOOTER ---------- */
-footer a {
-    text-decoration: none;
-    transition: color 0.3s ease;
+.project-item:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
+    border-color: var(--bs-primary);
 }
 
-footer a:hover {
-    color: var(--bs-primary);
+.w-fit {
+    width: fit-content;
 }
 
-footer i {
-    font-size: 1.4rem;
+/* Form Controls */
+.form-control {
+    padding: 0.75rem;
+    border-radius: 8px;
+    border: 1px solid #e0e0e0;
 }
+
+.form-control:focus {
+    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
+}
+
+/* Navbar blur effect */
+.navbar {
+    backdrop-filter: blur(10px);
+    background-color: rgba(255, 255, 255, 0.8) !important;
+    border-bottom: 1px solid rgba(0,0,0,0.05);
+}
\ No newline at end of file
diff --git a/src/main/resources/static/assets/css/project.css b/src/main/resources/static/assets/css/project.css
index 1a6e154..778ee78 100644
--- a/src/main/resources/static/assets/css/project.css
+++ b/src/main/resources/static/assets/css/project.css
@@ -1,104 +1,62 @@
 body {
     scroll-behavior: smooth;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    background-color: #f9fbff; /* Very slight blue tint for a technical look */
 }
 
-section {
-    padding: 5rem 0;
-    border-bottom: 1px solid var(--bs-secondary-bg-subtle);
-}
-
-h1,
-h2,
-h3,
-h4,
-h5 {
-    letter-spacing: 0.02em;
-}
-
+/* --- HERO --- */
 .hero {
-    min-height: 65vh;
+    padding: 80px 0 40px;
+    background: #ffffff;
+}
+
+.project-badge {
+    text-transform: uppercase;
+    letter-spacing: 0.1rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--bs-primary);
+}
+
+/* --- DYNAMIC CONTENT TABS --- */
+.nav-pills .nav-link {
+    color: #6c757d;
+    font-weight: 600;
+    padding: 0.8rem 1.5rem;
+    border-radius: 8px;
+    transition: all 0.2s;
+}
+
+.nav-pills .nav-link.active {
+    background-color: var(--bs-primary);
+    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2);
+}
+
+.dynamic-container {
+    background: #ffffff;
+    border: 1px solid rgba(0,0,0,0.05);
+    border-radius: 16px;
+    padding: 3rem;
+    min-height: 400px; /* Prevents jumping when switching tabs */
+    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
+}
+
+
+/* --- CAROUSEL --- */
+.browser-frame {
+    border: 1px solid #dee2e6;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
+}
+
+.browser-bar {
+    background: #f1f1f1;
+    height: 30px;
     display: flex;
     align-items: center;
-    text-align: center;
+    padding-left: 15px;
+    gap: 6px;
 }
 
-.hero img {
-    transition: transform 0.4s ease;
-}
-
-/* ---------- NAVBAR ---------- */
-.navbar {
-    backdrop-filter: blur(6px);
-}
-
-.nav-link {
-    position: relative;
-}
-
-.nav-link::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    bottom: -4px;
-    width: 0;
-    height: 2px;
-    background-color: var(--bs-primary);
-    transition: width 0.3s ease;
-}
-
-.nav-link:hover::after {
-    width: 100%;
-}
-
-.nav-link::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    bottom: -4px;
-    width: 0;
-    height: 2px;
-    background-color: var(--bs-primary);
-    transition: width 0.3s ease;
-}
-
-
-.icon-link i {
-    font-size: 1.5rem;
-    transition: color 0.3s ease, transform 0.3s ease;
-}
-
-.icon-link:hover i {
-    color: var(--bs-primary);
-    transform: translateY(-2px);
-}
-
-
-.card,
-.project-box {
-    border-radius: 1rem;
-    border: 1px solid var(--bs-secondary-bg-subtle);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.card:hover,
-.project-box:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.08);
-}
-
-.tech-chips {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-}
-
-.tech-chip {
-    padding: 0.375rem 0.75rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    border-radius: 999px;
-    background-color: #f1f3f5;
-    color: #495057;
-    border: 1px solid #dee2e6;
-    white-space: nowrap;
-}
\ No newline at end of file
+.dot { height: 8px; width: 8px; border-radius: 50%; background: #ddd; }
\ No newline at end of file
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index 30d3828..e7c449f 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -12,183 +12,135 @@
     <link th:href="@{/assets/css/bootstrap.min.css}" rel="stylesheet">
     <link th:href="@{https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css}" rel="stylesheet">
     <link rel="stylesheet" th:href="@{/assets/css/home.css}">
+    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
 </head>
 
 <body>
 
-    <!-- NAVBAR -->
     <div th:replace="~{fragments/navbar :: navbar}"></div>
 
-    <!-- INTRO / HERO + ABOUT -->
     <header id="about" class="intro">
         <div class="container">
             <div class="row align-items-center gy-4">
-
                 <div class="col-md-4 text-center">
-                    <img th:src="@{/assets/images/profileImage.jpg}" class="rounded-circle mb-3" width="160"
-                        height="160" alt="Kiyan Mckop">
+                    <img th:src="@{/assets/images/profileImage.jpg}" class="profile-img mb-3" width="180" height="180" alt="Kiyan Mckop">
                 </div>
-
                 <div class="col-md-8">
-                    <h1 class="fw-bold">Kiyan Mckop</h1>
-                    <p class="lead text-muted mb-3">
-                        Software Engineer specializing in Java, Spring Boot, and backend systems.
+                    <h1 class="display-5 fw-bold">Kiyan Mckop</h1>
+                    <p class="lead text-secondary mb-3">
+                        Software Engineer specializing in <span class="text-primary fw-semibold">Java, Spring Boot</span>, and backend systems.
                     </p>
-
-                    <p>
-                        Honours graduate in Information Technology with experience building secure,
-                        maintainable enterprise software and internal ERP systems.
+                    <p class="text-muted">
+                        Honours graduate in IT with experience building secure, maintainable enterprise software and internal ERP systems.
                     </p>
-
-                    <!-- Skills -->
-                    <div class="d-flex flex-wrap gap-2 my-3">
+                    <div class="d-flex flex-wrap gap-2 my-4">
                         <span class="skill-badge">Java</span>
                         <span class="skill-badge">Spring Boot</span>
                         <span class="skill-badge">REST APIs</span>
                         <span class="skill-badge">SQL</span>
                         <span class="skill-badge">Docker</span>
                     </div>
-
-                    <!-- Actions -->
-                    <div class="d-flex gap-4 mt-3">
-                        <a class="icon-link" th:href="@{/resume}" title="Resume">
-                            <i class="bi bi-file-earmark-person"></i>
-                        </a>
-                        <a class="icon-link" th:href="@{/cv}"
-                            title="CV">
-                            <i class="bi bi-file-earmark-text"></i>
-                        </a>
-                        <a class="icon-link" href="https://mckopserver.ddns.net" target="_blank" title="Server">
-                            <i class="bi bi-hdd-network"></i>
-                        </a>
+                    <div class="d-flex gap-4">
+                        <a class="icon-link" th:href="@{/resume}" title="Resume"><i class="bi bi-file-earmark-person"></i></a>
+                        <a class="icon-link" th:href="@{/cv}" title="CV"><i class="bi bi-file-earmark-text"></i></a>
+                        <a class="icon-link" href="https://mckopserver.ddns.net" target="_blank" title="Server"><i class="bi bi-hdd-network"></i></a>
                     </div>
                 </div>
-
             </div>
         </div>
     </header>
 
-    <!-- EXPERIENCE -->
-    <section id="experience">
+    <section id="resume-details" class="bg-light">
+        <div class="container">
+            <div class="row g-5">
+                <div class="col-lg-6">
+                    <div class="section-header">
+                        <h2 class="fw-bold"><i class="bi bi-briefcase me-2"></i>Experience</h2>
+                    </div>
+                    <div class="card p-4 border-0 shadow-sm">
+                        <div class="timeline-card">
+                            <h5 class="fw-bold mb-0">Graduate Software Engineer</h5>
+                            <p class="text-primary small mb-2">WBHO Construction · 2025</p>
+                            <p class="small text-muted mb-0">Developed and maintained internal ERP software systems.</p>
+                        </div>
+                        <div class="timeline-card">
+                            <h5 class="fw-bold mb-0">Data Capturer</h5>
+                            <p class="text-primary small mb-2">Wealth Associates · 2022</p>
+                            <p class="small text-muted mb-0">Handled sensitive data with high accuracy and integrity.</p>
+                        </div>
+                        <div class="timeline-card mb-0">
+                            <h5 class="fw-bold mb-0">General Office Work</h5>
+                            <p class="text-primary small mb-2">Wealth Associates · 2019</p>
+                            <p class="small text-muted mb-0">Administrative and operational support.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-lg-6">
+                    <div class="section-header">
+                        <h2 class="fw-bold"><i class="bi bi-mortarboard me-2"></i>Education</h2>
+                    </div>
+                    <div class="card p-4 border-0 shadow-sm">
+                        <div class="timeline-card">
+                            <h5 class="fw-bold mb-0">BSc Honours in IT</h5>
+                            <p class="text-primary small mb-2">Software Engineering</p>
+                            <p class="small text-muted mb-0">Graduated with Honours</p>
+                        </div>
+                        <div class="timeline-card">
+                            <h5 class="fw-bold mb-0">BSc in IT</h5>
+                            <p class="text-primary small mb-2">Software Engineering</p>
+                        </div>
+                        <div class="timeline-card mb-0">
+                            <h5 class="fw-bold mb-0">Matric Certificate</h5>
+                            <p class="text-primary small mb-2">IT | CAT | Business</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section id="projects" class="bg-white">
         <div class="container">
             <div class="section-header">
-                <i class="bi bi-briefcase"></i>
-                <h2 class="fw-bold mt-2">Work Experience</h2>
+                <h2 class="fw-bold"><i class="bi bi-code-slash me-2"></i>Projects</h2>
             </div>
-
             <div class="row g-4">
-                <div class="col-md-4" th:each="exp : ${null}">
-                    <!-- Static cards retained -->
-                </div>
-
-                <!-- WBHO -->
-                <div class="col-md-4">
-                    <div class="card h-100 p-3">
-                        <h5>Graduate Software Engineer</h5>
-                        <p class="text-muted">WBHO Construction · 2025</p>
-                        <p>Developed and maintained internal ERP software systems.</p>
-                    </div>
-                </div>
-
-                <div class="col-md-4">
-                    <div class="card h-100 p-3">
-                        <h5>Data Capturer</h5>
-                        <p class="text-muted">Wealth Associates · 2022</p>
-                        <p>Handled sensitive data with high accuracy and integrity.</p>
-                    </div>
-                </div>
-
-                <div class="col-md-4">
-                    <div class="card h-100 p-3">
-                        <h5>General Office Work</h5>
-                        <p class="text-muted">Wealth Associates · 2019</p>
-                        <p>Administrative and operational support.</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- EDUCATION -->
-    <section id="education" class="bg-light">
-        <div class="container">
-            <div class="section-header">
-                <i class="bi bi-mortarboard"></i>
-                <h2 class="fw-bold mt-2">Education</h2>
-            </div>
-
-            <div class="row justify-content-center">
-                <div class="col-md-8">
-                    <div class="card p-4 text-center">
-                        <h5>BSc Honours in Information Technology</h5>
-                        <p class="text-muted mb-1">Specialization: Software Engineering</p>
-                        <p class="text-muted">Graduated with Honours</p>
-                    </div>
-                </div>
-            </div>
-
-            <div class="row justify-content-center">
-                <div class="col-md-8">
-                    <div class="card p-4 text-center">
-                        <h5>BSc in Information Technology</h5>
-                        <p class="text-muted mb-1">Specialization: Software Engineering</p>
-                    </div>
-                </div>
-            </div>
-
-            <div class="row justify-content-center">
-                <div class="col-md-8">
-                    <div class="card p-4 text-center">
-                        <h5>Matric Certificate</h5>
-                        <p class="text-muted mb-1">Major Subjects: IT | CAT |Business</p>
-                    </div>
-                </div>
-            </div>
-
-
-        </div>
-    </section>
-
-    <!-- PROJECTS -->
-    <section id="projects">
-        <div class="container">
-            <div class="section-header">
-                <i class="bi bi-code-slash"></i>
-                <h2 class="fw-bold mt-2">Projects</h2>
-                <p class="text-muted">Selected technical work</p>
-            </div>
-
-            <div class="row g-4 d-inline-flex justify-content-center align-items-center" style="width: 100%;">
                 <div class="col-md-6 col-lg-4" th:each="project : ${projects}">
-                    <div class="project-item h-100 p-3 ">
-                        <h5 th:text="${project.name}"></h5>
-                        <p class="small text-muted" th:text="${project.default_branch}"></p>
-                        <p th:text="${project.description}"></p>
-                        <a th:href="@{/project/{repo}(repo=${project.name})}">View Details</a>
+                    <div class="project-item h-100 p-4 d-flex flex-column shadow-sm">
+                        <h5 class="fw-bold mb-1" th:text="${project.name}">Project Name</h5>
+                        <p class="text-muted small flex-grow-1">2025 - Present</p>
+                        <!-- <code class="small text-primary mb-3" th:text="${project.default_branch}">main</code> -->
+                        <p class="text-muted small flex-grow-1" th:text="${project.description}">Description goes here...</p>
+                        <a class="btn btn-outline-primary btn-sm mt-3 w-fit" th:href="@{/project/{repo}(repo=${project.name})}">
+                            View Details <i class="bi bi-arrow-right ms-1"></i>
+                        </a>
                     </div>
                 </div>
             </div>
         </div>
     </section>
 
-    <!-- CONTACT -->
     <section id="contact" class="bg-light">
         <div class="container">
-            <div class="section-header">
-                <i class="bi bi-envelope"></i>
-                <h2 class="fw-bold mt-2">Contact</h2>
-                <p class="text-muted">Let’s work together</p>
-            </div>
-
             <div class="row justify-content-center">
                 <div class="col-md-6">
-                    <div class="contact-box p-4">
-                        <form method="post" th:action="@{/contact}">
-                            <input class="form-control mb-3" name="name" placeholder="Name" required>
-                            <input type="email" class="form-control mb-3" name="email" placeholder="Email" required>
-                            <textarea class="form-control mb-3" name="message" rows="4" placeholder="Message"
-                                required></textarea>
-                            <button class="btn btn-primary w-100">Send Message</button>
+                    <div class="section-header text-center border-0">
+                        <h2 class="fw-bold"><i class="bi bi-envelope me-2"></i>Contact</h2>
+                        <p class="text-muted">Let’s work together</p>
+                    </div>
+                    <div class="contact-box p-4 shadow-sm border-0">
+                        <form th:action="@{/contact}" th:attr="hx-post=@{/contact}" hx-target="#toast-container" hx-swap="beforeend" hx-on:htmx:after-request="this.reset()">
+                            <div class="mb-3">
+                                <input class="form-control" name="name" placeholder="Name" required>
+                            </div>
+                            <div class="mb-3">
+                                <input type="email" class="form-control" name="email" placeholder="Email" required>
+                            </div>
+                            <div class="mb-3">
+                                <textarea class="form-control" name="message" rows="4" placeholder="Your Message" required></textarea>
+                            </div>
+                            <button class="btn btn-primary w-100 py-2 fw-bold">Send Message</button>
                         </form>
                     </div>
                 </div>
@@ -196,12 +148,20 @@
         </div>
     </section>
 
-    <div th:fragment="alertSuccess" role="alert" class='alert alert-success' th:text="${alertMessage}">Thank you! Your message has been sent.</div>
+    <div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3"></div>
+
+    <div th:fragment="alertSuccess" th:if="${alertMessage}">
+        <div class="toast show align-items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="d-flex">
+                <div class="toast-body" th:text="${alertMessage}">
+                    Message sent successfully!
+                </div>
+                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+        </div>
+    </div>
 
-    <!-- FOOTER -->
     <div th:replace="~{fragments/footer :: footer}"></div>
-
     <script th:src="@{/assets/js/bootstrap.bundle.min.js}"></script>
 </body>
-
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/project.html b/src/main/resources/templates/project.html
index ae90331..f1074d5 100644
--- a/src/main/resources/templates/project.html
+++ b/src/main/resources/templates/project.html
@@ -2,15 +2,9 @@
 <html lang="en" data-bs-theme="light" xmlns:th="http://www.thymeleaf.org">
 
 <head>
-    <!-- ================= META ================= -->
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <title th:text="${project.name} + ' | Kiyan Mckop'">Project</title>
-
-    <!-- SEO -->
-    <meta name="description" th:content="${project.description}">
-    <meta name="author" content="Kiyan Mckop">
+    <title th:text="${project.name} + ' | Project Details'">Project</title>
 
     <link th:href="@{/assets/css/bootstrap.min.css}" rel="stylesheet">
     <link th:href="@{https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css}" rel="stylesheet">
@@ -19,115 +13,113 @@
 
 <body>
 
-    <!-- ================= NAVBAR ================= -->
     <div th:replace="~{fragments/navbar :: navbar}"></div>
 
-    <!-- ================= HERO ================= -->
-    <header  class="hero bg-light">
-        <div  class="container text-center">
-            <h1 class="fw-bold" th:text="${project.name}">Project Name</h1>
-
-            <p class="lead text-muted mt-2" th:text="${project.description}">
-                Project description
-            </p>
-
-            <!-- Project Links -->
-            <div class="d-flex justify-content-center gap-4 mt-4">
-                <a th:href="${project.githubUrl}" target="_blank" class="icon-link" title="GitHub Repository">
-                    <i class="bi bi-github"></i>
-                </a>
-
-                <a th:if="${project.liveUrl != null}" th:href="${project.liveUrl}" target="_blank" class="icon-link"
-                    title="Live Application">
-                    <i class="bi bi-box-arrow-up-right"></i>
-                </a>
+    <header class="hero">
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="col-lg-7">
+                    <span class="project-badge">Project Case Study</span>
+                    <h1 class="display-4 fw-bold mt-2" th:text="${project.name}">Project Name</h1>
+                    <p class="lead text-muted" th:text="${project.description}">Short description.</p>
+                    
+                    <div class="d-flex gap-3 mt-4">
+                        <!-- <a th:href="${project.githubUrl}" target="_blank" class="btn btn-dark px-4 py-2 rounded-pill">
+                            <i class="bi bi-github me-2"></i> GitHub
+                        </a> -->
+                        <a th:if="${project.liveUrl != null}" th:href="${project.liveUrl}" target="_blank" class="btn btn-outline-primary px-4 py-2 rounded-pill">
+                            <i class="bi bi-globe me-2"></i> Live Demo
+                        </a>
+                    </div>
+                </div>
             </div>
         </div>
     </header>
 
-    <!-- ================= SCREENSHOTS ================= -->
-    <section th:if="${project.screenshots != null && !project.screenshots.isEmpty()}">
+    <section class="py-4" th:if="${project.screenshots != null && !project.screenshots.isEmpty()}">
         <div class="container">
-            <h2 class="fw-bold text-center mb-5">Application Screenshots</h2>
-
-            <div id="projectCarousel" class="carousel slide" data-bs-ride="carousel">
-                <div class="carousel-inner rounded-4 shadow-sm">
-                    <div th:each="img, stat : ${project.screenshots}"
-                        th:class="'carousel-item ' + (${stat.index} == 0 ? 'active' : '')">
-                        <img th:src="${img}" class="d-block w-100" alt="Project Screenshot">
-                    </div>
+            <div class="browser-frame">
+                <div class="browser-bar">
+                    <div class="dot"></div><div class="dot"></div><div class="dot"></div>
+                </div>
+                <div id="projectCarousel" class="carousel slide" data-bs-ride="carousel">
+                    <div class="carousel-inner">
+                        <div th:each="img, stat : ${project.screenshots}"
+                            th:class="'carousel-item ' + (${stat.index} == 0 ? 'active' : '')">
+                            <img th:src="${img}" class="d-block w-100" alt="Screenshot">
+                        </div>
+                    </div>
+                    <button class="carousel-control-prev" type="button" data-bs-target="#projectCarousel" data-bs-slide="prev">
+                        <span class="carousel-control-prev-icon"></span>
+                    </button>
+                    <button class="carousel-control-next" type="button" data-bs-target="#projectCarousel" data-bs-slide="next">
+                        <span class="carousel-control-next-icon"></span>
+                    </button>
                 </div>
-
-
-                <button class="carousel-control-prev" type="button" data-bs-target="#projectCarousel"
-                    data-bs-slide="prev">
-                    <span class="carousel-control-prev-icon"></span>
-                </button>
-
-                <button class="carousel-control-next" type="button" data-bs-target="#projectCarousel"
-                    data-bs-slide="next">
-                    <span class="carousel-control-next-icon"></span>
-                </button>
             </div>
         </div>
     </section>
 
-    <!-- ================= OVERVIEW & STACK ================= -->
-    <section id="project-overview" class="bg-light">
+    <section class="py-5">
         <div class="container">
-            <div class="row gy-4">
+            <ul class="nav nav-pills mb-4 gap-2 justify-content-center" id="projectTab" role="tablist">
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link active" id="overview-tab" data-bs-toggle="pill" data-bs-target="#overview" type="button" role="tab">Overview</button>
+                </li>
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link" id="stack-tab" data-bs-toggle="pill" data-bs-target="#stack" type="button" role="tab">Tech Stack</button>
+                </li>
+                <li class="nav-item" role="presentation" th:if="${project.documentationHtml != null}">
+                    <button class="nav-link" id="docs-tab" data-bs-toggle="pill" data-bs-target="#docs" type="button" role="tab">Documentation</button>
+                </li>
+                <li class="nav-item" role="presentation" th:if="${project.futureHtml != null}">
+                    <button class="nav-link" id="future-tab" data-bs-toggle="pill" data-bs-target="#future" type="button" role="tab">Future Plans</button>
+                </li>
+            </ul>
 
-                <!-- Overview -->
-                <div class="col-lg-8">
-                    <h2 class="fw-bold">Project Overview</h2>
-                    <div th:utext="${project.overviewHtml}"></div>
+            <div class="tab-content dynamic-container" id="projectTabContent">
+                <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
+                    <h3 class="fw-bold mb-4">Project Overview</h3>
+                    <div class="lh-lg" th:utext="${project.overviewHtml}"></div>
                 </div>
 
-                <!-- Stack -->
-                <div class="col-lg-4">
-                    <div class="card h-100 shadow-sm">
-                        <div class="card-body">
-                            <div th:utext="${project.stackHtml}"></div>
+                <div class="tab-pane fade" id="stack" role="tabpanel" aria-labelledby="stack-tab">
+                    <h3 class="fw-bold mb-4">Technology Stack</h3>
+                    <div class="stack-content" th:utext="${project.stackHtml}"></div>
+                </div>
+
+                <div class="tab-pane fade" id="docs" role="tabpanel" aria-labelledby="docs-tab" th:if="${project.documentationHtml != null}">
+                    <h3 class="fw-bold mb-4">Technical Documentation</h3>
+                    <div class="lh-lg" th:utext="${project.documentationHtml}"></div>
+                </div>
+
+                <div class="tab-pane fade" id="future" role="tabpanel" aria-labelledby="future-tab" th:if="${project.futureHtml != null}">
+                    <h3 class="fw-bold mb-4">The Roadmap</h3>
+                    <div class="lh-lg" th:utext="${project.futureHtml}"></div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section id="demo-vid" class="bg-dark py-5 text-white">
+        <div class="container text-center">
+            <h2 class="fw-bold mb-5"><i class="bi bi-play-btn me-2"></i>Video Demonstration</h2>
+            <div class="row justify-content-center">
+                <div class="col-lg-10">
+                    <div class="ratio ratio-16x9 rounded-4 shadow-lg overflow-hidden bg-secondary">
+                        <div class="d-flex align-items-center justify-content-center h-100">
+                            <div class="text-center">
+                                <i class="bi bi-camera-video display-1 opacity-25"></i>
+                                <p class="mt-3">Walkthrough Video Coming Soon</p>
+                            </div>
                         </div>
                     </div>
                 </div>
-
             </div>
         </div>
     </section>
 
-    <!-- ================= DOCUMENTATION ================= -->
-    <section id="documentation" th:if="${project.documentationHtml != null}">
-        <div class="container">
-            <h2 class="fw-bold text-center mb-5">Documentation</h2>
-            <div th:utext="${project.documentationHtml}"></div>
-        </div>
-    </section>
-
-    <!-- ================= FUTURE PLANS ================= -->
-    <section id="future-plans" class="bg-light" th:if="${project.futureHtml != null}">
-        <div class="container">
-            <h2 class="fw-bold text-center mb-5">Future Plans</h2>
-            <div th:utext="${project.futureHtml}"></div>
-        </div>
-    </section>
-
-    <!-- ================= DEMO ================= -->
-    <section id="demo-vid">
-        <div class="container">
-            <h2 class="fw-bold text-center mb-5">Demo Video</h2>
-
-            <div class="ratio ratio-16x9 rounded-4 shadow-sm overflow-hidden text-center">
-                <span><em>Coming Soon</em></span>
-            </div>
-        </div>
-    </section>
-
-    <!-- ================= FOOTER ================= -->
     <div th:replace="~{fragments/footer :: footer}"></div>
-
     <script th:src="@{/assets/js/bootstrap.bundle.min.js}"></script>
-
 </body>
-
 </html>
\ No newline at end of file