diff --git a/src/components/Projects/ProjectTabs.tsx b/src/components/Projects/ProjectTabs.tsx
index 1c7350b07..62d5141e3 100644
--- a/src/components/Projects/ProjectTabs.tsx
+++ b/src/components/Projects/ProjectTabs.tsx
@@ -1,13 +1,5 @@
 import { cn } from '../../lib/classname';
-import {
-  ArrowLeft,
-  Blocks,
-  BoxSelect,
-  type LucideIcon,
-  StepBackIcon,
-  StickyNote,
-  Text,
-} from 'lucide-react';
+import { ArrowLeft, Blocks, type LucideIcon, Text } from 'lucide-react';
 
 export const allowedProjectTabs = ['details', 'solutions'] as const;
 export type AllowedProjectTab = (typeof allowedProjectTabs)[number];
@@ -53,15 +45,20 @@ export function ProjectTabs(props: ProjectTabsProps) {
 
   return (
     <div className="my-3 flex flex-row flex-wrap items-center gap-1.5 overflow-hidden rounded-md border bg-white px-2.5 text-sm">
-      <a
-        href={`/${parentRoadmapId}/projects`}
-        className={
-          '-ml-1.5 flex items-center rounded-md bg-gray-300 px-2 py-1.5 text-xs tracking-wide text-black hover:bg-gray-400/60'
-        }
+      <button
+        onClick={(e) => {
+          if (window.history.length > 1) {
+            window.history.back();
+            return;
+          }
+
+          window.location.href = `/${parentRoadmapId}/projects`;
+        }}
+        className="-ml-1.5 flex items-center rounded-md bg-gray-300 px-2 py-1.5 text-xs tracking-wide text-black hover:bg-gray-400/60"
       >
         <ArrowLeft className="mr-1 inline-block h-3.5 w-3.5" strokeWidth={2} />
         <span className="hidden sm:inline">Back to Projects</span>
-      </a>
+      </button>
       <TabButton
         text={'Project Detail'}
         icon={Text}
diff --git a/src/pages/projects/[projectId]/index.astro b/src/pages/projects/[projectId]/index.astro
index 7a712a729..73b17037c 100644
--- a/src/pages/projects/[projectId]/index.astro
+++ b/src/pages/projects/[projectId]/index.astro
@@ -49,7 +49,12 @@ const parentRoadmapId = projectData?.roadmapIds?.[0] || '';
 >
   <div class='bg-gray-50'>
     <div class='container'>
-      <ProjectTabs parentRoadmapId={parentRoadmapId} projectId={projectId} activeTab='details' />
+      <ProjectTabs
+        parentRoadmapId={parentRoadmapId}
+        projectId={projectId}
+        activeTab='details'
+        client:load
+      />
 
       <div
         class='mb-4 rounded-lg border bg-gradient-to-b from-gray-100 to-white to-10% p-4 py-2 sm:p-5'
diff --git a/src/pages/projects/[projectId]/solutions.astro b/src/pages/projects/[projectId]/solutions.astro
index 5d0b821a8..17d67ec9f 100644
--- a/src/pages/projects/[projectId]/solutions.astro
+++ b/src/pages/projects/[projectId]/solutions.astro
@@ -52,6 +52,7 @@ const githubUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/maste
         parentRoadmapId={parentRoadmapId}
         projectId={projectId}
         activeTab='solutions'
+        client:load
       />
 
       <ListProjectSolutions