diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9850b31..6f7f202 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -9,6 +9,7 @@ export const metadata: Metadata = {
   },
   description: "Discover our premium collection of natural oils for hair and skin care. Handmade with love.",
   robots: "index, follow",
+  viewport: "width=device-width, initial-scale=1, maximum-scale=5",
   openGraph: {
     title: "ManoonOils - Premium Natural Oils for Hair & Skin",
     description: "Discover our premium collection of natural oils for hair and skin care.",
diff --git a/src/components/home/BeforeAfterGallery.tsx b/src/components/home/BeforeAfterGallery.tsx
index 5fe82c0..1eadc11 100644
--- a/src/components/home/BeforeAfterGallery.tsx
+++ b/src/components/home/BeforeAfterGallery.tsx
@@ -104,7 +104,7 @@ function BeforeAfterSlider({ result }: { result: typeof results[0] }) {
         <div className="flex items-center gap-1.5">
           <div className="flex">
             {[1, 2, 3, 4, 5].map((star) => (
-              <svg key={star} className="w-4 h-4 fill-[#FFD700] text-[#FFD700]" viewBox="0 0 24 24">
+              <svg key={star} className="w-4 h-4 fill-yellow-400 text-yellow-400" viewBox="0 0 24 24">
                 <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
               </svg>
             ))}
diff --git a/src/components/home/HeroVideo.tsx b/src/components/home/HeroVideo.tsx
index aec6938..73627db 100644
--- a/src/components/home/HeroVideo.tsx
+++ b/src/components/home/HeroVideo.tsx
@@ -59,7 +59,7 @@ export default function HeroVideo() {
           >
             <div className="flex">
               {[1, 2, 3, 4, 5].map((star) => (
-                <svg key={star} className="w-4 h-4 fill-[#FFD700] text-[#FFD700]" viewBox="0 0 24 24">
+                <svg key={star} className="w-4 h-4 fill-yellow-400 text-yellow-400" viewBox="0 0 24 24">
                   <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
                 </svg>
               ))}
diff --git a/src/components/home/TrustBadges.tsx b/src/components/home/TrustBadges.tsx
index b700ec6..e6ff23b 100644
--- a/src/components/home/TrustBadges.tsx
+++ b/src/components/home/TrustBadges.tsx
@@ -5,7 +5,7 @@ import { motion } from "framer-motion";
 const badges = [
   {
     icon: (
-      <svg className="w-6 h-6" viewBox="0 0 24 24" fill="#FFD700">
+      <svg className="w-6 h-6 text-yellow-400" viewBox="0 0 24 24" fill="currentColor">
         <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
       </svg>
     ),
diff --git a/src/components/product/ProductDetail.tsx b/src/components/product/ProductDetail.tsx
index 4748d15..1085db5 100644
--- a/src/components/product/ProductDetail.tsx
+++ b/src/components/product/ProductDetail.tsx
@@ -76,7 +76,7 @@ function StarRating({ rating = 5, count = 0 }: { rating?: number; count?: number
         {[...Array(5)].map((_, i) => (
           <Star
             key={i}
-            className={`w-4 h-4 ${i < rating ? 'fill-[#FFD700] text-[#FFD700]' : 'text-[#e5e5e5]'}`}
+            className={`w-4 h-4 ${i < rating ? 'fill-yellow-400 text-yellow-400' : 'text-gray-300'}`}
           />
         ))}
       </div>
diff --git a/src/components/product/ProductReviews.tsx b/src/components/product/ProductReviews.tsx
index 74f6aac..4e098f2 100644
--- a/src/components/product/ProductReviews.tsx
+++ b/src/components/product/ProductReviews.tsx
@@ -65,7 +65,7 @@ function ReviewCard({ review }: { review: typeof reviews[0] }) {
     <div className="flex-shrink-0 w-80 bg-white p-6 rounded-2xl shadow-sm border border-[#f0ede8] mx-3">
       <div className="flex items-center gap-1 mb-3">
         {[1, 2, 3, 4, 5].map((star) => (
-          <svg key={star} className="w-4 h-4 fill-[#FFD700] text-[#FFD700]" viewBox="0 0 24 24">
+          <svg key={star} className="w-4 h-4 fill-yellow-400 text-yellow-400" viewBox="0 0 24 24">
             <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
           </svg>
         ))}
@@ -113,7 +113,7 @@ export default function ProductReviews({ locale = "SR", productName = "this prod
             <div>
               <div className="flex gap-0.5">
                 {[1, 2, 3, 4, 5].map((star) => (
-                  <svg key={star} className="w-5 h-5 fill-[#FFD700] text-[#FFD700]" viewBox="0 0 24 24">
+                  <svg key={star} className="w-5 h-5 fill-yellow-400 text-yellow-400" viewBox="0 0 24 24">
                     <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
                   </svg>
                 ))}