diff --git a/frontend/css/contribute.css b/frontend/css/contribute.css
index e16d277..1336139 100644
--- a/frontend/css/contribute.css
+++ b/frontend/css/contribute.css
@@ -18,11 +18,20 @@ body {
   --light-parchment: #fff8e7;
   --charcoal-dark: #2c2c2c;
   --text-secondary: #5a5a5a;
-
+  --code-bg: #f8f9fa;
+  --code-border: #e0e0e0;
+  --code-text: #2c2c2c;
+  --code-comment: #6a737d;
   --shadow-main: 0 8px 32px rgba(0, 0, 0, 0.12);
   --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.18);
 }
 
+body.dark-mode {
+  --code-bg: #1e1e1e;      /* Soft dark gray background */
+  --code-border: #333333; /* Subtle border */
+  --code-text: #e6e6e6;    /* Light readable text */
+  --code-comment: #9ca3af; /* Muted gray for comments */
+}
 
 body {
   font-family: "Crimson Text", Georgia, serif;
@@ -34,9 +43,6 @@ body {
   color: var(--charcoal-dark);
 }
 
-
-
-
 main {
   margin-top: 0;
   padding-top: 0;
@@ -640,22 +646,8 @@ body.dark-mode li {
   color: #cccccc;
 }
 
-/* Code blocks remain readable */
-body.dark-mode .code-block,
-body.dark-mode pre {
-  background-color: #ffffff;
-  color: #333333;
-  border-color: #e0e0e0;
-}
-
-body.dark-mode code {
-  background-color: #ffffff;
-  color: #333333;
-}
-
-/* Best Practices Section Proper Styling */
-
-.practices-section {
+/* Best practices section stays light */
+body.dark-mode .practices-container {
   background-color: #ffffff;
 }
 
diff --git a/frontend/css/contributors.css b/frontend/css/contributors.css
index ca01f5c..d8101ab 100644
--- a/frontend/css/contributors.css
+++ b/frontend/css/contributors.css
@@ -118,24 +118,6 @@ body.dark-mode .contributors-section p {
   flex: 0 0 auto;
 }
 
-.contributor-github {
-  width: 42px;
-  height: 42px;
-  border-radius: 999px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  color: var(--deep-navy);
-  background: rgb(255 255 255 / 90%);
-  border: 1px solid rgb(212 175 55 / 24%);
-  transition: transform 0.2s ease, background 0.2s ease;
-}
-
-.contributor-github:hover {
-  transform: scale(1.06);
-  background: rgb(255 248 231 / 95%);
-}
 .contributor-card {
   background: linear-gradient(
     180deg,
@@ -149,8 +131,10 @@ body.dark-mode .contributors-section p {
     inset 0 1px 0 rgb(255 255 255 / 60%);
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 1.5rem;
   max-width: 360px;
+  min-height: 140px;
   margin: 0 auto;
   position: relative;
 
@@ -180,9 +164,10 @@ body.dark-mode .contributors-section p {
 
 .contributor-main {
   flex: 1;
+  max-width: 100px;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.6rem;
 }
 
 .contributor-name {
@@ -240,29 +225,10 @@ body.dark-mode .contributors-section p {
 }
 
 .contributor-actions {
-  
   flex-shrink: 0;
-}
-
-.contributor-github {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
-  color: #1a2433;
-  background: #f9f9f9;
-  border: 1.5px solid #d4af37;
-  box-shadow: 0 2px 6px rgb(0 0 0 / 0.07);
-  transition: all 0.25s ease;
-  cursor: pointer;
-}
-
-.contributor-github:hover {
-  background: #fff8dc;
-  transform: scale(1.12);
-  box-shadow: 0 4px 10px rgb(212 175 55 / 0.5);
 }
 
 /* Skeleton loading */
@@ -764,20 +730,6 @@ body.dark-mode .contributors-section p {
   }
 }
 
-/* Card refinement */
-.contributor-card {
-  padding: 1.5rem 1.55rem 1.35rem;
-  border-radius: 20px;
-  background: linear-gradient(
-    180deg,
-   #dfc981fb,
-    rgb(255 255 255 / 88%)
-  );
-  box-shadow:
-    0 12px 30px rgb(0 0 0 / 8%),
-    inset 0 1px 0 rgb(255 255 255 / 60%);
-}
-
 /* Hover feels lighter */
 .contributor-card:hover {
   transform: translateY(-5px);
@@ -862,21 +814,6 @@ body.dark-mode .contributors-section p {
   color: var(--text-secondary);
 }
 
-/* GitHub action button */
-.contributor-github {
-  width: 44px;
-  height: 44px;
-  background: linear-gradient(
-    180deg,
-    rgb(255 255 255 / 95%),
-    rgb(248 248 248 / 90%)
-  );
-}
-
-.contributor-github:hover {
-  background: rgb(255 250 235);
-}
-
 /* Mobile tuning */
 @media (max-width: 720px) {
   .contributors-grid {
@@ -916,13 +853,6 @@ body.dark-mode .contributors-section p {
   text-overflow: ellipsis;    
 }
 
-.contributor-actions {
-  flex-shrink: 0;  
-  margin-left: 1rem;
-  display: flex;
-  align-items: center;
-}
-
 /* Animation trigger */
 .contributor-card.is-visible {
     opacity: 1;
@@ -1006,16 +936,29 @@ body.dark-mode .contributors-section p {
 }
 
 .contributor-github {
-    font-size: 1.5rem;
-    color: #1b263b;
-    transition: color 0.2s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  width: 46px;
+  height: 46px;
+  border-radius: 50%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: 1.3rem;
+  text-decoration: none;
+
+  background: #ffffff;
+  border: 2px solid #d4af37;
+  color: #1b263b;
+
+  transition: all 0.25s ease;
+  flex-shrink: 0;
 }
 
 .contributor-github:hover {
-    color: #d4af37; /* Gold */
+  transform: scale(1.1);
+  background: #fff8dc;
+  box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
 }
 
 /* =========================================
@@ -1092,11 +1035,13 @@ body.dark-mode .contributor-chip.is-bot {
 }
 
 body.dark-mode .contributor-github {
-    color: #e0e0e0 !important; /* White/Light Grey Icon */
+  background: #1f2937;
+  border-color: #d4af37;
+  color: #f9fafb;
 }
 
 body.dark-mode .contributor-github:hover {
-    color: #d4af37 !important; /* Gold on Hover */
+  background: #2a2f3a;
 }
 
 /* Skeleton Dark Mode */
diff --git a/frontend/css/feedback.css b/frontend/css/feedback.css
index 2676aae..5c21a3b 100644
--- a/frontend/css/feedback.css
+++ b/frontend/css/feedback.css
@@ -1,63 +1,196 @@
+:root {
+  --primary-gold: #d4af37;
+  --deep-navy: #0a192f;
+  --text-main: #333;
+  --bg-cream: #fdfbf7;
+}
+
+body.dark-mode {
+  --bg-cream: #0f172a;
+  --text-main: #e5e7eb;
+  --deep-navy: #f1f5f9;
+  --card-bg: #1e293b;
+  --input-bg: #0f172a;
+  --input-border: #334155;
+  --text-secondary-dark: #94a3b8;
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+  background-color: var(--bg-cream);
+  color: var(--text-main);
+}
+
+/* --- Header Styling (Matches Resources.html) --- */
 .feedback-header {
   text-align: center;
-  padding: 80px 20px 40px;
+  padding: 4rem 2rem 2rem 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .feedback-header h1 {
-  font-size: 2.5rem;
+  font-family: 'Playfair Display', serif;
+  font-size: 3rem;
   color: var(--deep-navy);
+  margin-bottom: 1rem;
+  position: relative;
+  display: inline-block;
 }
 
-.feedback-header p {
-  color: var(--text-secondary);
-  margin-top: 10px;
+/* The Gold Underline Effect */
+.feedback-header h1::after {
+  content: '';
+  display: block;
+  width: 60px;
+  height: 4px;
+  background: var(--primary-gold);
+  margin: 0.5rem auto 0;
+  border-radius: 2px;
 }
 
-.feedback-container {
+.feedback-header p {
+  font-family: 'Inter', sans-serif;
+  color: var(--text-secondary-dark, #666);
+  font-size: 1.1rem;
   max-width: 600px;
-  margin: auto;
-  padding: 30px;
+  margin: 0 auto;
+  line-height: 1.6;
 }
 
-form {
+/* --- Form Container (Card Style) --- */
+.feedback-container {
   display: flex;
-  flex-direction: column;
-  gap: 15px;
+  justify-content: center;
+  padding-bottom: 4rem;
+}
+
+#feedbackForm {
+  background: var(--card-bg, white);
+  padding: 3rem;
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Soft shadow like the cards */
+  width: 100%;
+  max-width: 600px;
+  border-top: 4px solid var(--primary-gold); /* Gold accent on top */
 }
 
+/* --- Input Styles --- */
 label {
   font-weight: 600;
+  color: var(--deep-navy);
+  margin-bottom: 0.5rem;
+  display: block;
+  margin-top: 1.5rem;
+  font-size: 0.95rem;
+}
+
+label:first-child {
+  margin-top: 0;
 }
 
 input, select, textarea {
-  padding: 10px;
-  border-radius: 6px;
-  border: 1px solid #ccc;
+  width: 100%;
+  padding: 0.8rem 1rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  font-family: 'Inter', sans-serif;
   font-size: 1rem;
+  transition: all 0.3s ease;
+  background-color: var(--input-bg, #fafafa);
+  border: 1px solid var(--input-border, #e0e0e0);
+  color: var(--text-main);
+}
+
+input:focus, select:focus, textarea:focus {
+  outline: none;
+  border-color: var(--primary-gold);
+  background-color: white;
+  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
 }
 
 textarea {
-  min-height: 120px;
+  min-height: 150px;
   resize: vertical;
 }
 
-button {
-  background-color: var(--primary-gold);
-  color: #000;
-  padding: 12px;
-  border: none;
-  border-radius: 6px;
+/* --- Button Styling (Matches Quiz Buttons) --- */
+button[type="submit"] {
+  background-color: var(--deep-navy);
+  color: white; /* Changed to white for better contrast on navy */
+  font-family: 'Inter', sans-serif;
   font-weight: 600;
+  font-size: 1rem;
+  padding: 1rem 2rem;
+  border: none;
+  border-radius: 50px;
   cursor: pointer;
+  margin-top: 2rem;
+  width: 100%;
+  transition: transform 0.2s, box-shadow 0.2s;
+  box-shadow: 0 4px 10px rgba(10, 25, 47, 0.2);
+}
+
+button[type="submit"]:hover {
+  transform: translateY(-2px);
+  background-color: #1a2f4b; /* Slightly lighter navy on hover */
+  box-shadow: 0 6px 15px rgba(10, 25, 47, 0.3);
+}
+
+body.dark-mode button[type="submit"] {
+  background-color: var(--primary-gold) !important;
+  color: #000 !important;
+  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
 }
 
-button:hover {
-  opacity: 0.9;
+body.dark-mode button[type="submit"]:hover {
+  background-color: #c49b2f !important;
+  transform: translateY(-2px);
 }
 
+/* --- Success Message --- */
 #successMessage {
-  display: none;
-  color: green;
-  margin-top: 10px;
+  margin-top: 1.5rem;
+  text-align: center;
+  color: #27ae60;
   font-weight: 600;
+  display: none; /* Controlled by JS */
+  background: #e8f5e9;
+  padding: 1rem;
+  border-radius: 8px;
+}
+
+body.dark-mode #successMessage {
+  background: #052e16;
+  color: #4ade80;
+}
+
+body.dark-mode select {
+  background-color: #0f1b2d !important;
+  color: #ffffff !important;
+  border: 1px solid #334155 !important;
+}
+
+body.dark-mode select:focus {
+  border-color: var(--primary-gold) !important;
+  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
 }
+
+/* Dropdown options */
+body.dark-mode select option {
+  background-color: #0f1b2d;
+  color: #ffffff;
+}
+
+body.dark-mode textarea,
+body.dark-mode input {
+  background-color: #0f1b2d !important;
+  color: #ffffff !important;
+  border: 1px solid #334155 !important;
+}
+
+body.dark-mode textarea::placeholder,
+body.dark-mode input::placeholder {
+  color: #94a3b8 !important;
+}
\ No newline at end of file
diff --git a/frontend/css/program.css b/frontend/css/program.css
index d7ce9d6..aa0d218 100644
--- a/frontend/css/program.css
+++ b/frontend/css/program.css
@@ -313,4 +313,189 @@ body.dark-mode .programs-heading {
   );
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+
+.filter-bar {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin: 40px 0 60px;
+}
+
+/* Wrapper REQUIRED for custom arrow */
+.filter-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+/* Select Styling */
+.filter-wrapper select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: none;
+
+  padding: 12px 45px 12px 20px;
+  border-radius: 30px;
+  border: 1px solid rgba(181, 157, 92, 0.35);
+
+  font-family: 'Inter', sans-serif;
+  font-weight: 600;
+  font-size: 0.95rem;
+
+  background: linear-gradient(145deg, #ffffff, #f9f6f0);
+  color: #2c3e50;
+
+  box-shadow: 0 6px 15px rgba(0,0,0,0.05);
+  cursor: pointer;
+
+  transition: all 0.3s ease;
+}
+
+/* Hover */
+.filter-wrapper select:hover {
+  border-color: var(--primary-gold);
+  box-shadow: 0 8px 25px rgba(181, 157, 92, 0.25);
+}
+
+/* Focus */
+.filter-wrapper select:focus {
+  outline: none;
+  border-color: var(--primary-gold);
+  box-shadow: 0 0 0 3px rgba(181, 157, 92, 0.2);
+}
+
+/* Custom Gold Arrow */
+.filter-wrapper::after {
+  content: "▾";
+  position: absolute;
+  right: 18px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 14px;
+  font-weight: bold;
+  color: var(--primary-gold);
+  pointer-events: none;
+}
+
+/* =========================
+   DARK MODE FIX
+=========================*/
+body.dark-mode .filter-wrapper select {
+  background: linear-gradient(145deg, #1f2937, #111827) !important;
+  color: #f9fafb !important;
+  border: 1px solid #374151 !important;
+  box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
+}
+
+body.dark-mode .filter-wrapper select:hover {
+  border-color: var(--primary-gold) !important;
+  box-shadow:
+    0 10px 30px rgba(0, 0, 0, 0.8),
+    0 0 15px rgba(212, 175, 55, 0.2) !important;
+}
+
+/* Dark mode dropdown options */
+body.dark-mode .filter-wrapper select option {
+  background: #111827;
+  color: #f9fafb;
+}
+
+/* =========================================
+   PREMIUM LABEL BADGES
+=========================*/
+.badge-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+  margin-bottom: 18px;
+}
+
+.label {
+  padding: 5px 12px;
+  font-size: 0.72rem;
+  border-radius: 20px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
+}
+
+/* LIGHT MODE COLORS */
+.label.paid {
+  background: rgba(22, 163, 74, 0.1);
+  color: #15803d;
+  border-color: rgba(22, 163, 74, 0.3);
+}
+
+.label.unpaid {
+  background: rgba(107, 114, 128, 0.1);
+  color: #4b5563;
+  border-color: rgba(107, 114, 128, 0.3);
+}
+
+.label.global {
+  background: rgba(37, 99, 235, 0.1);
+  color: #1d4ed8;
+  border-color: rgba(37, 99, 235, 0.3);
+}
+
+.label.india {
+  background: rgba(249, 115, 22, 0.1);
+  color: #ea580c;
+  border-color: rgba(249, 115, 22, 0.3);
+}
+
+.label.beginner {
+  background: rgba(251, 191, 36, 0.15);
+  color: #b45309;
+  border-color: rgba(251, 191, 36, 0.4);
+}
+
+.label.intermediate {
+  background: rgba(147, 51, 234, 0.1);
+  color: #7e22ce;
+  border-color: rgba(147, 51, 234, 0.3);
+}
+
+.label.advanced {
+  background: rgba(220, 38, 38, 0.1);
+  color: #b91c1c;
+  border-color: rgba(220, 38, 38, 0.3);
+}
+
+/* Hover polish */
+.label:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
+body.dark-mode .label {
+  backdrop-filter: blur(6px);
+}
+
+body.dark-mode .label.paid {
+  background: rgba(22, 163, 74, 0.2);
+  color: #4ade80;
+}
+
+body.dark-mode .label.global {
+  background: rgba(37, 99, 235, 0.2);
+  color: #60a5fa;
+}
+
+body.dark-mode .label.beginner {
+  background: rgba(251, 191, 36, 0.2);
+  color: #facc15;
+}
+
+body.dark-mode .label.intermediate {
+  background: rgba(147, 51, 234, 0.2);
+  color: #c084fc;
+}
+
+body.dark-mode .label.advanced {
+  background: rgba(220, 38, 38, 0.2);
+  color: #f87171;
 }
\ No newline at end of file
diff --git a/frontend/pages/Contribute.html b/frontend/pages/Contribute.html
index 10203af..30e4ddb 100644
--- a/frontend/pages/Contribute.html
+++ b/frontend/pages/Contribute.html
@@ -22,6 +22,110 @@
   <link rel="stylesheet" href="/frontend/css/dark-mode.css">
   <link rel='manifest' href='../../manifest.json' />
 </head>
+<style>
+  /* =========================================
+   CONTRIBUTE PAGE DARK MODE FIXES
+  ===========================================*/
+
+  /* 2. Card Backgrounds - Dark Grey */
+  body.dark-mode .step,
+  body.dark-mode .step-card,
+  body.dark-mode .tip-card,
+  body.dark-mode .practice-item,
+  body.dark-mode .card {
+    background-color: #1e1e1e !important;
+    border: 1px solid #333 !important;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
+  }
+
+  /* 3. GOLDEN TEXT FIX (Titles & Icons) */
+  body.dark-mode h1,
+  body.dark-mode h2,
+  body.dark-mode h3,
+  body.dark-mode h4,
+  body.dark-mode h5,
+  body.dark-mode .tip-icon,
+  body.dark-mode strong,
+  body.dark-mode b {
+    color: #d4af37 !important;
+    /* Primary Gold */
+  }
+
+  /* 4. STEP NUMBER VISIBILITY FIX */
+  /* Forces the number inside the yellow circle to be white */
+  body.dark-mode .step-number {
+    color: #ffffff !important;
+  }
+
+  /* 5. Description Text - Readable Light Grey (Global) */
+  body.dark-mode p,
+  body.dark-mode li {
+    color: #cccccc !important;
+  }
+
+  /* 6. Hover Effects */
+  body.dark-mode .step:hover,
+  body.dark-mode .step-card:hover,
+  body.dark-mode .tip-card:hover,
+  body.dark-mode .practice-item:hover {
+    border-color: #d4af37 !important;
+    transform: translateY(-5px);
+  }
+/* ==========================
+   Code Blocks (Theme Safe)
+  ==========================*/
+
+.code-block {
+  background: var(--code-bg);
+  border: 1px solid var(--code-border);
+  border-radius: 12px;
+  padding: 1.5rem;
+  overflow-x: auto;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.code-block pre {
+  margin: 0;
+  font-family: 'Courier New', monospace;
+  font-size: 0.95rem;
+  line-height: 1.6;
+  color: var(--code-command);
+}
+
+code {
+  background: var(--code-bg);
+  color: var(--code-text);
+  padding: 0.15rem 0.4rem;
+  border-radius: 4px;
+  font-family: 'Courier New', monospace;
+  font-size: 0.9em;
+}
+
+.code-comment {
+  color: var(--code-comment);
+  font-style: italic;
+}
+
+  /* 8. BEST PRACTICES SECTION VISIBILITY FIX */
+  /* Forces dark text on the light background for this specific section */
+  body.dark-mode .practices-container {
+    background-color: #ffffff !important;
+    /* Keep white background */
+    border: 1px solid #e0e0e0 !important;
+  }
+
+  body.dark-mode .practices-container li,
+  body.dark-mode .practices-container span,
+  body.dark-mode .practices-container p {
+    color: #333333 !important;
+    /* Dark Grey Text */
+  }
+
+  body.dark-mode .practices-container strong {
+    color: #000000 !important;
+    /* Black for bold text */
+  }
+</style>
 
 <body>
   <div id="cursor-highlight" aria-hidden="true"></div>
diff --git a/frontend/pages/contributors.html b/frontend/pages/contributors.html
index 12519e5..2f86f11 100644
--- a/frontend/pages/contributors.html
+++ b/frontend/pages/contributors.html
@@ -21,115 +21,6 @@
   
   <link rel='manifest' href='../../manifest.json' />
 
-  <style>
-    /* --- 1. Page Spacing & Heading --- */
-    .contributors-section {
-      padding-top: 20px; 
-    }
-
-    .contributors-section h1 {
-      text-align: center;
-      font-size: 4rem; 
-      margin: 0;
-    }
-
-    .contributors-section > p {
-      text-align: center;
-      margin-top: 5px;
-      margin-bottom: 40px; 
-      color: #555; 
-      font-size: 1.1rem;
-    }
-
-    /* --- 2. Grid Container --- */
-    #contributors-grid {
-      display: flex;
-      flex-direction: column;
-      gap: 20px; 
-      align-items: center; 
-      width: 100%;
-      max-width: 1000px; 
-      margin: 0 auto; 
-    }
-
-    /* --- 3. THE CARD STYLING --- */
-    .contributor-card {
-      display: flex !important; 
-      flex-direction: row !important;
-      align-items: center !important;
-      justify-content: space-between !important; 
-      
-      width: 90%; 
-      background-color: #ffffff; 
-      padding: 15px 30px; 
-      border-radius: 15px; 
-      box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
-      border: 1px solid rgba(0,0,0,0.05);
-      transition: transform 0.2s ease, box-shadow 0.2s ease;
-    }
-
-    .contributor-card:hover {
-      transform: translateY(-3px);
-      box-shadow: 0 8px 15px rgba(0,0,0,0.1);
-    }
-
-    /* --- SECTION 1: Avatar (Left) --- */
-    .card-avatar-section img {
-      width: 70px;
-      height: 70px;
-      border-radius: 50%;
-      object-fit: cover;
-      border: 2px solid #eee;
-      display: block;
-    }
-
-    /* --- SECTION 2: Info (Center) --- */
-    .card-info-section {
-      flex-grow: 1; 
-      display: flex;
-      flex-direction: column;
-      align-items: center; 
-      justify-content: center;
-      padding: 0 20px; 
-      text-align: center;
-    }
-    
-    .card-info-section h2,
-    .card-info-section h3, 
-    .card-info-section p,
-    .card-info-section strong {
-      margin: 2px 0;
-      text-align: center;
-    }
-
-    /* --- SECTION 3: GitHub Icon (Right) --- */
-    .card-icon-section {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      min-width: 50px;
-    }
-    
-    .card-icon-section a, 
-    .card-icon-section i {
-      font-size: 1.8rem;
-      color: #333;
-      text-decoration: none;
-      
-      /* ADDED: Smooth transition for the hover effect */
-      transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease;
-      display: inline-block; /* Required for transform to work on spans/links */
-    }
-
-    /* ADDED: The Hover Effect specifically for the Logo */
-    .card-icon-section a:hover, 
-    .card-icon-section i:hover {
-      transform: scale(1.3) rotate(10deg); /* Zoom in and tilt */
-      color: #000; /* Make it darker black */
-      cursor: pointer;
-    }
-  </style>
-
 </head>
 
 <body class="contributors-page">
diff --git a/frontend/pages/feedback.html b/frontend/pages/feedback.html
index 32b695f..a46d69c 100644
--- a/frontend/pages/feedback.html
+++ b/frontend/pages/feedback.html
@@ -1,450 +1,72 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Feedback | OpenSource Compass</title>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Feedback | OpenSource Compass</title>
 
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
-    />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
 
-    <link
-      href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap"
-      rel="stylesheet"
-    />
+  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
 
-    <link rel="stylesheet" href="../css/style.css" />
-    <link rel="stylesheet" href="../css/feedback.css" />
+  <link rel="stylesheet" href="../css/style.css">
+  <link rel="stylesheet" href="../css/feedback.css">
 
-    <style>
-      :root {
-        --primary-gold: #d4af37;
-        --deep-navy: #0a192f;
-        --deep-navy-2: #132b4d;
-        --text-main: #2b2b2b;
-        --muted: #6b7280;
-        --bg-cream: #fdfbf7;
-        --card: rgba(255, 255, 255, 0.78);
-        --border: rgba(15, 23, 42, 0.1);
-        --shadow: 0 18px 60px rgba(10, 25, 47, 0.1);
-        --shadow-hover: 0 22px 75px rgba(10, 25, 47, 0.16);
-        --radius: 18px;
-      }
+</head>
 
-      * {
-        box-sizing: border-box;
-      }
+<body>
 
-      body {
-        font-family: "Inter", sans-serif;
-        background:
-          radial-gradient(
-            1200px 600px at 20% 0%,
-            rgba(212, 175, 55, 0.13),
-            transparent 60%
-          ),
-          radial-gradient(
-            900px 500px at 80% 10%,
-            rgba(10, 25, 47, 0.1),
-            transparent 55%
-          ),
-          var(--bg-cream);
-        color: var(--text-main);
-        overflow-x: hidden;
-      }
+  <div id="navbar"></div>
 
-      /* --- Ambient Animated Blobs --- */
-      .bg-blobs {
-        position: fixed;
-        inset: 0;
-        pointer-events: none;
-        z-index: -1;
-        filter: blur(40px);
-        opacity: 0.65;
-      }
+  <main>
+    <section class="feedback-header">
+      <h1>We’d Love Your Feedback</h1>
+      <p>Your feedback helps improve OpenSource Compass for everyone. Let us know how we can make your journey better.</p>
+    </section>
 
-      .blob {
-        position: absolute;
-        width: 380px;
-        height: 380px;
-        border-radius: 50%;
-        transform: translate3d(0, 0, 0);
-        animation: float 10s ease-in-out infinite;
-        mix-blend-mode: multiply;
-      }
+    <section class="feedback-container">
+      <form id="feedbackForm">
 
-      .blob.one {
-        background: rgba(212, 175, 55, 0.35);
-        top: -120px;
-        left: -120px;
-        animation-duration: 12s;
-      }
+        <label for="name">Name <span style="font-weight:400; color:#999; font-size:0.85em">(optional)</span></label>
+        <input id="name" type="text" placeholder="John Doe">
 
-      .blob.two {
-        background: rgba(10, 25, 47, 0.2);
-        top: 60px;
-        right: -140px;
-        animation-duration: 14s;
-      }
+        <label for="email">Email <span style="font-weight:400; color:#999; font-size:0.85em">(optional)</span></label>
+        <input id="email" type="email" placeholder="john@example.com">
 
-      .blob.three {
-        background: rgba(212, 175, 55, 0.18);
-        bottom: -160px;
-        left: 35%;
-        animation-duration: 16s;
-      }
+        <label for="type">Feedback Type</label>
+        <select id="type" required>
+          <option value="">Select an option...</option>
+          <option>Bug Report</option>
+          <option>Feature Request</option>
+          <option>UI / UX Feedback</option>
+          <option>Content Improvement</option>
+          <option>General Feedback</option>
+        </select>
 
-      @keyframes float {
-        0%,
-        100% {
-          transform: translate(0px, 0px) scale(1);
-        }
-        50% {
-          transform: translate(30px, -18px) scale(1.05);
-        }
-      }
+        <label for="message">Feedback Message *</label>
+        <textarea
+          id="message"
+          required
+          placeholder="Tell us what you think..."
+        ></textarea>
 
-      /* --- Header --- */
-      .feedback-header {
-        text-align: center;
-        padding: 4.25rem 1.25rem 2.25rem;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        animation: fadeUp 700ms ease forwards;
-        opacity: 0;
-        transform: translateY(10px);
-      }
+        <button type="submit">Submit Feedback <i class="fas fa-paper-plane" style="margin-left: 8px;"></i></button>
 
-      .feedback-header h1 {
-        font-family: "Playfair Display", serif;
-        font-size: clamp(2.2rem, 3.2vw, 3.2rem);
-        color: var(--deep-navy);
-        margin-bottom: 0.9rem;
-        letter-spacing: -0.02em;
-        position: relative;
-        display: inline-block;
-      }
+        <p id="successMessage"><i class="fas fa-check-circle"></i> Thank you! Your feedback has been submitted.</p>
 
-      .feedback-header h1::after {
-        content: "";
-        display: block;
-        width: 66px;
-        height: 4px;
-        background: linear-gradient(90deg, var(--primary-gold), #f5e6a5);
-        margin: 0.6rem auto 0;
-        border-radius: 999px;
-      }
+      </form>
+    </section>
+  </main>
 
-      .feedback-header p {
-        color: var(--muted);
-        font-size: 1.05rem;
-        max-width: 620px;
-        margin: 0 auto;
-        line-height: 1.75;
-      }
-
-      /* --- Container --- */
-      .feedback-container {
-        display: flex;
-        justify-content: center;
-        padding: 0 1rem 4.5rem;
-      }
-
-      /* --- Form Card --- */
-      #feedbackForm {
-        width: 100%;
-        max-width: 640px;
-        padding: 2.6rem 2.6rem 2.2rem;
-        border-radius: var(--radius);
-        border: 1px solid var(--border);
-        background: var(--card);
-        backdrop-filter: blur(12px);
-        box-shadow: var(--shadow);
-        position: relative;
-        overflow: hidden;
-
-        opacity: 0;
-        transform: translateY(16px);
-        animation: fadeUp 800ms ease 120ms forwards;
-      }
-
-      /* gold accent top line */
-      #feedbackForm::before {
-        content: "";
-        position: absolute;
-        inset: 0 0 auto 0;
-        height: 4px;
-        background: linear-gradient(
-          90deg,
-          var(--primary-gold),
-          rgba(212, 175, 55, 0.2)
-        );
-      }
-
-      /* subtle highlight */
-      #feedbackForm::after {
-        content: "";
-        position: absolute;
-        width: 240px;
-        height: 240px;
-        border-radius: 50%;
-        background: rgba(212, 175, 55, 0.12);
-        top: -120px;
-        right: -120px;
-      }
-
-      /* --- Form Groups --- */
-      .field {
-        position: relative;
-        margin-top: 1.4rem;
-      }
-
-      .field:first-of-type {
-        margin-top: 0;
-      }
-
-      label {
-        font-weight: 600;
-        color: var(--deep-navy);
-        display: block;
-        margin-bottom: 0.55rem;
-        font-size: 0.95rem;
-      }
-
-      /* --- Inputs --- */
-      input,
-      select,
-      textarea {
-        width: 100%;
-        padding: 0.95rem 1rem;
-        border: 1px solid rgba(0, 0, 0, 0.1);
-        border-radius: 12px;
-        font-family: "Inter", sans-serif;
-        font-size: 1rem;
-        background: rgba(250, 250, 250, 0.9);
-        transition:
-          transform 180ms ease,
-          box-shadow 240ms ease,
-          border-color 240ms ease,
-          background 240ms ease;
-        outline: none;
-      }
-
-      input:hover,
-      select:hover,
-      textarea:hover {
-        border-color: rgba(212, 175, 55, 0.55);
-      }
-
-      input:focus,
-      select:focus,
-      textarea:focus {
-        border-color: rgba(212, 175, 55, 0.9);
-        background: rgba(255, 255, 255, 1);
-        box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.14);
-        transform: translateY(-1px);
-      }
-
-      textarea {
-        min-height: 150px;
-        resize: vertical;
-      }
-
-      /* --- Submit Button --- */
-      button[type="submit"] {
-        margin-top: 2rem;
-        width: 100%;
-        border: none;
-        border-radius: 999px;
-        cursor: pointer;
-        padding: 1rem 1.25rem;
-        font-weight: 700;
-        font-size: 1rem;
-        color: #fff;
-        background: linear-gradient(
-          135deg,
-          var(--deep-navy),
-          var(--deep-navy-2)
-        );
-        box-shadow: 0 10px 24px rgba(10, 25, 47, 0.25);
-        transition:
-          transform 180ms ease,
-          box-shadow 220ms ease,
-          filter 220ms ease;
-        position: relative;
-        overflow: hidden;
-      }
-
-      button[type="submit"] i {
-        margin-left: 10px;
-      }
-
-      button[type="submit"]:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 14px 32px rgba(10, 25, 47, 0.33);
-        filter: brightness(1.05);
-      }
-
-      button[type="submit"]:active {
-        transform: translateY(0px) scale(0.99);
-      }
-
-      /* Ripple */
-      button[type="submit"]::after {
-        content: "";
-        position: absolute;
-        inset: 0;
-        background: radial-gradient(
-          circle at var(--x, 50%) var(--y, 50%),
-          rgba(255, 255, 255, 0.35),
-          transparent 40%
-        );
-        opacity: 0;
-        transition: opacity 220ms ease;
-      }
-
-      button[type="submit"]:hover::after {
-        opacity: 1;
-      }
-
-      /* Loading state */
-      button.loading {
-        opacity: 0.85;
-        cursor: not-allowed;
-      }
-      button.loading i {
-        animation: spin 1s linear infinite;
-      }
-      @keyframes spin {
-        to {
-          transform: rotate(360deg);
-        }
-      }
-
-      /* --- Success Message --- */
-      #successMessage {
-        margin-top: 1.25rem;
-        text-align: center;
-        font-weight: 700;
-        display: none;
-        background: rgba(39, 174, 96, 0.12);
-        color: #1f8a4c;
-        border: 1px solid rgba(39, 174, 96, 0.25);
-        padding: 0.95rem 1rem;
-        border-radius: 14px;
-        animation: popIn 420ms ease forwards;
-      }
-
-      @keyframes popIn {
-        from {
-          opacity: 0;
-          transform: translateY(10px) scale(0.98);
-        }
-        to {
-          opacity: 1;
-          transform: translateY(0) scale(1);
-        }
-      }
-
-      @keyframes fadeUp {
-        to {
-          opacity: 1;
-          transform: translateY(0);
-        }
-      }
-
-      /* --- Responsive --- */
-      @media (max-width: 640px) {
-        #feedbackForm {
-          padding: 2rem 1.25rem 1.6rem;
-        }
-      }
-
-      /* --- Reduce motion accessibility --- */
-      @media (prefers-reduced-motion: reduce) {
-        * {
-          animation: none !important;
-          transition: none !important;
-        }
-        .blob {
-          display: none;
-        }
-        #feedbackForm,
-        .feedback-header {
-          opacity: 1;
-          transform: none;
-        }
-      }
-    </style>
-  </head>
-
-  <body>
-    <div id="navbar"></div>
-
-    <main>
-      <section class="feedback-header">
-        <h1>We’d Love Your Feedback</h1>
-        <p>
-          Your feedback helps improve OpenSource Compass for everyone. Let us
-          know how we can make your journey better.
-        </p>
-      </section>
-
-      <section class="feedback-container">
-        <form id="feedbackForm">
-          <label for="name"
-            >Name
-            <span style="font-weight: 400; color: #999; font-size: 0.85em"
-              >(optional)</span
-            ></label
-          >
-          <input id="name" type="text" placeholder="John Doe" />
-
-          <label for="email"
-            >Email
-            <span style="font-weight: 400; color: #999; font-size: 0.85em"
-              >(optional)</span
-            ></label
-          >
-          <input id="email" type="email" placeholder="john@example.com" />
-
-          <label for="type">Feedback Type</label>
-          <select id="type" required>
-            <option value="">Select an option...</option>
-            <option>Bug Report</option>
-            <option>Feature Request</option>
-            <option>UI / UX Feedback</option>
-            <option>Content Improvement</option>
-            <option>General Feedback</option>
-          </select>
-
-          <label for="message">Feedback Message *</label>
-          <textarea
-            id="message"
-            required
-            placeholder="Tell us what you think..."
-          ></textarea>
+    <div id="footer"></div>
 
-          <button type="submit">
-            Submit Feedback
-            <i class="fas fa-paper-plane" style="margin-left: 8px"></i>
-          </button>
 
-          <p id="successMessage">
-            <i class="fas fa-check-circle"></i> Thank you! Your feedback has
-            been submitted.
-          </p>
-        </form>
-      </section>
-    </main>
 
-    <div id="footer"></div>
+  <!-- 🔹 Shared Components + Page Logic -->
+  <script src="../js/components.js"></script>
+  <script src="../js/feedback.js"></script>
+  <script src="../js/theme.js"></script>
+  <script src="/frontend/js/DMtheme.js"></script>
 
-    <!-- 🔹 Shared Components + Page Logic -->
-    <script src="../js/components.js"></script>
-    <script src="../js/feedback.js"></script>
-  </body>
+</body>
 </html>
diff --git a/frontend/pages/programs.html b/frontend/pages/programs.html
index 51369b8..a8a1de5 100644
--- a/frontend/pages/programs.html
+++ b/frontend/pages/programs.html
@@ -34,48 +34,157 @@ <h3 class="programs-heading">Open Source Programs</h3>
         gain real-world experience through contributions.
       </p>
 
+      <!-- =========================
+          FILTER BAR
+      ========================== -->
+      <div class="filter-bar">
+
+        <div class="filter-wrapper">
+          <select id="levelFilter">
+            <option value="all">All Levels</option>
+            <option value="beginner">Beginner</option>
+            <option value="intermediate">Intermediate</option>
+            <option value="advanced">Advanced</option>
+          </select>
+        </div>
+
+        <div class="filter-wrapper">
+          <select id="typeFilter">
+            <option value="all">All Types</option>
+            <option value="paid">Paid</option>
+            <option value="unpaid">Unpaid</option>
+          </select>
+        </div>
+
+        <div class="filter-wrapper">
+          <select id="regionFilter">
+            <option value="all">All Regions</option>
+            <option value="global">Global</option>
+            <option value="india">India</option>
+          </select>
+        </div>
+
+        <div class="filter-wrapper">
+          <select id="statusFilter">
+            <option value="all">All Status</option>
+            <option value="seasonal">Seasonal</option>
+            <option value="ongoing">Ongoing</option>
+          </select>
+        </div>
+
+      </div>
+
       <div class="card-grid" id="programs-grid">
-        <div class="program-card">
+        <div class="program-card beginner paid global seasonal">
           <div class="card-icon"><i class="fas fa-code"></i></div>
           <h3>Google Summer of Code</h3>
+
+          <div class="badge-group">
+            <span class="label paid">Paid</span>
+            <span class="label global">Global</span>
+            <span class="label beginner">Beginner-Friendly</span>
+          </div>
+
           <p>A global program focused on bringing new contributors into open source software development.</p>
           <a href="Event/gsoc.html" class="card-btn">View Details</a>
         </div>
 
-        <div class="program-card">
+        <div class="program-card beginner unpaid india seasonal">
           <div class="card-icon"><i class="fas fa-users"></i></div>
           <h3>GSSoC</h3>
+
+          <div class="badge-group">
+            <span class="label unpaid">Unpaid</span>
+            <span class="label india">India</span>
+            <span class="label beginner">Beginner-Friendly</span>
+          </div>
+
           <p>GirlScript Summer of Code is a three-month-long Open Source program by GirlScript Foundation.</p>
           <a href="Event/gssoc.html" class="card-btn">View Details</a>
         </div>
 
-        <div class="program-card">
+        <div class="program-card beginner unpaid global seasonal">
           <div class="card-icon"><i class="fas fa-terminal"></i></div>
           <h3>Hacktoberfest</h3>
+
+          <div class="badge-group">
+            <span class="label unpaid">Unpaid</span>
+            <span class="label global">Global</span>
+            <span class="label beginner">Beginner-Friendly</span>
+          </div>
+
           <p>A month-long celebration of open-source software run by DigitalOcean.</p>
           <a href="Event/hacktober.html" class="card-btn">View Details</a>
         </div>
 
-        <div class="program-card">
+        <div class="program-card intermediate paid global ongoing">
           <div class="card-icon"><i class="fas fa-linux"></i></div>
           <h3>Linux Foundation</h3>
+
+          <div class="badge-group">
+            <span class="label paid">Paid</span>
+            <span class="label global">Global</span>
+            <span class="label intermediate">Intermediate</span>
+          </div>
+
           <p>Explore various mentorship opportunities within the massive Linux ecosystem.</p>
           <a href="Event/linux.html" class="card-btn">View Details</a>
         </div>
 
-        <div class="program-card">
+        <div class="program-card beginner paid global seasonal">
           <div class="card-icon"><i class="fas fa-globe"></i></div>
           <h3>Outreachy</h3>
+
+          <div class="badge-group">
+            <span class="label paid">Paid</span>
+            <span class="label global">Global</span>
+            <span class="label beginner">Beginner-Friendly</span>
+          </div>
+
           <p>Provides internships to people subject to systemic bias and underrepresented in tech.</p>
           <a href="Event/outreachy.html" class="card-btn">View Details</a>
         </div>
 
-        <div class="program-card">
+        <div class="program-card beginner unpaid india seasonal">
           <div class="card-icon"><i class="fas fa-heart"></i></div>
           <h3>Social Summer of Code</h3>
+
+          <div class="badge-group">
+            <span class="label unpaid">Unpaid</span>
+            <span class="label india">India</span>
+            <span class="label beginner">Beginner-Friendly</span>
+          </div>
+
           <p>A program to promote open source and encourage student developers to build for social good.</p>
           <a href="Event/ssoc.html" class="card-btn">View Details</a>
         </div>
+
+        <!-- NEW PROGRAMS ADDED BELOW -->
+
+        <div class="program-card intermediate paid global ongoing">
+          <div class="card-icon"><i class="fas fa-laptop-code"></i></div>
+          <h3>MLH Fellowship</h3>
+          <div class="badge-group">
+            <span class="label paid">Paid</span>
+            <span class="label global">Global</span>
+            <span class="label intermediate">Intermediate</span>
+          </div>
+          <p>A 12-week remote internship alternative for aspiring engineers.</p>
+          <a href="#" class="card-btn">View Details</a>
+        </div>
+
+        <div class="program-card advanced paid global seasonal">
+          <div class="card-icon"><i class="fas fa-file-alt"></i></div>
+          <h3>Google Season of Docs</h3>
+          <div class="badge-group">
+            <span class="label paid">Paid</span>
+            <span class="label global">Global</span>
+            <span class="label advanced">Advanced</span>
+          </div>
+          <p>Supports open source documentation projects.</p>
+          <a href="#" class="card-btn">View Details</a>
+        </div>
+
       </div>
     </section>
   </main>
@@ -94,6 +203,40 @@ <h3>Social Summer of Code</h3>
   </button>
   <script src='../js/pwa.js'></script>
   <script src="../js/pr-generator.js"></script>
+  <script>
+    const filters = {
+      level: document.getElementById("levelFilter"),
+      type: document.getElementById("typeFilter"),
+      region: document.getElementById("regionFilter"),
+      status: document.getElementById("statusFilter"),
+    };
+
+    const cards = document.querySelectorAll(".program-card");
+
+    function applyFilters() {
+      cards.forEach(card => {
+        const matchLevel =
+          filters.level.value === "all" || card.classList.contains(filters.level.value);
+
+        const matchType =
+          filters.type.value === "all" || card.classList.contains(filters.type.value);
+
+        const matchRegion =
+          filters.region.value === "all" || card.classList.contains(filters.region.value);
+
+        const matchStatus =
+          filters.status.value === "all" || card.classList.contains(filters.status.value);
+
+        card.style.display = (matchLevel && matchType && matchRegion && matchStatus)
+          ? "flex"
+          : "none";
+      });
+    }
+
+    Object.values(filters).forEach(filter =>
+      filter.addEventListener("change", applyFilters)
+    );
+  </script>
 </body>
 
 </html>
\ No newline at end of file