diff --git a/app/detail/page.tsx b/app/detail/page.tsx
new file mode 100644
index 0000000..c1f0e61
--- /dev/null
+++ b/app/detail/page.tsx
@@ -0,0 +1,14 @@
+import { ContactForm } from "@/components/ContactForm";
+import DetailInfo from "@/components/detailPage/detailInfo";
+import React from "react";
+
+export default function Page() {
+  return (
+    <div>
+      <DetailInfo />
+      <section id="contact">
+        <ContactForm />
+      </section>
+    </div>
+  );
+}
diff --git a/components/detailPage/detailInfo.tsx b/components/detailPage/detailInfo.tsx
new file mode 100644
index 0000000..5e5a08d
--- /dev/null
+++ b/components/detailPage/detailInfo.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { X } from "lucide-react";
+import type { Product } from "@/lib/products";
+import { useLanguage } from "@/context/language-context";
+import Link from "next/link";
+import { useProduct, useProductStore } from "@/lib/productZustand";
+import Image from "next/image";
+
+export default function DetailInfo() {
+  const { t, language } = useLanguage();
+  const languageIndex = language === "uz" ? true : false;
+  const product = useProduct((state) => state.product);
+  if (product === null) return null;
+
+  return (
+    <div className="bg-white">
+      <div className="max-w-[1200px] mx-auto">
+        {/* Header */}
+        <div className="sticky z-10 top-0 sm:p-6 p-2 flex justify-center items-center">
+          <h2 className="md:text-2xl text-lg font-bold text-gray-900">
+            {languageIndex ? product.name_uz : product.name_ru}
+          </h2>
+        </div>
+
+        {/* Content */}
+        <div className="sm:p-6 p-2">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+            {/* Image */}
+            <div className="relative max-sm:w-full max-md:h-50 w-150 h-96 mx-auto rounded-lg overflow-hidden">
+              <Image
+                src={`https://admin.promtechno.uz${product.image}`}
+                alt="image"
+                fill
+                className="object-contain max-md:h-50"
+              />
+            </div>
+
+            <div className="space-y-6 pt-10">
+              {/* Description */}
+              <div className="text-gray-800 max-sm:text-[14px]">
+                {languageIndex
+                  ? product.description_uz
+                  : product.description_ru}
+              </div>
+              {/* CTA Buttons */}
+              <div className="space-y-3">
+                <Link href={"#contact"}>
+                  <motion.button
+                    whileHover={{ scale: 1.05 }}
+                    whileTap={{ scale: 0.95 }}
+                    className="w-full px-6 py-3 bg-primary/80 text-white rounded-lg font-semibold hover:bg-primary transition-colors"
+                  >
+                    {t.contact.send}
+                  </motion.button>
+                </Link>
+              </div>
+            </div>
+          </div>
+          {/* Specifications */}
+          <div>
+            <div className="mb-8">
+              <h3 className="text-lg font-semibold text-gray-900 mb-4">
+                {t.features}
+              </h3>
+              <div className="space-y-3 flex items-start justify-start gap-4 flex-wrap ">
+                {product.features.map((spec, idx) => (
+                  <div
+                    key={idx}
+                    className="flex flex-col justify-between py-2 border border-gray-100 rounded-lg p-2"
+                  >
+                    <span className="text-gray-600">
+                      {languageIndex ? spec.key_uz : spec.key_ru}:
+                    </span>
+                    <span className="text-gray-900">
+                      {languageIndex ? spec.value_uz : spec.value_ru}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/loading.tsx b/components/loading.tsx
new file mode 100644
index 0000000..26e3f50
--- /dev/null
+++ b/components/loading.tsx
@@ -0,0 +1,16 @@
+import { useLanguage } from "@/context/language-context";
+
+export default function Loading() {
+  const { language } = useLanguage();
+  const languageIndex = language === "uz" ? true : false;
+
+  return (
+    <div className="h-52 w-52 rounded-xl bg-linear-to-br from-primary via-primary/60 to-gray-300 backdrop-blur-md flex flex-col items-center justify-center gap-3">
+      <div className="w-8 h-8 border-4 border-gray-300 border-t-white rounded-full animate-spin" />
+
+      <span className="text-white text-lg text-center">
+        {languageIndex ? "Yuklanmoqda..." : "Загрузка..."}
+      </span>
+    </div>
+  );
+}
diff --git a/components/productSection/ProductCard.tsx b/components/productSection/ProductCard.tsx
index c662ff0..4be0792 100644
--- a/components/productSection/ProductCard.tsx
+++ b/components/productSection/ProductCard.tsx
@@ -5,66 +5,77 @@ import { motion } from "framer-motion";
 import { ExternalLink } from "lucide-react";
 import { type Product } from "@/lib/products";
 import { useLanguage } from "@/context/language-context";
+import Link from "next/link";
+import { useProduct, useProductStore } from "@/lib/productZustand";
 
 interface ProductCardProps {
   product: Product;
-  onViewDetails: (slug: number) => void;
 }
 
-export function ProductCard({ product, onViewDetails }: ProductCardProps) {
+export function ProductCard({ product }: ProductCardProps) {
   const { t, language } = useLanguage();
   const languageIndex = language === "uz" ? true : false;
+  const setProductName = useProductStore((state) => state.setProductName);
+  const setProducts = useProduct((state) => state.setProducts);
   return (
-    <motion.div
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.3 }}
-      className="group relative h-full flex flex-col bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-2xl transition-all duration-300 border border-gray-100"
+    <Link
+      href={`/detail?${languageIndex ? product.name_uz : product.name_ru}`}
+      onClick={() => {
+        setProductName(languageIndex ? product.name_uz : product.name_ru);
+        setProducts(product);
+      }}
     >
-      {/* Image Container - Fixed Height */}
-      <div className="relative w-full h-64 overflow-hidden bg-linear-to-br from-gray-50 to-gray-100">
-        <motion.div
-          whileHover={{ scale: 1.05 }}
-          transition={{ duration: 0.4 }}
-          className="w-full h-full"
-        >
-          <img
-            src={`https://admin.promtechno.uz${product.image}`}
-            alt={languageIndex?product.name_uz:product.name_ru}
-            className="w-full h-full object-cover"
-          />
-        </motion.div>
-        
-        {/* Gradient Overlay */}
-        <div className="absolute inset-0 bg-linear-to-t from-black/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-      </div>
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+        className="group relative h-full flex flex-col bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-2xl transition-all duration-300 border border-gray-100"
+      >
+        {/* Image Container - Fixed Height */}
+        <div className="relative w-full h-64 overflow-hidden bg-linear-to-br from-gray-50 to-gray-100">
+          <motion.div
+            whileHover={{ scale: 1.05 }}
+            transition={{ duration: 0.4 }}
+            className="w-full h-full relative"
+          >
+            <Image
+              src={`https://admin.promtechno.uz${product.image}`}
+              alt={languageIndex ? product.name_uz : product.name_ru}
+              fill
+              className="w-full h-full object-cover"
+            />
+          </motion.div>
 
-      {/* Content Container - Flex Grow */}
-      <div className="flex flex-col grow p-6">
-        {/* Product Name */}
-        <h3 className="text-xl font-bold text-gray-900 mb-3 line-clamp-2 group-hover:text-primary transition-colors duration-300">
-          {languageIndex?product.name_uz:product.name_ru}
-        </h3>
+          {/* Gradient Overlay */}
+          <div className="absolute inset-0 bg-linear-to-t from-black/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+        </div>
 
-        {/* Short Description - Fixed Height with Line Clamp */}
-        <p className="text-gray-600 text-sm leading-relaxed mb-4 line-clamp-3 grow">
-          {languageIndex?product.name_uz:product.name_ru}
-        </p>
+        {/* Content Container - Flex Grow */}
+        <div className="flex flex-col grow p-6">
+          {/* Product Name */}
+          <h3 className="text-xl font-bold text-gray-900 mb-3 line-clamp-2 group-hover:text-primary transition-colors duration-300">
+            {languageIndex ? product.name_uz : product.name_ru}
+          </h3>
 
-        {/* CTA Button - Always at Bottom */}
-        <motion.button
-          whileHover={{ scale: 1.02 }}
-          whileTap={{ scale: 0.98 }}
-          onClick={() => onViewDetails(product.id)}
-          className="w-full flex items-center justify-center gap-2 px-6 py-3 bg-primary text-white rounded-xl font-semibold shadow-lg shadow-blue-500/30 hover:shadow-xl hover:shadow-primary/40 transition-all duration-300 group/button"
-        >
-          <span>{t.details}</span>
-          <ExternalLink className="w-4 h-4 group-hover/button:translate-x-1 transition-transform duration-300" />
-        </motion.button>
-      </div>
+          {/* Short Description - Fixed Height with Line Clamp */}
+          <p className="text-gray-600 text-sm leading-relaxed mb-4 line-clamp-3 grow">
+            {languageIndex ? product.name_uz : product.name_ru}
+          </p>
 
-      {/* Decorative Corner */}
-      <div className="absolute top-0 right-0 w-20 h-20 bg-linear-to-br from-blue-500/10 to-transparent rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-    </motion.div>
+          {/* CTA Button - Always at Bottom */}
+          <motion.button
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+            className="w-full flex items-center justify-center gap-2 px-6 py-3 bg-primary text-white rounded-xl font-semibold shadow-lg shadow-blue-500/30 hover:shadow-xl hover:shadow-primary/40 transition-all duration-300 group/button"
+          >
+            <span>{t.details}</span>
+            <ExternalLink className="w-4 h-4 group-hover/button:translate-x-1 transition-transform duration-300" />
+          </motion.button>
+        </div>
+
+        {/* Decorative Corner */}
+        <div className="absolute top-0 right-0 w-20 h-20 bg-linear-to-br from-blue-500/10 to-transparent rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+      </motion.div>
+    </Link>
   );
 }
diff --git a/components/productSection/ProductModal.tsx b/components/productSection/ProductModal.tsx
deleted file mode 100644
index b098932..0000000
--- a/components/productSection/ProductModal.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-"use client";
-
-import { motion, AnimatePresence } from "framer-motion";
-import { X } from "lucide-react";
-import type { Product } from "@/lib/products";
-import { useLanguage } from "@/context/language-context";
-import Link from "next/link";
-import { useProductStore } from "@/lib/productZustand";
-import Image from "next/image";
-import { usePathname } from "next/navigation";
-
-interface ProductModalProps {
-  product: Product;
-  onClose: () => void;
-}
-
-// for github firma repo
-
-export function ProductModal({ product, onClose }: ProductModalProps) {
-  const { t, language } = useLanguage();
-  const setProductName = useProductStore((state) => state.setProductName);
-  const languageIndex = language === "uz" ? true : false;
-  const pathName = usePathname();
-  const isPathName = pathName === "/product";
-
-
-  return (
-    <AnimatePresence>
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        exit={{ opacity: 0 }}
-        onClick={onClose}
-        className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
-      >
-        <motion.div
-          initial={{ scale: 0.95, opacity: 0 }}
-          animate={{ scale: 1, opacity: 1 }}
-          exit={{ scale: 0.95, opacity: 0 }}
-          onClick={(e) => e.stopPropagation()}
-          className="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto"
-        >
-          {/* Header */}
-          <div className="sticky z-10 top-0 bg-white border-b border-gray-200 sm:p-6 p-2 flex justify-between items-center">
-            <h2 className="md:text-2xl text-lg font-bold text-gray-900">
-              {languageIndex ? product.name_uz : product.name_ru}
-            </h2>
-            <motion.button
-              whileHover={{ scale: 1.1 }}
-              whileTap={{ scale: 0.95 }}
-              onClick={onClose}
-              className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
-            >
-              <X size={24} />
-            </motion.button>
-          </div>
-
-          {/* Content */}
-          <div className="sm:p-6 p-2">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
-              {/* Image */}
-              <div className="relative max-sm:w-full max-md:h-50">
-                <Image
-                  src={`https://admin.promtechno.uz${product.image}`}
-                  alt="image"
-                  fill
-                  className="object-contain max-md:h-50"
-                />
-              </div>
-
-              {/* Specifications */}
-              <div>
-                <div className="mb-8">
-                  <h3 className="text-lg font-semibold text-gray-900 mb-4">
-                    {t.features}
-                  </h3>
-                  <div className="space-y-3">
-                    {product.features.map((spec, idx) => (
-                      <div
-                        key={idx}
-                        className="flex max-sm:flex-col justify-between py-2 border-b border-gray-100"
-                      >
-                        <span className="text-gray-600">
-                          {languageIndex ? spec.key_uz : spec.key_ru}:
-                        </span>
-                        <span className="text-gray-600">
-                          {languageIndex ? spec.value_uz : spec.value_ru}
-                        </span>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-
-                {/* CTA Buttons */}
-                <div className="space-y-3">
-                  <Link href={isPathName ? "/#contact" : "#contact"} >
-                    <motion.button
-                      onClick={() => {
-                        onClose();
-                        setProductName(
-                          languageIndex ? product.name_uz : product.name_ru
-                        );
-                      }}
-                      whileHover={{ scale: 1.05 }}
-                      whileTap={{ scale: 0.95 }}
-                      className="w-full px-6 py-3 bg-primary/80 text-white rounded-lg font-semibold hover:bg-primary transition-colors"
-                    >
-                      {t.contact.send}
-                    </motion.button>
-                  </Link>
-                </div>
-              </div>
-            </div>
-            <div className="text-gray-800 max-sm:text-[14px]">
-              {languageIndex ? product.description_uz : product.description_ru}
-            </div>
-          </div>
-        </motion.div>
-      </motion.div>
-    </AnimatePresence>
-  );
-}
diff --git a/components/productSection/ProductsGrid.tsx b/components/productSection/ProductsGrid.tsx
index 1ca5376..f4b0403 100644
--- a/components/productSection/ProductsGrid.tsx
+++ b/components/productSection/ProductsGrid.tsx
@@ -8,37 +8,32 @@ import { useLanguage } from "@/context/language-context";
 import Link from "next/link";
 import { ChevronsRight } from "lucide-react";
 import { ProductCard } from "./ProductCard";
-import { ProductModal } from "./ProductModal";
 import axios from "axios";
 import EmptyState from "../productsPage/emptyData";
+import Loading from "../loading";
 
 // hello everyone
 
 export function ProductsGrid() {
   const { t } = useLanguage();
-  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
   const [allProducts, setAllProducts] = useState<any>([]);
+  const [loading, setLoading] = useState<boolean>(false);
 
   useEffect(() => {
     async function getData() {
+      setLoading(true);
       await axios
         .get("https://admin.promtechno.uz/api/products/")
         .then((res) => {
           console.log("all data main page: ", res?.data);
           const allData = res?.data || [];
           setAllProducts(allData.slice(0, 3));
+          setLoading(false);
         });
     }
     getData();
   }, []);
 
-  const handleViewDetails = (slug: number) => {
-    const product = allProducts.find((p: any) => p.id === slug);
-    if (product) {
-      setSelectedProduct(product);
-    }
-  };
-
   return (
     <>
       <section id="products" className="relative py-20">
@@ -66,8 +61,11 @@ export function ProductsGrid() {
             <div className="w-20 h-1 bg-primary mx-auto rounded-full" />
           </motion.div>
 
+          {loading && <div className="w-full flex items-center justify-center">
+            <Loading /></div>}
+
           {/* Product Grid */}
-          {allProducts && allProducts.length > 0 ? (
+          { loading|| allProducts && allProducts.length > 0 ? (
             <motion.div
               initial="hidden"
               whileInView="visible"
@@ -78,7 +76,6 @@ export function ProductsGrid() {
                 <motion.div key={product.id}>
                   <ProductCard
                     product={product}
-                    onViewDetails={handleViewDetails}
                   />
                 </motion.div>
               ))}
@@ -96,14 +93,6 @@ export function ProductsGrid() {
           </Link>
         </div>
       </section>
-
-      {/* Product Modalll */}
-      {selectedProduct && (
-        <ProductModal
-          product={selectedProduct}
-          onClose={() => setSelectedProduct(null)}
-        />
-      )}
     </>
   );
 }
diff --git a/lib/productZustand.ts b/lib/productZustand.ts
index 8102ccd..bc9cc79 100644
--- a/lib/productZustand.ts
+++ b/lib/productZustand.ts
@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { devtools, persist } from "zustand/middleware";
+import type { Product } from "@/lib/products";
 
 interface ProductStore {
   productName: string;
@@ -21,3 +22,22 @@ export const useProductStore = create<ProductStore>()(
     )
   )
 );
+
+interface ProductDetail {
+  product: Product | null;
+  setProducts: (product: Product) => void;
+}
+
+export const useProduct = create<ProductDetail>()(
+  devtools(
+    persist(
+      (set) => ({
+        product: null,
+        setProducts: (product: Product) => set({ product }),
+      }),
+      {
+        name: "product-detail-storage",
+      }
+    )
+  )
+);