before the section id="LP" add 4 filters with drop-downs:

Language , region, timezone, course

include the default values as follows
Language can be English, French, Italian, Spanish, Mandarin
Time Zone can be US, UK, MX, FR, SG
region can be AMER, EMEA, LATAM
course: MDB100, MDB200, MDB300, DEV400, DEV500, DS120, DS110, DA610

index.html

@@ -43,9 +43,61 @@
                 </a>
             </div>
         </section>
+        <!-- Filters Section -->
+        <section class="mb-8 bg-white p-6 rounded-lg shadow">
+            <h2 class="text-xl font-semibold text-gray-800 mb-4">Filter Courses</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Language</label>
+                    <select class="filter-select w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500">
+                        <option value="">All Languages</option>
+                        <option value="English">English</option>
+                        <option value="French">French</option>
+                        <option value="Italian">Italian</option>
+                        <option value="Spanish">Spanish</option>
+                        <option value="Mandarin">Mandarin</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Region</label>
+                    <select class="filter-select w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500">
+                        <option value="">All Regions</option>
+                        <option value="AMER">AMER</option>
+                        <option value="EMEA">EMEA</option>
+                        <option value="LATAM">LATAM</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Time Zone</label>
+                    <select class="filter-select w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500">
+                        <option value="">All Time Zones</option>
+                        <option value="US">US</option>
+                        <option value="UK">UK</option>
+                        <option value="MX">MX</option>
+                        <option value="FR">FR</option>
+                        <option value="SG">SG</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Course</label>
+                    <select class="filter-select w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500">
+                        <option value="">All Courses</option>
+                        <option value="MDB100">MDB100</option>
+                        <option value="MDB200">MDB200</option>
+                        <option value="MDB300">MDB300</option>
+                        <option value="DEV400">DEV400</option>
+                        <option value="DEV500">DEV500</option>
+                        <option value="DS120">DS120</option>
+                        <option value="DS110">DS110</option>
+                        <option value="DA610">DA610</option>
+                    </select>
+                </div>
+            </div>
+        </section>
+
         <!-- Course Paths Section -->
         <section id="LP" class="mb-20">
-            <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Choose Your Learning Path</h2>
+<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Choose Your Learning Path</h2>
             
             <div class="mb-12">
                 <h3 class="text-xl font-semibold text-gray-800 mb-4">Foundational Courses</h3>

script.js

@@ -521,9 +521,27 @@ function renderUpcomingDates() {
         upcomingDatesList.appendChild(dateItem);
     });
 }
+// Filter courses based on selected filters
+function filterCourses() {
+    const language = document.querySelector('select:nth-of-type(1)').value;
+    const region = document.querySelector('select:nth-of-type(2)').value;
+    const timezone = document.querySelector('select:nth-of-type(3)').value;
+    const course = document.querySelector('select:nth-of-type(4)').value;
+
+    // Filter logic would go here
+    console.log('Filtering by:', {language, region, timezone, course});
+    // In a real implementation, you would filter the coursesData array
+    // and update the displayed courses
+}
+
 // Initialize the page
 function init() {
-    const groupedCourses = groupCoursesByMonth(coursesData);
+    // Add event listeners to filter selects
+    document.querySelectorAll('.filter-select').forEach(select => {
+        select.addEventListener('change', filterCourses);
+    });
+
+const groupedCourses = groupCoursesByMonth(coursesData);
     
     renderCourses(groupedCourses.current, 'current-month-courses');
     renderCourses(groupedCourses.next, 'next-month-courses');

style.css

@@ -1,6 +1,21 @@
+
 /* Custom styles */
+.filter-select {
+    border: 1px solid #d1d5db;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.filter-select:focus {
+    outline: none;
+    border-color: #13aa52;
+    box-shadow: 0 0 0 3px rgba(19, 170, 82, 0.1);
+}
+
 body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 /* Course paths styling */
 .course-path-card {