diff --git a/client/src/components/base_async_select.rs b/client/src/components/base_async_select.rs
index 68fb518..06030e5 100644
--- a/client/src/components/base_async_select.rs
+++ b/client/src/components/base_async_select.rs
@@ -66,20 +66,20 @@ where
     let input2 = input.clone();
 
     view! {
-        input (bind:value=input, class="p-2 w-full rounded-md bg-slate-200 dark:bg-slate-700", on:blur=hide_dropdown) {}
+        input (bind:value=input, class="p-2 w-full rounded-md bg-slate-300 dark:bg-slate-800", on:blur=hide_dropdown) {}
         div (class="relative") {
             (
                 cloned!((visible, item_list, input2, selected_item, selected) => {
                     if *visible.get() {
                         view! {
-                            div (class="absolute -top-1 w-80 rounded-b-md dark:bg-slate-700 bg-slate-200") {
+                            div (class="absolute -top-1 w-80 rounded-b-md dark:bg-slate-800 bg-slate-300") {
                                 ul {
                                     Indexed(IndexedProps {
                                         iterable: item_list.handle(),
                                         template: move |x| {
                                             view! {
                                                 li (
-                                                    class="w-full p-2 cursor-pointer dark:hover:bg-slate-800 hover:bg-slate-300",
+                                                    class="w-full p-2 cursor-pointer dark:hover:bg-slate-900 hover:bg-slate-400",
                                                     on:mousedown=cloned!(
                                                         (x, input2, selected_item, visible, selected) => move |_| {
                                                             selected.set(true);
diff --git a/client/src/components/base_button.rs b/client/src/components/base_button.rs
index 68a267a..59764ea 100644
--- a/client/src/components/base_button.rs
+++ b/client/src/components/base_button.rs
@@ -19,7 +19,7 @@ pub fn create_component(
 
     view! {
         button (
-            class="my-2 z-0 p-2 bg-slate-300 dark:bg-slate-700 hover:bg-slate-400 dark:hover:bg-slate-800 disabled:cursor-not-allowed hover:cursor-pointer rounded-md ",
+            class="my-2 z-0 p-2 bg-slate-300 dark:bg-slate-800 hover:bg-slate-400 dark:hover:bg-slate-900 disabled:cursor-not-allowed hover:cursor-pointer rounded-md ",
             disabled=*disabled.get(),
             on:click=click_event,
             ) {
diff --git a/client/src/components/paginated_data_table.rs b/client/src/components/paginated_data_table.rs
index 5ad4b91..d5193c9 100644
--- a/client/src/components/paginated_data_table.rs
+++ b/client/src/components/paginated_data_table.rs
@@ -89,7 +89,7 @@ where
                      p (class="text-right") { (format!("{} transactions", n_rows.get())) }
                      div (class="flex flex-row justify-between") {
                          select (bind:value=page_size_string,
-                                 class="p-2 justify-end text-slate-700 dark:text-slate-100 bg-slate-100 dark:bg-slate-800 rounded-md",
+                                 class="p-2 justify-end text-slate-700 dark:text-slate-100 bg-slate-200 dark:bg-slate-800 rounded-md",
                                  id="size-select",
                                  ) {
                              option (value="20") { "20" }
diff --git a/client/src/templates/index.rs b/client/src/templates/index.rs
index 0700770..9013df5 100644
--- a/client/src/templates/index.rs
+++ b/client/src/templates/index.rs
@@ -24,6 +24,20 @@ pub fn index_page(IndexPageStateRx { req }: IndexPageStateRx, global_state: AppS
     let dark_mode_2 = dark_mode.clone();
     let dark_mode_3 = dark_mode.clone();
 
+    let expand = Signal::new(false);
+    let filter_expand = BaseButtonStateRx {
+        label: Signal::new("Filters".to_string()).handle(),
+        disabled: Signal::new(false).handle(),
+        clicked: Signal::new(false),
+    };
+
+    create_effect(cloned!((filter_expand, expand) => move || {
+        if *filter_expand.clicked.get() {
+            filter_expand.clicked.set(false);
+            expand.set(!*expand.get());
+        }
+    }));
+
     let toggle_dark_mode = cloned!(() => move |_| dark_mode_2.set(!*dark_mode.get()));
 
     let paginated_table_state: PaginatedTableStateRx<TransactionCompany> = PaginatedTableStateRx {
@@ -46,6 +60,7 @@ pub fn index_page(IndexPageStateRx { req }: IndexPageStateRx, global_state: AppS
 
     create_effect(cloned!((search_button) => move || {
         if *search_button.clicked.get() {
+            search_button.clicked.set(false);
             navigate(&format!("/index/{}", (*async_select_prop2.selected_item.get()).clone().map_or("".to_string(), |c| c.slug)));
         }
     }));
@@ -76,10 +91,16 @@ pub fn index_page(IndexPageStateRx { req }: IndexPageStateRx, global_state: AppS
                                 "Insider Transactions published by the AMF"
                             }
                         }
-                        div (class="w-80") {
-                            p () {"Search for a company:"}
-                            BaseAsyncSelect(async_select_prop)
-                            BaseButton(search_button)
+                        BaseButton(filter_expand)
+                            div () {} // Without this useless div, the code doesn't run in the browser
+                        div (class=format!("p-2 border rounded-lg border-slate-200 dark:border-slate-800 bg-slate-200 dark:bg-slate-700 transition-all ease-in {}",
+                                           (*expand.get()).then_some("h-40 visible").unwrap_or("h-0 collapse"),
+                                           )) {
+                            div (class="w-80") {
+                                p () {"Search for a company:"}
+                                BaseAsyncSelect(async_select_prop)
+                                    BaseButton(search_button)
+                            }
                         }
                         PaginatedTable(paginated_table_state)
                     }
diff --git a/client/static/tailwind.css b/client/static/tailwind.css
index 3481188..6b8bbf1 100644
--- a/client/static/tailwind.css
+++ b/client/static/tailwind.css
@@ -517,8 +517,8 @@ video {
   visibility: visible;
 }
 
-.\!visible {
-  visibility: visible !important;
+.collapse {
+  visibility: collapse;
 }
 
 .static {
@@ -557,26 +557,21 @@ video {
   margin: 2.5rem;
 }
 
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }
 
-.my-10 {
-  margin-top: 2.5rem;
-  margin-bottom: 2.5rem;
-}
-
 .mb-20 {
   margin-bottom: 5rem;
 }
@@ -585,10 +580,6 @@ video {
   margin-right: 2.5rem;
 }
 
-.inline {
-  display: inline;
-}
-
 .flex {
   display: flex;
 }
@@ -609,26 +600,34 @@ video {
   height: 3rem;
 }
 
-.h-2 {
-  height: 0.5rem;
+.h-40 {
+  height: 10rem;
 }
 
-.w-full {
-  width: 100%;
+.h-0 {
+  height: 0px;
 }
 
-.w-4\/5 {
-  width: 80%;
+.h-auto {
+  height: auto;
+}
+
+.h-\[320\] {
+  height: 320;
 }
 
-.w-10 {
-  width: 2.5rem;
+.w-full {
+  width: 100%;
 }
 
 .w-80 {
   width: 20rem;
 }
 
+.w-4\/5 {
+  width: 80%;
+}
+
 .table-auto {
   table-layout: auto;
 }
@@ -665,14 +664,14 @@ video {
   justify-content: space-between;
 }
 
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-
 .rounded-md {
   border-radius: 0.375rem;
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .rounded-full {
   border-radius: 9999px;
 }
@@ -704,11 +703,21 @@ video {
   border-color: rgb(100 116 139 / var(--tw-border-opacity));
 }
 
+.border-slate-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(226 232 240 / var(--tw-border-opacity));
+}
+
 .bg-slate-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(226 232 240 / var(--tw-bg-opacity));
 }
 
+.bg-slate-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(203 213 225 / var(--tw-bg-opacity));
+}
+
 .bg-slate-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(241 245 249 / var(--tw-bg-opacity));
@@ -724,9 +733,9 @@ video {
   background-color: rgb(251 207 232 / var(--tw-bg-opacity));
 }
 
-.bg-slate-300 {
+.bg-slate-700 {
   --tw-bg-opacity: 1;
-  background-color: rgb(203 213 225 / var(--tw-bg-opacity));
+  background-color: rgb(51 65 85 / var(--tw-bg-opacity));
 }
 
 .p-2 {
@@ -802,6 +811,16 @@ video {
           backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.ease-in {
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+
 .hover\:cursor-pointer:hover {
   cursor: pointer;
 }
@@ -833,18 +852,14 @@ video {
   cursor: not-allowed;
 }
 
-.disabled\:bg-slate-200:disabled {
-  --tw-bg-opacity: 1;
-  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
-}
-
-.disabled\:text-red-500:disabled {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
+.dark .dark\:border-slate-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(30 41 59 / var(--tw-border-opacity));
 }
 
-.disabled\:opacity-50:disabled {
-  opacity: 0.5;
+.dark .dark\:bg-slate-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 65 85 / var(--tw-bg-opacity));
 }
 
 .dark .dark\:bg-slate-800 {
@@ -861,11 +876,6 @@ video {
   background-color: rgb(219 39 119 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-slate-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(51 65 85 / var(--tw-bg-opacity));
-}
-
 .dark .dark\:bg-slate-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(71 85 105 / var(--tw-bg-opacity));
@@ -886,9 +896,9 @@ video {
   background-color: rgb(30 41 59 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:hover\:bg-slate-300:hover {
+.dark .dark\:hover\:bg-slate-900:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(203 213 225 / var(--tw-bg-opacity));
+  background-color: rgb(15 23 42 / var(--tw-bg-opacity));
 }
 
 .dark .dark\:hover\:text-indigo-600:hover {
@@ -896,11 +906,6 @@ video {
   color: rgb(79 70 229 / var(--tw-text-opacity));
 }
 
-.dark .dark\:disabled\:bg-slate-700:disabled {
-  --tw-bg-opacity: 1;
-  background-color: rgb(51 65 85 / var(--tw-bg-opacity));
-}
-
 @media (min-width: 640px) {
   .sm\:p-2 {
     padding: 0.5rem;