diff --git a/package-lock.json b/package-lock.json
index 41571df..d464793 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,13 +53,14 @@
         "react-day-picker": "^8.10.1",
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.61.1",
+        "react-icons": "^5.6.0",
         "react-markdown": "^10.1.0",
         "react-resizable-panels": "^2.1.9",
         "react-router-dom": "^6.30.1",
         "recharts": "^2.15.4",
         "remark-gfm": "^4.0.1",
         "sonner": "^1.7.4",
-        "swiper": "^12.1.2",
+        "swiper": "^12.1.4",
         "tailwind-merge": "^2.6.0",
         "tailwindcss-animate": "^1.0.7",
         "vaul": "^0.9.9",
@@ -8017,6 +8018,15 @@
         "react": "^16.8.0 || ^17 || ^18 || ^19"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.6.0.tgz",
+      "integrity": "sha512-RH93p5ki6LfOiIt0UtDyNg/cee+HLVR6cHHtW3wALfo+eOHTp8RnU2kRkI6E+H19zMIs03DyxUG/GfZMOGvmiA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
@@ -8798,17 +8808,17 @@
       }
     },
     "node_modules/swiper": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/swiper/-/swiper-12.1.2.tgz",
-      "integrity": "sha512-4gILrI3vXZqoZh71I1PALqukCFgk+gpOwe1tOvz5uE9kHtl2gTDzmYflYCwWvR4LOvCrJi6UEEU+gnuW5BtkgQ==",
+      "version": "12.1.4",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-12.1.4.tgz",
+      "integrity": "sha512-bihiwoKMOQwW8FfdUbo1DgkVH25E+4ZELIq0oopL1KTKBteLuaTMi/wwFjMxtlhTkk45k3XQ89D1Fvv0spSqBA==",
       "funding": [
         {
-          "type": "patreon",
-          "url": "https://www.patreon.com/swiperjs"
+          "type": "custom",
+          "url": "https://sponsors.nolimits4web.com"
         },
         {
-          "type": "open_collective",
-          "url": "http://opencollective.com/swiper"
+          "type": "github",
+          "url": "https://github.com/sponsors/nolimits4web"
         }
       ],
       "license": "MIT",
diff --git a/package.json b/package.json
index e014e74..38ec427 100644
--- a/package.json
+++ b/package.json
@@ -58,13 +58,14 @@
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.61.1",
+    "react-icons": "^5.6.0",
     "react-markdown": "^10.1.0",
     "react-resizable-panels": "^2.1.9",
     "react-router-dom": "^6.30.1",
     "recharts": "^2.15.4",
     "remark-gfm": "^4.0.1",
     "sonner": "^1.7.4",
-    "swiper": "^12.1.2",
+    "swiper": "^12.1.4",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.9.9",
diff --git a/src/App.tsx b/src/App.tsx
index 56a88e0..8c3323a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -15,6 +15,7 @@ import { PrivacyPolicy } from "./pages/PrivacyPolicy";
 import ProjectDetails from "./pages/ProjectDetails";
 import Projects from "./pages/Projects";
 import { QueryProvider } from "./provider/QueryProvider";
+import Technologies from "./pages/Technologies";
 
 function AnimatedRoutes() {
   const location = useLocation();
@@ -27,6 +28,7 @@ function AnimatedRoutes() {
           <Route path="/" element={<Index />} />
           <Route path="/projects" element={<Projects />} />
           <Route path="/projects/:id" element={<ProjectDetails />} />
+          <Route path="technologies" element={<Technologies/>}/>
           {/* <Route path="/blog" element={<Blog />} />
         <Route path="/blog/:id" element={<BlogArticle />} /> */}
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
diff --git a/src/components/home/ServicesSection.tsx b/src/components/home/ServicesSection.tsx
index d7efef3..1898c30 100644
--- a/src/components/home/ServicesSection.tsx
+++ b/src/components/home/ServicesSection.tsx
@@ -50,11 +50,14 @@ export default function ServicesSection() {
           >
             <PremiumBadge text="Our Expertise" />
             <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 mt-2">
-              What We <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-foreground">Do</span>
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-foreground">
+                Services {" "}
+              </span>
+              We Provide
             </h2>
             <p className="text-muted-foreground text-lg leading-relaxed">
-              We deliver comprehensive technology solutions that empower
-              businesses to thrive in the digital age.
+              We design and develop digital products that solve real business
+              problems and create better user experiences.
             </p>
           </motion.div>
 
diff --git a/src/components/services/AISolutions.tsx b/src/components/services/AISolutions.tsx
new file mode 100644
index 0000000..dbee625
--- /dev/null
+++ b/src/components/services/AISolutions.tsx
@@ -0,0 +1,100 @@
+import { motion } from "framer-motion";
+import { MdAutoGraph, MdPsychology, MdQueryStats } from "react-icons/md";
+
+const aiSolutions = [
+  {
+    title: "NLP & LLMs",
+    icon: <MdPsychology />,
+    desc: "Custom language models and chatbots tailored to your specific business data.",
+    features: ["Sentiment Analysis", "Entity Recognition", "Auto-Support"],
+    color: "#3b82f6", // Blue
+  },
+  {
+    title: "Predictive Analytics",
+    icon: <MdQueryStats />,
+    desc: "Turn historical data into future-proof strategies with deep learning.",
+    features: ["Trend Forecasting", "Risk Assessment", "User Behavior"],
+    color: "#a855f7", // Purple
+  },
+  {
+    title: "Computer Vision",
+    icon: <MdAutoGraph />,
+    desc: "Extracting actionable insights from visual data and real-time streams.",
+    features: ["Object Detection", "Image Synthesis", "Facial Recognition"],
+    color: "#10b981", // Emerald
+  },
+];
+
+export const AISolutions = () => {
+  return (
+    <section className="">
+      <div className="container mx-auto px-6">
+        {/* Header Section */}
+        <div className="max-w-3xl mb-16">
+          <h2 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+            AI <span className="text-primary">Solutions</span>
+          </h2>
+
+          <p className="text-lg">
+            We build AI-powered features and automation tools that help
+            businesses save time, improve workflows, and deliver smarter user
+            experiences.
+          </p>
+        </div>
+
+        {/* Grid Layout */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {aiSolutions.map((solution, i) => (
+            <motion.div
+              key={solution.title}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: i * 0.1 }}
+              whileHover={{ y: -8 }}
+              className="relative group p-8 rounded-3xl hover:border bg-card  transition-colors overflow-hidden"
+            >
+              {/* Subtle Background Glow */}
+              <div
+                className="absolute -right-10 -top-10 w-32 h-32 blur-2xl opacity-30 transition-opacity"
+                style={{ backgroundColor: solution.color }}
+              />
+
+              {/* Icon & Title */}
+              <div
+                className="text-4xl mb-6 inline-block p-3 rounded-2xl border"
+                style={{ color: solution.color }}
+              >
+                {solution.icon}
+              </div>
+
+              <h3 className="text-2xl font-semibold mb-4 tracking-tight">
+                {solution.title}
+              </h3>
+
+              <p className=" leading-relaxed mb-8">{solution.desc}</p>
+
+              {/* Feature Tags */}
+              <div className="flex flex-wrap gap-2">
+                {solution.features.map((feature) => (
+                  <span
+                    key={feature}
+                    className="text-xs tracking-widest font-bold px-3 py-1 rounded-full bg-primary/10 text-primary"
+                  >
+                    {feature}
+                  </span>
+                ))}
+              </div>
+
+              {/* Bottom Accent Line */}
+              <div
+                className="absolute bottom-0 left-0 h-1 group-hover:w-0 w-full transition-all duration-500"
+                style={{ backgroundColor: solution.color }}
+              />
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/src/components/services/CloudSolutions.tsx b/src/components/services/CloudSolutions.tsx
new file mode 100644
index 0000000..d801f7d
--- /dev/null
+++ b/src/components/services/CloudSolutions.tsx
@@ -0,0 +1,96 @@
+import { motion } from "framer-motion";
+import { MdCloudQueue, MdSecurity } from "react-icons/md";
+import { SiDocker } from "react-icons/si";
+
+const cloudServices = [
+  {
+    title: "Serverless Architecture",
+    icon: <MdCloudQueue />,
+    desc: "Scale to millions of users without managing a single server.",
+    color: "text-orange-400",
+    border: "group-hover:border-orange-500/50",
+  },
+  {
+    title: "Containerization",
+    icon: <SiDocker />,
+    desc: "Orchestrated deployments using Docker for zero-downtime.",
+    color: "text-blue-400",
+    border: "group-hover:border-blue-500/50",
+  },
+  {
+    title: "Cyber Security",
+    icon: <MdSecurity />,
+    desc: "End-to-end encryption and automated threat detection.",
+    color: "text-emerald-400",
+    border: "group-hover:border-emerald-500/50",
+  },
+];
+
+export const CloudSolutions = () => {
+  return (
+    <section className=" mt-32  px-6 overflow-hidden">
+      <div className="container mx-auto grid lg:grid-cols-2 gap-16 items-center">
+        {/* Left Side: Content */}
+        <motion.div
+          initial={{ opacity: 0, x: -30 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+          className="z-10"
+        >
+          <h2 className="text-4xl md:text-5xl font-bold tracking-tighter leading-none mb-8">
+            Cloud {" "}
+            <span className="text-primary tracking-tight">Solutions</span>
+          </h2>
+          <p className=" text-lg  leading-relaxed">
+            We build high-availability cloud systems that guarantee reliability,
+            performance, and a scalable architecture for the modern web.
+          </p>
+
+          {/* Optional: Simple CTA or stat to fill space */}
+          <div className="mt-10 flex gap-8 border-t border-border pt-8">
+            <div>
+              <p className="text-2xl font-bold ">99.9%</p>
+              <p className="text-xs uppercase tracking-widest ">Uptime</p>
+            </div>
+            <div>
+              <p className="text-2xl font-bold ">Global</p>
+              <p className="text-xs uppercase tracking-widest ">Edge Network</p>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Right Side: Cards */}
+        <div className="flex flex-col gap-4">
+          {cloudServices.map((service, i) => (
+            <motion.div
+              key={i}
+              initial={{ opacity: 0, x: 50 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: i * 0.15, duration: 0.5 }}
+              className={`group flex items-center gap-6 p-6 rounded-3xl border border-border  transition-all duration-300 cursor-default ${service.border}`}
+            >
+              {/* Icon Container */}
+              <div
+                className={`text-4xl p-4 rounded-2xl border group-hover:scale-110 transition-transform duration-300 ${service.color}`}
+              >
+                {service.icon}
+              </div>
+
+              {/* Text Content */}
+              <div>
+                <h4 className="text-xl font-bold mb-1 transition-colors">
+                  {service.title}
+                </h4>
+                <p className="text-sm leading-relaxed max-w-xs">
+                  {service.desc}
+                </p>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/src/components/services/MobileService.tsx b/src/components/services/MobileService.tsx
new file mode 100644
index 0000000..289dff8
--- /dev/null
+++ b/src/components/services/MobileService.tsx
@@ -0,0 +1,113 @@
+import { motion } from "framer-motion";
+import React from "react";
+import { MdCloudQueue } from "react-icons/md";
+import { SiFlutter, SiKotlin, SiSwift } from "react-icons/si";
+
+// 1. Define the interface for your timeline items
+interface TimelineItem {
+  title: string;
+  icon: React.ReactNode;
+  desc: string;
+  color: string;
+}
+
+const timelineData: TimelineItem[] = [
+  {
+    title: "iOS Native",
+    icon: <SiSwift />,
+    desc: "Premium Swift-based applications optimized for the Apple ecosystem performance.",
+    color: "text-[#00B4D8]",
+  },
+  {
+    title: "Android Native",
+    icon: <SiKotlin />,
+    desc: "Robust Kotlin applications built for scalability across all Android devices.",
+    color: "text-[#2E8B57]",
+  },
+  {
+    title: "Cross-Platform",
+    icon: <SiFlutter />,
+    desc: "High-performance Flutter apps with a single codebase for iOS and Android.",
+    color: "text-[#7B2D8E]",
+  },
+  {
+    title: "Cloud Sync",
+    icon: <MdCloudQueue />,
+    desc: "Real-time data synchronization and secure backend cloud integration.",
+    color: "text-primary",
+  },
+];
+
+export default function MobileHorizontalTimeline(): React.JSX.Element {
+  return (
+    <section className="py-20 px-6 bg-background overflow-hidden">
+      {/* Header Section */}
+      <div className="max-w-3xl mx-auto text-center mb-16 space-y-4">
+        <h2 className="text-4xl md:text-5xl font-bold tracking-tight">
+          Mobile App Development <span className="text-primary">Services</span>
+        </h2>
+        <p>
+          <p className="text-muted-foreground text-lg">
+            We develop mobile applications that are smooth, reliable, and built
+            to deliver a better experience for your users.
+          </p>
+        </p>
+      </div>
+
+      <div className="relative container mx-auto">
+        {/* Horizontal Spine */}
+        <div className="absolute top-[44px] left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-primary/50 to-transparent hidden md:block" />
+
+        {/* Scroll Container */}
+        <div className="flex flex-col md:flex-row gap-2 pb-12">
+          {timelineData.map((item, index) => (
+            <div
+              key={item.title}
+              className="flex-shrink-0 w-full md:w-1/4 snap-center relative pt-12 md:pt-0"
+            >
+              {/* Icon Node */}
+              <div className="absolute top-0 md:top-6 left-1/2 -translate-x-1/2 z-20">
+                <motion.div
+                  initial={{ scale: 0, y: 20 }}
+                  whileInView={{ scale: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  className="w-10 h-10 rounded-full glass border-2 border-primary flex items-center justify-center text-primary neon-glow "
+                >
+                  {item.icon}
+                </motion.div>
+              </div>
+
+              {/* 3D Flip Card */}
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                viewport={{ once: true }}
+                className="mt-6 md:mt-24 px-2"
+              >
+                <div className="group relative ">
+                  <div className="relative h-full w-full transition-all">
+                    {/* Front Side */}
+                    <div className="absolute inset-0 rounded-2xl shimmer bg-card p-6 flex flex-col items-center text-center justify-center">
+                      <span
+                        className={`text-4xl mb-4 opacity-40 ${item.color}`}
+                      >
+                        {item.icon}
+                      </span>
+                      <h3 className="text-xl font-bold mb-3 tracking-tight">
+                        {item.title}
+                      </h3>
+                      <p className="text-muted-foreground text-xs leading-relaxed">
+                        {item.desc}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </motion.div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/services/WebDev.tsx b/src/components/services/WebDev.tsx
new file mode 100644
index 0000000..a02e967
--- /dev/null
+++ b/src/components/services/WebDev.tsx
@@ -0,0 +1,136 @@
+import {
+  SiFastapi,
+  SiGo,
+  SiJavascript,
+  SiNestjs,
+  SiNextdotjs,
+  SiNodedotjs,
+  SiReact,
+  SiTypescript,
+} from "react-icons/si";
+import { TbApi } from "react-icons/tb";
+
+export default function WebDev() {
+  const techStack = [
+    {
+      name: "React",
+      icon: <SiReact />,
+      desc: "We use React to build fast, interactive, and smooth user interfaces that improve the overall user experience.",
+      color: "text-[#61DAFB]",
+    },
+    {
+      name: "Next.js",
+      icon: <SiNextdotjs />,
+      desc: "We use Next.js for better performance, SEO, and scalable frontend applications that load quickly.",
+      color: "text-foreground",
+    },
+    {
+      name: "TypeScript",
+      icon: <SiTypescript />,
+      desc: "We use TypeScript to write safer, maintainable code and reduce bugs in large-scale applications.",
+      color: "text-[#3178C6]",
+    },
+    {
+      name: "JavaScript",
+      icon: <SiJavascript />,
+      desc: "JavaScript powers the core functionality of our web applications, making them dynamic and responsive.",
+      color: "text-[#F7DF1E]",
+    },
+    {
+      name: "Node.js",
+      icon: <SiNodedotjs />,
+      desc: "We use Node.js to build fast, scalable backend systems capable of handling real-time applications and APIs.",
+      color: "text-[#339933]",
+    },
+    {
+      name: "GoLang",
+      icon: <SiGo />,
+      desc: "We use Go for high-performance backend services that require speed, scalability, and efficient concurrency.",
+      color: "text-[#00ADD8]",
+    },
+    {
+      name: "Fast API",
+      icon: <SiFastapi />,
+      desc: "We use FastAPI to develop secure and high-performance APIs with clean architecture and rapid development.",
+      color: "text-[#05998B]",
+    },
+
+    {
+      name: "Nest JS",
+      icon: <SiNestjs />,
+      desc: "We use NestJS to build structured, scalable, and enterprise-ready backend applications with clean architecture.",
+      color: "text-[#E0234E]",
+    },
+    {
+      name: "Rest API",
+      icon: <TbApi />,
+      desc: "REST APIs help our applications communicate smoothly between frontend, backend, and third-party services.",
+      color: "text-primary",
+    },
+  ];
+  const services = [
+    "Custom Web Application Development",
+    "E-commerce Solution Architectures",
+    "Real-time Dashboard Systems",
+    "API Design & Integration",
+    "Progressive Web Apps (PWA)",
+    "Legacy Code Migration",
+  ];
+  return (
+    <>
+      <section className="container mx-auto flex flex-col lg:flex-row gap-16 items-center">
+        <div className="w-full lg:w-1/3 space-y-8 sticky top-24 self-start">
+          <div className="space-y-4">
+            <h2 className="text-4xl md:text-5xl font-bold tracking-tight">
+              Our Web Development{" "}
+              <span className="text-primary">Services</span>
+            </h2>
+            <p className="text-muted-foreground leading-relaxed">
+              From business websites to complex web applications, we create
+              digital solutions focused on performance, usability, and growth.
+            </p>
+          </div>
+
+          <ul className="space-y-4">
+            {services.map((service, i) => (
+              <li key={i} className="flex items-center gap-3 group">
+                <span className="h-2 w-2 rounded-full bg-primary group-hover:scale-150 transition-transform duration-300 neon-glow" />
+                <span className="font-medium text-lg hover:text-primary transition-colors cursor-default">
+                  {service}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="container mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 w-full lg:w-2/3">
+          {techStack.map((tech, index) => (
+            <div key={index} className="group [perspective:1000px]">
+              {/* Inner Wrapper for Flip */}
+              <div className="relative h-full w-full transition-all duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
+                {/* Front Side: Icon & Title */}
+                <div className="absolute inset-0 flex flex-col items-center justify-center p-12 rounded-2xl border border-gradient ">
+                  <div
+                    className={`text-6xl mb-4 transition-transform duration-300 group-hover:scale-110 ${tech.color}`}
+                  >
+                    {tech.icon}
+                  </div>
+                  <h3 className=" font-bold tracking-wide">{tech.name}</h3>
+                </div>
+
+                {/* Back Side: "Why we use it" */}
+                <div className="absolute inset-0 h-full w-full rounded-2xl bg-card px-8 py-10 text-center [transform:rotateY(180deg)] [backface-visibility:hidden] flex flex-col items-center justify-center border-2 border-primary/50 neon-glow">
+                  <h4 className="text-primary font-bold mb-2 uppercase text-sm tracking-tighter">
+                    Why we use it
+                  </h4>
+                  <p className="text-xs text-muted-foreground leading-relaxed">
+                    {tech.desc}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/src/pages/Technologies.tsx b/src/pages/Technologies.tsx
new file mode 100644
index 0000000..533fd71
--- /dev/null
+++ b/src/pages/Technologies.tsx
@@ -0,0 +1,33 @@
+import { AISolutions } from "@/components/services/AISolutions";
+import { CloudSolutions } from "@/components/services/CloudSolutions";
+import MobileService from "@/components/services/MobileService";
+import WebDev from "@/components/services/WebDev";
+import PremiumBadge from "@/components/shared/PremiumBadge";
+
+const Technologies = () => {
+  return (
+    <div className="py-24">
+      {/* Hero Section */}
+      <section className="mb-20 bg-primary/5 dark:bg-secondary/70 py-20 text-foreground text-center space-y-4">
+        <PremiumBadge text=" Our Tech Stack" />
+
+        <h1 className="text-4xl md:text-5xl font-bold tracking-tight">
+          Modern Technology for Real <br />
+          <span className="text-primary">Business</span> Needs.
+        </h1>
+        <p className="text-muted-foreground text-lg md:text-xl max-w-4xl mx-auto">
+          We leverage the most advanced and reliable technologies to build
+          scalable, high-performance digital solutions tailored to your needs.
+        </p>
+      </section>
+
+      {/* web Section */}
+      <WebDev />
+      <MobileService />
+      <AISolutions />
+      <CloudSolutions />
+    </div>
+  );
+};
+
+export default Technologies;