From fe032133fbb1a0eaf5d425d68c4fca07ddd82a90 Mon Sep 17 00:00:00 2001
From: Pratyush Jha <pratyushjha06@gmail.com>
Date: Mon, 26 Jan 2026 16:52:29 +0530
Subject: [PATCH 1/3] feat: add back button to project detail page

---
 .../modules/home/modules/project/v1/index.tsx | 66 ++++++++++++++-----
 1 file changed, 48 insertions(+), 18 deletions(-)

diff --git a/client/src/modules/home/modules/project/v1/index.tsx b/client/src/modules/home/modules/project/v1/index.tsx
index 56d4b901..4ff03e68 100644
--- a/client/src/modules/home/modules/project/v1/index.tsx
+++ b/client/src/modules/home/modules/project/v1/index.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { Link, useParams } from 'react-router-dom';
+import { Link, useParams, useNavigate } from 'react-router-dom';
 import { Box, Button, Avatar, Link as MuiLink } from '@mui/material';
 import { getDay } from '../../../../../shared/utils/date';
 import { useAtomValue } from 'jotai';
@@ -18,6 +18,7 @@ import {
 import { useA2ZTheme } from '../../../../../shared/hooks/use-theme';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import GitHubIcon from '@mui/icons-material/GitHub';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { getAllProjectsResponse } from '../../../../../infra/rest/apis/project/typing';
 import { OutputBlockData } from '@editorjs/editorjs';
 import { CommentsWrapperAtom } from '../../../../../shared/components/organisms/comments-wrapper/states';
@@ -25,6 +26,7 @@ import A2ZTypography from '../../../../../shared/components/atoms/typography';
 
 const Project = () => {
   const { project_id } = useParams();
+  const navigate = useNavigate();
   const { theme: a2zTheme } = useA2ZTheme();
   const selectedProject = useAtomValue(SelectedProjectAtom);
   const similarProjects = useAtomValue(HomePageProjectsAtom);
@@ -72,23 +74,51 @@ const Project = () => {
               gap: { xs: 2, sm: 0 },
             }}
           >
-            <A2ZTypography
-              variant="h5"
-              text={selectedProject.title}
-              noWrap
-              props={{
-                sx: {
-                  maxWidth:
-                    selectedProject.live_url && selectedProject.repository_url
-                      ? '60%'
-                      : '80%',
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  whiteSpace: 'nowrap',
-                  fontWeight: 600,
-                },
-              }}
-            />
+            {/* Back Button + Title */}
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, maxWidth: { xs: '100%', sm: '60%' } }}>
+              {/* Desktop back button */}
+              <Button
+                onClick={() => navigate(-1)}
+                variant="outlined"
+                color="inherit"
+                startIcon={<ArrowBackIcon />}
+                sx={{ 
+                  minWidth: 'auto',
+                  display: { xs: 'none', sm: 'flex' }
+                }}
+              >
+              </Button>
+              
+              {/* Mobile back button - icon only */}
+              <Button
+                onClick={() => navigate(-1)}
+                variant="outlined"
+                color="inherit"
+                sx={{ 
+                  minWidth: 'auto',
+                  display: { xs: 'flex', sm: 'none' },
+                  px: 1
+                }}
+              >
+                <ArrowBackIcon />
+              </Button>
+
+              <A2ZTypography
+                variant="h5"
+                text={selectedProject.title}
+                noWrap
+                props={{
+                  sx: {
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    fontWeight: 600,
+                    flex: 1,
+                  },
+                }}
+              />
+            </Box>
+
 
             <Box
               sx={{

From 37a1af1a16cb20fb0ab41466d1cb6f59bd93fd4f Mon Sep 17 00:00:00 2001
From: Pratyush Jha <pratyushjha06@gmail.com>
Date: Thu, 29 Jan 2026 12:15:37 +0530
Subject: [PATCH 2/3] refactor: use shared Header component with back button in
 leftSideChildren

---
 .../modules/home/modules/project/v1/index.tsx | 77 ++++++++-----------
 1 file changed, 31 insertions(+), 46 deletions(-)

diff --git a/client/src/modules/home/modules/project/v1/index.tsx b/client/src/modules/home/modules/project/v1/index.tsx
index 4ff03e68..b09de3d9 100644
--- a/client/src/modules/home/modules/project/v1/index.tsx
+++ b/client/src/modules/home/modules/project/v1/index.tsx
@@ -23,6 +23,7 @@ import { getAllProjectsResponse } from '../../../../../infra/rest/apis/project/t
 import { OutputBlockData } from '@editorjs/editorjs';
 import { CommentsWrapperAtom } from '../../../../../shared/components/organisms/comments-wrapper/states';
 import A2ZTypography from '../../../../../shared/components/atoms/typography';
+import Header from '../../../../../shared/components/organisms/header';
 
 const Project = () => {
   const { project_id } = useParams();
@@ -47,7 +48,19 @@ const Project = () => {
   return (
     <>
       {commentsWrapper && <CommentsWrapper />}
-
+      <Header
+        leftSideChildren={
+          <Button
+            onClick={() => navigate(-1)}
+            variant="outlined"
+            color="inherit"
+            startIcon={<ArrowBackIcon />}
+          >
+            Back
+          </Button>
+        }
+      />
+      
       <Box
         sx={{
           height: '100%',
@@ -74,51 +87,23 @@ const Project = () => {
               gap: { xs: 2, sm: 0 },
             }}
           >
-            {/* Back Button + Title */}
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, maxWidth: { xs: '100%', sm: '60%' } }}>
-              {/* Desktop back button */}
-              <Button
-                onClick={() => navigate(-1)}
-                variant="outlined"
-                color="inherit"
-                startIcon={<ArrowBackIcon />}
-                sx={{ 
-                  minWidth: 'auto',
-                  display: { xs: 'none', sm: 'flex' }
-                }}
-              >
-              </Button>
-              
-              {/* Mobile back button - icon only */}
-              <Button
-                onClick={() => navigate(-1)}
-                variant="outlined"
-                color="inherit"
-                sx={{ 
-                  minWidth: 'auto',
-                  display: { xs: 'flex', sm: 'none' },
-                  px: 1
-                }}
-              >
-                <ArrowBackIcon />
-              </Button>
-
-              <A2ZTypography
-                variant="h5"
-                text={selectedProject.title}
-                noWrap
-                props={{
-                  sx: {
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                    fontWeight: 600,
-                    flex: 1,
-                  },
-                }}
-              />
-            </Box>
-
+            <A2ZTypography
+              variant="h5"
+              text={selectedProject.title}
+              noWrap
+              props={{
+                sx: {
+                  maxWidth:
+                    selectedProject.live_url && selectedProject.repository_url
+                      ? '60%'
+                      : '80%',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                  fontWeight: 600,
+                },
+              }}
+            />
 
             <Box
               sx={{

From 7ea51edaa7ad7201687b7b456e0b10952d841ce4 Mon Sep 17 00:00:00 2001
From: Pratyush Jha <pratyushjha06@gmail.com>
Date: Thu, 29 Jan 2026 12:19:03 +0530
Subject: [PATCH 3/3] fix: remove 'Back' text from back button

---
 client/src/modules/home/modules/project/v1/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/src/modules/home/modules/project/v1/index.tsx b/client/src/modules/home/modules/project/v1/index.tsx
index b09de3d9..d40fe253 100644
--- a/client/src/modules/home/modules/project/v1/index.tsx
+++ b/client/src/modules/home/modules/project/v1/index.tsx
@@ -56,11 +56,10 @@ const Project = () => {
             color="inherit"
             startIcon={<ArrowBackIcon />}
           >
-            Back
           </Button>
         }
       />
-      
+
       <Box
         sx={{
           height: '100%',