diff --git a/.env.development b/.env.development
index 4a95475..66d408b 100644
--- a/.env.development
+++ b/.env.development
@@ -1,3 +1,4 @@
 NEXT_PUBLIC_API_URL=http://localhost:8000/api
 NEXT_PUBLIC_BLOG_API_URL=http://localhost:8000/api/blog
-NEXT_PUBLIC_FRONT_URL=http://localhost:3001
\ No newline at end of file
+NEXT_PUBLIC_FRONT_URL=http://localhost:3001
+NEXT_PUBLIC_BACK_URL=http://localhost:8000
\ No newline at end of file
diff --git a/.env.production b/.env.production
index 52587d1..066eb71 100644
--- a/.env.production
+++ b/.env.production
@@ -1,3 +1,4 @@
 NEXT_PUBLIC_API_URL=https://backend.parsaaghayi.ir/api
 NEXT_PUBLIC_BLOG_API_URL=https://backend.parsaaghayi.ir/api/blog
-NEXT_PUBLIC_FRONT_URL=https://parsaaghayi.ir
\ No newline at end of file
+NEXT_PUBLIC_FRONT_URL=https://parsaaghayi.ir
+NEXT_PUBLIC_BACK_URL=https://backend.parsaaghayi.ir
\ No newline at end of file
diff --git a/src/app/(routes)/(website)/components/projects/projects.tsx b/src/app/(routes)/(website)/components/projects/projects.tsx
index 1cc0abe..3b8e764 100644
--- a/src/app/(routes)/(website)/components/projects/projects.tsx
+++ b/src/app/(routes)/(website)/components/projects/projects.tsx
@@ -7,6 +7,7 @@ import {
   ProjectResponse,
 } from "@/app/types/types";
 import { getCookie } from "cookies-next";
+import Link from "next/link";
 import React, { useEffect, useState, useMemo } from "react";
 import Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
@@ -92,7 +93,9 @@ export default function Projects({ dict }: MyProjectsProps) {
 
   const groupProjectsByCategory = (projects: Project[]) => {
     return projects.reduce<Record<string, Project[]>>((acc, project) => {
-      const category = project.category || (locale === "fa" ? "بدون دسته‌بندی" : "Uncategorized");
+      const category =
+        project.category ||
+        (locale === "fa" ? "بدون دسته‌بندی" : "Uncategorized");
       if (!acc[category]) {
         acc[category] = [];
       }
@@ -165,14 +168,27 @@ export default function Projects({ dict }: MyProjectsProps) {
         {filteredProjects.length > 0
           ? filteredProjects.map((project, index) => (
               <div key={index} className="project flex w-[45%] flex-wrap">
-                <div className="relative my-5 h-[200px] w-full overflow-hidden bg-[#FFEBDB] md:h-[250px] lg:h-[300px]">
+                <div className="relative my-5 h-[200px] w-full overflow-hidden bg-[#FFEBDB] md:h-[250px] lg:h-[300px] rounded-lg">
                   {project.images.map((image, idx) => (
-                    <img
-                      key={idx}
-                      src={image.src}
-                      alt={`Image for ${project.title}`}
-                      className={`absolute ${idx === 0 ? "bottom-0 start-0" : "end-0 top-0"} z-${image.zIndex} project-image w-[85%] max-w-[350px]`}
-                    />
+                    <Link
+                      href={
+                        process.env.NEXT_PUBLIC_BACK_URL +
+                        "/images/projects/" +
+                        image.src
+                      }
+                      target="_blank"
+                    >
+                      <img
+                        key={idx}
+                        src={
+                          process.env.NEXT_PUBLIC_BACK_URL +
+                          "/images/projects/" +
+                          image.src
+                        }
+                        alt={`Image for ${project.title}`}
+                        className={`absolute ${idx === 0 ? "bottom-0 start-0 z-[10]" : "end-0 top-0 z-[2]"} project-image w-[85%] max-w-[350px]`}
+                      />
+                    </Link>
                   ))}
                 </div>
                 <h5 className="w-full text-[15px] font-[600] text-[#FD6F00] lg:text-[20px]">