diff --git a/ipi-survey-platform/index.html b/ipi-survey-platform/index.html
index ca55f48..3610742 100644
--- a/ipi-survey-platform/index.html
+++ b/ipi-survey-platform/index.html
@@ -4,15 +4,6 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="Content-Security-Policy" content="
-      default-src 'self';
-      style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
-      font-src 'self' https://fonts.gstatic.com data:;
-      script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.google-analytics.com https://ssl.google-analytics.com;
-      connect-src 'self' https://*.google-analytics.com https://*.analytics.google.com;
-      img-src 'self' data: https: https://www.google-analytics.com;
-      frame-src 'self' https://www.google.com;
-    " />
     <title>IIP Survey Platform</title>
     <style>
       html {
diff --git a/ipi-survey-platform/src/pages/Admin/Validations.jsx b/ipi-survey-platform/src/pages/Admin/Validations.jsx
index 30e947a..a7f38d9 100644
--- a/ipi-survey-platform/src/pages/Admin/Validations.jsx
+++ b/ipi-survey-platform/src/pages/Admin/Validations.jsx
@@ -49,8 +49,7 @@ const Badge = ({ children, status }) => {
   const variant = STATUS_VARIANTS[status] || { background: '#F2F4F7', text: '#475467', border: '#EAECF0' };
   return (
     <span
-      className="inline-flex h-6 min-w-[67px] items-center justify-center rounded px-2 text-xs font-medium"
-      style={{ background: variant.background, color: variant.text, border: `1px solid ${variant.border}` }}
+      className={`inline-flex h-6 min-w-[67px] items-center justify-center rounded px-2 text-xs font-medium border ${variant.background} ${variant.text} ${variant.border}`}
     >
       {children}
     </span>
@@ -604,13 +603,22 @@ React.useEffect(() => {
       return (
         <div
           key={key}
-          className="inline-flex items-center gap-[6px] rounded-[8px] px-2 py-[2px]"
-          style={{ background: v.background }}
+          className={`inline-flex items-center gap-[6px] rounded-[8px] px-2 py-[2px] ${
+            v.background === '#F9F7ED' ? 'bg-amber-50' : 
+            v.background === '#F3FAF4' ? 'bg-green-50' :
+            v.background === '#FEF2F2' ? 'bg-red-50' : 'bg-blue-50'
+          }`}
         >
-          <span className="font-medium text-[13px]" style={{ color: v.label }}>
+          <span className={`font-medium text-[13px] ${
+            v.label === '#7C5E24' ? 'text-amber-800' :
+            v.label === '#2F663C' ? 'text-green-800' :
+            v.label === '#B52520' ? 'text-red-700' : 'text-blue-600'
+          }`}>
             {key.charAt(0).toUpperCase() + key.slice(1)}:
           </span>
-          <span className="font-semibold text-[13px]" style={{ color: v.value }}>
+          <span className={`font-semibold text-[13px] ${
+            v.value === '#232528' ? 'text-gray-900' : 'text-gray-600'
+          }`}>
             {val}
           </span>
         </div>