diff --git a/components/pages/home/TimelineShowcase.tsx b/components/pages/home/TimelineShowcase.tsx
index b7a91d1..b528242 100644
--- a/components/pages/home/TimelineShowcase.tsx
+++ b/components/pages/home/TimelineShowcase.tsx
@@ -1,9 +1,9 @@
+import { EncodeDataAttributeCallback } from '@sanity/react-loader'
 import Image from 'next/image'
 import React, { Suspense } from 'react'
 
 import { Timeline } from '@/components/ui/timeline'
 import { LadderPayload } from '@/types'
-import { EncodeDataAttributeCallback } from '@sanity/react-loader'
 
 export function TimelineShowcase({data1, encodeDataAttribute1}: {data1:LadderPayload | null, encodeDataAttribute1?: EncodeDataAttributeCallback
 }) {
diff --git a/components/ui/card-hover-effect.tsx b/components/ui/card-hover-effect.tsx
index 916c15e..024bd30 100644
--- a/components/ui/card-hover-effect.tsx
+++ b/components/ui/card-hover-effect.tsx
@@ -65,7 +65,7 @@ export const HoverEffect = ({
   return (
     <div
       suppressHydrationWarning
-      className="mt-5  rounded-xl border border-slate-300 p-3 "
+      className="mt-5 z-10  rounded-xl border border-slate-300 p-3 "
     >
       <div
         className={cn(
diff --git a/components/ui/timeline.tsx b/components/ui/timeline.tsx
index 16b43a4..705b7be 100644
--- a/components/ui/timeline.tsx
+++ b/components/ui/timeline.tsx
@@ -6,6 +6,7 @@ import {
   useScroll,
   useTransform,
 } from 'framer-motion'
+import Image from 'next/image'
 import Link from 'next/link'
 import { PortableTextBlock } from 'next-sanity'
 import React, { useEffect, useRef, useState } from 'react'
@@ -29,7 +30,7 @@ export const Timeline = ({
   data1: LadderPayload | null
   encodeDataAttribute1?: EncodeDataAttributeCallback
 }) => {
-  const { overview = [], showcaseProjects = [], title = '' } = data1 ?? {}
+  const { showcaseProjects = [], title = '' } = data1 ?? {}
 
   const ref = useRef<HTMLDivElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -49,7 +50,6 @@ export const Timeline = ({
 
   const heightTransform = useTransform(scrollYProgress, [0, 1], [0, height])
   const opacityTransform = useTransform(scrollYProgress, [0, 0.1], [0, 1])
-
   return (
     <div
       className="w-full bg-white dark:bg-neutral-950 font-sans md:px-10"
@@ -57,11 +57,11 @@ export const Timeline = ({
     >
       {title && (
         <div className="max-w-7xl mx-auto py-20 px-4 md:px-8 lg:px-10">
-          <h2 className="text-lg md:text-4xl mb-4 text-black dark:text-white max-w-4xl">
+          <h2 className="text-2xl lg:text-6xl font-bold md:text-4xl mb-4 text-black dark:text-white max-w-4xl">
             {data1?.title}
           </h2>
 
-          <div className="text-neutral-700 font-serif dark:text-neutral-300 text-sm md:text-base max-w-sm">
+          <div className="text-neutral-700 font-serif dark:text-neutral-300 text-lg md:text-xl lg:text-2xl text-gray-500 max-w-sm">
             <CustomPortableText
               value={data1?.overview as PortableTextBlock[]}
             />
@@ -71,7 +71,7 @@ export const Timeline = ({
 
       <div ref={ref} className="relative max-w-7xl mx-auto pb-20">
         {showcaseProjects && showcaseProjects.length > 0 && (
-          <div className="mx-auto max-w-[100rem] rounded-md border">
+          <div className="">
             {showcaseProjects.map((project, key) => {
               const href = resolveHref(project?._type, project?.slug)
               const item = project
@@ -79,9 +79,9 @@ export const Timeline = ({
                 return null
               }
               return (
-                <Link
+                <div
                   key={key}
-                  href={href}
+                  // href={href}
                   data-sanity={encodeDataAttribute1?.([
                     'showcaseProjects',
                     key,
@@ -89,26 +89,71 @@ export const Timeline = ({
                   ])}
                 >
                   {/* <ProjectListItem project={project} odd={key % 2} /> */}
-                  <div
-            className="flex justify-start pt-10 md:pt-40 md:gap-10"
-          >
-            <div className="sticky flex flex-col md:flex-row z-40 items-center top-40 self-start max-w-xs lg:max-w-sm md:w-full">
-              <div className="h-10 absolute left-3 md:left-3 w-10 rounded-full bg-white dark:bg-black flex items-center justify-center">
-                <div className="h-4 w-4 rounded-full bg-neutral-200 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 p-2" />
-              </div>
-              <h3 className="hidden md:block text-xl md:pl-20 md:text-5xl font-bold text-neutral-500 dark:text-neutral-500 ">
-                {item.title}
-              </h3>
-            </div>
+                  <div className="flex justify-start pt-10 md:pt-40 md:gap-10">
+                    <div className="sticky flex flex-col md:flex-row z-40 items-center top-40 self-start max-w-xs lg:max-w-sm md:w-full">
+                      <div className="h-10 absolute left-3 md:left-3 w-10 rounded-full bg-white dark:bg-black flex items-center justify-center">
+                        <div className="h-4 w-4 rounded-full bg-neutral-200 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 p-2" />
+                      </div>
+                      <h3 className="hidden md:block text-xl md:pl-20 md:text-5xl font-bold text-neutral-500 dark:text-neutral-500 ">
+                        {new Date(
+                          item?.duration?.start ?? new Date(),
+                        ).toLocaleDateString('en-CA', {
+                          year: 'numeric',
+                          month: '2-digit',
+                        })}
+                        -{' '}
+                        {new Date(
+                          item?.duration?.end ?? new Date(),
+                        ).toLocaleDateString('en-CA', {
+                          year: 'numeric',
+                          month: '2-digit',
+                        })}
+                      </h3>
+                    </div>
 
-            <div className="relative pl-20 pr-4 md:pl-4 w-full">
-              <h3 className="md:hidden block text-2xl mb-4 text-left font-bold text-neutral-500 dark:text-neutral-500">
-                {item.slug}
-              </h3>
-              {/* {item?.content}{' '} */}
-            </div>
-          </div>
-                </Link>
+                    <Link href={href} className="relative pl-20 pr-4 md:pl-4 w-full">
+                      <h3 className="md:hidden block text-2xl mb-4 text-left font-bold text-neutral-500 dark:text-neutral-500">
+                        {new Date(
+                          item?.duration?.start ?? new Date(),
+                        ).toLocaleDateString('en-CA', {
+                          year: 'numeric',
+                          month: '2-digit',
+                        })}
+                        -{' '}
+                        {new Date(
+                          item?.duration?.end ?? new Date(),
+                        ).toLocaleDateString('en-CA', {
+                          year: 'numeric',
+                          month: '2-digit',
+                        })}
+                      </h3>
+                      {/* {item?.content}{' '} */}
+
+                      <p className="text-neutral-800 dark:text-neutral-200 text-base font-semibold md:text-sm font-normal mb-8">
+                        {item.title}
+                      </p>
+                      <div className="text-neutral-800 dark:text-neutral-200 text-xs md:text-sm font-normal mb-4">
+                        <CustomPortableText
+                          value={item?.overview as PortableTextBlock[]}
+                        />
+                      </div>
+                      <div className="grid grid-cols-2 gap-4">
+                        {item?.cloudinaryList
+                          ?.slice(0, 4)
+                          ?.map((image, index) => (
+                            <Image
+                              key={index}
+                              src={image.url}
+                              alt={image.alt || `Image ${index + 1}`}
+                              width={500}
+                              height={500}
+                              className="rounded-lg object-cover h-20 md:h-44 lg:h-60 w-full shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset]"
+                            />
+                          ))}
+                      </div>
+                    </Link>
+                  </div>
+                </div>
               )
             })}
           </div>
diff --git a/sanity/lib/queries.ts b/sanity/lib/queries.ts
index c71864a..578039e 100644
--- a/sanity/lib/queries.ts
+++ b/sanity/lib/queries.ts
@@ -26,6 +26,9 @@ export const ladderQuery = groq`
       "slug": slug.current,
       tags,
       title,
+      cloudinaryList,
+      duration
+
     },
     title,
   }
diff --git a/types/index.ts b/types/index.ts
index a708172..39a1b8f 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -25,6 +25,11 @@ export interface ShowcaseProject {
   slug?: string
   tags?: string[]
   title?: string
+  duration?: {
+    start?: string
+    end?: string
+  }
+  cloudinaryList?: any
 }
 
 // Page payloads