diff --git a/frontend/src/pages/ProjectDetail.tsx b/frontend/src/pages/ProjectDetail.tsx
index 725381d..5fd5cc0 100644
--- a/frontend/src/pages/ProjectDetail.tsx
+++ b/frontend/src/pages/ProjectDetail.tsx
@@ -236,35 +236,47 @@ export function ProjectDetail() {
         >
           <div className="mx-auto flex max-w-site items-stretch justify-between gap-3 px-6 lg:px-10">
             {prevProject ? (
-              <Link
-                to={href(`/projects/${prevProject.slug}`)}
-                className="group flex min-w-0 flex-1 items-center gap-3 rounded-2xl border border-ivory/12 bg-ink/40 px-4 py-3.5 transition-all duration-300 ease-lux hover:-translate-y-0.5 hover:border-copper/50 hover:bg-ink/70 md:max-w-[46%] md:px-6 md:py-5"
-              >
-                <span className="flex min-w-0 flex-col text-start">
-                  <span className="text-[11px] font-light text-ivory/50">{t('prevProject')}</span>
-                  <span className="mt-1 truncate text-sm font-bold text-ivory transition-colors duration-300 group-hover:text-copper md:text-base">
-                    {prevProject.title}
+              <div className="flex min-w-0 flex-1 items-center gap-3 md:max-w-[46%]">
+                {/* فلش بیرون کادر، روی لبهٔ بیرونی */}
+                <ArrowLeftIcon
+                  className="h-5 w-5 shrink-0 -scale-x-100 text-copper transition-transform duration-300 group-hover/prev:-translate-x-0.5"
+                  aria-hidden="true"
+                />
+                <Link
+                  to={href(`/projects/${prevProject.slug}`)}
+                  className="group/prev flex min-w-0 flex-1 items-center justify-end rounded-2xl border border-ivory/12 bg-ink/40 px-4 py-3.5 transition-all duration-300 ease-lux hover:-translate-y-0.5 hover:border-copper/50 hover:bg-ink/70 md:px-6 md:py-5"
+                >
+                  <span className="flex min-w-0 flex-col text-end">
+                    <span className="text-[11px] font-light text-ivory/50">{t('prevProject')}</span>
+                    <span className="mt-1 truncate text-sm font-bold text-ivory transition-colors duration-300 group-hover/prev:text-copper md:text-base">
+                      {prevProject.title}
+                    </span>
                   </span>
-                </span>
-                <ArrowLeftIcon className="h-4 w-4 shrink-0 -scale-x-100 text-copper" aria-hidden="true" />
-              </Link>
+                </Link>
+              </div>
             ) : (
               <span className="flex-1" aria-hidden="true" />
             )}
 
             {nextProject && (
-              <Link
-                to={href(`/projects/${nextProject.slug}`)}
-                className="group flex min-w-0 flex-1 items-center justify-end gap-3 rounded-2xl border border-ivory/12 bg-ink/40 px-4 py-3.5 text-end transition-all duration-300 ease-lux hover:-translate-y-0.5 hover:border-copper/50 hover:bg-ink/70 md:max-w-[46%] md:px-6 md:py-5"
-              >
-                <ArrowLeftIcon className="h-4 w-4 shrink-0 text-copper" aria-hidden="true" />
-                <span className="flex min-w-0 flex-col text-end">
-                  <span className="text-[11px] font-light text-ivory/50">{t('nextProject')}</span>
-                  <span className="mt-1 truncate text-sm font-bold text-ivory transition-colors duration-300 group-hover:text-copper md:text-base">
-                    {nextProject.title}
+              <div className="flex min-w-0 flex-1 items-center gap-3 md:max-w-[46%]">
+                <Link
+                  to={href(`/projects/${nextProject.slug}`)}
+                  className="group/next flex min-w-0 flex-1 items-center justify-start rounded-2xl border border-ivory/12 bg-ink/40 px-4 py-3.5 transition-all duration-300 ease-lux hover:-translate-y-0.5 hover:border-copper/50 hover:bg-ink/70 md:px-6 md:py-5"
+                >
+                  <span className="flex min-w-0 flex-col text-start">
+                    <span className="text-[11px] font-light text-ivory/50">{t('nextProject')}</span>
+                    <span className="mt-1 truncate text-sm font-bold text-ivory transition-colors duration-300 group-hover/next:text-copper md:text-base">
+                      {nextProject.title}
+                    </span>
                   </span>
-                </span>
-              </Link>
+                </Link>
+                {/* فلش بیرون کادر، روی لبهٔ بیرونی */}
+                <ArrowLeftIcon
+                  className="h-5 w-5 shrink-0 text-copper transition-transform duration-300 group-hover/next:translate-x-0.5"
+                  aria-hidden="true"
+                />
+              </div>
             )}
           </div>
         </nav>