diff --git a/frontEnd/components/pages/home/Story.tsx b/frontEnd/components/pages/home/Story.tsx
index 260396e0..68612b0b 100644
--- a/frontEnd/components/pages/home/Story.tsx
+++ b/frontEnd/components/pages/home/Story.tsx
@@ -273,7 +273,9 @@ const Story = () => {
                         </Link>
                       </p>
                       <h5 className="fw-4 mt-12 mb-12 text-white">
-                        {item.title}
+                        <Link href={`/case-study/${item.slug}`} className="text-white">
+                          {item.title}
+                        </Link>
                       </h5>
                       <p className="text-xs">{item.excerpt || item.description?.substring(0, 150) + '...'}</p>
                     </div>
@@ -300,32 +302,34 @@ const Story = () => {
                       className={`tp-story-thumb ${isActive ? "thumb-active" : ""}`}
                       data-loaded={isLoaded}
                     >
-                      <Image
-                        src={imageUrl}
-                        width={600}
-                        height={300}
-                        className="w-100 mh-300"
-                        alt={item.title || "Case Study"}
-                        priority={index === 0}
-                        loading={index === 0 ? 'eager' : 'lazy'}
-                        style={{ 
-                          display: 'block',
-                          width: '100%',
-                          height: 'auto',
-                          objectFit: 'cover',
-                          opacity: isLoaded ? 1 : 0,
-                          transition: 'opacity 0.3s ease'
-                        }}
-                        onLoad={() => {
-                          if (!isLoaded) {
-                            setImagesLoaded((prev) => {
-                              const newSet = new Set(prev);
-                              newSet.add(index);
-                              return newSet;
-                            });
-                          }
-                        }}
-                      />
+                      <Link href={`/case-study/${item.slug}`} className="w-100">
+                        <Image
+                          src={imageUrl}
+                          width={600}
+                          height={300}
+                          className="w-100 mh-300"
+                          alt={item.title || "Case Study"}
+                          priority={index === 0}
+                          loading={index === 0 ? 'eager' : 'lazy'}
+                          style={{ 
+                            display: 'block',
+                            width: '100%',
+                            height: 'auto',
+                            objectFit: 'cover',
+                            opacity: isLoaded ? 1 : 0,
+                            transition: 'opacity 0.3s ease'
+                          }}
+                          onLoad={() => {
+                            if (!isLoaded) {
+                              setImagesLoaded((prev) => {
+                                const newSet = new Set(prev);
+                                newSet.add(index);
+                                return newSet;
+                              });
+                            }
+                          }}
+                        />
+                      </Link>
                     </div>
                   );
                 })}