diff --git a/lms/djangoapps/courseware/views/views.py b/lms/djangoapps/courseware/views/views.py
index 79d2976d2c97..3ada020aea28 100644
--- a/lms/djangoapps/courseware/views/views.py
+++ b/lms/djangoapps/courseware/views/views.py
@@ -276,14 +276,13 @@ def courses(request):
     """
     courses_list = []
     course_discovery_meanings = getattr(settings, 'COURSE_DISCOVERY_MEANINGS', {})
-    if not settings.FEATURES.get('ENABLE_COURSE_DISCOVERY'):
-        courses_list = get_courses(request.user)
+    courses_list = get_courses(request.user)
 
-        if configuration_helpers.get_value("ENABLE_COURSE_SORTING_BY_START_DATE",
-                                           settings.FEATURES["ENABLE_COURSE_SORTING_BY_START_DATE"]):
-            courses_list = sort_by_start_date(courses_list)
-        else:
-            courses_list = sort_by_announcement(courses_list)
+    if configuration_helpers.get_value("ENABLE_COURSE_SORTING_BY_START_DATE",
+                                        settings.FEATURES["ENABLE_COURSE_SORTING_BY_START_DATE"]):
+        courses_list = sort_by_start_date(courses_list)
+    else:
+        courses_list = sort_by_announcement(courses_list)
 
     # Add marketable programs to the context.
     programs_list = get_programs_with_type(request.site, include_hidden=False)
diff --git a/lms/envs/common.py b/lms/envs/common.py
index c0182d47355a..93a78b942192 100644
--- a/lms/envs/common.py
+++ b/lms/envs/common.py
@@ -657,7 +657,7 @@
     # .. toggle_target_removal_date: None
     # .. toggle_warning: The COURSE_DISCOVERY_MEANINGS setting should be properly defined.
     # .. toggle_tickets: https://github.com/openedx/edx-platform/pull/7845
-    'ENABLE_COURSE_DISCOVERY': False,
+    'ENABLE_COURSE_DISCOVERY': True,
 
     # .. toggle_name: FEATURES['ENABLE_COURSE_FILENAME_CCX_SUFFIX']
     # .. toggle_implementation: DjangoSetting
@@ -679,6 +679,12 @@
     # Teams feature
     'ENABLE_TEAMS': True,
 
+    #filter feature of the filter bar
+    'ENABLE_FILTER': False,
+
+    #sort by feature of the filter bar
+    'ENABLE_SORTBY': False,
+
     # Show video bumper in LMS
     'ENABLE_VIDEO_BUMPER': False,
 
diff --git a/lms/envs/devstack.py b/lms/envs/devstack.py
index c2454ee71fc2..13f5432c092b 100644
--- a/lms/envs/devstack.py
+++ b/lms/envs/devstack.py
@@ -198,12 +198,17 @@ def should_show_debug_toolbar(request):  # lint-amnesty, pylint: disable=missing
     'language': LANGUAGE_MAP,
 }
 
-FEATURES['ENABLE_COURSE_DISCOVERY'] = False
+FEATURES['ENABLE_COURSE_DISCOVERY'] = True
 # Setting for overriding default filtering facets for Course discovery
 # COURSE_DISCOVERY_FILTERS = ["org", "language", "modes"]
 FEATURES['COURSES_ARE_BROWSEABLE'] = True
 HOMEPAGE_COURSE_MAX = 9
 
+FEATURES['ENABLE_FILTER'] = True
+# Toggle for the "filter" feature of the search bar
+FEATURES['ENABLE_SORTBY'] = False
+# Toggle for the "sort by" feature of the search bar
+
 # Software secure fake page feature flag
 FEATURES['ENABLE_SOFTWARE_SECURE_FAKE'] = True
 
diff --git a/lms/templates/courseware/courses.html b/lms/templates/courseware/courses.html
index db303073676d..efb892584cb6 100644
--- a/lms/templates/courseware/courses.html
+++ b/lms/templates/courseware/courses.html
@@ -7,6 +7,8 @@
 <%inherit file="../main.html" />
 <%
   course_discovery_enabled = settings.FEATURES.get('ENABLE_COURSE_DISCOVERY')
+  filter_enabled = settings.FEATURES.get('ENABLE_FILTER')
+  sortby_enabled = settings.FEATURES.get('ENABLE_SORTBY')
 %>
 
 <%namespace name='static' file='../static_content.html'/>
@@ -29,34 +31,301 @@
 </%block>
 % endif
 
+
 <%block name="pagetitle">${_("Courses")}</%block>
 
+
 <main id="main" aria-label="Content" tabindex="-1">
     <section class="find-courses">
       <section class="courses-container">
         % if course_discovery_enabled:
+        <div class="container" style="padding-bottom: 0px;">
         <div id="discovery-form" role="search" aria-label="course" class="wrapper-search-context">
-          <div id="discovery-message" class="search-status-label"></div>
+          <div class="search-bar-contents">
+
+
+    <div class="filter-search-container">
+
+      % if filter_enabled:
+             <!-- Filter Section -->
+      <div class="filter-container">
+        <!-- Filter Box with Icon and Count -->
+        <span class="mdi mdi-tune-vertical"></span>
+        <span class="filter-text">Filter</span>
+        <div style="background: #FEEBEE; padding: 4px 6px;">
+            <span style="font-weight: 600; font-size: 12px; color: #ED4338;">3</span>
+        </div>
+      </div>
+      % endif
+
+        <!-- Search Bar -->
+      <div class="search-container">
+        <div class="search-info" >
           <form class="wrapper-search-input">
-            <label for="discovery-input" class="sr">${_('Search for a course')}</label>
-            <input id="discovery-input" class="discovery-input" placeholder="${_('Search for a course')}" type="text"/>
-            <button type="submit" class="button postfix discovery-submit" title="${_('Search')}">
-              <span class="icon fa fa-search" aria-hidden="true"></span>
+            <div class="magnifier-input">
+              <span class="mdi mdi-magnify"></span>
+              <label for="discovery-input" class="sr">${_('Search for a course')}</label>
+            <input id="discovery-input" class="search-input" placeholder="${_('Search for a course')}" />
+            
+          
               <div aria-live="polite" aria-relevant="all">
-                <div id="loading-indicator" class="loading-spinner hidden">
-                  <span class="icon fa fa-spinner fa-spin" aria-hidden="true"></span>
                   <span class="sr">${_('Loading')}</span>
-                </div>
+                 </div> 
+                 
               </div>
-            </button>
           </form>
         </div>
+      </div>
+
+    </div>
+    
+    % if sortby_enabled:
+      <!-- Sort By Dropdown -->
+      <div class="sort-section">
+        <span class="sort-by-label">Sort by:</span>
+        <select class="sort-dropdown">
+          <!-- add options here -->
+        </select>
+      </div>
+      % endif
 
-        <div id="filter-bar" class="filters hide-phone is-collapsed">
         </div>
+        <div id="discovery-message" class="search-status-label" style="display: none;"></div>
+
+        <div class="search-results-count" style="display: none;">
+          <span id="results-count"></span> find for "<span id="search-term"></span>"
+      </div>
+
+      </div>
+      </div>
+          
         % endif
 
-        <div class="courses${'' if course_discovery_enabled else ' no-course-discovery'}" role="region" aria-label="${_('List of Courses')}">
+         <!-- Including the 'Inter' font -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.3.67/css/materialdesignicons.min.css" rel="stylesheet">
+
+
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+        }
+        .mdi {
+          font-size: 1.5em; /* Set the size of the icon */
+          color: black;    /* Set the color of the icon */
+          display: flex;
+          align-items: center;
+
+        }
+
+        .find-courses .wrapper-search-context {
+            width: 100%;
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        .courses-container {
+          max-width: 70%;
+          height:auto;
+          padding: 0px, 0px, 0px, 0px;
+
+        }
+
+        .search-results-count {
+            height: 22px;
+            font-family: 'Inter', sans-serif; /* Fallback to sans-serif */
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 22px;
+            letter-spacing: -0.01em;
+            color: #4E5566;
+            flex: none;
+            order: 1;
+            flex-grow: 0;
+            padding: 24px 0px 16px 0px;
+        }
+
+        #results-count {
+            font-weight: bold; /* Make the number of results bold */
+            color: #1D2026;
+        }
+
+
+        .magnifier-input{
+          display: flex;
+          flex-direction: row;
+          align-items: stretch; 
+
+        }
+        
+
+        .wrapper-search-context {
+          display: flex;
+          flex-direction: column;
+          align-items: left; /* To ensure children elements take full width */
+
+        }
+
+        .search-bar-contents {
+          display: flex;
+          flex-direction: row;
+          align-items: stretch; /* To ensure children elements take full width */
+          width: 100%;
+          height: 48px;
+          justify-content: space-between;
+        }
+
+        .container {
+            display: flex;
+            justify-content: space-between;
+            align-items: left;
+            width:100%;
+        }
+
+        .filter-search-container {
+            display: flex;
+            gap: 24px; /* Gap between filter and search bar */
+        }
+
+
+        /* Filter Box CSS */
+        .filter-container {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0px 24px;
+            gap: 24px;
+            width: 167px;
+            height: 48px;
+            background: #FFFFFF;
+            border: 1px solid #FEEBEE;
+        }
+
+        .contents {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0px;
+            gap: 12px;
+            width: 75px;
+            height: 48px;
+        }
+
+        .filter-text {
+            width: 39px;
+            height: 48px;
+            font-weight: 600;
+            font-size: 16px;
+            line-height: 48px;
+            color: #1D2026;
+        }
+
+        /* Search Bar CSS */
+        .search-container {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: row;
+            align-items: flex-start;
+            padding: 12px 18px;
+            gap: 10px;
+            width: 389px;
+            height: 48px;
+            background: #FFFFFF;
+            border: 1px solid #E9EAF0;
+        }
+
+        .search-info {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            padding: 0px;
+            gap: 12px;
+            width: 105px;
+            height: 24px;
+        }
+
+        .search-input {
+            width: auto;
+            height: 30px;
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 24px;
+            color: #1D2026;
+            border: none;
+            padding-left: 10px;
+            background: #FFFFFF;
+        }
+
+        .search-input:focus {
+            outline: none;
+        }
+
+    
+
+        .sort-by-label {
+            margin-right: 8px;
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 24px;
+            color: #1D2026;
+        }
+
+        .sort-dropdown {
+            
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 12px 16px;
+            gap: 83px;
+
+            width: 198px;
+            height: 48px;
+
+            /* Gray/White */
+            background: #FFFFFF;
+            /* Gray/100 */
+            border: 1px solid #E9EAF0;
+
+            /* Inside auto layout */
+            flex: none;
+            order: 1;
+            flex-grow: 0;
+        }
+
+        .sort-section {
+            display: flex; /* Add flex display to horizontally align Sort By text and dropdown */
+            align-items: center; /* Vertically align the items in center */
+        }
+
+        .courses-list {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content:flex-start;
+        }
+
+        .courses-listing-item {
+            flex: 0 1 25%; /* flex-grow: 0, flex-shrink: 1, flex-basis: 25% */
+            box-sizing: border-box; /* Includes padding and border in the element's total width */
+            /* Add margin or padding as needed, keeping in mind the total width */
+        }
+      
+
+        .find-courses .courses-container .courses:not(.no-course-discovery), .university-profile .courses-container .courses:not(.no-course-discovery) {
+            float: left;
+            display: block;
+            margin-right: 2.35765%;
+            width: 100%;
+        }
+
+    </style>
+
+        <div class="courses${'' if course_discovery_enabled else ' no-course-discovery'}" role="region" aria-label="${_('List of Courses')}" style="margin-right: 0px;">
           <ul class="courses-listing courses-list">
             %for course in courses:
             <li class="courses-listing-item">
@@ -66,14 +335,51 @@
           </ul>
         </div>
 
+        <script>
+          document.addEventListener('DOMContentLoaded', function() {
+              var searchForm = document.getElementById('discovery-form');
+              var coursesList = document.querySelector('.courses-list');
+              var courseItems = coursesList.querySelectorAll('.courses-listing-item');
+          
+              searchForm.addEventListener('submit', function(event) {
+                  event.preventDefault(); // Prevents the form from submitting traditionally
+          
+                  var searchTerm = document.getElementById('discovery-input').value.trim().toLowerCase();
+                  var hasResults = false;
+          
+                  courseItems.forEach(function(course) {
+                      var courseTitle = course.textContent.toLowerCase();
+                      if (courseTitle.includes(searchTerm) || searchTerm === '') {
+                          course.style.display = '';
+                          hasResults = true;
+                      } else {
+                          course.style.display = 'none';
+                      }
+                  });
+          
+                  // Update the results count display
+                  var resultsCountContainer = document.querySelector('.search-results-count');
+                  var resultsCount = document.getElementById('results-count');
+                  var searchTermDisplay = document.getElementById('search-term');
+          
+                  if (hasResults) {
+                      var visibleCourses = coursesList.querySelectorAll('.courses-listing-item:not([style*="display: none"])');
+                      var numberOfResults = visibleCourses.length;
+                      var resultTerm = (numberOfResults === 1) ? 'result' : 'results';
+                      
+                      resultsCountContainer.style.display = 'block';
+                      resultsCount.textContent = numberOfResults + ' ' + resultTerm;
+                      searchTermDisplay.textContent = searchTerm;
+                  } else {
+                      resultsCountContainer.style.display = 'block';
+                      resultsCount.textContent = '0 results';
+                      searchTermDisplay.textContent = searchTerm;
+                  }
+              });
+          });
+          </script>
+          
 
-        % if course_discovery_enabled:
-        <aside aria-label="${_('Refine Your Search')}" class="search-facets phone-menu">
-          <h2 class="header-search-facets">${_('Refine Your Search')}</h2>
-          <section class="search-facets-lists">
-          </section>
-        </aside>
-        % endif
 
       </section>
     </section>