diff --git a/assets/controllers/topbar_controller.js b/assets/controllers/topbar_controller.js
new file mode 100644
index 000000000..e200893ad
--- /dev/null
+++ b/assets/controllers/topbar_controller.js
@@ -0,0 +1,31 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ['addUrl', 'addUrlInput', 'search', 'searchInput', 'actions'];
+
+  showAddUrl() {
+    this.actionsTarget.style.display = 'none';
+    this.addUrlTarget.style.display = 'flex';
+    this.searchTarget.style.display = 'none';
+    this.addUrlInputTarget.focus();
+  }
+
+  submittingUrl(e) {
+    e.currentTarget.disabled = true;
+    this.addUrlInputTarget.readOnly = true;
+    this.addUrlInputTarget.blur();
+  }
+
+  showSearch() {
+    this.actionsTarget.style.display = 'none';
+    this.addUrlTarget.style.display = 'none';
+    this.searchTarget.style.display = 'flex';
+    this.searchInputTarget.focus();
+  }
+
+  showActions() {
+    this.actionsTarget.style.display = 'flex';
+    this.addUrlTarget.style.display = 'none';
+    this.searchTarget.style.display = 'none';
+  }
+}
diff --git a/assets/index.js b/assets/index.js
index 089afd604..a7652e4ad 100755
--- a/assets/index.js
+++ b/assets/index.js
@@ -139,38 +139,10 @@ const stickyNav = () => {
 $(document).ready(() => {
   stickyNav();
 
-  const toggleNav = (toShow, toFocus) => {
-    $('.nav-panel-actions').hide();
-    $(toShow).show();
-    $(toFocus).focus();
-  };
-
   $('#nav-btn-add-tag').on('click', () => {
     $('.nav-panel-add-tag').toggle();
     $('.nav-panel-menu').addClass('hidden');
     $('#tag_label').focus();
     return false;
   });
-
-  $('#nav-btn-add').on('click', () => {
-    toggleNav('.nav-panel-add', '#entry_url');
-    return false;
-  });
-
-  const materialAddForm = $('.nav-panel-add');
-  materialAddForm.on('submit', () => {
-    materialAddForm.addClass('disabled');
-    $('input#entry_url', materialAddForm).prop('readonly', true).trigger('blur');
-  });
-
-  $('#nav-btn-search').on('click', () => {
-    toggleNav('.nav-panel-search', '#search_entry_term');
-    return false;
-  });
-
-  $('.close').on('click', (e) => {
-    $(e.target).parent('.nav-panel-item').hide();
-    $('.nav-panel-actions').show();
-    return false;
-  });
 });
diff --git a/templates/Entry/new_form.html.twig b/templates/Entry/new_form.html.twig
index e572d9f50..39741c113 100644
--- a/templates/Entry/new_form.html.twig
+++ b/templates/Entry/new_form.html.twig
@@ -1,4 +1,4 @@
-<form class="input-field nav-panel-item nav-panel-add" style="display: none" name="entry" method="post" action="{{ path('new_entry') }}">
+<form class="input-field nav-panel-item nav-panel-add" style="display: none" name="entry" method="post" action="{{ path('new_entry') }}" data-topbar-target="addUrl" data-action="topbar#submittingUrl">
     {% if form_errors(form) %}
         <span class="black-text">{{ form_errors(form) }}</span>
     {% endif %}
@@ -8,8 +8,8 @@
         <span class="black-text">{{ form_errors(form.url) }}</span>
     {% endif %}
 
-    {{ form_widget(form.url, {'attr': {'autocomplete': 'off', 'placeholder': 'entry.new.placeholder'}}) }}
-    <i class="material-icons close" aria-label="clear" role="button"></i>
+    {{ form_widget(form.url, {'attr': {'autocomplete': 'off', 'placeholder': 'entry.new.placeholder', 'data-topbar-target': 'addUrlInput'}}) }}
+    <i class="material-icons close" aria-label="clear" role="button" data-action="click->topbar#showActions"></i>
 
     {{ form_rest(form) }}
 </form>
diff --git a/templates/Entry/search_form.html.twig b/templates/Entry/search_form.html.twig
index 451a1f8ba..090ae9a8e 100644
--- a/templates/Entry/search_form.html.twig
+++ b/templates/Entry/search_form.html.twig
@@ -1,4 +1,4 @@
-<form class="input-field nav-panel-item nav-panel-search" style="display: none" name="search" method="GET" action="{{ path('search') }}">
+<form class="input-field nav-panel-item nav-panel-search" style="display: none" name="search" method="GET" action="{{ path('search') }}" data-topbar-target="search">
     {% if form_errors(form) %}
         <span class="black-text">{{ form_errors(form) }}</span>
     {% endif %}
@@ -10,8 +10,8 @@
 
     <input type="hidden" name="currentRoute" value="{{ currentRoute }}" />
 
-    {{ form_widget(form.term, {'attr': {'autocomplete': 'off', 'placeholder': 'entry.search.placeholder'}}) }}
-    <i class="material-icons close" aria-label="clear" role="button"></i>
+    {{ form_widget(form.term, {'attr': {'autocomplete': 'off', 'placeholder': 'entry.search.placeholder', 'data-topbar-target': 'searchInput'}}) }}
+    <i class="material-icons close" aria-label="clear" role="button" data-action="click->topbar#showActions"></i>
 
     {{ form_rest(form) }}
 </form>
diff --git a/templates/layout.html.twig b/templates/layout.html.twig
index a0c7b11e7..641bb13e3 100644
--- a/templates/layout.html.twig
+++ b/templates/layout.html.twig
@@ -79,8 +79,8 @@
                 </li>
             {% endif %}
         </ul>
-        <div class="nav-panels">
-            <div class="nav-panel-actions nav-panel-item">
+        <div class="nav-panels" data-controller="topbar">
+            <div class="nav-panel-actions nav-panel-item" data-topbar-target="actions">
                 <div class="nav-panel-top">
                     <a href="#" data-target="slide-out" class="nav-panel-menu sidenav-trigger"><i class="material-icons">menu</i></a>
                     <h1 class="left action">
@@ -90,12 +90,12 @@
                 </div>
                 <ul class="input-field nav-panel-buttom">
                     <li class="bold toggle-add-url-container">
-                        <a class="waves-effect toggle-add-url" data-controller="materialize--tooltip" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.add_new_entry'|trans }}" href="{{ path('new') }}" id="nav-btn-add">
+                        <a class="waves-effect toggle-add-url" data-controller="materialize--tooltip" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.add_new_entry'|trans }}" href="{{ path('new') }}" id="nav-btn-add" data-action="topbar#showAddUrl:prevent:stop">
                             <i class="material-icons">add</i>
                         </a>
                     </li>
                     <li>
-                        <a class="waves-effect" data-controller="materialize--tooltip" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.search'|trans }}" href="javascript: void(null);" id="nav-btn-search">
+                        <a class="waves-effect" data-controller="materialize--tooltip" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.search'|trans }}" href="javascript: void(null);" id="nav-btn-search" data-action="topbar#showSearch:prevent:stop">
                             <i class="material-icons">search</i>
                         </a>
                     </li>