diff --git a/app/assets/javascripts/initializers/initializeDrawerSliders.js b/app/assets/javascripts/initializers/initializeDrawerSliders.js
index 734876c55..46022d7ba 100644
--- a/app/assets/javascripts/initializers/initializeDrawerSliders.js
+++ b/app/assets/javascripts/initializers/initializeDrawerSliders.js
@@ -1,57 +1,72 @@
-function initializeDrawerSliders() {
-  if(!initializeSwipeGestures.called) {
-    swipeState = "middle";
-    initializeSwipeGestures();
-  }
-  if (document.getElementById("on-page-nav-controls")){
-    if (document.getElementById("sidebar-bg-left")){
-      document.getElementById("sidebar-bg-left").onclick = function(){
-        swipeState = "middle";
-        slideSidebar("left","outOfView");
-      }
-    }
-    if (document.getElementById("sidebar-bg-right")){
-      document.getElementById("sidebar-bg-right").onclick = function(){
-        swipeState = "middle";
-        slideSidebar("right","outOfView");
-      }
-    }
+/* global swipeState InstantClick initializeSwipeGestures slideSidebar */
 
-    if (document.getElementById("on-page-nav-butt-left")){
-      document.getElementById("on-page-nav-butt-left").onclick = function(){
-        swipeState = "left"
-        slideSidebar("left","intoView");
-      }
-    }
-    if (document.getElementById("on-page-nav-butt-right")){
-      document.getElementById("on-page-nav-butt-right").onclick = function(){
-        swipeState = "right"
-        slideSidebar("right","intoView");
-      }
-    }
-    InstantClick.on('change', function() {
-      document.getElementsByTagName('body')[0].classList.remove('modal-open');
-      slideSidebar("right","outOfView");
-      slideSidebar("left","outOfView");
-    });
-    listenForNarrowMenuClick();
+function listenForNarrowMenuClick(event) {
+  let navLinks = document.getElementsByClassName('narrow-nav-menu');
+  let narrowFeedButt = document.getElementById('narrow-feed-butt');
+
+  for (let i = 0; i < navLinks.length; i++) {
+    document.getElementById('narrow-nav-menu').classList.remove('showing');
+  }
+  if (narrowFeedButt) {
+    narrowFeedButt.onclick = (_event) => {
+      document.getElementById('narrow-nav-menu').classList.add('showing');
+    };
+  }
+  for (let i = 0; i < navLinks.length; i++) {
+    navLinks[i].onclick = (_event) => {
+      document.getElementById('narrow-nav-menu').classList.remove('showing');
+    };
   }
 }
 
-function listenForNarrowMenuClick(event) {
-  var navLinks = document.getElementsByClassName("narrow-nav-menu");
-  var narrowFeedButt = document.getElementById("narrow-feed-butt");
-  for (var i = 0; i < navLinks.length; i++) {
-    document.getElementById("narrow-nav-menu").classList.remove("showing");
+function initializeDrawerSliders() {
+  if (!initializeSwipeGestures.called) {
+    swipeState = 'middle'; // eslint-disable-line no-global-assign
+    initializeSwipeGestures();
   }
-  if (narrowFeedButt) {
-    narrowFeedButt.onclick = function(){
-      document.getElementById("narrow-nav-menu").classList.add("showing");
+  if (document.getElementById('on-page-nav-controls')) {
+    if (document.getElementById('sidebar-bg-left')) {
+      document.getElementById('sidebar-bg-left').onclick = (_event) => {
+        swipeState = 'middle'; // eslint-disable-line no-global-assign
+        slideSidebar('left', 'outOfView');
+      };
     }
-  }
-  for (var i = 0; i < navLinks.length; i++) {
-    navLinks[i].onclick = function(event){
-      document.getElementById("narrow-nav-menu").classList.remove("showing");
+    if (document.getElementById('sidebar-bg-right')) {
+      document.getElementById('sidebar-bg-right').onclick = (_event) => {
+        swipeState = 'middle'; // eslint-disable-line no-global-assign
+        slideSidebar('right', 'outOfView');
+      };
     }
+
+    if (document.getElementById('on-page-nav-butt-left')) {
+      document.getElementById('on-page-nav-butt-left').onclick = (_event) => {
+        swipeState = 'left'; // eslint-disable-line no-global-assign
+        slideSidebar('left', 'intoView');
+      };
+    }
+    if (document.getElementById('on-page-nav-butt-right')) {
+      document.getElementById('on-page-nav-butt-right').onclick = (_event) => {
+        swipeState = 'right'; // eslint-disable-line no-global-assign
+        slideSidebar('right', 'intoView');
+      };
+    }
+    InstantClick.on('change', (_event) => {
+      document.getElementsByTagName('body')[0].classList.remove('modal-open');
+      slideSidebar('right', 'outOfView');
+      slideSidebar('left', 'outOfView');
+    });
+
+    listenForNarrowMenuClick();
   }
-}
\ No newline at end of file
+
+  const feedFilterSelect = document.getElementById('feed-filter-select');
+
+  if (feedFilterSelect) {
+    feedFilterSelect.addEventListener('change', (event) => {
+      const url = event.target.value;
+
+      InstantClick.preload(url);
+      InstantClick.display(url);
+    });
+  }
+}
diff --git a/app/assets/stylesheets/components/forms.scss b/app/assets/stylesheets/components/forms.scss
index 626c2b3fd..32ea67f04 100644
--- a/app/assets/stylesheets/components/forms.scss
+++ b/app/assets/stylesheets/components/forms.scss
@@ -122,7 +122,7 @@
   position: relative;
   outline: none;
   @extend %form-styling;
-  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 16l-6-6h12l-6 6z' fill='%2308090A'/%3E%3C/svg%3E");
+  background-image: var(--select-icon);
   background-position: calc(100% - var(--su-2)) calc(50% - 1px);
   background-repeat: no-repeat;
 
diff --git a/app/assets/stylesheets/components/tabs.scss b/app/assets/stylesheets/components/tabs.scss
index a53ddd497..241d9d86c 100644
--- a/app/assets/stylesheets/components/tabs.scss
+++ b/app/assets/stylesheets/components/tabs.scss
@@ -22,7 +22,6 @@
     padding: var(--tab-vertical-padding) var(--tab-horizontal-padding);
     display: inline-block;
     text-align: center;
-    outline: none;
     font-size: var(--font-size);
     line-height: var(--su-6);
     text-decoration: none;
diff --git a/app/assets/stylesheets/config/_colors.scss b/app/assets/stylesheets/config/_colors.scss
index 3dcf8dead..0501bf8b8 100644
--- a/app/assets/stylesheets/config/_colors.scss
+++ b/app/assets/stylesheets/config/_colors.scss
@@ -202,7 +202,7 @@
   --tab-muted-bg-hover: var(--base-a10);
   --tab-muted-bg-current: var(--base-20);
   --tab-pill-color-current: var(--base-inverted);
-  
+
   // Tags
   --tag-color: var(--base-70);
   --tag-color-hover: var(--base-100);
@@ -210,4 +210,7 @@
   // Story
   --story-comments-bg: var(--base-0);
   --story-border: transparent;
+
+  // Select icon
+  --select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjMDgwOTBBIi8+Cjwvc3ZnPg==);
 }
diff --git a/app/assets/stylesheets/themes/hacker.scss b/app/assets/stylesheets/themes/hacker.scss
index 98c80c103..478c174ae 100644
--- a/app/assets/stylesheets/themes/hacker.scss
+++ b/app/assets/stylesheets/themes/hacker.scss
@@ -192,7 +192,7 @@
   --tab-muted-bg-hover: var(--base-a10);
   --tab-muted-bg-current: var(--base-20);
   --tab-pill-color-current: var(--base-inverted);
-  
+
   // Tags
   --tag-color: var(--base-70);
   --tag-color-hover: var(--base-100);
@@ -200,4 +200,7 @@
   // Story
   --story-comments-bg: #0d0d0d;
   --story-border: rgba(255, 255, 255, 0.2);
+
+  // Select icon
+  --select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjMkVGRjdCIi8+Cjwvc3ZnPg==);
 }
diff --git a/app/assets/stylesheets/themes/minimal.scss b/app/assets/stylesheets/themes/minimal.scss
index 7fe73e5f5..a0fe7109f 100644
--- a/app/assets/stylesheets/themes/minimal.scss
+++ b/app/assets/stylesheets/themes/minimal.scss
@@ -190,7 +190,7 @@
   --tab-muted-bg-hover: var(--base-a10);
   --tab-muted-bg-current: var(--base-20);
   --tab-pill-color-current: var(--base-inverted);
-  
+
   // Tags
   --tag-color: var(--base-70);
   --tag-color-hover: var(--base-100);
@@ -198,4 +198,7 @@
   // Story
   --story-comments-bg: #fafafa; //hotfix
   --story-border: transparent;
+
+  // Select icon
+  --select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjN2E3YTdhIi8+Cjwvc3ZnPg==);
 }
diff --git a/app/assets/stylesheets/themes/night.scss b/app/assets/stylesheets/themes/night.scss
index 043c6338d..45380c78a 100644
--- a/app/assets/stylesheets/themes/night.scss
+++ b/app/assets/stylesheets/themes/night.scss
@@ -192,7 +192,7 @@
   --tab-muted-bg-hover: var(--base-a10);
   --tab-muted-bg-current: var(--base-20);
   --tab-pill-color-current: var(--base-inverted);
-  
+
   // Tags
   --tag-color: var(--base-70);
   --tag-color-hover: var(--base-100);
@@ -200,4 +200,7 @@
   // Story
   --story-comments-bg: #151e2a; //hotfix
   --story-border: rgba(255, 255, 255, 0.15);
+
+  // Select icon
+  --select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjYzJjNmNhIi8+Cjwvc3ZnPg==);
 }
diff --git a/app/assets/stylesheets/themes/pink.scss b/app/assets/stylesheets/themes/pink.scss
index e147f766f..326b1cea5 100644
--- a/app/assets/stylesheets/themes/pink.scss
+++ b/app/assets/stylesheets/themes/pink.scss
@@ -190,7 +190,7 @@
   --tab-muted-bg-hover: var(--base-a10);
   --tab-muted-bg-current: var(--base-20);
   --tab-pill-color-current: var(--base-inverted);
-  
+
   // Tags
   --tag-color: var(--base-70);
   --tag-color-hover: var(--base-100);
@@ -198,4 +198,7 @@
   // Story
   --story-comments-bg: rgba(255, 255, 255, 0.05);
   --story-border: var(--accent-brand);
+
+  // Select icon
+  --select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjNTcxOTJkIi8+Cjwvc3ZnPg==);
 }
diff --git a/app/views/articles/index.html.erb b/app/views/articles/index.html.erb
index b6d26696f..78d15e3fb 100644
--- a/app/views/articles/index.html.erb
+++ b/app/views/articles/index.html.erb
@@ -35,58 +35,40 @@
 
     <%= render "articles/sidebar" %>
 
-    <%# BEGIN Feed menu bar %>
     <div class="articles-list" id="articles-list">
       <%= render(partial: "onboardings/task_card") if user_signed_in? %>
 
-      <div class="on-page-nav-controls" id="on-page-nav-controls">
-        <div class="on-page-nav-label">
-          <div class="wide-nav-links">
-            <a class="nav-chronofiter-link <%= "selected" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>" href="<%= list_path %>/">
-              FEED
-            </a>
-            <span class="separator"></span>
-            <a class="nav-chronofiter-link <%= "selected" if timeframe_check("week") %>" href="<%= list_path %>/top/week">
-              WEEK
-            </a>
-            <a class="nav-chronofiter-link <%= "selected" if timeframe_check("month") %>" href="<%= list_path %>/top/month">
-              MONTH
-            </a>
-            <a class="nav-chronofiter-link <%= "selected" if timeframe_check("year") %>" href="<%= list_path %>/top/year">
-              YEAR
-            </a>
-            <a class="nav-chronofiter-link <%= "selected" if timeframe_check("infinity") %>" href="<%= list_path %>/top/infinity">
-              INFINITY
-            </a>
-            <span class="separator"></span>
-            <a class="nav-chronofiter-link <%= "selected" if timeframe_check("latest") %>" href="<%= list_path %>/latest">
-              LATEST
-            </a>
-          </div>
-          <div class="narrow-nav-select" aria-label="feed-filter-select">
-            <% if ["week", "month", "year", "infinity", "latest"].exclude?(params[:timeframe]) %>
-              <button type="button" id="narrow-feed-butt">&lt;MY <%= community_name %> FEED&gt;</button>
-            <% elsif timeframe_check('week') %>
-              <button type="button" id="narrow-feed-butt">&lt;PAST WEEK&gt;</button>
-            <% elsif timeframe_check('month') %>
-              <button type="button" id="narrow-feed-butt">&lt;PAST MONTH&gt;</button>
-            <% elsif timeframe_check('year') %>
-              <button type="button" id="narrow-feed-butt">&lt;PAST YEAR&gt;</button>
-            <% elsif timeframe_check('infinity') %>
-              <button type="button" id="narrow-feed-butt">&lt;INFINITY&gt;</button>
-            <% elsif timeframe_check('latest') %>
-              <button type="button" id="narrow-feed-butt">&lt;LATEST&gt;</button>
-            <% end %>
-          </div>
+      <header class="flex items-center p-2 m:p-0 m:pb-2" id="on-page-nav-controls">
+        <button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon mr-2 inline-block l:hidden" id="on-page-nav-butt-left" aria-label="nav-button-left">
+          <%= inline_svg_tag("stack.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Left sidebar") %>
+        </button>
+        <div class="flex-1 flex items-center justify-between">
+          <h2 class="fs-l fw-heavy">Posts</h2>
+          <nav class="crayons-tabs hidden s:flex">
+            <a href="<%= list_path %>/" class="crayons-tabs__item <%= "crayons-tabs__item--current" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>">Feed</a>
+
+            <a href="<%= list_path %>/top/week" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("week") %>">Week</a>
+            <a href="<%= list_path %>/top/month" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("month") %>">Month</a>
+            <a href="<%= list_path %>/top/year" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("year") %>">Year</a>
+            <a href="<%= list_path %>/top/infinity" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("infinity") %>">Infinity</a>
+
+            <a href="<%= list_path %>/latest" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("latest") %>">Latest</a>
+          </nav>
+
+          <select class="crayons-select s:hidden ml-2 s:ml-auto w-auto" id="feed-filter-select" aria-label="feed-filter-select">
+            <option value="<%= list_path %>/" <% if ["week", "month", "year", "infinity", "latest"].exclude?(params[:timeframe]) %> selected<% end %>>Feed</option>
+            <option value="<%= list_path %>/top/week" <% if timeframe_check("week") %> selected<% end %>>Week</option>
+            <option value="<%= list_path %>/top/month" <% if timeframe_check("month") %> selected<% end %>>Month</option>
+            <option value="<%= list_path %>/top/year" <% if timeframe_check("year") %> selected<% end %>>Year</option>
+            <option value="<%= list_path %>/top/infinity" <% if timeframe_check("infinity") %> selected<% end %>>Infinity</option>
+            <option value="<%= list_path %>/latest" <% if timeframe_check("latest") %> selected<% end %>>Latest</option>
+          </select>
         </div>
-        <button type="button" class="on-page-nav-butt on-page-nav-butt-left" id="on-page-nav-butt-left" aria-label="nav-button-left">
-          <img src="<%= asset_path "stack.svg" %>" alt="left-sidebar-nav">
+
+        <button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon ml-2 inline-block l:hidden" id="on-page-nav-butt-right" aria-label="nav-button-right">
+          <%= inline_svg_tag("lightning.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Right sidebar") %>
         </button>
-        <button type="button" class="on-page-nav-butt on-page-nav-butt-right" id="on-page-nav-butt-right" aria-label="nav-button-right">
-          <img src="<%= asset_path "lightning.svg" %>" alt="right-sidebar-nav">
-        </button>
-      </div>
-      <%# END Feed menu bar %>
+      </header>
 
       <% if user_signed_in? %>
         <div id="homepage-feed"></div>