diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 7778b4aab3d..3b66006e26a 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -1446,3 +1446,25 @@ pre.light-well {
     }
   }
 }
+
+.project-filters {
+  .button-filter-group {
+    .btn {
+      width: 96px;
+    }
+
+    a {
+      color: $black;
+    }
+
+    .active {
+      background: $btn-active-gray;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    .dropdown-menu-toggle {
+      width: 100%;
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/views/dashboard/_projects_head.html.haml b/app/views/dashboard/_projects_head.html.haml
index ca2822e2b29..bb14b33079d 100644
--- a/app/views/dashboard/_projects_head.html.haml
+++ b/app/views/dashboard/_projects_head.html.haml
@@ -23,7 +23,10 @@
     = nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path]) do
       = link_to explore_root_path, data: {placement: 'right'} do
         Explore projects
-
-  .nav-controls
-    = render 'shared/projects/search_form'
-    = render 'shared/projects/dropdown'
+  - unless Feature.enabled?(:project_list_filter_bar)
+    .nav-controls
+      = render 'shared/projects/search_form'
+      = render 'shared/projects/dropdown'
+- if Feature.enabled?(:project_list_filter_bar)
+  .project-filters
+    = render 'shared/projects/search_bar'
diff --git a/app/views/dashboard/projects/_nav.html.haml b/app/views/dashboard/projects/_nav.html.haml
index da3cf5807b0..2aff1f1f3a3 100644
--- a/app/views/dashboard/projects/_nav.html.haml
+++ b/app/views/dashboard/projects/_nav.html.haml
@@ -1,6 +1,13 @@
 .nav-block
-  %ul.nav-links.mobile-separator.nav.nav-tabs
-    = nav_link(html_options: { class: ("active" unless params[:personal].present?) }) do
-      = link_to s_('DashboardProjects|All'), dashboard_projects_path
-    = nav_link(html_options: { class: ("active" if params[:personal].present?) }) do
-      = link_to s_('DashboardProjects|Personal'), filter_projects_path(personal: true)
+  - if !Feature.enabled?(:project_list_filter_bar)
+    %ul.nav-links.mobile-separator.nav.nav-tabs
+      = nav_link(html_options: { class: ("active" unless params[:personal].present?) }) do
+        = link_to s_('DashboardProjects|All'), dashboard_projects_path
+      = nav_link(html_options: { class: ("active" if params[:personal].present?) }) do
+        = link_to s_('DashboardProjects|Personal'), filter_projects_path(personal: true)
+  - else
+    %ul.btn-group.button-filter-group.d-flex.m-0.p-0
+      = nav_link(html_options: { class: params[:personal].present? ? "btn p-2" : "btn p-2 active" }) do
+        = link_to s_('DashboardProjects|All'), dashboard_projects_path
+      = nav_link(html_options: { class: params[:personal].present? ? "btn p-2 active" : "btn p-2" }) do
+        = link_to s_('DashboardProjects|Personal'), filter_projects_path(personal: true)
diff --git a/app/views/dashboard/projects/index.html.haml b/app/views/dashboard/projects/index.html.haml
index dc9468b3368..9d0a4219446 100644
--- a/app/views/dashboard/projects/index.html.haml
+++ b/app/views/dashboard/projects/index.html.haml
@@ -13,7 +13,8 @@
   = render "projects/last_push"
   - if show_projects?(@projects, params)
     = render 'dashboard/projects_head'
-    = render 'nav'
+    - unless Feature.enabled?(:project_list_filter_bar)
+      = render 'nav'
     = render 'projects'
   - else
     = render "zero_authorized_projects"
diff --git a/app/views/explore/projects/_filter.html.haml b/app/views/explore/projects/_filter.html.haml
index f518205f14c..5e321956f6e 100644
--- a/app/views/explore/projects/_filter.html.haml
+++ b/app/views/explore/projects/_filter.html.haml
@@ -1,8 +1,10 @@
+- has_label = local_assigns[:has_label] ? local_assigns[:has_label] : false
 - if current_user
   .dropdown
     %button.dropdown-menu-toggle{ href: '#', "data-toggle" => "dropdown", 'data-display' => 'static' }
-      = icon('globe', class: 'mt-1')
-      %span.light.ml-3= _("Visibility:")
+      - if !has_label
+        = icon('globe', class: 'mt-1')
+        %span.light.ml-3= _("Visibility:")
       - if params[:visibility_level].present?
         = visibility_level_label(params[:visibility_level].to_i)
       - else
diff --git a/app/views/explore/projects/_nav.html.haml b/app/views/explore/projects/_nav.html.haml
index bf65c19b720..e4e8d4fc008 100644
--- a/app/views/explore/projects/_nav.html.haml
+++ b/app/views/explore/projects/_nav.html.haml
@@ -11,7 +11,10 @@
         = _('All')
 
   .nav-controls
+    -# TODO: filters are currently only shown when logged out, I assume we want to show them all the time?
     - unless current_user
       = render 'shared/projects/search_form'
       = render 'shared/projects/dropdown'
-    = render 'filter'
+    - unless Feature.enabled?(:project_list_filter_bar)
+      = render 'filter'
+
diff --git a/app/views/shared/projects/_search_bar.html.haml b/app/views/shared/projects/_search_bar.html.haml
new file mode 100644
index 00000000000..b05bbdeebc8
--- /dev/null
+++ b/app/views/shared/projects/_search_bar.html.haml
@@ -0,0 +1,26 @@
+- @sort ||= sort_value_latest_activity
+-# TODO: simplify multiple utility classes into single class?
+.filtered-search-block.row-content-block
+  .filtered-search-wrapper.d-flex.flex-column.flex-md-row.mt-2.mt-md-0
+    .d-inline.d-md-flex.mb-2.mb-md-0
+      = render 'dashboard/projects/nav'
+    .filtered-search-box.mb-2.mb-md-0.ml-md-2
+      .filtered-search-box-input-container.pl-2
+        = render 'shared/projects/search_form', admin_view: false, search_form_placeholder: _("Search projects...")
+      -# TODO: double check if theres a point to this button, or is it just aesthetic for now
+      -# TODO: fix right hand border
+      %button.input-group-append.btn.btn-secondary{ type: 'submit' }
+        = sprite_icon('search', size: 18, css_class: 'search-icon ')
+    -# TODO: need to double check visibility is applying correctly
+    .d-inline.d-md-flex.mb-2.mb-md-0.ml-md-2.flex-row
+      .d-flex.align-items-center.px-2.font-weight-bold
+        %span
+          = _("Visibility")
+      .dropdown.js-project-filter-dropdown-wrap.inline-md
+        = render 'explore/projects/filter', has_label: true
+    .d-inline.d-md-flex.mb-2.mb-md-0.ml-md-2.flex-row
+      .d-flex.align-items-center.px-2.font-weight-bold
+        %span
+          = _("Sort by")
+      = render 'shared/projects/dropdown'
+
diff --git a/app/views/shared/projects/_search_form.html.haml b/app/views/shared/projects/_search_form.html.haml
index 3b5c13ed93a..f563a8aeffa 100644
--- a/app/views/shared/projects/_search_form.html.haml
+++ b/app/views/shared/projects/_search_form.html.haml
@@ -1,7 +1,10 @@
+- form_field_classes = local_assigns[:admin_view] ? 'input-short' : ''
+- placeholder = local_assigns[:search_form_placeholder] ? search_form_placeholder : 'Filter by name...'
+
 = form_tag filter_projects_path, method: :get, class: 'project-filter-form', id: 'project-filter-form' do |f|
   = search_field_tag :name, params[:name],
-    placeholder: 'Filter by name...',
-    class: 'project-filter-form-field form-control input-short js-projects-list-filter',
+    placeholder: placeholder,
+    class: "project-filter-form-field form-control js-projects-list-filter #{form_field_classes}",
     spellcheck: false,
     id: 'project-filter-form-field',
     tabindex: "2",