diff --git a/pipeline/scalability.js b/pipeline/scalability.js
index 499f4ab..3f2261f 100644
--- a/pipeline/scalability.js
+++ b/pipeline/scalability.js
@@ -59,11 +59,39 @@ const helmetMiddleware = helmet({
   contentSecurityPolicy: {
     directives: {
       defaultSrc: ["'self'"],
-      imgSrc:     ["'self'", 'data:', 'https://res.cloudinary.com'],
-      scriptSrc:  ["'self'", "'unsafe-inline'"],
-      styleSrc:   ["'self'", "'unsafe-inline'"],
-      connectSrc: ["'self'", 'https://api.openrouter.ai'],
-      frameSrc:   ["'none'"],
+      imgSrc: [
+        "'self'",
+        'data:',
+        'https://res.cloudinary.com',
+        'https://api.dicebear.com', // default avatar generator used throughout the UI
+      ],
+      // 'script-src-elem' falls back to 'script-src' when unset, per the browser
+      // warning — setting both explicitly avoids relying on that fallback.
+      scriptSrc: [
+        "'self'",
+        "'unsafe-inline'",
+        'https://accounts.google.com',     // Google Identity Services (Google login button)
+        'https://checkout.razorpay.com',   // Razorpay checkout.js, loaded dynamically at payment time
+      ],
+      scriptSrcElem: [
+        "'self'",
+        "'unsafe-inline'",
+        'https://accounts.google.com',
+        'https://checkout.razorpay.com',
+      ],
+      styleSrc: ["'self'", "'unsafe-inline'"],
+      connectSrc: [
+        "'self'",
+        'https://api.openrouter.ai',
+        'https://api.razorpay.com',        // Razorpay order/payment verification calls
+        'https://lumberjack.razorpay.com', // Razorpay SDK's own analytics beacon
+      ],
+      // Google's sign-in flow and Razorpay's payment modal both render in an iframe.
+      frameSrc: [
+        'https://accounts.google.com',
+        'https://api.razorpay.com',
+        'https://checkout.razorpay.com',
+      ],
     },
   },
   crossOriginEmbedderPolicy: false,
diff --git a/ui/.env.production b/ui/.env.production
index e3a4c0b..0fd6ff5 100644
--- a/ui/.env.production
+++ b/ui/.env.production
@@ -1,3 +1,13 @@
+# Loaded automatically by Create React App during `npm run build`
+# (react-scripts build always runs in production mode). These get baked
+# into the compiled JS bundle at build time — CRA env vars are NOT read
+# at runtime, so this file must be present (and correct) before building.
+#
+# All three of these are meant to be public/client-exposed:
+#  - REACT_APP_BASE_URL         → your API's public URL, not a secret
+#  - REACT_APP_GOOGLE_CLIENT_ID → Google OAuth client IDs are public by design
+#  - REACT_APP_RAZORPAY_KEY     → this is the publishable "key_id" (rzp_test_/rzp_live_),
+#                                  not the private "key_secret" — safe to ship client-side
 REACT_APP_BASE_URL=https://studynotion-1-tgdh.onrender.com/api/v1
 REACT_APP_GOOGLE_CLIENT_ID=134887287128-s3pbcfbsaq88dulema5h910uaak0sh6f.apps.googleusercontent.com
-REACT_APP_RAZORPAY_KEY=rzp_test_bO9Ppf14nv2wW3
\ No newline at end of file
+REACT_APP_RAZORPAY_KEY=rzp_test_bO9Ppf14nv2wW3