diff --git a/src/app/page.tsx b/src/app/page.tsx
index adbbb0b..4594356 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -23,6 +23,8 @@ import { BlogCard } from "@/components/blog-card";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { toast } from "sonner";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ClientWorksCard } from "@/components/client-works-card";
+import { CLIENTWORKS } from "@/data/config/clients.config";
 const BLUR_FADE_DELAY = 0.04;
 
 interface BlogsI {
@@ -268,70 +270,121 @@ export default function Page() {
       </section>
 
       <section id="projects">
-      <div className="flex flex-col items-center">
-      <div className="inline-block rounded-lg bg-foreground text-background px-3 py-1 text-sm mb-5">
+        <div className="flex flex-col items-center">
+          <div className="inline-block rounded-lg bg-foreground text-background px-3 py-1 text-sm mb-5">
             Featured Projects
           </div>
-      <BlurFade delay={BLUR_FADE_DELAY * 11}>
-      <Tabs defaultValue="myworks" className="flex flex-col items-center justify-center w-full">
-      <TabsList className="grid w-[400px] grid-cols-2 mb-4">
-        <TabsTrigger value="myworks">My Works</TabsTrigger>
-        <TabsTrigger value="clientworks">Client Works</TabsTrigger>
-      </TabsList>
-      <TabsContent value="myworks">
-      <BlurFade delay={BLUR_FADE_DELAY}>
-      <div className="space-y-12 w-full">
-            <div className="flex flex-col items-center justify-center space-y-4 text-center">
-              <div className="space-y-2">
-              <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl mt-2">
-                    Some of my cool shits
-                  </h2>
-                  <p className="text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
-                    I&apos;ve worked on a variety of cool shits, from simple websites
-                    to mobile apps to complex IoT projects. Here are a few of my favorites.
-                    You can find more on my{" "}
-                    <Link
-                      href="/projects"
-                      className="text-blue-500 hover:underline"
-                    >
-                      projects page
-                    </Link>
-                    .
-                  </p>
-              </div>
-            </div>
-            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 max-w-[800px] mx-auto mt-8">
-                    {PROJECTS.filter((project) => project.featured).map(
-                      (project, id) => (
-                        <BlurFade
-                          key={project.title}
-                          delay={BLUR_FADE_DELAY * 12 + id * 0.05}
-                        >
-                          <ProjectCard
-                  href={project.href}
-                  active={project.active}
-                  archived={project.archived}
-                  key={project.title}
-                  title={project.title}
-                  description={project.description}
-                  dates={project.dates}
-                  tags={project.technologies}
-                  image={project.image}
-                  video={project.video}
-                  links={project.links}
-                />
-                        </BlurFade>
-                      )
-                    )}
+          <BlurFade delay={BLUR_FADE_DELAY * 11}>
+            <Tabs
+              defaultValue="myworks"
+              className="flex flex-col items-center justify-center w-full"
+            >
+              <TabsList className="grid w-[400px] grid-cols-2 mb-4">
+                <TabsTrigger value="myworks">My Works</TabsTrigger>
+                <TabsTrigger value="clientworks">Client Works</TabsTrigger>
+              </TabsList>
+              <TabsContent value="myworks">
+                <BlurFade delay={BLUR_FADE_DELAY}>
+                  <div className="space-y-12 w-full">
+                    <div className="flex flex-col items-center justify-center space-y-4 text-center">
+                      <div className="space-y-2">
+                        <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl mt-2">
+                          Some of my cool shits
+                        </h2>
+                        <p className="text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
+                          I&apos;ve worked on a variety of cool shits, from
+                          simple websites to mobile apps to complex IoT
+                          projects. Here are a few of my favorites. You can find
+                          more on my{" "}
+                          <Link
+                            href="/projects"
+                            className="text-blue-500 hover:underline"
+                          >
+                            projects page
+                          </Link>
+                          .
+                        </p>
+                      </div>
+                    </div>
+                    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 max-w-[800px] mx-auto mt-8">
+                      {PROJECTS.filter((project) => project.featured).map(
+                        (project, id) => (
+                          <BlurFade
+                            key={project.title}
+                            delay={BLUR_FADE_DELAY * 12 + id * 0.05}
+                          >
+                            <ProjectCard
+                              href={project.href}
+                              active={project.active}
+                              archived={project.archived}
+                              key={project.title}
+                              title={project.title}
+                              description={project.description}
+                              dates={project.dates}
+                              tags={project.technologies}
+                              image={project.image}
+                              video={project.video}
+                              links={project.links}
+                            />
+                          </BlurFade>
+                        )
+                      )}
+                    </div>
+                  </div>
+                </BlurFade>
+              </TabsContent>
+              <TabsContent value="clientworks">
+                <BlurFade delay={BLUR_FADE_DELAY}>
+                  <div className="space-y-12 w-full">
+                    <div className="flex flex-col items-center justify-center space-y-4 text-center">
+                      <div className="space-y-2">
+                        <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl mt-2">
+                          I do get hired, believe me
+                        </h2>
+                        <p className="text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
+                          I&apos;ve experience working on a range of client
+                          projects, from freelance assignments to corporate
+                          work. Feel free to explore more of my professional
+                          portfolio on my{" "}
+                          <Link
+                            href="/projects"
+                            className="text-blue-500 hover:underline"
+                          >
+                            projects page
+                          </Link>
+                          .
+                        </p>
+                      </div>
+                    </div>
+                    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 max-w-[800px] mx-auto mt-8">
+                      {CLIENTWORKS.filter((project) => project.featured).map(
+                        (project, id) => (
+                          <BlurFade
+                            key={project.title}
+                            delay={BLUR_FADE_DELAY * 12 + id * 0.05}
+                          >
+                            <ClientWorksCard
+                              key={project.title}
+                              title={project.title}
+                              worktype={project.worktype}
+                              description={project.description}
+                              dates={project.dates}
+                              tags={project.technologies}
+                              image={project.image}
+                              video={project.video}
+                              fatures={project.features}
+                              testimonial={project.testimonial}
+                            />
+                          </BlurFade>
+                        )
+                      )}
+                    </div>
                   </div>
+                </BlurFade>
+              </TabsContent>
+            </Tabs>
+          </BlurFade>
         </div>
-        </BlurFade>
-        </TabsContent>
-        <TabsContent value="clientworks">
-        </TabsContent>
-        </Tabs>
-        </BlurFade>
-      </div>
       </section>
 
       <section id="newsletter">
@@ -349,24 +402,24 @@ export default function Page() {
                 bellow and get the latest updates. I don&apos;t spam!
               </p>
               <div className="pt-10">
-              {!isNsl ? (
-                <PlaceholdersAndVanishInput
-                  type="email"
-                  placeholders={placeholders}
-                  onChange={handleChange}
-                  onSubmit={onSubmit}
-                  disabled={isInputLoading}
-                />
-              ) : (
-                <Alert className="rounded-full bg-background/80 backdrop-blur-sm">
-                  <AlertTitle>
-                    <Badge>Heads up!</Badge>
-                  </AlertTitle>
-                  <AlertDescription className="text-sm underline">
-                    You have already signed up for the newsletter.
-                  </AlertDescription>
-                </Alert>
-              )}
+                {!isNsl ? (
+                  <PlaceholdersAndVanishInput
+                    type="email"
+                    placeholders={placeholders}
+                    onChange={handleChange}
+                    onSubmit={onSubmit}
+                    disabled={isInputLoading}
+                  />
+                ) : (
+                  <Alert className="rounded-full bg-background/80 backdrop-blur-sm">
+                    <AlertTitle>
+                      <Badge>Heads up!</Badge>
+                    </AlertTitle>
+                    <AlertDescription className="text-sm underline">
+                      You have already signed up for the newsletter.
+                    </AlertDescription>
+                  </Alert>
+                )}
               </div>
             </div>
           </BlurFade>
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index c5c7d03..d1abfec 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -8,6 +8,9 @@ import {
   TabsList,
   TabsTrigger,
 } from "@/components/ui/tabs"
+import { ClientWorksCard } from "@/components/client-works-card";
+import { CLIENTWORKS } from "@/data/config/clients.config";
+import Link from "next/link";
 const BLUR_FADE_DELAY = 0.04;
 
 export default function Projects() {
@@ -60,7 +63,44 @@ export default function Projects() {
         </BlurFade>
         </TabsContent>
         <TabsContent value="clientworks">
-        </TabsContent>
+                <BlurFade delay={BLUR_FADE_DELAY}>
+                  <div className="space-y-12 w-full">
+                    <div className="flex flex-col items-center justify-center space-y-4 text-center">
+                      <div className="space-y-2">
+                        <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl mt-2">
+                          Your ideas & my skills
+                        </h2>
+                        <p className="text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
+                        These projects showcase my client work across various industries. If my skills align with your needs, let&apos;s connect.
+                        </p>
+                      </div>
+                    </div>
+                    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 max-w-[800px] mx-auto mt-8">
+                      {CLIENTWORKS.filter((project) => project.featured).map(
+                        (project, id) => (
+                          <BlurFade
+                            key={project.title}
+                            delay={BLUR_FADE_DELAY * 12 + id * 0.05}
+                          >
+                            <ClientWorksCard
+                              key={project.title}
+                              title={project.title}
+                              worktype={project.worktype}
+                              description={project.description}
+                              dates={project.dates}
+                              tags={project.technologies}
+                              image={project.image}
+                              video={project.video}
+                              fatures={project.features}
+                              testimonial={project.testimonial}
+                            />
+                          </BlurFade>
+                        )
+                      )}
+                    </div>
+                  </div>
+                </BlurFade>
+              </TabsContent>
         </Tabs>
         </BlurFade>
       </section>
diff --git a/src/components/client-works-card.tsx b/src/components/client-works-card.tsx
new file mode 100644
index 0000000..b352a7e
--- /dev/null
+++ b/src/components/client-works-card.tsx
@@ -0,0 +1,126 @@
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import Image from "next/image";
+import Markdown from "react-markdown";
+import { Icons } from "./icons";
+import CustomVideoDialog from "./magicui/custom-video-dialog";
+
+interface Props {
+  title: string;
+  testimonial: string;
+  worktype?: string;
+  description: string;
+  fatures: string;
+  dates?: string;
+  tags: readonly string[];
+  link?: string;
+  image?: string | null;
+  video?: string;
+}
+
+export function ClientWorksCard({
+  title,
+  testimonial,
+  worktype,
+  description,
+  fatures,
+  dates,
+  tags,
+  link,
+  image,
+  video,
+}: Props) {
+  return (
+    <Card
+      className={
+        "flex flex-col overflow-hidden border hover:shadow-lg transition-all duration-300 ease-out h-full"
+      }
+    >
+      {video ? (
+        <video
+          src={video}
+          autoPlay
+          loop
+          muted
+          playsInline
+          className="pointer-events-none mx-auto h-40 w-full object-cover object-top" // needed because random black line at bottom of video
+        />
+      ) : image ? (
+        <Image
+          src={image}
+          alt={title}
+          width={500}
+          height={300}
+          className="h-40 w-full overflow-hidden object-cover object-top"
+        />
+      ) : (
+        <Image
+          src="/assets/projects/404.jpg"
+          alt={title}
+          width={500}
+          height={300}
+          className="h-40 w-full overflow-hidden object-cover object-top"
+        />
+      )}
+      <CardHeader className="px-2">
+        <div className="space-y-1">
+          <CardTitle className="mt-1 text-base">{title}</CardTitle>
+          <time className="font-sans text-xs">{dates}</time>
+          <div className="hidden font-sans text-xs underline print:visible">
+            {link?.replace("https://", "").replace("www.", "").replace("/", "")}
+          </div>
+          <Markdown className="prose max-w-full text-pretty font-sans text-xs text-muted-foreground dark:prose-invert">
+            {description}
+          </Markdown>
+          {fatures && (
+            <>
+              <h4 className="text-sm font-semibold mt-2 mb-1">Cool features:</h4>
+              <Markdown className="prose max-w-full text-pretty font-sans text-xs text-muted-foreground dark:prose-invert">
+                {`- ${fatures.split('.').filter(Boolean).map(feature => feature.trim()).join('\n- ')}`}
+              </Markdown>
+              <span className="text-pretty font-sans text-xs text-muted-foreground">and many more...</span>
+            </>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent className="mt-auto flex flex-col px-2">
+        {tags && tags.length > 0 && (
+          <div className="mt-2 flex flex-wrap gap-1">
+            {tags?.map((tag) => (
+              <Badge
+                className="px-1 py-0 text-[10px]"
+                variant="secondary"
+                key={tag}
+              >
+                {tag}
+              </Badge>
+            ))}
+          </div>
+        )}
+      </CardContent>
+      <CardFooter className="px-2 pb-2">
+        {worktype && (
+          <Badge className="flex gap-2 px-2 py-1 text-[10px] ml-1">
+            <Icons.setting className="size-4" />
+            {worktype}
+          </Badge>
+        )}
+        {testimonial && (
+          <CustomVideoDialog videoSrc={testimonial}
+          animationStyle="top-in-bottom-out">
+            <Badge className="flex gap-2 px-2 py-1 text-[10px] ml-1 bg-blue-400 hover:bg-blue-500 cursor-pointer">
+            <Icons.video className="size-4" />
+            Testimonial
+          </Badge>
+          </CustomVideoDialog>
+        )}
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
index 54352fc..c57c991 100644
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -1,9 +1,11 @@
-import { Archive, GlobeIcon, MailIcon } from "lucide-react";
+import { Archive, Cog, GlobeIcon, MailIcon, Video } from "lucide-react";
 
 export type IconProps = React.HTMLAttributes<SVGElement>;
 
 export const Icons = {
   globe: (props: IconProps) => <GlobeIcon {...props} />,
+  setting: (props: IconProps) => <Cog {...props} />,
+  video: (props: IconProps) => <Video {...props} />,
   archive: (props: IconProps) => <Archive {...props} />,
   email: (props: IconProps) => <MailIcon {...props} />,
   linkedin: (props: IconProps) => (
diff --git a/src/components/magicui/custom-video-dialog.tsx b/src/components/magicui/custom-video-dialog.tsx
new file mode 100644
index 0000000..c870b19
--- /dev/null
+++ b/src/components/magicui/custom-video-dialog.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import { useState, ReactNode, useRef, useEffect } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { XIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+type AnimationStyle =
+  | "from-bottom"
+  | "from-center"
+  | "from-top"
+  | "from-left"
+  | "from-right"
+  | "fade"
+  | "top-in-bottom-out"
+  | "left-in-right-out";
+
+interface HeroVideoProps {
+  animationStyle?: AnimationStyle;
+  videoSrc: string;
+  children: ReactNode;
+  className?: string;
+}
+
+const animationVariants = {
+  "from-bottom": {
+    initial: { y: "100%", opacity: 0 },
+    animate: { y: 0, opacity: 1 },
+    exit: { y: "100%", opacity: 0 },
+  },
+  "from-center": {
+    initial: { scale: 0.5, opacity: 0 },
+    animate: { scale: 1, opacity: 1 },
+    exit: { scale: 0.5, opacity: 0 },
+  },
+  "from-top": {
+    initial: { y: "-100%", opacity: 0 },
+    animate: { y: 0, opacity: 1 },
+    exit: { y: "-100%", opacity: 0 },
+  },
+  "from-left": {
+    initial: { x: "-100%", opacity: 0 },
+    animate: { x: 0, opacity: 1 },
+    exit: { x: "-100%", opacity: 0 },
+  },
+  "from-right": {
+    initial: { x: "100%", opacity: 0 },
+    animate: { x: 0, opacity: 1 },
+    exit: { x: "100%", opacity: 0 },
+  },
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+  },
+  "top-in-bottom-out": {
+    initial: { y: "-100%", opacity: 0 },
+    animate: { y: 0, opacity: 1 },
+    exit: { y: "100%", opacity: 0 },
+  },
+  "left-in-right-out": {
+    initial: { x: "-100%", opacity: 0 },
+    animate: { x: 0, opacity: 1 },
+    exit: { x: "100%", opacity: 0 },
+  },
+};
+
+export default function CustomVideoDialog({
+  animationStyle = "from-center",
+  videoSrc,
+  children,
+  className,
+}: HeroVideoProps) {
+  const [isVideoOpen, setIsVideoOpen] = useState(false);
+  const selectedAnimation = animationVariants[animationStyle];
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    if (isVideoOpen && videoRef.current) {
+      videoRef.current.play();
+    }
+  }, [isVideoOpen]);
+
+  const handleVideoEnd = () => {
+    setIsVideoOpen(false);
+  };
+
+  return (
+    <div className={cn("relative", className)}>
+      <div
+        className="cursor-pointer"
+        onClick={() => setIsVideoOpen(true)}
+      >
+        {children}
+      </div>
+      <AnimatePresence>
+        {isVideoOpen && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            onClick={() => setIsVideoOpen(false)}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md"
+          >
+            <motion.div
+              {...selectedAnimation}
+              transition={{ type: "spring", damping: 30, stiffness: 300 }}
+              className="relative w-full max-w-4xl aspect-video mx-4 md:mx-0"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <motion.button 
+                className="absolute -top-16 right-0 text-white text-xl bg-neutral-900/50 ring-1 backdrop-blur-md rounded-full p-2 dark:bg-neutral-100/50 dark:text-black"
+                onClick={() => setIsVideoOpen(false)}
+              >
+                <XIcon className="size-5" />
+              </motion.button>
+              <div className="size-full border-2 border-white rounded-2xl overflow-hidden isolate z-[1] relative">
+                <video
+                  ref={videoRef}
+                  className="size-full rounded-2xl"
+                  controls
+                  autoPlay
+                  disablePictureInPicture
+                  controlsList="nodownload noremoteplayback nofullscreen"
+                  onEnded={handleVideoEnd}
+                >
+                  <source src={videoSrc} type="video/mp4" />
+                  Your browser does not support the video tag.
+                </video>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
diff --git a/src/components/project-card.tsx b/src/components/project-card.tsx
index 27a8097..68d54cc 100644
--- a/src/components/project-card.tsx
+++ b/src/components/project-card.tsx
@@ -55,7 +55,7 @@ export function ProjectCard({
         href={href || "#"}
         className={cn("block cursor-pointer", className)}
       >
-        {video && (
+        {video ? (
           <video
             src={video}
             autoPlay
@@ -64,16 +64,15 @@ export function ProjectCard({
             playsInline
             className="pointer-events-none mx-auto h-40 w-full object-cover object-top" // needed because random black line at bottom of video
           />
-        )}
-        {image ? (
+        ) : image ? (
           <Image
-            src={image!}
+            src={image}
             alt={title}
             width={500}
             height={300}
             className="h-40 w-full overflow-hidden object-cover object-top"
           />
-        ): (
+        ) : (
           <Image
             src="/assets/projects/404.jpg"
             alt={title}
diff --git a/src/data/config/clients.config.tsx b/src/data/config/clients.config.tsx
index e69de29..b7b3fa2 100644
--- a/src/data/config/clients.config.tsx
+++ b/src/data/config/clients.config.tsx
@@ -0,0 +1,27 @@
+
+export const CLIENTWORKS = [
+  {
+    title: "BOXCHAT - One chat for all ai models",
+    dates: "9th Sep 2024 - 22nd Sep 2024",
+    worktype: "Fullstack",
+    testimonial: "https://firebasestorage.googleapis.com/v0/b/archives-63571.appspot.com/o/portfolio%2Ftestimonials%2Fboxchat-testimonial.mp4?alt=media&token=51be6968-e40f-4074-a0f7-026f98930671",
+    featured: true,
+    description:
+      "BOXCHAT is a SAAS that lets you interact with websites, PDFs, and documents in real-time. It provides quick answers and insights directly from your chosen sources, it gives multiple ai models feature to sync your questions and get different responses at a time.",
+      features: "Playground feature like **Vercel**. Chat feature like **ChatGPT**. Text to image generation.",
+    technologies: [
+      "Next.js",
+      "Typescript",
+      "Postgres",
+      "Upstash rag-chat sdk",
+      "Vercel ai sdk",
+      "Supabase",
+      "TailwindCSS",
+      "Acternity UI",
+      "Shadcn UI",
+      "Magic UI",
+    ],
+    image: "",
+    video: "https://firebasestorage.googleapis.com/v0/b/archives-63571.appspot.com/o/portfolio%2Fboxchat-preview.mp4?alt=media&token=e18c270b-dbce-4588-838e-2162c2de4bd8",
+  },
+]