diff --git a/app/javascript/controllers/email_controller.js b/app/javascript/controllers/email_controller.js
new file mode 100644
index 0000000..e03f6d5
--- /dev/null
+++ b/app/javascript/controllers/email_controller.js
@@ -0,0 +1,18 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static targets = [ "buttonMain", "buttonAll", "headersMain", "headersAll" ]
+
+  show_main () {
+    this.buttonMainTarget.classList.add("hidden");
+    this.buttonAllTarget.classList.remove("hidden");
+    this.headersMainTarget.classList.remove("hidden");
+    this.headersAllTarget.classList.add("hidden");
+  }
+  show_all () {
+    this.buttonMainTarget.classList.remove("hidden");
+    this.buttonAllTarget.classList.add("hidden");
+    this.headersMainTarget.classList.add("hidden");
+    this.headersAllTarget.classList.remove("hidden");
+  }
+}
diff --git a/app/views/emails/_email.html.erb b/app/views/emails/_email.html.erb
index d863ce0..24deb67 100644
--- a/app/views/emails/_email.html.erb
+++ b/app/views/emails/_email.html.erb
@@ -1,6 +1,9 @@
-<div id="<%= dom_id email %>" class="email_container">
+<div id="<%= dom_id email %>" class="email_container" data-controller="email">
+  <button data-email-target="buttonAll" data-action="email#show_all">Show all headers</button>
+  <button data-email-target="buttonMain" data-action="email#show_main" class="hidden">Show main headers only</button>
+
   <table class="email_content">
-    <thead class="email_main_headers">
+    <thead class="email_main_headers" data-email-target="headersMain">
       <tr>
         <th>Date</th>
         <td><%= email.date %></td>
@@ -58,7 +61,7 @@
         </td>
       </tr>
     </thead>
-    <thead class="email_additional_headers">
+    <thead class="email_additional_headers hidden" data-email-target="headersAll">
       <% email.headers.each do |header| %>
         <tr>
           <th><%= header["name"] %></th>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 70fc5be..b615aff 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -23,8 +23,8 @@
               <div class="hidden md:block">
                 <div class="ml-10 flex items-baseline space-x-4">
                   <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
-                  <%= link_to "Emails", emails_path, class: (current_page?(emails_path) ? "nav-tab--current" : "nav-tab") %>
-                  <%= link_to "Filters", filters_path, class: (current_page?(filters_path) ? "nav-tab--current" : "nav-tab") %>
+                  <%= link_to "Emails", emails_path, class: (controller_name == "emails" ? "nav-tab--current" : "nav-tab") %>
+                  <%= link_to "Filters", filters_path, class: (controller_name == "filters" ? "nav-tab--current" : "nav-tab") %>
                 </div>
               </div>
             </div>
@@ -88,8 +88,8 @@
         <div data-main-nav-target="userMenu" class="hidden md:hidden">
           <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
             <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-whites" -->
-            <%= link_to "Emails", emails_path, class: (current_page?(emails_path) ? "nav-tab--current" : "nav-tab") %>
-            <%= link_to "Filters", filters_path, class: (current_page?(filters_path) ? "nav-tab--current" : "nav-tab") %>
+            <%= link_to "Emails", emails_path, class: (controller_name == "emails" ? "nav-tab--current" : "nav-tab") %>
+            <%= link_to "Filters", filters_path, class: (controller_name == "filters" ? "nav-tab--current" : "nav-tab") %>
           </div>
           <div class="pt-4 pb-3 border-t border-gray-700">
             <div class="flex items-center px-5">