diff --git a/_dev/js/theme.js b/_dev/js/theme.js
index 50d0461..714fe3d 100644
--- a/_dev/js/theme.js
+++ b/_dev/js/theme.js
@@ -92,8 +92,21 @@ $(function () {
       element: "absolute top-0 z-50",
     },
   });
+
   $("#show_filters").on("click", function () {
     $("#products_top_sidebar").offcanvas("toggle");
   });
-  console.log($);
+
+  $("button[id^=show-filters-]").on("click", function () {
+    var filterName = $(this).data("filter-name");
+
+    //hide all the other sections and display the current chosen filter
+    $("div[id^=filter-section-]").hide();
+    $("#filter-section-" + filterName).show();
+  });
+
+  $("#show-sort-by").on("click", function () {
+    $("div[id^=filter-section-]").hide();
+    $("#filter-section-sort-by").toggle();
+  });
 });
diff --git a/_dev/package.json b/_dev/package.json
index 90ebc7d..59efccd 100644
--- a/_dev/package.json
+++ b/_dev/package.json
@@ -15,6 +15,7 @@
     "dev": "yarn run dev:livereload & yarn run dev:tailwind & yarn run dev:js"
   },
   "dependencies": {
+    "@tailwindcss/forms": "^0.5.6",
     "bootstrap-touchspin": "^4.7.3",
     "events": "^3.3.0",
     "jquery": "3.5.1",
diff --git a/_dev/tailwind.config.js b/_dev/tailwind.config.js
index c2ef0e9..455fa67 100644
--- a/_dev/tailwind.config.js
+++ b/_dev/tailwind.config.js
@@ -1,12 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: ["../templates/**/*.tpl", "../modules/**/*.tpl"],
-    theme: {
-        fontFamily: {
-            sans: ["Cairo"],
-            serif: ["Cairo"]
-        }
+  content: ["../templates/**/*.tpl", "../modules/**/*.tpl"],
+  theme: {
+    fontFamily: {
+      sans: ["Cairo"],
+      serif: ["Cairo"],
     },
-    plugins: [],
-}
-
+  },
+  plugins: [require("@tailwindcss/forms")],
+};
diff --git a/_dev/yarn.lock b/_dev/yarn.lock
index 5f3cae1..f461601 100644
--- a/_dev/yarn.lock
+++ b/_dev/yarn.lock
@@ -170,6 +170,13 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@tailwindcss/forms@^0.5.6":
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.6.tgz#29c6c2b032b363e0c5110efed1499867f6d7e868"
+  integrity sha512-Fw+2BJ0tmAwK/w01tEFL5TiaJBX1NLT1/YbWgvm7ws3Qcn11kiXxzNTEQDMs5V3mQemhB56l3u0i9dwdzSQldA==
+  dependencies:
+    mini-svg-data-uri "^1.2.3"
+
 any-promise@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
@@ -471,6 +478,11 @@ micromatch@^4.0.4, micromatch@^4.0.5:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
+mini-svg-data-uri@^1.2.3:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
+  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
+
 minimatch@^3.0.4:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"