diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
index 5d00654..95fcb95 100644
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@@ -4,8 +4,10 @@ import React from "react";
 
 import { useState } from "react";
 import { Mail, Phone, MapPin } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 export function Footer() {
+  const t = useTranslations();
   const [email, setEmail] = useState("");
   const [subscribed, setSubscribed] = useState(false);
 
@@ -75,8 +77,7 @@ export function Footer() {
                 <span className="text-xl font-bold text-white">FIREFORCE</span>
               </div>
               <p className="text-sm leading-relaxed text-gray-300">
-                They are seen as a beacon of hope, a figure who brings calm
-                amidst chaos and light in the darkest of moments.
+                {t("footer.description")}
               </p>
             </div>
 
@@ -86,12 +87,12 @@ export function Footer() {
               <ul className="space-y-3 text-gray-300">
                 <li>
                   <a href="#home" className="transition hover:text-[#fa1d1d]">
-                    Home
+                    {t("footer.quickLinks.home")}
                   </a>
                 </li>
                 <li>
                   <a href="#about" className="transition hover:text-[#fa1d1d]">
-                    About
+                    {t("footer.quickLinks.about")}
                   </a>
                 </li>
                 <li>
@@ -99,20 +100,12 @@ export function Footer() {
                     href="#services"
                     className="transition hover:text-[#fa1d1d]"
                   >
-                    Services
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#pricing"
-                    className="transition hover:text-[#fa1d1d]"
-                  >
-                    Pricing
+                    {t("footer.quickLinks.services")}
                   </a>
                 </li>
                 <li>
                   <a href="#blog" className="transition hover:text-[#fa1d1d]">
-                    Blog
+                    {t("footer.quickLinks.products")}
                   </a>
                 </li>
               </ul>
@@ -120,40 +113,13 @@ export function Footer() {
 
             {/* Support */}
             <div>
-              <h3 className="mb-6 text-lg font-bold text-white">SUPPORT</h3>
+              <h3 className="mb-6 text-lg font-bold text-white">
+                {t("footer.support.title")}
+              </h3>
               <ul className="space-y-3 text-gray-300">
                 <li>
                   <a href="#help" className="transition hover:text-[#fa1d1d]">
-                    Help Center
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#disclaimer"
-                    className="transition hover:text-[#fa1d1d]"
-                  >
-                    Disclaimer
-                  </a>
-                </li>
-                <li>
-                  <a href="#faq" className="transition hover:text-[#fa1d1d]">
-                    FAQ
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#support"
-                    className="transition hover:text-[#fa1d1d]"
-                  >
-                    Support
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#contact"
-                    className="transition hover:text-[#fa1d1d]"
-                  >
-                    Contact
+                    {t("footer.support.contact")}
                   </a>
                 </li>
               </ul>
diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
index aec3cb3..e15b434 100644
--- a/components/layout/navbar.tsx
+++ b/components/layout/navbar.tsx
@@ -4,8 +4,10 @@ import Link from "next/link";
 import { ChevronDown, Phone, Menu, X } from "lucide-react";
 import Image from "next/image";
 import LanguageSelectRadix from "../languageSwitcher";
+import { useTranslations } from "next-intl";
 
 export function Navbar() {
+  const t = useTranslations();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [scrolled, setScrolled] = useState(false);
@@ -55,13 +57,13 @@ export function Navbar() {
                 href="/"
                 className="text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
               >
-                HOME
+                {t("navbar.home")}
               </Link>
               <Link
                 href="/about"
                 className="text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
               >
-                ABOUT
+                {t("navbar.about")}
               </Link>
 
               {/* Pages Dropdown */}
@@ -70,7 +72,7 @@ export function Navbar() {
                   className="text-white text-sm h-full font-semibold hover:text-red-500 
                transition-colors flex items-center gap-1"
                 >
-                  PAGES
+                  {t("navbar.pages")}
                   <ChevronDown
                     size={16}
                     className="transition-transform group-hover:rotate-180"
@@ -90,14 +92,14 @@ export function Navbar() {
                     className="block px-4 py-2 text-black text-sm hover:bg-red-600 
                  hover:text-white transition-colors"
                   >
-                    FAQ
+                    {t("navbar.faq")}
                   </Link>
                   <Link
                     href="/services"
                     className="block px-4 py-2 text-black text-sm hover:bg-red-600 
                  hover:text-white transition-colors"
                   >
-                    Services
+                    {t("navbar.services")}
                   </Link>
                   {/* <Link
                     href="/blog"
@@ -113,13 +115,13 @@ export function Navbar() {
                 href="/products"
                 className="text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
               >
-                PRODUCTS
+                {t("navbar.products")}
               </Link>
               <Link
                 href="/contact"
                 className="text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
               >
-                CONTACT
+                {t("navbar.contact")}
               </Link>
             </div>
 
@@ -132,7 +134,7 @@ export function Navbar() {
                 <Phone size={20} className="text-white" />
                 <div>
                   <div className="text-white text-xs font-semibold">
-                    Emergency Call!
+                    {t("navbar.emergency")}
                   </div>
                   <div className="text-white text-sm font-bold">
                     +123-456-7890
@@ -170,14 +172,21 @@ export function Navbar() {
       >
         {/* Mobile Menu Header */}
         <div className="flex justify-between items-center p-6 border-b border-gray-700">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-red-600 rounded-full flex items-center justify-center">
-              <div className="w-6 h-6 bg-white rounded-full"></div>
+          {/* Logo */}
+          <Link href="/" className="hover:cursor-pointer">
+            <div className="flex items-center gap-2">
+              <div className="p-2 rounded-xl flex items-center justify-center">
+                <Image
+                  src="/images/IGNUM/PNG/1.@6x.png"
+                  alt="logo image"
+                  width={70}
+                  height={70}
+                  className=""
+                />
+              </div>
+              Ignum
             </div>
-            <span className="text-white font-bold text-lg tracking-wider">
-              FIREFORCE
-            </span>
-          </div>
+          </Link>
           <button
             onClick={() => setIsMobileMenuOpen(false)}
             className="text-white p-2 hover:bg-red-600 rounded-md transition"
@@ -193,14 +202,14 @@ export function Navbar() {
             className="text-white text-base font-semibold hover:text-red-500 transition py-2"
             onClick={() => setIsMobileMenuOpen(false)}
           >
-            HOME
+            {t("navbar.home")}
           </Link>
           <Link
             href="/about"
             className="text-white text-base font-semibold hover:text-red-500 transition py-2"
             onClick={() => setIsMobileMenuOpen(false)}
           >
-            ABOUT
+            {t("navbar.about")}
           </Link>
 
           {/* Mobile Pages Dropdown */}
@@ -209,7 +218,7 @@ export function Navbar() {
               onClick={() => setIsDropdownOpen(!isDropdownOpen)}
               className="text-white text-base font-semibold hover:text-red-500 transition flex items-center gap-1 py-2 w-full"
             >
-              PAGES
+              {t("navbar.pages")}
               <ChevronDown
                 size={16}
                 className={`transition-transform ${isDropdownOpen ? "rotate-180" : ""}`}
@@ -222,14 +231,14 @@ export function Navbar() {
                   className="text-white/80 text-sm hover:text-red-500 transition py-2"
                   onClick={() => setIsMobileMenuOpen(false)}
                 >
-                  FAQ
+                  {t("navbar.faq")}
                 </Link>
                 <Link
                   href="/services"
                   className="text-white/80 text-sm hover:text-red-500 transition py-2"
                   onClick={() => setIsMobileMenuOpen(false)}
                 >
-                  Services
+                  {t("navbar.services")}
                 </Link>
               </div>
             )}
@@ -240,14 +249,14 @@ export function Navbar() {
             className="text-white text-base font-semibold hover:text-red-500 transition py-2"
             onClick={() => setIsMobileMenuOpen(false)}
           >
-            PRODUCTS
+            {t("navbar.products")}
           </Link>
           <Link
             href="/contact"
             className="text-white text-base font-semibold hover:text-red-500 transition py-2"
             onClick={() => setIsMobileMenuOpen(false)}
           >
-            CONTACT
+            {t("navbar.contact")}
           </Link>
         </div>
       </div>
diff --git a/components/pages/about/aboutBanner.tsx b/components/pages/about/aboutBanner.tsx
index faf0bfc..609d3b7 100644
--- a/components/pages/about/aboutBanner.tsx
+++ b/components/pages/about/aboutBanner.tsx
@@ -1,6 +1,8 @@
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+import { useTranslations } from "next-intl";
 
 export function AboutBanner() {
+  const t = useTranslations();
   return (
     <section className="relative w-full lg:h-[60vh] h-screen min-h-100 overflow-hidden pt-10">
       {/* Background Image */}
@@ -24,17 +26,21 @@ export function AboutBanner() {
       <div className="max-w-250 w-full mx-auto px-4">
         <div className="relative z-20 h-full flex max-lg:flex-col items-start justify-between gap-5 pt-30">
           <div className="spacw-y-4 ">
-            <DotAnimatsiya />
+            <div className="flex items-center gap-3">
+              <DotAnimatsiya />
+              <span className="text-sm text-white font-semibold tracking-wide">
+                {t("about.banner.title")}
+              </span>
+            </div>
             <p
               className=" bg-linear-to-br from-white via-white to-black
   text-transparent bg-clip-text text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty"
             >
-              Fire Fighter <br /> At The Ready
+              {t("about.banner.subtitle")}
             </p>
           </div>
           <div className="lg:w-[40%] text-gray-300 mt-20">
-            It emphasizes that these firefighters are there not just as public
-            servants but as a vital part of the community.
+            {t("about.banner.description")}
           </div>
         </div>
       </div>
diff --git a/components/pages/about/story.tsx b/components/pages/about/story.tsx
index 21197aa..e882220 100644
--- a/components/pages/about/story.tsx
+++ b/components/pages/about/story.tsx
@@ -1,6 +1,8 @@
+import { useTranslations } from "next-intl";
 import Image from "next/image";
 
 export function Story() {
+  const t = useTranslations();
   return (
     <div className="bg-[#1e1d1c] pb-0 relative z-10 max-[350px]:pb-30 ">
       <div className="max-w-260 mx-auto px-4">
@@ -26,21 +28,11 @@ export function Story() {
           {/* Content */}
           <div className="relative z-20 p-8 lg:p-12 max-w-130">
             <h2 className="text-white text-4xl lg:text-5xl font-bold mb-6">
-              OUR STORY
+              {t("about.story.title")}
             </h2>
-            <p className="text-gray-300 mb-4">
-              Our story is one of unwavering dedication, selflessness, and a{" "}
-              <span className="text-white font-semibold">
-                deep commitment to the safety
-              </span>
-              and well-being of our communities.
-            </p>
-            <p className="text-gray-400 mb-6">
-              Aliquam lorem ante dapibus in viverra quis a tellus phasellus
-              viverra nulla ut metus varius laoreet quisque rutrum.
-            </p>
+            <p className="text-gray-300 mb-4">{t("about.story.description")}</p>
             <button className="text-white flex items-center gap-2 hover:text-red-500 transition">
-              READ MORE
+              {t("about.story.readMore")}
               <svg
                 className="w-4 h-4"
                 fill="none"
@@ -74,11 +66,10 @@ export function Story() {
                 />
               </span>
               <div className="space-y-1 text-white">
-                <h2 className="text-xl font-semibold">FIREFORCE VISION</h2>
-                <p>
-                  Phasellus viverra nulla ut metus varius leo imperdiet laoreet.
-                  Quisque rutrum aenean augue vulputate eleifend.
-                </p>
+                <h2 className="text-xl font-semibold">
+                  {t("about.story.vision.title")}
+                </h2>
+                <p>{t("about.story.vision.description")}</p>
               </div>
             </div>
             <div className="flex sm:flex-row flex-col sm:items-center items-start  md:rounded-t-xl max-md:rounded-xl max-w-md w-full sm:p-7 p-2 bg-black sm:gap-5 gap-2">
@@ -92,10 +83,11 @@ export function Story() {
                 />
               </span>
               <div className="space-y-1 text-white">
-                <h2 className="text-xl font-semibold">FIREFORCE VISION</h2>
+                <h2 className="text-xl font-semibold">
+                 {t("about.story.mission.title")}
+                </h2>
                 <p>
-                  Phasellus viverra nulla ut metus varius leo imperdiet laoreet.
-                  Quisque rutrum aenean augue vulputate eleifend.
+                  {t("about.story.mission.description")}
                 </p>
               </div>
             </div>
diff --git a/components/pages/about/whyChooseUs.tsx b/components/pages/about/whyChooseUs.tsx
index 9c7a9d4..2c5baa8 100644
--- a/components/pages/about/whyChooseUs.tsx
+++ b/components/pages/about/whyChooseUs.tsx
@@ -3,13 +3,15 @@
 import Image from "next/image";
 import { Check } from "lucide-react";
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+import { useTranslations } from "next-intl";
 
 export function WhyChooseUs() {
+  const t = useTranslations();
   const features = [
-    { title: "Fast Response Team" },
-    { title: "Experienced Firefighter" },
-    { title: "Ready 24 Hours" },
-    { title: "Fast Response Team" },
+    { title: t("about.whyChoose.features.fastResponse") },
+    { title: t("about.whyChoose.features.ready24") },
+    { title: t("about.whyChoose.features.experienced") },
+    { title: t("about.whyChoose.features.quality") },
   ];
 
   return (
@@ -22,23 +24,20 @@ export function WhyChooseUs() {
             <div className="mb-4 flex items-center gap-2">
               <DotAnimatsiya />
               <span className="text-sm font-semibold tracking-wider text-white">
-                WHY CHOOSE US
+                {t("about.whyChoose.title")}
               </span>
             </div>
             <h2
               className="bg-linear-to-br from-white via-white to-black
   text-transparent bg-clip-text text-4xl font-bold sm:text-5xl lg:text-6xl"
             >
-              WE ARE BEST
-              <br />
-              FIREFIGHTER
+              {t("about.whyChoose.subtitle")}
             </h2>
           </div>
 
           {/* Description */}
           <p className="text-base leading-relaxed text-gray-400 sm:text-lg">
-            Aliquam lorem ante dapibus in viverra quis a tellus phasellus
-            viverra nulla ut metus varius laoreet quisque rutrum.
+            {t("about.whyChoose.description")}
           </p>
 
           {/* Features Grid */}
@@ -58,7 +57,7 @@ export function WhyChooseUs() {
           {/* CTA Button */}
           <div>
             <button className="shadow-[0px_0px_2px_8px_#ff01015c] rounded-full bg-red-600 px-6 py-3 font-bold text-white transition-all hover:bg-red-700 sm:px-8 sm:py-4">
-              CONTACT US
+              {t("about.whyChoose.contact")}
             </button>
           </div>
         </div>
@@ -88,10 +87,7 @@ export function WhyChooseUs() {
               />
               <div>
                 <p className="text-sm font-bold text-white sm:text-base">
-                  BEST AWARD
-                </p>
-                <p className="text-xs text-gray-400 sm:text-sm">
-                  FIREFIGHTER 2025
+                  {t("about.whyChoose.award")}
                 </p>
               </div>
             </div>
diff --git a/components/pages/contact/contactHeader.tsx b/components/pages/contact/contactHeader.tsx
index f7aa0d3..e0f9f90 100644
--- a/components/pages/contact/contactHeader.tsx
+++ b/components/pages/contact/contactHeader.tsx
@@ -1,23 +1,25 @@
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+import { useTranslations } from "next-intl";
 import React from "react";
 
 export default function ContactHeader() {
+  const t = useTranslations();
   return (
     <div className="mb-8 text-center">
       <div className="mb-4 flex items-center justify-center gap-2">
         <DotAnimatsiya />
         <span className="text-sm font-semibold tracking-wider text-white">
-          CONTACT US
+          {t("contact.banner.title")}
         </span>
       </div>
       <h2
         className="bg-linear-to-br from-white via-white to-black
   text-transparent bg-clip-text  text-4xl font-bold tracking-wide md:text-5xl"
       >
-        GET IN TOUCH
+        {t("contact.banner.subtitle")}
       </h2>
       <p className="mt-3 text-sm text-gray-300 italic">
-        We'd love to hear from you. Please fill out this form.
+        {t("contact.banner.description")}
       </p>
     </div>
   );
diff --git a/components/pages/contact/form.tsx b/components/pages/contact/form.tsx
index a7a910f..5ad961a 100644
--- a/components/pages/contact/form.tsx
+++ b/components/pages/contact/form.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Check } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { useState } from "react";
 
 interface FormData {
@@ -22,6 +23,7 @@ interface FormErrors {
 }
 
 export default function Form() {
+  const t = useTranslations();
   const [formData, setFormData] = useState<FormData>({
     firstName: "",
     lastName: "",
@@ -124,7 +126,7 @@ export default function Form() {
           <input
             type="text"
             name="firstName"
-            placeholder="First Name"
+            placeholder={t("contact.form.placeholders.firstName")}
             value={formData.firstName}
             onChange={handleChange}
             className={`w-full rounded-3xl border bg-white px-4 py-3 text-sm text-gray-700 placeholder-gray-400 outline-none transition focus:ring-2 focus:ring-red-500 ${
@@ -139,7 +141,7 @@ export default function Form() {
           <input
             type="text"
             name="lastName"
-            placeholder="Last Name"
+            placeholder={t("contact.form.placeholders.lastName")}
             value={formData.lastName}
             onChange={handleChange}
             className={`w-full rounded-3xl border bg-white px-4 py-3 text-sm text-gray-700 placeholder-gray-400 outline-none transition focus:ring-2 focus:ring-red-500 ${
@@ -158,7 +160,7 @@ export default function Form() {
           <input
             type="email"
             name="email"
-            placeholder="Your Email Address"
+            placeholder={t("contact.form.placeholders.email")}
             value={formData.email}
             onChange={handleChange}
             className={`w-full rounded-3xl border bg-white px-4 py-3 text-sm text-gray-700 placeholder-gray-400 outline-none transition focus:ring-2 focus:ring-red-500 ${
@@ -173,7 +175,7 @@ export default function Form() {
           <input
             type="text"
             name="subject"
-            placeholder="Subject"
+            placeholder={t("contact.form.placeholders.subject")}
             value={formData.subject}
             onChange={handleChange}
             className={`w-full rounded-3xl border bg-white px-4 py-3 text-sm text-gray-700 placeholder-gray-400 outline-none transition focus:ring-2 focus:ring-red-500 ${
@@ -190,7 +192,7 @@ export default function Form() {
       <div>
         <textarea
           name="message"
-          placeholder="Leave us a message"
+          placeholder={t("contact.form.placeholders.message")}
           rows={8}
           value={formData.message}
           onChange={handleChange}
@@ -221,7 +223,7 @@ export default function Form() {
             )}
           </button>
           <span className="text-sm text-gray-300">
-            You agree to our friendly privacy policy
+            {t("contact.form.privacy")}
           </span>
         </div>
         <button
@@ -229,7 +231,7 @@ export default function Form() {
           disabled={isSubmitting}
           className="shadow-[0px_0px_2px_8px_#ff01015c] rounded-full bg-red-600 px-8 py-3 text-sm font-semibold uppercase tracking-wider text-white transition hover:cursor-pointer hover:scale-90 disabled:cursor-not-allowed disabled:opacity-50"
         >
-          {isSubmitting ? "Sending..." : "Send Message"}
+          {isSubmitting ? "Sending..." : t("contact.form.send")}
         </button>
       </div>
       {errors.agreeToPolicy && (
diff --git a/components/pages/contact/main.tsx b/components/pages/contact/main.tsx
index 620b7df..bcd6c11 100644
--- a/components/pages/contact/main.tsx
+++ b/components/pages/contact/main.tsx
@@ -2,22 +2,24 @@ import Image from "next/image";
 import { Mail, MapPin, Phone, Check } from "lucide-react";
 import ContactHeader from "./contactHeader";
 import Form from "./form";
+import { useTranslations } from "next-intl";
 
 export function Contact() {
+  const t = useTranslations();
   const contactInfo = [
     {
       icon: Mail,
-      title: "EMAIL",
-      detail: "support@fireforce",
+      title:t("contact.email"),
+      detail: t("contact.emailAddress"),
     },
     {
       icon: MapPin,
-      title: "OUR LOCATION",
-      detail: "Jl. Dr. Ir. Soekarno No. 99x Tabanan - Bali",
+      title: t("contact.location"),
+      detail: t("contact.address"),
     },
     {
       icon: Phone,
-      title: "PHONE",
+      title: t("contact.phone"),
       detail: "+123-456-7890",
     },
   ];
diff --git a/components/pages/faq/answearQuestions.tsx b/components/pages/faq/answearQuestions.tsx
index 825fb5c..b198739 100644
--- a/components/pages/faq/answearQuestions.tsx
+++ b/components/pages/faq/answearQuestions.tsx
@@ -1,8 +1,37 @@
 import Link from "next/link";
 import FAQAccordion from "./faqAccardion";
 import { faqItems } from "@/lib/demoData";
+import { useTranslations } from "next-intl";
 
 export function Togle() {
+  const t = useTranslations();
+    const faqItems = [
+      {
+        id: "faq-1",
+        question: t("faq.question1.question"),
+        answer: t("faq.question1.answer"),
+      },
+      {
+        id: "faq-2",
+        question: t("faq.question2.question"),
+        answer: t("faq.question2.answer"),
+      },
+      {
+        id: "faq-3",
+        question: t("faq.question3.question"),
+        answer: t("faq.question3.answer"),
+      },
+      {
+        id: "faq-4",
+        question: t("faq.question4.question"),
+        answer: t("faq.question4.answer"),
+      },
+      {
+        id: "faq-5",
+        question: t("faq.question5.question"),
+        answer: t("faq.question5.answer"),
+      },
+    ];
   return (
     <div className="min-h-screen bg-[#1e1d1c]">
       <main className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
@@ -13,7 +42,7 @@ export function Togle() {
               className="bg-linear-to-br from-white via-white/50 to-black
   text-transparent bg-clip-text text-3xl font-bold uppercase leading-tight sm:text-4xl md:text-5xl lg:text-6xl"
             >
-              About <br /> Work
+              {t("faq.banner.topic")}
             </h1>
           </div>
 
@@ -28,17 +57,17 @@ export function Togle() {
             className="text-center bg-linear-to-br from-white via-white/50 to-black
   text-transparent bg-clip-text text-3xl font-bold uppercase leading-tight sm:text-4xl md:text-5xl lg:text-6xl"
           >
-            Still Have Question?
+            {t("faq.ask.question")}
           </h1>
           <p className="text-center text-white/80 text-lg">
-            Nullam dictum felis eu pede mollis pretium integer tincidunt.
+            {t("faq.ask.subtitle")}
           </p>
           <div className="w-full flex items-center justify-center">
             <Link
               href={"/contact"}
               className="mx-auto shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit"
             >
-              ASK A QUESTION
+              {t("faq.ask.btn")}
             </Link>
           </div>
         </div>
diff --git a/components/pages/faq/faqBanner.tsx b/components/pages/faq/faqBanner.tsx
index 43b575e..a88afe9 100644
--- a/components/pages/faq/faqBanner.tsx
+++ b/components/pages/faq/faqBanner.tsx
@@ -1,6 +1,8 @@
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+import { useTranslations } from "next-intl";
 
 export function FaqBanner() {
+  const t = useTranslations();
   return (
     <section className="relative w-full h-[55vh] min-h-100 overflow-hidden pt-10">
       {/* Background Image */}
@@ -24,12 +26,17 @@ export function FaqBanner() {
       <div className="max-w-250 w-full mx-auto px-4">
         <div className="relative z-20 h-full flex max-lg:flex-col items-start justify-between gap-5 pt-30">
           <div className="spacw-y-4 ">
-            <DotAnimatsiya />
+            <div className="flex items-center gap-3">
+              <DotAnimatsiya />
+              <span className="text-sm text-white font-semibold tracking-wide">
+                {t("faq.banner.title")}
+              </span>
+            </div>
             <p
               className=" bg-linear-to-br from-white via-white to-black
   text-transparent bg-clip-text text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty"
             >
-              GENERAL <br /> QUESTIONS
+              {t("faq.banner.subtitle")}
             </p>
           </div>
         </div>
diff --git a/components/pages/home/about.tsx b/components/pages/home/about.tsx
index 84e495c..742000a 100644
--- a/components/pages/home/about.tsx
+++ b/components/pages/home/about.tsx
@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import Image from "next/image";
 import { Flame, Building2, Ambulance } from "lucide-react";
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+import { useTranslations } from "next-intl";
 
 interface ServiceItem {
   icon: React.ReactNode;
@@ -13,28 +14,25 @@ interface ServiceItem {
   description: string;
 }
 
-const services: ServiceItem[] = [
-  {
-    icon: <Flame width={40} height={40} className="text-red-500" />,
-    title: "FIRE PREVENTION",
-    description:
-      "Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum aenean imperdiet augue",
-  },
-  {
-    icon: <Building2 width={40} height={40} className="text-red-500" />,
-    title: "ACTIVE ACCIDENTS",
-    description:
-      "Nullam dictum felis eu pede mollis pretium. Integer tincidunt cras dapibus vivamus consequat vitae.",
-  },
-  {
-    icon: <Ambulance width={40} height={40} className="text-red-500" />,
-    title: "AMBULANCE SERVICE",
-    description:
-      "Donec pede justo fringilla vel aliquet nec vulputate eget arcu enim justo rhoncus ut venenatis.",
-  },
-];
-
 export function AboutUs() {
+  const t = useTranslations();
+  const services: ServiceItem[] = [
+    {
+      icon: <Flame width={40} height={40} className="text-red-500" />,
+      title: t("home.about.prevention.title"),
+      description: t("home.about.prevention.description"),
+    },
+    {
+      icon: <Building2 width={40} height={40} className="text-red-500" />,
+      title: t("home.about.accidents.title"),
+      description: t("home.about.accidents.description"),
+    },
+    {
+      icon: <Ambulance width={40} height={40} className="text-red-500" />,
+      title: t("home.about.service.title"),
+      description: t("home.about.service.description"),
+    },
+  ];
   return (
     <section className="bg-[#1e1d1c] py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
       <div className="max-w-7xl mx-auto">
@@ -46,16 +44,14 @@ export function AboutUs() {
               <div className="flex items-center gap-3">
                 <DotAnimatsiya />
                 <span className="text-white font-bold text-sm tracking-wide">
-                  ABOUT US
+                  {t("home.about.title")}
                 </span>
               </div>
               <h2
                 className="text-4xl bg-linear-to-br from-white via-white to-black
   text-transparent bg-clip-text sm:text-5xl lg:text-6xl font-bold  leading-tight"
               >
-                FIREFIGHTERS
-                <br />
-                AT THE READY
+                {t("home.about.subtitle")}
               </h2>
             </div>
 
@@ -81,7 +77,7 @@ export function AboutUs() {
             {/* Button */}
             <div>
               <Button className="bg-red-600 hover:bg-red-700 text-white font-bold px-8 py-3 rounded-full transition-colors duration-300 shadow-[0px_0px_2px_8px_#ff01015c]">
-                ABOUT US
+                {t("home.about.title")}
               </Button>
             </div>
           </div>
@@ -112,10 +108,7 @@ export function AboutUs() {
                 />
                 <div className="text-center">
                   <p className="text-white font-bold text-sm sm:text-base">
-                    BEST AWARD
-                  </p>
-                  <p className="text-white font-bold text-sm sm:text-base">
-                    FIREFIGHTER 2025
+                    {t("home.about.award")}
                   </p>
                 </div>
               </div>
diff --git a/components/pages/home/banner.tsx b/components/pages/home/banner.tsx
index c864ecf..57c0fc2 100644
--- a/components/pages/home/banner.tsx
+++ b/components/pages/home/banner.tsx
@@ -1,6 +1,8 @@
+import { useTranslations } from "next-intl";
 import DotAnimatsiya from "../../dot/DotAnimatsiya";
 
 export function Banner() {
+  const t = useTranslations();
   return (
     <section className="relative w-full lg:h-[86vh] h-screen min-h-150 overflow-hidden pt-20">
       {/* Background Image */}
@@ -22,8 +24,8 @@ export function Banner() {
       />
 
       {/* Content Container */}
-      <div className="relative z-20 h-full flex items-end lg:mt-0 md:mt-[15vh] sm:mt-[5vh] mt-0">
-        <div className="max-w-375 mx-auto px-4 sm:px-6 lg:px-8 w-full">
+      <div className="relative z-20 h-full flex items-center lg:mt-0 md:mt-[20vh] sm:mt-[10vh] mt-0">
+        <div className="max-w-400 mx-auto px-4 sm:px-6 lg:px-8 w-full">
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center h-full">
             {/* Right side - Text Content */}
             <div className="lg:hidden inline-block space-y-6 text-white">
@@ -31,7 +33,7 @@ export function Banner() {
               <div className="flex items-center gap-2 w-fit">
                 <DotAnimatsiya />
                 <span className="text-sm font-semibold tracking-wide">
-                  WELCOME TO FIREFORCE
+                  {t("home.banner.title1")}
                 </span>
               </div>
 
@@ -40,28 +42,27 @@ export function Banner() {
                 className="bg-linear-to-br from-white via-white to-black
   text-transparent bg-clip-text text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty"
               >
-                THE FIRE GUARDIAN
+                {t("home.banner.title2")}
               </h1>
 
               {/* Description */}
               <p className="text-base sm:text-lg text-gray-300 leading-relaxed max-w-md">
-                They are seen as a beacon of hope, a figure who brings calm
-                amidst chaos and light in the darkest of moments.
+                {t("home.banner.description")}
               </p>
 
               {/* CTA Button */}
               <button className="shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit">
-                GET STARTED
+                {t("home.banner.cta")}
               </button>
             </div>
 
             {/* Left side - Firefighters Image */}
-            <div className="flex items-end justify-center">
+            <div className="flex items-end justify-center overflow-hidden ">
               <img
-                src="/images/home/bannerHuman.png"
+                src="/images/img15.webp"
                 alt="Firefighters"
                 loading="lazy"
-                className="w-full max-lg:w-[80vw] h-auto object-cover drop-shadow-2xl"
+                className="w-150 h-100 max-[300px]:w-[80vw] object-cover object-right rounded-xl drop-shadow-2xl"
               />
             </div>
 
@@ -71,24 +72,23 @@ export function Banner() {
               <div className="flex items-center gap-2 w-fit">
                 <DotAnimatsiya />
                 <span className="text-sm font-semibold tracking-wide">
-                  WELCOME TO FIREFORCE
+                  {t("home.banner.title1")}
                 </span>
               </div>
 
               {/* Main Heading */}
               <h1 className="gradient-text text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty">
-                THE FIRE GUARDIAN
+                {t("home.banner.title2")}
               </h1>
 
               {/* Description */}
               <p className="text-base sm:text-lg text-gray-300 leading-relaxed max-w-md">
-                They are seen as a beacon of hope, a figure who brings calm
-                amidst chaos and light in the darkest of moments.
+                {t("home.banner.description")}
               </p>
 
               {/* CTA Button */}
               <button className="shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit">
-                GET STARTED
+                {t("home.banner.cta")}
               </button>
             </div>
           </div>
diff --git a/components/pages/home/blog.tsx b/components/pages/home/blog.tsx
index 1ce7123..7aabf62 100644
--- a/components/pages/home/blog.tsx
+++ b/components/pages/home/blog.tsx
@@ -1,35 +1,37 @@
 import Image from "next/image";
 import { ChevronRight } from "lucide-react";
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
-
-const blogPosts = [
-  {
-    id: 1,
-    image: "/images/img14.webp",
-    category: "Tips & Trick",
-    title: "BEHIND THE HELMET: LIFE AS A FIREFIGHTER",
-    author: "John Doe",
-    date: "July 24, 2025",
-  },
-  {
-    id: 2,
-    image: "/images/img15.webp",
-    category: "Insight",
-    title: "FIREFIGHTING EQUIPMENT: TOOLS OF THE TRADE",
-    author: "John Doe",
-    date: "July 24, 2025",
-  },
-  {
-    id: 3,
-    image: "/images/img16.webp",
-    category: "News",
-    title: "FIREFIGHTER TRAINING TAKES TO BECOME A HERO",
-    author: "John Doe",
-    date: "July 24, 2025",
-  },
-];
+import { useTranslations } from "next-intl";
 
 export function Blog() {
+  const t = useTranslations();
+  const blogPosts = [
+    {
+      id: 1,
+      image: "/images/img14.webp",
+      category: "Tips & Trick",
+      title: t("home.blog.articles.article1"),
+      author: "John Doe",
+      date: "July 24, 2025",
+    },
+    {
+      id: 2,
+      image: "/images/img15.webp",
+      category: "Insight",
+      title: t("home.blog.articles.article2"),
+      author: "John Doe",
+      date: "July 24, 2025",
+    },
+    {
+      id: 3,
+      image: "/images/img16.webp",
+      category: "News",
+      title: t("home.blog.articles.article3"),
+      author: "John Doe",
+      date: "July 24, 2025",
+    },
+  ];
+
   return (
     <section className="bg-[#1f1f1f] py-45">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
@@ -38,14 +40,14 @@ export function Blog() {
           <div className="mb-4 flex items-center justify-center gap-2">
             <DotAnimatsiya />
             <span className="text-sm font-semibold tracking-wider text-white uppercase">
-              Blog & Articles
+              {t("home.blog.title")}
             </span>
           </div>
           <h2
             className="bg-linear-to-br from-white via-white to-black
   text-transparent bg-clip-text text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl"
           >
-            LATEST BLOG & NEWS
+            {t("home.blog.subtitle")}
           </h2>
         </div>
 
@@ -84,7 +86,7 @@ export function Blog() {
                   href="#"
                   className="inline-flex items-center gap-1 text-sm font-semibold tracking-wider text-red-600 uppercase transition-colors hover:text-red-500"
                 >
-                  Read More
+                  {t("home.blog.readMore")}
                   <ChevronRight className="h-4 w-4" />
                 </a>
               </div>
diff --git a/components/pages/home/line.tsx b/components/pages/home/line.tsx
index 4593aeb..5db3b4c 100644
--- a/components/pages/home/line.tsx
+++ b/components/pages/home/line.tsx
@@ -1,13 +1,15 @@
 import { Phone } from "lucide-react";
+import { useTranslations } from "next-intl";
 import Image from "next/image";
 
 export function Line() {
+  const t = useTranslations();
   return (
     <div className="bg-black py-10 px-4">
       <div className="max-w-280 w-full mx-auto relative py-10 flex items-center justify-between ">
         <div className="text-white flex flex-col items-start justify-start gap-5 ">
           <h2 className="lg:text-5xl sm:text-3xl text-2xl max-w-[80%] w-full font-semibold">
-            Ready for Action 24/7: Contact Us at
+            {t("home.contactLine.text")}
           </h2>
           <p className="flex items-center justify-center gap-4 font-semibold sm:text-xl text-lg">
             <span
diff --git a/components/pages/home/ourService.tsx b/components/pages/home/ourService.tsx
index 1b41ffd..a3b52e7 100644
--- a/components/pages/home/ourService.tsx
+++ b/components/pages/home/ourService.tsx
@@ -1,9 +1,11 @@
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
 import { ChevronRight } from "lucide-react";
+import { useTranslations } from "next-intl";
 import Image from "next/image";
 import Link from "next/link";
 
 export function OurService() {
+  const t = useTranslations();
   return (
     <div className="bg-[#1e1d1c] py-10 md:py-16 lg:py-20">
       <div className="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8">
@@ -11,14 +13,13 @@ export function OurService() {
         <div className="space-y-4 md:space-y-6">
           <div className="flex items-center justify-center gap-2 text-base sm:text-lg md:text-xl text-white font-bold">
             <DotAnimatsiya />
-            OUR SERVICES
+            {t("home.services.title")}
           </div>
           <h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl tracking-wider lg:tracking-[5px] font-bold bg-linear-to-br from-white via-white to-gray-400 text-transparent bg-clip-text text-center w-full">
-            FIREFIGHTER RESPONSIBILITIES
+            {t("home.services.subtitle")}
           </h1>
           <p className="text-center text-sm sm:text-base md:text-lg text-gray-400 max-w-3xl mx-auto px-4">
-            Aliquam lorem ante dapibus in viverra quis feugiat a tellus
-            phasellus viverra nulla ut metus varius laoreet quisque rutrum.
+            {t("home.services.description")}
           </p>
         </div>
 
@@ -26,13 +27,13 @@ export function OurService() {
         <div className="max-w-250 w-full mx-auto flex sm:flex-row flex-col items-center gap-5 my-10">
           <div className="relative space-y-4 py-6 px-8 rounded-xl sm:w-[55%] w-full bg-[linear-gradient(to_bottom_right,#000000,#000000,#000000,#d2610a)]">
             <p className="font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
-              Operation Force
+              {t("home.services.services.operation.title")}
             </p>
             <p className="text-gray-400 max-w-80 w-full">
-              Aliquam lorem ante dapibus in viverra feugiat phasellus.
+              {t("home.services.services.operation.description")}
             </p>
             <button className="text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
-              LEARN MORE <ChevronRight size={20} />
+              {t("home.services.learnmore")} <ChevronRight size={20} />
             </button>
             <Image
               src="/images/home/gruop.png"
@@ -44,13 +45,13 @@ export function OurService() {
           </div>
           <div className="relative overflow-hidden space-y-4 py-6 px-8 rounded-xl sm:w-[45%] w-full bg-[linear-gradient(to_bottom_right,#000000,#000000,#000000,#d2610a)]">
             <p className="font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
-              Operation Force
+              {t("home.services.services.suppression.title")}
             </p>
             <p className="text-gray-400 max-w-70 w-full">
-              Aliquam lorem ante dapibus in viverra feugiat phasellus.
+              {t("home.services.services.suppression.description")}
             </p>
             <button className="text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
-              LEARN MORE <ChevronRight size={20} />
+              {t("home.services.learnmore")} <ChevronRight size={20} />
             </button>
             <Image
               src="/images/home/redShlang.png"
@@ -73,26 +74,26 @@ export function OurService() {
             />
             <div className="space-y-4 py-6 px-8">
               <p className="font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
-                Operation Force
+                {t("home.services.services.safety.title")}
               </p>
               <p className="text-gray-400 max-w-80 w-full">
-                Aliquam lorem ante dapibus in viverra feugiat phasellus.
+                {t("home.services.services.safety.description")}
               </p>
               <button className="text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
-                LEARN MORE <ChevronRight size={20} />
+                {t("home.services.learnmore")} <ChevronRight size={20} />
               </button>
             </div>
           </div>
           <div className="sm:w-[60%] w-full">
             <div className="relative overflow-hidden space-y-4 py-6 px-8 rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#000000,#000000,#d2610a)]">
               <p className="font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
-                Operation Force
+                {t("home.services.services.monitoring.title")}
               </p>
               <p className="text-gray-400 max-w-70 w-full">
-                Aliquam lorem ante dapibus in viverra feugiat phasellus.
+                {t("home.services.services.monitoring.description")}
               </p>
               <button className="sm:mt-38 mt-0 text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
-                LEARN MORE <ChevronRight size={20} />
+                {t("home.services.learnmore")} <ChevronRight size={20} />
               </button>
               <Image
                 src="/images/home/balon.png"
@@ -104,13 +105,13 @@ export function OurService() {
             </div>
             <div className="py-8 px-8 rounded-xl mt-5 w-full p-5 bg-[linear-gradient(to_top_right,#000000,#000000,#d2610a)] flex sm:flex-row flex-col  gap-5 items-center justify-between">
               <h2 className="sm:text-3xl text-xl font-semibold font-armanai text-white">
-                View more service
+                {t("home.services.viewMoreServices")}
               </h2>
               <Link
                 href="/services"
                 className="shadow-[0px_0px_2px_6px_#a60404ad] bg-red-600 hover:bg-red-700 text-white font-bold sm:py-3 sm:px-8 px-8 py-2 rounded-full transition duration-300 transform hover:scale-105 w-fit"
               >
-                GET STARTED
+                {t("home.services.viewMore")}
               </Link>
             </div>
           </div>
diff --git a/components/pages/home/statistics.tsx b/components/pages/home/statistics.tsx
index c84e7ca..2d2a866 100644
--- a/components/pages/home/statistics.tsx
+++ b/components/pages/home/statistics.tsx
@@ -1,24 +1,27 @@
+import { useTranslations } from "next-intl";
+
 export function Statistics() {
+  const t = useTranslations();
   const stats = [
     {
       number: '25',
       symbol: '+',
-      label: 'Years Experience',
+      label: t("home.statistics.experience"),
     },
     {
       number: '450',
       symbol: '+',
-      label: 'Families Saved',
+      label: t("home.statistics.projectsCompleted"),
     },
     {
       number: '99',
       symbol: '+',
-      label: 'Trained Staff',
+      label: t("home.statistics.trainedSpecialists"),
     },
     {
       number: '93',
       symbol: '%',
-      label: 'Trusted Clients',
+      label: t("home.statistics.trustedClients"),
     },
   ];
 
diff --git a/components/pages/home/testimonal.tsx b/components/pages/home/testimonal.tsx
index 1d937c1..52c96f8 100644
--- a/components/pages/home/testimonal.tsx
+++ b/components/pages/home/testimonal.tsx
@@ -5,36 +5,7 @@ import { Autoplay } from "swiper/modules";
 import Image from "next/image";
 import "swiper/css";
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
-
-const testimonials = [
-  {
-    id: 1,
-    quote:
-      "I've witnessed Fireforce in action multiple times, and they never cease to amaze me with their dedication and professionalism. They are the backbone of our safety and security. Thank you, Fireforce!",
-    name: "JOHN SMITH",
-    role: "Manager",
-    avatar: "/images/home/avatar.jpg",
-    rating: 5,
-  },
-  {
-    id: 2,
-    quote:
-      "The team's response time and expertise saved our property from a devastating fire. Their bravery and commitment to protecting our community is truly remarkable. Highly recommend their services!",
-    name: "SARAH JOHNSON",
-    role: "Business Owner",
-    avatar: "/images/home/avatar.jpg",
-    rating: 5,
-  },
-  {
-    id: 3,
-    quote:
-      "Working alongside Fireforce has been an honor. Their training programs and emergency protocols are second to none. They set the standard for fire safety excellence in our region.",
-    name: "MICHAEL DAVIS",
-    role: "Safety Director",
-    avatar: "/images/home/avatar.jpg",
-    rating: 5,
-  },
-];
+import { useTranslations } from "next-intl";
 
 function StarRating({ rating }: { rating: number }) {
   return (
@@ -53,6 +24,33 @@ function StarRating({ rating }: { rating: number }) {
 }
 
 export function Testimonial() {
+  const t = useTranslations();
+  const testimonials = [
+    {
+      id: 1,
+      quote:t("home.testimonials.clients.john.text"),
+      name: t("home.testimonials.clients.john.name"),
+      role: t("home.testimonials.clients.john.position"),
+      avatar: "/images/home/avatar.jpg",
+      rating: 5,
+    },
+    {
+      id: 2,
+      quote:t("home.testimonials.clients.sarah.text"),
+      name: t("home.testimonials.clients.sarah.name"),
+      role: t("home.testimonials.clients.sarah.position"),
+      avatar: "/images/home/avatar.jpg",
+      rating: 5,
+    },
+    {
+      id: 3,
+      quote:t("home.testimonials.clients.michael.text"),
+      name: t("home.testimonials.clients.michael.name"),
+      role: t("home.testimonials.clients.michael.position"),
+      avatar: "/images/home/avatar.jpg",
+      rating: 5,
+    },
+  ];
   return (
     <section className="w-full bg-[#1a1a1a]">
       <div className="flex flex-col lg:flex-row min-h-100 lg:min-h-125">
@@ -88,7 +86,7 @@ export function Testimonial() {
               <div className="flex items-center gap-2">
                 <DotAnimatsiya />
                 <span className="text-white font-semibold text-sm tracking-wider">
-                  TESTIMONIALS
+                  {t("home.testimonials.title")}
                 </span>
               </div>
             </div>
diff --git a/components/pages/products/productBanner.tsx b/components/pages/products/productBanner.tsx
index 2c0393b..5a2609b 100644
--- a/components/pages/products/productBanner.tsx
+++ b/components/pages/products/productBanner.tsx
@@ -1,6 +1,8 @@
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+import { useTranslations } from "next-intl";
 
 export function ProductBanner() {
+  const t = useTranslations();
   return (
     <section className="relative w-full h-[60vh] min-h-100 overflow-hidden pt-10">
       {/* Background Image */}
@@ -24,17 +26,21 @@ export function ProductBanner() {
       <div className="max-w-250 w-full mx-auto px-4">
         <div className="relative z-20 h-full flex max-lg:flex-col items-start justify-between gap-5 pt-30">
           <div className="spacw-y-4 ">
-            <DotAnimatsiya />
+            <div className="flex items-center gap-2 w-fit">
+              <DotAnimatsiya />
+              <span className="text-sm font-semibold tracking-wide">
+                {t("products.banner.title")}
+              </span>
+            </div>
             <p
               className=" bg-linear-to-br from-white via-white to-black
   text-transparent bg-clip-text text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty"
             >
-              Ignum technology <br /> At The Ready
+              {t("products.banner.subtitle")}
             </p>
           </div>
           <div className="lg:w-[40%] text-gray-300 lg:mt-20 md:mt-10 sm:mt-5 ">
-            It emphasizes that these firefighters are there not just as public
-            servants but as a vital part of the community.
+            {t("products.banner.description")}
           </div>
         </div>
       </div>
diff --git a/components/pages/services/serviceBanner.tsx b/components/pages/services/serviceBanner.tsx
index 2847d73..76aa86b 100644
--- a/components/pages/services/serviceBanner.tsx
+++ b/components/pages/services/serviceBanner.tsx
@@ -1,6 +1,8 @@
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+import { useTranslations } from "next-intl";
 
 export function ServiceBanner() {
+  const t = useTranslations();
   return (
     <section className="relative w-full h-[60vh] min-h-100 overflow-hidden pt-10">
       {/* Background Image */}
@@ -24,17 +26,21 @@ export function ServiceBanner() {
       <div className="max-w-250 w-full mx-auto px-4">
         <div className="relative z-20 h-full flex max-lg:flex-col items-start justify-between gap-5 pt-30">
           <div className="spacw-y-4 ">
-            <DotAnimatsiya />
+            <div className="flex items-center gap-3">
+              <DotAnimatsiya />
+              <span className="text-sm text-white font-semibold tracking-wide">
+                {t("services.banner.title")}
+              </span>
+            </div>
             <p
               className=" bg-linear-to-br from-white via-white to-black
   text-transparent bg-clip-text text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty"
             >
-              GENERAL <br /> QUESTIONS
+              {t("services.banner.subtitle")}
             </p>
           </div>
           <div className="lg:w-[40%] text-gray-300 mt-10 text-lg">
-            Always Ready, Always On Time: Rescuing Lives” represents an
-            unwavering commitment to emergency.
+            {t("services.banner.description")}
           </div>
         </div>
       </div>
diff --git a/components/pages/services/serviceFaq.tsx b/components/pages/services/serviceFaq.tsx
index e1218fe..b6bec07 100644
--- a/components/pages/services/serviceFaq.tsx
+++ b/components/pages/services/serviceFaq.tsx
@@ -1,8 +1,36 @@
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
 import FAQAccordion from "../faq/faqAccardion";
-import { faqItems } from "@/lib/demoData";
+import { useTranslations } from "next-intl";
 
 export function ServiceFaq() {
+  const t = useTranslations();
+    const faqItems = [
+      {
+        id: "faq-1",
+        question: t("faq.question1.question"),
+        answer: t("faq.question1.answer"),
+      },
+      {
+        id: "faq-2",
+        question: t("faq.question2.question"),
+        answer: t("faq.question2.answer"),
+      },
+      {
+        id: "faq-3",
+        question: t("faq.question3.question"),
+        answer: t("faq.question3.answer"),
+      },
+      {
+        id: "faq-4",
+        question: t("faq.question4.question"),
+        answer: t("faq.question4.answer"),
+      },
+      {
+        id: "faq-5",
+        question: t("faq.question5.question"),
+        answer: t("faq.question5.answer"),
+      },
+    ];
   return (
     <div className="bg-[#1e1d1c] py-20 pb-50 space-y-8">
       {/* header */}
diff --git a/lib/demoData.ts b/lib/demoData.ts
index 568e8c8..8ef646a 100644
--- a/lib/demoData.ts
+++ b/lib/demoData.ts
@@ -1,3 +1,4 @@
+
 export const DATA = [
   {
     name: "P-0834405",
diff --git a/messages/en.json b/messages/en.json
index 10aa460..0456144 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -158,28 +158,31 @@
       "subtitle": "General Questions",
       "topic": "ABOUT WORK"
     },
-    "questions": [
-      {
-        "question": "How to choose a fire alarm system?",
-        "answer": "Depending on the area, type and features of the facility, our specialists will offer you the most optimal solution. You can get a free consultation."
-      },
-      {
-        "question": "How long does equipment installation take?",
-        "answer": "Installation time depends on the project scope. Usually, 1-3 days for small facilities, 1-2 weeks for large facilities."
-      },
-      {
-        "question": "How is maintenance carried out?",
-        "answer": "We offer regular maintenance and 24/7 emergency service. Preventive inspections are conducted every six months."
-      },
-      {
-        "question": "What is the warranty period?",
-        "answer": "All our equipment comes with a 2-year warranty and 10-year maintenance guarantee."
-      },
-      {
-        "question": "For which facilities are they suitable?",
-        "answer": "We have suitable solutions for office buildings, warehouses, industrial plants, shopping malls, residential buildings and all types of public places."
-      }
-    ]
+    "question1": {
+      "question": "How to choose a fire alarm system?",
+      "answer": "Depending on the area, type and features of the facility, our specialists will offer you the most optimal solution. You can get a free consultation."
+    },
+    "question2": {
+      "question": "How long does equipment installation take?",
+      "answer": "Installation time depends on the project scope. Usually, 1-3 days for small facilities, 1-2 weeks for large facilities."
+    },
+    "question3": {
+      "question": "How is maintenance carried out?",
+      "answer": "We offer regular maintenance and 24/7 emergency service. Preventive inspections are conducted every six months."
+    },
+    "question4": {
+      "question": "What is the warranty period?",
+      "answer": "All our equipment comes with a 2-year warranty and 10-year maintenance guarantee."
+    },
+    "question5": {
+      "question": "For which facilities are they suitable?",
+      "answer": "We have suitable solutions for office buildings, warehouses, industrial plants, shopping malls, residential buildings and all types of public places."
+    },
+    "ask": {
+      "question": "Do you still have questions?",
+      "subtitle": "Contact us and our specialists will answer you",
+      "btn": "Ask Question"
+    }
   },
   "services": {
     "banner": {
@@ -214,4 +217,4 @@
       "help": "Help"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/messages/ru.json b/messages/ru.json
index eb77691..dfd7f60 100644
--- a/messages/ru.json
+++ b/messages/ru.json
@@ -158,28 +158,31 @@
       "subtitle": "Общие Вопросы",
       "topic": "О РАБОТЕ"
     },
-    "questions": [
-      {
-        "question": "Как выбрать систему пожарной сигнализации?",
-        "answer": "В зависимости от площади, типа и особенностей объекта наши специалисты предложат вам наиболее оптимальное решение. Вы можете получить бесплатную консультацию."
-      },
-      {
-        "question": "Сколько времени занимает установка оборудования?",
-        "answer": "Время установки зависит от объема проекта. Обычно для небольших объектов требуется 1-3 дня, для крупных объектов - 1-2 недели."
-      },
-      {
-        "question": "Как проводится техническое обслуживание?",
-        "answer": "Мы предлагаем регулярное техническое обслуживание и экстренную службу 24/7. Профилактические проверки проводятся каждые шесть месяцев."
-      },
-      {
-        "question": "Какой срок гарантии?",
-        "answer": "На все наше оборудование предоставляется 2-летняя гарантия и 10-летняя гарантия на техническое обслуживание."
-      },
-      {
-        "question": "Для каких объектов подходят?",
-        "answer": "У нас есть подходящие решения для офисных зданий, складов, промышленных предприятий, торговых центров, жилых зданий и всех видов общественных мест."
-      }
-    ]
+    "question1": {
+      "question": "Как выбрать систему пожарной сигнализации?",
+      "answer": "В зависимости от площади, типа и особенностей объекта наши специалисты предложат вам наиболее оптимальное решение. Вы можете получить бесплатную консультацию."
+    },
+    "question2": {
+      "question": "Сколько времени занимает установка оборудования?",
+      "answer": "Время установки зависит от объема проекта. Обычно для небольших объектов требуется 1-3 дня, для крупных объектов - 1-2 недели."
+    },
+    "question3": {
+      "question": "Как проводится техническое обслуживание?",
+      "answer": "Мы предлагаем регулярное техническое обслуживание и экстренную службу 24/7. Профилактические проверки проводятся каждые шесть месяцев."
+    },
+    "question4": {
+      "question": "Какой срок гарантии?",
+      "answer": "На все наше оборудование предоставляется 2-летняя гарантия и 10-летняя гарантия на техническое обслуживание."
+    },
+    "question5": {
+      "question": "Для каких объектов подходят?",
+      "answer": "У нас есть подходящие решения для офисных зданий, складов, промышленных предприятий, торговых центров, жилых зданий и всех видов общественных мест."
+    },
+    "ask": {
+      "question": "Остались вопросы?",
+      "subtitle": "Свяжитесь с нами, и наши специалисты ответят вам",
+      "btn": "Задать вопрос"
+    }
   },
   "services": {
     "banner": {
@@ -214,4 +217,4 @@
       "help": "Помощь"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/messages/uz.json b/messages/uz.json
index bd45f3a..781cac5 100644
--- a/messages/uz.json
+++ b/messages/uz.json
@@ -53,7 +53,7 @@
         }
       },
       "viewMoreServices": "Ko'proq Xizmatlar",
-      "viewMore": "Ko'proq"
+      "viewMore": "Ko'proq ko'rish"
     },
     "testimonials": {
       "title": "Mijozlar Fikrlari",
@@ -80,7 +80,7 @@
     },
     "blog": {
       "title": "Blog & Maqolalar",
-      "subtitle": "SO'NGI BLOG & YANGILIKLAR",
+      "subtitle": "BLOG & SO'NGI YANGILIKLAR",
       "articles": {
         "article1": "YONG'IN HIMOYASI TIZIMLARI: QANDAY ISHLAYDI?",
         "article2": "YANGI TEXNOLOGIYALAR: AQLLI O'CHIRISH TIZIMLARI",
@@ -158,28 +158,31 @@
       "subtitle": "Umumiy Savollar",
       "topic": "ISH HAQIDA"
     },
-    "questions": [
-      {
-        "question": "Yong'in signalizatsiya tizimini qanday tanlash kerak?",
-        "answer": "Ob'ektning maydoni, turi va xususiyatlariga qarab mutaxassislarimiz sizga eng optimal yechimni taklif qiladilar. Bepul konsultatsiya olishingiz mumkin."
-      },
-      {
-        "question": "Uskunalarni o'rnatish qancha vaqt oladi?",
-        "answer": "O'rnatish vaqti loyiha hajmiga bog'liq. Odatda, kichik ob'ektlar uchun 1-3 kun, yirik ob'ektlar uchun 1-2 hafta kerak bo'ladi."
-      },
-      {
-        "question": "Texnik xizmat ko'rsatish qanday amalga oshiriladi?",
-        "answer": "Biz muntazam texnik xizmat ko'rsatish va 24/7 favqulodda xizmatni taklif etamiz. Har olti oyda bir marta profilaktik tekshiruvlar o'tkaziladi."
-      },
-      {
-        "question": "Kafolatiy muddati qancha?",
-        "answer": "Barcha uskunalarimiz uchun 2 yillik kafolat va 10 yillik texnik xizmat ko'rsatish kafolati beriladi."
-      },
-      {
-        "question": "Qanday ob'ektlar uchun mos?",
-        "answer": "Ofis binalari, omborxonalar, sanoat korxonalari, savdo markazlari, turar-joy binolari va barcha turdagi jamoat joylari uchun mos yechimlarimiz mavjud."
-      }
-    ]
+    "question1": {
+      "question": "Yong'in signalizatsiya tizimini qanday tanlash kerak?",
+      "answer": "Ob'ektning maydoni, turi va xususiyatlariga qarab mutaxassislarimiz sizga eng optimal yechimni taklif qiladilar. Bepul konsultatsiya olishingiz mumkin."
+    },
+    "question2": {
+      "question": "Uskunalarni o'rnatish qancha vaqt oladi?",
+      "answer": "O'rnatish vaqti loyiha hajmiga bog'liq. Odatda, kichik ob'ektlar uchun 1-3 kun, yirik ob'ektlar uchun 1-2 hafta kerak bo'ladi."
+    },
+    "question3": {
+      "question": "Texnik xizmat ko'rsatish qanday amalga oshiriladi?",
+      "answer": "Biz muntazam texnik xizmat ko'rsatish va 24/7 favqulodda xizmatni taklif etamiz. Har olti oyda bir marta profilaktik tekshiruvlar o'tkaziladi."
+    },
+    "question4": {
+      "question": "Kafolatiy muddati qancha?",
+      "answer": "Barcha uskunalarimiz uchun 2 yillik kafolat va 10 yillik texnik xizmat ko'rsatish kafolati beriladi."
+    },
+    "question5": {
+      "question": "Qanday ob'ektlar uchun mos?",
+      "answer": "Ofis binalari, omborxonalar, sanoat korxonalari, savdo markazlari, turar-joy binolari va barcha turdagi jamoat joylari uchun mos yechimlarimiz mavjud."
+    },
+    "ask":{
+      "question":"Hali ham savolingiz bormi?",
+      "subtitle":"Bizga bo'glaning va bizni hodilarimiz sizga javob berishadi",
+      "btn":"Savollingizni yo'llang"
+    }
   },
   "services": {
     "banner": {
@@ -214,4 +217,4 @@
       "help": "Yordam"
     }
   }
-}
\ No newline at end of file
+}