diff --git a/app/assets/stylesheets/articles.scss b/app/assets/stylesheets/articles.scss
index 4a73a7461..daba07d8d 100644
--- a/app/assets/stylesheets/articles.scss
+++ b/app/assets/stylesheets/articles.scss
@@ -289,10 +289,6 @@
     position: relative;
     @include dev-card;
 
-    &.active {
-      // TODO: what is this .active thingy?
-      opacity: 0.66;
-    }
     &.single-article-small-pic {
       vertical-align: top;
       overflow: hidden;
diff --git a/app/javascript/packs/storiesList.js b/app/javascript/packs/storiesList.js
new file mode 100644
index 000000000..32007f438
--- /dev/null
+++ b/app/javascript/packs/storiesList.js
@@ -0,0 +1,8 @@
+/**
+ * @file A custom event that gets dispatched to notify search forms to synchronize their state.
+ */
+window.dispatchEvent(
+  new CustomEvent('syncSearchForms', {
+    detail: { querystring: location.search },
+  }),
+);
diff --git a/app/views/articles/index.html.erb b/app/views/articles/index.html.erb
index f135a4d92..58ec45bba 100644
--- a/app/views/articles/index.html.erb
+++ b/app/views/articles/index.html.erb
@@ -90,5 +90,5 @@
     <%= render "articles/sidebar_additional" %>
   </div>
 
-  <%= render "stories/stories_list_script" %>
+  <%= javascript_packs_with_chunks_tag "storiesList", defer: true %>
 <% end %>
diff --git a/app/views/articles/search.html.erb b/app/views/articles/search.html.erb
index ddd966843..770fa4de0 100644
--- a/app/views/articles/search.html.erb
+++ b/app/views/articles/search.html.erb
@@ -56,4 +56,4 @@
 </main>
 <%= render "articles/search" %>
 
-<%= render "stories/stories_list_script" %>
+<%= javascript_packs_with_chunks_tag "storiesList", defer: true %>
diff --git a/app/views/organizations/show.html.erb b/app/views/organizations/show.html.erb
index f623ef93a..58ce524b0 100644
--- a/app/views/organizations/show.html.erb
+++ b/app/views/organizations/show.html.erb
@@ -24,4 +24,4 @@
   <%= render "organizations/sidebar_additional" %>
 </div>
 
-<%= render "stories/stories_list_script" %>
+<%= javascript_packs_with_chunks_tag "storiesList", defer: true %>
diff --git a/app/views/podcast_episodes/index.html.erb b/app/views/podcast_episodes/index.html.erb
index 758993bc9..433aff401 100644
--- a/app/views/podcast_episodes/index.html.erb
+++ b/app/views/podcast_episodes/index.html.erb
@@ -32,4 +32,4 @@
   <%= render "podcast_episodes/sidebar_additional" %>
 </div>
 
-<%= render "stories/stories_list_script" %>
+<%= javascript_packs_with_chunks_tag "storiesList", defer: true %>
diff --git a/app/views/podcasts/new.html.erb b/app/views/podcasts/new.html.erb
index 59527ddd0..10177572b 100644
--- a/app/views/podcasts/new.html.erb
+++ b/app/views/podcasts/new.html.erb
@@ -9,4 +9,4 @@
   <%= render "podcast_episodes/sidebar_additional" %>
 </div>
 
-<%= render "stories/stories_list_script" %>
+<%= javascript_packs_with_chunks_tag "storiesList", defer: true %>
diff --git a/app/views/stories/_stories_list_script.html.erb b/app/views/stories/_stories_list_script.html.erb
deleted file mode 100644
index c5c1e9883..000000000
--- a/app/views/stories/_stories_list_script.html.erb
+++ /dev/null
@@ -1,29 +0,0 @@
-<script defer>
-  var isTouchDevice = ('ontouchstart' in window || navigator.maxTouchPoints > 0);
-  if (isTouchDevice) {
-    function hasClass(el, cls) {
-      return el.className && new RegExp("(\\s|^)" + cls + "(\\s|$)").test(el.className);
-    }
-
-    var activeLinks = document.getElementsByClassName('active');
-    Array.prototype.forEach.call(activeLinks, function (el) {
-      el.classList.remove("active");
-    });
-
-    document.getElementById('main-content').addEventListener('click', function (event) {
-      var clickedEl = event.target;
-      if (hasClass(clickedEl, "bm-initial") || hasClass(clickedEl, "bm-success")) {
-        //do nothing
-      } else if (hasClass(clickedEl.parentNode, "crayons-story")) {
-        clickedEl.parentNode.classList.add('active');
-      } else if (hasClass(clickedEl.parentNode.parentNode, "crayons-story")) {
-        clickedEl.parentNode.parentNode.classList.add('active');
-      } else if (hasClass(clickedEl.parentNode.parentNode.parentNode, "crayons-story")) {
-        clickedEl.parentNode.parentNode.parentNode.classList.add('active');
-      }
-    });
-  }
-
-  // A custom event that gets dispatched to notify search forms to synchronize their state.
-  window.dispatchEvent(new CustomEvent('syncSearchForms', { detail: { querystring: location.search } }));
-</script>
diff --git a/app/views/stories/tagged_articles/index.html.erb b/app/views/stories/tagged_articles/index.html.erb
index d0649e07e..db04e1efd 100644
--- a/app/views/stories/tagged_articles/index.html.erb
+++ b/app/views/stories/tagged_articles/index.html.erb
@@ -113,5 +113,5 @@
     <%= render "stories/tagged_articles/sidebar_additional" %>
   </div>
 
-  <%= render "stories/stories_list_script" %>
+  <%= javascript_packs_with_chunks_tag "storiesList", defer: true %>
 <% end %>
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
index aa9097687..970525099 100644
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -158,4 +158,4 @@
   </main>
 </div>
 
-<%= render "stories/stories_list_script" %>
+<%= javascript_packs_with_chunks_tag "storiesList", defer: true %>