diff --git a/lms/djangoapps/courseware/views/views.py b/lms/djangoapps/courseware/views/views.py
index 79d2976d2c97..0ece88777360 100644
--- a/lms/djangoapps/courseware/views/views.py
+++ b/lms/djangoapps/courseware/views/views.py
@@ -276,14 +276,14 @@ 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)
+    # if not settings.FEATURES.get('ENABLE_COURSE_DISCOVERY'):
+    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..a4c7683c5145 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
diff --git a/lms/envs/devstack.py b/lms/envs/devstack.py
index c2454ee71fc2..2c8b3cf7b63c 100644
--- a/lms/envs/devstack.py
+++ b/lms/envs/devstack.py
@@ -198,7 +198,7 @@ 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
diff --git a/lms/static/images/filter_icon.png b/lms/static/images/filter_icon.png
new file mode 100644
index 000000000000..c67379346c00
Binary files /dev/null and b/lms/static/images/filter_icon.png differ
diff --git a/lms/static/images/magnifier.png b/lms/static/images/magnifier.png
new file mode 100644
index 000000000000..b94d6dac45c7
Binary files /dev/null and b/lms/static/images/magnifier.png differ
diff --git a/lms/static/sass/discussion/views/_search.scss b/lms/static/sass/discussion/views/_search.scss
index aa836067237a..b19fa5429050 100644
--- a/lms/static/sass/discussion/views/_search.scss
+++ b/lms/static/sass/discussion/views/_search.scss
@@ -17,14 +17,14 @@
     margin-top: 0;
   }
 
-  > label {
-    position: absolute;
-    display: block;
-    color: #495057;
-    transition: all 0.1s ease-in-out;
-    padding-left: 10px;
-    padding-top: 10px;
-  }
+  // > label {
+  //   position: absolute;
+  //   display: block;
+  //   color: #495057;
+  //   transition: all 0.1s ease-in-out;
+  //   padding-left: 10px;
+  //   padding-top: 10px;
+  // }
 
   input::placeholder {
     color: transparent;
diff --git a/lms/static/sass/multicourse/_courses.scss b/lms/static/sass/multicourse/_courses.scss
index 9da6d4b7e164..9a4acf4bf053 100644
--- a/lms/static/sass/multicourse/_courses.scss
+++ b/lms/static/sass/multicourse/_courses.scss
@@ -286,7 +286,7 @@ $facet-background-color: #007db8;
     @include border-radius(3px);
     @include padding-right(55px);
 
-    border: 2px solid $gray-l3;
+    border: none;
     width: 100%;
     height: $course-search-input-height;
     color: $black;
diff --git a/lms/templates/courseware/courses.html b/lms/templates/courseware/courses.html
index db303073676d..1bef30b2d4a4 100644
--- a/lms/templates/courseware/courses.html
+++ b/lms/templates/courseware/courses.html
@@ -1,7 +1,7 @@
 <%page expression_filter="h"/>
 <%!
   import json
-  from django.utils.translation import ugettext as _
+  from django.utils.translation import gettext as _
   from openedx.core.djangolib.js_utils import js_escaped_string, dump_js_escaped_json
 %>
 <%inherit file="../main.html" />
@@ -35,7 +35,7 @@
     <section class="find-courses">
       <section class="courses-container">
         % if course_discovery_enabled:
-        <div id="discovery-form" role="search" aria-label="course" class="wrapper-search-context">
+        <!-- <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>
@@ -50,8 +50,191 @@
               </div>
             </button>
           </form>
+        </div> -->
+
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Filter-Search-Sort Component</title>
+    <!-- Including the 'Inter' font -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
+
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+        }
+
+        .container {
+            display: flex;
+            justify-content: space-between;
+            align-items: left;
+            width: 1320px;
+        }
+
+        /* Filter Box CSS */
+        .buttons {
+            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;
+        }
+
+        .faders {
+            width: 24px;
+            height: 24px;
+        }
+
+        .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: column;
+            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;
+        }
+
+        .magnifier-icon {
+            width: 24px;
+            height: 24px;
+        }
+
+        .search-input {
+            width: auto;
+            height: 24px;
+            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>
+</head>
+
+<body>
+    <div class="container">
+        <!-- Filter Section -->
+        <div class="buttons">
+            <!-- Filter Box with Icon and Count -->
+            <img src="../static/images/filter_icon.png" alt="Filter Icon" class="faders">
+            <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>
 
+        <!-- Search Bar -->
+        <div class="search-container">
+          <div class="search-info" >
+            <!-- Magnifier Icon -->
+              <img src="../static/images/magnifier.png" alt="Search Icon" class="magnifier-icon">
+          </button>                
+          <!-- Search Input -->
+          <!-- <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">
+          <input id="discovery-input" class="search-input" placeholder="Search for a course" />
+        </form>
+        <!-- </div> -->
+        </div>
+        </div>
+
+        <!-- Sort By Dropdown -->
+        <div class="sort-section">
+            <span class="sort-by-label">Sort by:</span>
+            <select class="sort-dropdown">
+                <!-- Add options here -->
+            </select>
+        </div>
+    </div>
+</body>
+
+
         <div id="filter-bar" class="filters hide-phone is-collapsed">
         </div>
         % endif
diff --git a/lms/templates/courseware/courses2.html b/lms/templates/courseware/courses2.html
new file mode 100644
index 000000000000..d385bd9144c4
--- /dev/null
+++ b/lms/templates/courseware/courses2.html
@@ -0,0 +1,260 @@
+<%page expression_filter="h"/>
+<%!
+  import json
+  from django.utils.translation import ugettext as _
+  from openedx.core.djangolib.js_utils import js_escaped_string, dump_js_escaped_json
+%>
+<%inherit file="../main.html" />
+<%
+  course_discovery_enabled = settings.FEATURES.get('ENABLE_COURSE_DISCOVERY')
+%>
+
+<%namespace name='static' file='../static_content.html'/>
+
+% if course_discovery_enabled:
+<%block name="header_extras">
+  % for template_name in ["course_card", "filter_bar", "filter", "facet", "facet_option"]:
+  <script type="text/template" id="${template_name}-tpl">
+      <%static:include path="discovery/${template_name}.underscore" />
+  </script>
+  % endfor
+  <%static:require_module module_name="js/discovery/discovery_factory" class_name="DiscoveryFactory">
+    DiscoveryFactory(
+      ${course_discovery_meanings | n, dump_js_escaped_json},
+      getParameterByName('search_query'),
+      "${user_language | n, js_escaped_string}",
+      "${user_timezone | n, js_escaped_string}"
+    );
+  </%static:require_module>
+</%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 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"/>
+            <!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Filter-Search-Sort Component</title>
+    <!-- Including the 'Inter' font -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
+
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+        }
+
+        .container {
+            display: flex;
+            justify-content: space-between;
+            align-items: left;
+            width: 1320px;
+        }
+
+        /* Filter Box CSS */
+        .buttons {
+            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;
+        }
+
+        .faders {
+            width: 24px;
+            height: 24px;
+        }
+
+        .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: column;
+            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;
+        }
+
+        .magnifier-icon {
+            width: 24px;
+            height: 24px;
+        }
+
+        .search-input {
+            width: auto;
+            height: 24px;
+            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>
+</head>
+
+<body>
+    <div class="container">
+        <!-- Filter Section -->
+        <div class="buttons">
+            <!-- Filter Box with Icon and Count -->
+            <img src="/Users/l/edx-platform/lms/templates/custom_components/filter_icon.png" alt="Filter Icon" class="faders">
+            <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>
+
+        <!-- Search Bar -->
+        <div class="search-container">
+            <div class="search-info">
+                <!-- Magnifier Icon -->
+                <img src="/Users/l/edx-platform/lms/templates/custom_components/magnifier.png" alt="Search Icon" class="magnifier-icon">
+                <!-- Search Input -->
+                <input type="text" class="search-input" placeholder="What do you want to learn...">
+            </div>
+        </div>
+
+        <!-- Sort By Dropdown -->
+        <div class="sort-section">
+            <span class="sort-by-label">Sort by:</span>
+            <select class="sort-dropdown">
+                <!-- Add options here -->
+            </select>
+        </div>
+    </div>
+</body>
+
+</html>
+
+            <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>
+              </div>
+            </button>
+          </form>
+        </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>
+
+
+        % 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>
+</main>
diff --git a/lms/templates/custom_components/filter_icon.png b/lms/templates/custom_components/filter_icon.png
new file mode 100644
index 000000000000..c67379346c00
Binary files /dev/null and b/lms/templates/custom_components/filter_icon.png differ
diff --git a/lms/templates/custom_components/magnifier.png b/lms/templates/custom_components/magnifier.png
new file mode 100644
index 000000000000..b94d6dac45c7
Binary files /dev/null and b/lms/templates/custom_components/magnifier.png differ
diff --git a/lms/templates/custom_components/search_bar_filter.html b/lms/templates/custom_components/search_bar_filter.html
new file mode 100644
index 000000000000..11e42985a593
--- /dev/null
+++ b/lms/templates/custom_components/search_bar_filter.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Filter-Search-Sort Component</title>
+    <!-- Including the 'Inter' font -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
+
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+        }
+
+        .container {
+            display: flex;
+            justify-content: space-between;
+            align-items: left;
+            width: 1320px;
+        }
+
+        /* Filter Box CSS */
+        .buttons {
+            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;
+        }
+
+        .faders {
+            width: 24px;
+            height: 24px;
+        }
+
+        .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: column;
+            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;
+        }
+
+        .magnifier-icon {
+            width: 24px;
+            height: 24px;
+        }
+
+        .search-input {
+            width: auto;
+            height: 24px;
+            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>
+</head>
+
+<body>
+    <div class="container">
+        <!-- Filter Section -->
+        <div class="buttons">
+            <!-- Filter Box with Icon and Count -->
+            <img src="/Users/l/edx-platform/lms/templates/custom_components/filter_icon.png" alt="Filter Icon" class="faders">
+            <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>
+
+        <!-- Search Bar -->
+        <div class="search-container">
+            <div class="search-info">
+                <!-- Magnifier Icon -->
+                <img src="/Users/l/edx-platform/lms/templates/custom_components/magnifier.png" alt="Search Icon" class="magnifier-icon">
+                <!-- Search Input -->
+                <input type="text" class="search-input" placeholder="What do you want to learn...">
+            </div>
+        </div>
+
+        <!-- Sort By Dropdown -->
+        <div class="sort-section">
+            <span class="sort-by-label">Sort by:</span>
+            <select class="sort-dropdown">
+                <!-- Add options here -->
+            </select>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/lms/templates/main.html b/lms/templates/main.html
index ac43e6eba25f..b3ca4d661197 100644
--- a/lms/templates/main.html
+++ b/lms/templates/main.html
@@ -237,6 +237,15 @@
   <script type="text/javascript" src="${js}"></script>
   % endfor
   % endif
+
+<!-- Floated Widget with Google Form -->
+<div style="position:fixed; bottom:10px; right:10px; z-index:1000; width:300px; height:400px;">
+    <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfOBdWHVTgkdrVG4mY_7vcxn4bfoERdoXKLRF97MuuExBvfWg/viewform?embedded=true" 
+            width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0">
+        Loading…
+    </iframe>
+</div>
+
 </body>
 </html>