diff --git a/lms/djangoapps/courseware/views/views.py b/lms/djangoapps/courseware/views/views.py
index 79d2976d2c97..568d55057679 100644
--- a/lms/djangoapps/courseware/views/views.py
+++ b/lms/djangoapps/courseware/views/views.py
@@ -276,7 +276,7 @@ def courses(request):
     """
     courses_list = []
     course_discovery_meanings = getattr(settings, 'COURSE_DISCOVERY_MEANINGS', {})
-    if not settings.FEATURES.get('ENABLE_COURSE_DISCOVERY'):
+    if settings.FEATURES.get('ENABLE_COURSE_DISCOVERY'):
         courses_list = get_courses(request.user)
 
         if configuration_helpers.get_value("ENABLE_COURSE_SORTING_BY_START_DATE",
diff --git a/lms/envs/common.py b/lms/envs/common.py
index c0182d47355a..91f2b8386fd6 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..eed7797fe5a2 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,52 +31,355 @@
 </%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:
+  <section class="find-courses">
+    <section class="courses-container">
+      % if course_discovery_enabled:
+      <div class="container">
         <div id="discovery-form" role="search" aria-label="course" class="wrapper-search-context">
-          <div id="discovery-message" class="search-status-label"></div>
-          <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 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 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>
-            </button>
-          </form>
-        </div>
+              % endif
+
+              <!-- Search Bar -->
+              <div class="search-container">
+                <div class="search-info">
+                  <form class="wrapper-search-input">
+                    <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">
+                        <span class="sr">${_('Loading')}</span>
+                      </div>
+                    </div>
+                  </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>
+          <div id="discovery-message" class="search-status-label" style="display: none;" ></div>
 
-        <div id="filter-bar" class="filters hide-phone is-collapsed">
-        </div>
-        % endif
 
-        <div class="courses${'' if course_discovery_enabled else ' no-course-discovery'}" role="region" aria-label="${_('List of Courses')}">
-          <ul class="courses-listing courses-list">
-            %for course in courses:
-            <li class="courses-listing-item">
-              <%include file="../course.html" args="course=course" />
-            </li>
-            %endfor
-          </ul>
+          <div id="search-results-container"></div>
+
         </div>
 
+      </div>
+      <div id="filter-bar" class="filters hide-phone is-collapsed" style="display: none;"></div>
+
+
+      % endif
+
+      <!-- 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 {
+          max-width: 100%;
+          margin-left: 10%;
+        }
+
+        .search-results-container {
+          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 20px 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;
+
+        }
 
-        % if course_discovery_enabled:
-        <aside aria-label="${_('Refine Your Search')}" class="search-facets phone-menu">
+        .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%;
+          padding-bottom:0px;
+        }
+
+        .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-results-count {     
+          padding-top: 5%;
+        }
+
+        .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 */
+        }
+
+
+      </style>
+
+      <div class="courses${'' if course_discovery_enabled else ' no-course-discovery'}" role="region" aria-label="${_('List of Courses')}">
+        <ul class="courses-listing courses-list">
+          %for course in courses:
+          <li class="courses-listing-item">
+            <%include file="../course.html" args="course=course" />
+          </li>
+          %endfor
+        </ul>
+      </div>
+
+      % if course_discovery_enabled:
+        <aside aria-label="${_('Refine Your Search')}" class="search-facets phone-menu" style="
+        margin-right: 0px;">
           <h2 class="header-search-facets">${_('Refine Your Search')}</h2>
           <section class="search-facets-lists">
           </section>
         </aside>
         % endif
 
-      </section>
+      <script>
+        document.addEventListener('DOMContentLoaded', function () {
+          var searchForm = document.getElementById('discovery-form');
+      
+          function updateSearchResultsCount(currentMessage, searchTerm) {
+            var resultsContainer = document.getElementById('search-results-container');
+            var existingElement = resultsContainer.querySelector('.search-results-count');
+        
+            // Create a new element or clear the existing one
+            var messageElement = existingElement || document.createElement('div');
+            messageElement.className = 'search-results-count';
+            messageElement.textContent = ''; // Clear any existing content
+        
+            if (searchTerm === '') {
+                messageElement.textContent = currentMessage;
+            } else {
+                var numberOfCourses = currentMessage.includes("any") ? 0 : parseInt(currentMessage.match(/\d+/)[0]);
+                var courseWord = numberOfCourses === 1 ? "course" : "courses";
+        
+                // Create and append the bold element for the number
+                var boldElement = document.createElement('b');
+                boldElement.textContent = numberOfCourses;
+                messageElement.appendChild(boldElement);
+        
+                // Append the rest of the message
+                messageElement.appendChild(document.createTextNode(" " + courseWord + " found for \"" + encodeHTML(searchTerm) + "\""));
+            }
+        
+            // Append the new element if it wasn't already in the DOM
+            if (!existingElement) {
+                resultsContainer.appendChild(messageElement);
+            }
+        }
+        
+        // Continue with the rest of your script...
+        
+      
+          searchForm.addEventListener('submit', function (event) {
+              event.preventDefault();
+      
+              var searchTerm = document.getElementById('discovery-input').value.trim();
+      
+              setTimeout(function() {
+                  var currentMessage = document.getElementById('discovery-message').textContent;
+                  updateSearchResultsCount(currentMessage, searchTerm);
+              }, 500);
+          });
+      });
+      
+      // Function to escape HTML in user input
+      function encodeHTML(str){
+          return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
+      }
+      
+      </script>
+
     </section>
-</main>
+  </section>
+</main>
\ No newline at end of file