diff --git a/package-lock.json b/package-lock.json
index 889a246..21929bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "portfolio-new",
       "version": "0.0.0",
       "dependencies": {
+        "@emailjs/browser": "^4.4.1",
         "@react-three/drei": "^10.7.4",
         "@react-three/fiber": "^9.3.0",
         "@tailwindcss/vite": "^4.1.12",
@@ -345,6 +346,15 @@
       "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
       "license": "Apache-2.0"
     },
+    "node_modules/@emailjs/browser": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-4.4.1.tgz",
+      "integrity": "sha512-DGSlP9sPvyFba3to2A50kDtZ+pXVp/0rhmqs2LmbMS3I5J8FSOgLwzY2Xb4qfKlOVHh29EAutLYwe5yuEZmEFg==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.9.tgz",
diff --git a/package.json b/package.json
index 0b8dcf7..18cee32 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emailjs/browser": "^4.4.1",
     "@react-three/drei": "^10.7.4",
     "@react-three/fiber": "^9.3.0",
     "@tailwindcss/vite": "^4.1.12",
diff --git a/src/App.jsx b/src/App.jsx
index eaf741d..8eab6cf 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,6 +4,7 @@ import Hero from './sections/Hero'
 import About from './sections/About'
 import Projects from './sections/Projects'
 import Experiences from './sections/Experiences'
+import Testimonial from './sections/Testimonial'
 
 const App = () => {
   return (
@@ -14,13 +15,15 @@ const App = () => {
     <About/>
     <Projects/>
     <Experiences/>
+    <Testimonial/>
     <section className="min-h-screen"></section>
     <section className="min-h-screen"></section>
     <section className="min-h-screen"></section>
     <section className="min-h-screen"></section>
     <section className="min-h-screen"></section>
     <section className="min-h-screen"></section>
-    
+    {/* service_g8pia9k */}
+    {/* template_lrhppet */}
     {/*experinec*/}
     {/*testimonial*/}
     {/*contact*/}
diff --git a/src/components/Marquee.jsx b/src/components/Marquee.jsx
new file mode 100644
index 0000000..a6cc6bb
--- /dev/null
+++ b/src/components/Marquee.jsx
@@ -0,0 +1,40 @@
+import { twMerge } from "tailwind-merge";
+export default function Marquee({
+  className,
+  reverse = false,
+  pauseOnHover = false,
+  children,
+  vertical = false,
+  repeat = 4,
+  ...props
+}) {
+  return (
+    <div
+      {...props}
+      className={twMerge(
+        `group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)] ${
+          vertical ? "flex-col" : "flex-row"
+        }`,
+        className
+      )}
+    >
+      {Array(repeat)
+        .fill(0)
+        .map((_, i) => (
+          <div
+            key={i}
+            className={twMerge(
+              "flex shrink-0 justify-around [gap:var(--gap)]",
+              vertical
+                ? "animate-marquee-vertical flex-col"
+                : "animate-marquee flex-row",
+              pauseOnHover && "group-hover:[animation-play-state:paused]",
+              reverse && "[animation-direction:reverse]"
+            )}
+          >
+            {children}
+          </div>
+        ))}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/sections/Testimonial.jsx b/src/sections/Testimonial.jsx
new file mode 100644
index 0000000..5e62d34
--- /dev/null
+++ b/src/sections/Testimonial.jsx
@@ -0,0 +1,54 @@
+import { twMerge } from "tailwind-merge";
+import Marquee from "../components/Marquee";
+import { reviews } from "../constants";
+const firstRow = reviews.slice(0, reviews.length / 2);
+const secondRow = reviews.slice(reviews.length / 2);
+
+const ReviewCard = ({ img, name, username, body }) => {
+  return (
+    <figure
+      className={twMerge(
+        "relative h-full w-64 cursor-pointer overflow-hidden rounded-xl border p-4 border-gray-50/[.1] bg-gradient-to-r bg-indigo to-storm hover:bg-royal hover-animation"
+      )}
+    >
+      <div className="flex flex-row items-center gap-2">
+        <img
+          className="rounded-full bg-white/10"
+          width="32"
+          height="32"
+          alt=""
+          src={img}
+        />
+        <div className="flex flex-col">
+          <figcaption className="text-sm font-medium text-white">
+            {name}
+          </figcaption>
+          <p className="text-xs font-medium text-white/40">{username}</p>
+        </div>
+      </div>
+      <blockquote className="mt-2 text-sm">{body}</blockquote>
+    </figure>
+  );
+};
+
+export default function Testimonial() {
+  return (
+    <div className="items-start mt-25 md:mt-35 c-space">
+      <h2 className="text-heading">Hear From My Clients</h2>
+      <div className="relative flex flex-col items-center justify-center w-full mt-12 overflow-hidden">
+        <Marquee pauseOnHover className="[--duration:20s]">
+          {firstRow.map((review) => (
+            <ReviewCard key={review.username} {...review} />
+          ))}
+        </Marquee>
+        <Marquee reverse pauseOnHover className="[--duration:20s]">
+          {secondRow.map((review) => (
+            <ReviewCard key={review.username} {...review} />
+          ))}
+        </Marquee>
+        <div className="absolute inset-y-0 left-0 w-1/4 pointer-events-none bg-gradient-to-r from-primary"></div>
+        <div className="absolute inset-y-0 right-0 w-1/4 pointer-events-none bg-gradient-to-l from-primary"></div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file