diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
index 1faddca..d89722a 100644
--- a/src/components/Projects.tsx
+++ b/src/components/Projects.tsx
@@ -8,9 +8,11 @@ import { supabase } from '@/lib/supabase/client'
 import { ParallaxScroll } from './ui/parallax-scroll'
 
 export interface Project {
+  id: string
   title: string
   link: string
   thumbnail: string
+  description: string
 }
 
 const Projects = () => {
@@ -33,8 +35,6 @@ const Projects = () => {
       className={`
         py-10
 
-        lg:py-40
-
         md:py-20
       `}
     >
diff --git a/src/components/ui/3d-card.tsx b/src/components/ui/3d-card.tsx
new file mode 100644
index 0000000..819ff15
--- /dev/null
+++ b/src/components/ui/3d-card.tsx
@@ -0,0 +1,155 @@
+'use client'
+
+import Image from 'next/image'
+import type React from 'react'
+import { createContext, useContext, useEffect, useRef, useState } from 'react'
+
+import { cn } from '@/lib/utils'
+
+const MouseEnterContext = createContext<
+  [boolean, React.Dispatch<React.SetStateAction<boolean>>] | undefined
+>(undefined)
+
+export const CardContainer = ({
+  children,
+  className,
+  containerClassName,
+}: {
+  children?: React.ReactNode
+  className?: string
+  containerClassName?: string
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [isMouseEntered, setIsMouseEntered] = useState(false)
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!containerRef.current) return
+    const { left, top, width, height } =
+      containerRef.current.getBoundingClientRect()
+    const x = (e.clientX - left - width / 2) / 25
+    const y = (e.clientY - top - height / 2) / 25
+    containerRef.current.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`
+  }
+
+  const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
+    setIsMouseEntered(true)
+    if (!containerRef.current) return
+  }
+
+  const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!containerRef.current) return
+    setIsMouseEntered(false)
+    containerRef.current.style.transform = `rotateY(0deg) rotateX(0deg)`
+  }
+  return (
+    <MouseEnterContext.Provider value={[isMouseEntered, setIsMouseEntered]}>
+      <div
+        className={cn('flex items-center justify-center', containerClassName)}
+        style={{
+          perspective: '1500px',
+        }}
+      >
+        <div
+          ref={containerRef}
+          onMouseEnter={handleMouseEnter}
+          onMouseMove={handleMouseMove}
+          onMouseLeave={handleMouseLeave}
+          className={cn(
+            `
+              relative flex items-center justify-center transition-all
+              duration-200 ease-linear
+            `,
+            className,
+          )}
+          style={{
+            transformStyle: 'preserve-3d',
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    </MouseEnterContext.Provider>
+  )
+}
+
+export const CardBody = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) => {
+  return (
+    <div
+      className={cn(
+        `
+          [&>*]:[transform-style:preserve-3d]
+
+          [transform-style:preserve-3d]
+        `,
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export const CardItem = ({
+  as: Tag = 'div',
+  children,
+  className,
+  translateX = 0,
+  translateY = 0,
+  translateZ = 0,
+  rotateX = 0,
+  rotateY = 0,
+  rotateZ = 0,
+  ...rest
+}: {
+  as?: React.ElementType
+  children: React.ReactNode
+  className?: string
+  translateX?: number | string
+  translateY?: number | string
+  translateZ?: number | string
+  rotateX?: number | string
+  rotateY?: number | string
+  rotateZ?: number | string
+  [key: string]: any
+}) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const [isMouseEntered] = useMouseEnter()
+
+  useEffect(() => {
+    handleAnimations()
+  }, [isMouseEntered])
+
+  const handleAnimations = () => {
+    if (!ref.current) return
+    if (isMouseEntered) {
+      ref.current.style.transform = `translateX(${translateX}px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`
+    } else {
+      ref.current.style.transform = `translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)`
+    }
+  }
+
+  return (
+    <Tag
+      ref={ref}
+      className={cn('w-fit transition duration-200 ease-linear', className)}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  )
+}
+
+// Create a hook to use the context
+export const useMouseEnter = () => {
+  const context = useContext(MouseEnterContext)
+  if (context === undefined) {
+    throw new Error('useMouseEnter must be used within a MouseEnterProvider')
+  }
+  return context
+}
diff --git a/src/components/ui/parallax-scroll-2.tsx b/src/components/ui/parallax-scroll-2.tsx
index 3364562..c7687f7 100644
--- a/src/components/ui/parallax-scroll-2.tsx
+++ b/src/components/ui/parallax-scroll-2.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 "use client";
 import { motion,useScroll, useTransform  } from "framer-motion";
 import Image from "next/image";
diff --git a/src/components/ui/parallax-scroll.tsx b/src/components/ui/parallax-scroll.tsx
index e9a69f1..dd53d30 100644
--- a/src/components/ui/parallax-scroll.tsx
+++ b/src/components/ui/parallax-scroll.tsx
@@ -1,11 +1,14 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import { motion, useScroll, useTransform } from 'framer-motion'
 import Image from 'next/image'
+import Link from 'next/link'
 import { useRef } from 'react'
 
 import { cn } from '@/lib/utils'
 
 import { type Project } from '../Projects'
+import { CardBody, CardContainer, CardItem } from './3d-card'
 
 export const ParallaxScroll = ({
   projects,
@@ -53,21 +56,56 @@ export const ParallaxScroll = ({
       >
         {projects.map((el, idx) => (
           <div key={idx}>
-            <div className="relative h-80 w-full">
-              <Image
-                src={el.thumbnail}
+            <CardContainer className="inter-var">
+              <CardBody
                 className={`
-                  !m-0 h-80 w-full gap-10 rounded-lg object-cover
-                  object-left-top !p-0
+                  relative size-auto border-black/[0.1] bg-gray-50 group/card
+                  rounded-xl border p-6
+
+                  dark:border-white/[0.2] dark:bg-black dark:hover:shadow-2xl
+                  dark:hover:shadow-emerald-500/[0.1]
                 `}
-                height="400"
-                width="400"
-                alt="thumbnail"
-              />
-            </div>
-            <p className="my-3 text-center font-bebas-neue text-3xl">
-              {el.title}
-            </p>
+              >
+                <CardItem
+                  translateZ="50"
+                  className={`
+                    font-bebas-neue text-xl font-bold text-neutral-600
+
+                    dark:text-white
+                  `}
+                >
+                  {el.title}
+                </CardItem>
+                <CardItem translateZ="100" className="mt-4 w-full">
+                  <Image
+                    src={el.thumbnail}
+                    height="1000"
+                    width="1000"
+                    className={`
+                      h-60 w-full rounded-xl object-cover
+
+                      group-hover/card:shadow-xl
+                    `}
+                    alt="thumbnail"
+                  />
+                </CardItem>
+                <div className="mt-6 flex items-center justify-between">
+                  <CardItem
+                    translateZ={20}
+                    as={Link}
+                    href={`/projects/${el.id}`}
+                    target="__blank"
+                    className={`
+                      rounded-xl px-4 py-2 text-xs font-normal
+
+                      dark:text-white
+                    `}
+                  >
+                    View more →
+                  </CardItem>
+                </div>
+              </CardBody>
+            </CardContainer>
           </div>
         ))}
       </div>
@@ -84,57 +122,201 @@ export const ParallaxScroll = ({
         <div className="grid gap-10">
           {firstPart.map((el, idx) => (
             <motion.div style={{ y: translateFirst }} key={'grid-1' + idx}>
-              <Image
-                src={el.thumbnail}
-                className={`
-                  !m-0 h-80 w-full gap-10 rounded-lg object-cover
-                  object-left-top !p-0
-                `}
-                height="400"
-                width="400"
-                alt="thumbnail"
-              />
-              <p className="my-3 text-center font-bebas-neue text-3xl">
-                {el.title}
-              </p>
+              <CardContainer className="inter-var">
+                <CardBody
+                  className={`
+                    relative size-auto border-black/[0.1] bg-gray-50 group/card
+                    rounded-xl border p-6
+
+                    dark:border-white/[0.2] dark:bg-black dark:hover:shadow-2xl
+                    dark:hover:shadow-emerald-500/[0.1]
+                  `}
+                >
+                  <CardItem
+                    translateZ="50"
+                    className={`
+                      font-bebas-neue text-xl font-bold text-neutral-600
+
+                      dark:text-white
+                    `}
+                  >
+                    {el.title}
+                  </CardItem>
+                  <CardItem
+                    as="p"
+                    translateZ="60"
+                    className={`
+                      mt-2 line-clamp-3 max-w-sm text-sm text-neutral-500
+
+                      dark:text-neutral-300
+                    `}
+                  >
+                    {el.description}
+                  </CardItem>
+                  <CardItem translateZ="100" className="mt-4 w-full">
+                    <Image
+                      src={el.thumbnail}
+                      height="1000"
+                      width="1000"
+                      className={`
+                        h-60 w-full rounded-xl object-cover
+
+                        group-hover/card:shadow-xl
+                      `}
+                      alt="thumbnail"
+                    />
+                  </CardItem>
+                  <div className="mt-6 flex items-center justify-between">
+                    <CardItem
+                      translateZ={20}
+                      as={Link}
+                      href={`/projects/${el.id}`}
+                      target="__blank"
+                      className={`
+                        rounded-xl px-4 py-2 text-xs font-normal
+
+                        dark:text-white
+                      `}
+                    >
+                      View more →
+                    </CardItem>
+                  </div>
+                </CardBody>
+              </CardContainer>
             </motion.div>
           ))}
         </div>
         <div className="grid gap-10">
           {secondPart.map((el, idx) => (
             <motion.div style={{ y: translateSecond }} key={'grid-2' + idx}>
-              <Image
-                src={el.thumbnail}
-                className={`
-                  !m-0 h-80 w-full gap-10 rounded-lg object-cover
-                  object-left-top !p-0
-                `}
-                height="400"
-                width="400"
-                alt="thumbnail"
-              />
-              <p className="my-3 text-center font-bebas-neue text-3xl">
-                {el.title}
-              </p>
+              <CardContainer className="inter-var">
+                <CardBody
+                  className={`
+                    relative size-auto border-black/[0.1] bg-gray-50 group/card
+                    rounded-xl border p-6
+
+                    dark:border-white/[0.2] dark:bg-black dark:hover:shadow-2xl
+                    dark:hover:shadow-emerald-500/[0.1]
+                  `}
+                >
+                  <CardItem
+                    translateZ="50"
+                    className={`
+                      font-bebas-neue text-xl font-bold text-neutral-600
+
+                      dark:text-white
+                    `}
+                  >
+                    {el.title}
+                  </CardItem>
+                  <CardItem
+                    as="p"
+                    translateZ="60"
+                    className={`
+                      mt-2 line-clamp-3 max-w-sm text-sm text-neutral-500
+
+                      dark:text-neutral-300
+                    `}
+                  >
+                    {el.description}
+                  </CardItem>
+                  <CardItem translateZ="100" className="mt-4 w-full">
+                    <Image
+                      src={el.thumbnail}
+                      height="1000"
+                      width="1000"
+                      className={`
+                        h-60 w-full rounded-xl object-cover
+
+                        group-hover/card:shadow-xl
+                      `}
+                      alt="thumbnail"
+                    />
+                  </CardItem>
+                  <div className="mt-6 flex items-center justify-between">
+                    <CardItem
+                      translateZ={20}
+                      as={Link}
+                      href={`/projects/${el.id}`}
+                      target="__blank"
+                      className={`
+                        rounded-xl px-4 py-2 text-xs font-normal
+
+                        dark:text-white
+                      `}
+                    >
+                      View more →
+                    </CardItem>
+                  </div>
+                </CardBody>
+              </CardContainer>
             </motion.div>
           ))}
         </div>
         <div className="grid gap-10">
           {thirdPart.map((el, idx) => (
             <motion.div style={{ y: translateThird }} key={'grid-3' + idx}>
-              <Image
-                src={el.thumbnail}
-                className={`
-                  !m-0 h-80 w-full gap-10 rounded-lg object-cover
-                  object-left-top !p-0
-                `}
-                height="400"
-                width="400"
-                alt="thumbnail"
-              />
-              <p className="my-3 text-center font-bebas-neue text-3xl">
-                {el.title}
-              </p>
+              <CardContainer className="inter-var">
+                <CardBody
+                  className={`
+                    relative size-auto border-black/[0.1] bg-gray-50 group/card
+                    rounded-xl border p-6
+
+                    dark:border-white/[0.2] dark:bg-black dark:hover:shadow-2xl
+                    dark:hover:shadow-emerald-500/[0.1]
+                  `}
+                >
+                  <CardItem
+                    translateZ="50"
+                    className={`
+                      font-bebas-neue text-xl font-bold text-neutral-600
+
+                      dark:text-white
+                    `}
+                  >
+                    {el.title}
+                  </CardItem>
+                  <CardItem
+                    as="p"
+                    translateZ="60"
+                    className={`
+                      mt-2 line-clamp-3 max-w-sm text-sm text-neutral-500
+
+                      dark:text-neutral-300
+                    `}
+                  >
+                    {el.description}
+                  </CardItem>
+                  <CardItem translateZ="100" className="mt-4 w-full">
+                    <Image
+                      src={el.thumbnail}
+                      height="1000"
+                      width="1000"
+                      className={`
+                        h-60 w-full rounded-xl object-cover
+
+                        group-hover/card:shadow-xl
+                      `}
+                      alt="thumbnail"
+                    />
+                  </CardItem>
+                  <div className="mt-6 flex items-center justify-between">
+                    <CardItem
+                      translateZ={20}
+                      as={Link}
+                      href={`/projects/${el.id}`}
+                      target="__blank"
+                      className={`
+                        rounded-xl px-4 py-2 text-xs font-normal
+
+                        dark:text-white
+                      `}
+                    >
+                      View more →
+                    </CardItem>
+                  </div>
+                </CardBody>
+              </CardContainer>
             </motion.div>
           ))}
         </div>