diff --git a/components/detailPage/detailInfo.tsx b/components/detailPage/detailInfo.tsx
index 9c6c8ab..417f385 100644
--- a/components/detailPage/detailInfo.tsx
+++ b/components/detailPage/detailInfo.tsx
@@ -23,7 +23,7 @@ export default function DetailInfo() {
     <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">
+        <div className="sticky z-10 top-0 md: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>
@@ -31,34 +31,35 @@ export default function DetailInfo() {
 
         {/* Content */}
         <div className="sm:p-6 p-2">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg: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">
+            <div className="relative w-full h-64 sm:h-80 lg:h-96 rounded-lg overflow-hidden bg-gray-50">
               <Image
                 src={`https://admin.promtechno.uz${product.image}`}
-                alt="image"
+                alt={languageIndex ? product.name_uz : product.name_ru}
                 fill
-                className="object-contain max-md:h-50"
+                sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 600px"
+                className="object-contain p-4"
+                priority
               />
             </div>
 
-            <div className="space-y-6 pt-10">
+            {/* Content */}
+            <div className="space-y-4 lg:space-y-6 lg:py-4">
               {/* Description */}
-              <div className="text-gray-800 max-sm:text-[14px]">
+              <div className="text-gray-800 text-sm sm:text-base leading-relaxed">
                 {languageIndex
                   ? product.description_uz
                   : product.description_ru}
               </div>
+
               {/* CTA Buttons */}
-              <div className="space-y-3">
-                <Link
-                  href={"#contact"}
-                  onClick={() => handleScroll("#contact")}
-                >
+              <div className="pt-2">
+                <Link href="#contact" onClick={() => handleScroll("#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"
+                    whileHover={{ scale: 1.02 }}
+                    whileTap={{ scale: 0.98 }}
+                    className="w-full sm:w-auto px-8 py-3 bg-primary/80 text-white rounded-lg font-semibold hover:bg-primary transition-all duration-300 shadow-md hover:shadow-lg"
                   >
                     {t.contact.send}
                   </motion.button>