diff --git a/assets/sass/style.sass b/assets/sass/style.sass
index f71c9286c..016540311 100644
--- a/assets/sass/style.sass
+++ b/assets/sass/style.sass
@@ -367,3 +367,31 @@ hr
 @media screen and (min-width: 769px)
   .md-height-desktop
       height: 9rem
+
+  .filter-icon
+    display: none
+
+  .filter-options
+    display: inline-block
+
+  .filter-pane
+    padding-left: 0
+    padding-top: 20px
+
+@media screen and (max-width: 769px)
+  .filter-icon
+      padding: 0.5rem
+      cursor: pointer
+      border: 1px solid #DBDBDB
+      font-size: 18px
+      border-radius: 0.4rem
+      display: inline-block
+      &:hover
+        border: 1px solid #000000
+
+  .filter-options
+    display: none
+
+  .filter-pane
+    padding-left: 20px
+    padding-top: 10px
diff --git a/config.toml b/config.toml
index 746792caf..3407abf04 100644
--- a/config.toml
+++ b/config.toml
@@ -66,8 +66,8 @@ notAlternative = true
 
 # parameters for lunr search
 [params.lunr]
-vars = ["title", "maintainer", "description", "availability"]
-params = ["availability", "maintainer"]
+vars = ["title", "maintainer", "description", "availability", "category", "type"]
+params = ["availability", "maintainer", "category", "type"]
 
 # "Highlighted Samples" section on the main page
 [[params.samples]]
diff --git a/layouts/_default/list.lunr.json b/layouts/_default/list.lunr.json
index 87e634064..7c5a7507f 100644
--- a/layouts/_default/list.lunr.json
+++ b/layouts/_default/list.lunr.json
@@ -1,6 +1,6 @@
 {{- $index := slice -}}
 {{- range $scalers := where site.RegularPages ".CurrentSection.Title" "Scalers" -}}
-    {{- $index = $index | append (dict "title" $scalers.Title "version" (index (first 3 (split (delimit (split $scalers.RelPermalink "/") "," "") ",")) 2) "href" $scalers.RelPermalink  "availability" $scalers.Params.availability "description" ($scalers.Description | markdownify) "maintainer" $scalers.Params.maintainer ) -}}
+    {{- $index = $index | append (dict "title" $scalers.Title "version" (index (first 3 (split (delimit (split $scalers.RelPermalink "/") "," "") ",")) 2) "href" $scalers.RelPermalink  "availability" $scalers.Params.availability "description" ($scalers.Description | markdownify) "maintainer" $scalers.Params.maintainer "category" $scalers.Params.category "type" "built-in" ) -}}
 {{- end -}}
 
-{{- $index | jsonify -}}
\ No newline at end of file
+{{- $index | jsonify -}}
diff --git a/layouts/partials/javascript.html b/layouts/partials/javascript.html
index 37105da88..b8d33a463 100644
--- a/layouts/partials/javascript.html
+++ b/layouts/partials/javascript.html
@@ -50,36 +50,7 @@
   });
 </script>
 
-{{/* Scalers filter */}}
-<script type="text/javascript">
-  const builtInScalers = document.querySelectorAll("#built-in-scalers");
-  const externalScalers = document.getElementById("external-scalers");
-  const btnFocusOnMount = document.getElementById("btn-focus-on-mount");
-  const builtInSearchResultCount = document.querySelector(".results");
-  const externalSearchResultCount = document.querySelector(".external-results");
-  let btns = document.getElementsByClassName("filterBtn");
-
-  for (let i = 0; i < btns.length; i++) {
-    btns[i].addEventListener("click", function () {
-      let filterValue = btns[i].value.toLowerCase();
-      if (filterValue === "built-in-scalers") {
-        builtInScalers.forEach((node) => (node.style.display = "flex"));
-        externalScalers.style.display = "none";
-        builtInSearchResultCount.style.display = "block";
-        externalSearchResultCount.style.display = "none";
-      } else if (filterValue === "external-scalers") {
-        // remove focus when changed
-        btnFocusOnMount.classList.remove("is-focused");
-        builtInScalers.forEach((node) => (node.style.display = "none"));
-        externalScalers.style.display = "inline";
-        builtInSearchResultCount.style.display = "none";
-        externalSearchResultCount.style.display = "block";
-      }
-    });
-  }
-</script>
-
-{{/* In-built Scalers Search */}}
+{{/* Scaler Search and filter */}}
 <script src="https://unpkg.com/lunr/lunr.js"></script>
 <script>
   window.addEventListener(
@@ -94,29 +65,24 @@
       const form = document.getElementById("search");
       const input = document.getElementById("search-input");
       const target = document.querySelector(".is-search-result");
-      const externalTarget = document.querySelector(
-        ".is-external-search-result"
-      );
+      const filterIcon = document.querySelector(".filter-icon");
+      const filterOptions = document.querySelector(".filter-options");
       const searchResultCount = document.querySelector(".results");
-      const externalSearchResultCount =
-        document.querySelector(".external-results");
       const template = document.getElementById("is-search-template");
-      const isExternalScalers = document.getElementById("external-scalers");
-      const isBuiltInScalers = document.getElementById("built-in-scalers");
-      const externalBanner = document.getElementById("external-banner");
-      const groups = document.getElementsByClassName(
-        "artifacthub-widget-group"
-      );
       const interval = 500;
       let query = input.value.trim();
       let parse = {};
+      let searchQueue = [];
+      let checkboxes = document.querySelectorAll(
+        'input[name="resource_filter"]'
+      );
 
       // fetch all scalers on inital load
       if (!query) {
         initSearchIndex();
-        externalScalersIndex();
       }
 
+      // logic for input search
       input.addEventListener(
         "input",
         function (event) {
@@ -124,49 +90,11 @@
           clearTimeout(debounceTimer);
           const keywords = input.value.trim();
 
-          // disable all buttons during search by default
-          const filterBtns = document.querySelectorAll(".filterBtn");
-          filterBtns.forEach((btn) => (btn.disabled = true));
-
-          if (!keywords) {
-            // enable all buttons when input search is empty
-            const filterBtns = document.querySelectorAll(".filterBtn");
-            filterBtns.forEach((btn) => (btn.disabled = false));
-          }
-
           query = keywords;
-          if (isExternalScalers.style.display === "inline") {
-            // hide banner during scaler search
-            externalBanner.style.display = "none";
-            if (query === "") {
-              externalBanner.style.display = "block";
-            }
-            let externalSearchUrl = new URL(
-              "https://artifacthub.io/api/v1/packages/search"
-            );
-            externalSearchUrl.search = new URLSearchParams({
-              kind: "8",
-              sort: "relevance",
-              ts_query_web: query !== "" ? query : "",
-            });
-            debounceTimer = setTimeout(() => {
-              groups[0].dataset.url = externalSearchUrl;
-              externalScalersIndex();
-            }, interval);
-
-            // clear out all the scaler item card when external scalers are being searched
-            while (externalTarget.firstChild.nextSibling) {
-              externalTarget.removeChild(
-                externalTarget.firstChild.nextSibling.nextSibling
-                  .nextElementSibling
-              );
-            }
-            return;
-          }
 
           debounceTimer = setTimeout(initSearchIndex, interval);
 
-          // clear out all the scaler item card when in-built scalers are being searched
+          // clear out all the scaler item card during search
           while (target.firstChild.nextSibling) {
             target.removeChild(template.nextSibling.nextElementSibling);
           }
@@ -174,64 +102,78 @@
         false
       );
 
-      async function externalScalersIndex() {
-        const externalScalerUrl = groups[0].dataset.url;
-        const results = await fetch(externalScalerUrl)
-          .then((response) => response.json())
-          .then((data) => {
-            return data.packages;
-          })
-          .catch((err) => console.error("error:", err));
-
-        if ("content" in template) {
-          // show result count
-          const title = document.createElement("h3");
-          title.id = "external-search-results";
-          title.className = "subtitle is-size-3 external-search-results";
+      // logic for category filter
+      checkboxes.forEach((checkbox) => {
+        checkbox.addEventListener("change", function (event) {
+          if (checkbox.checked) {
+            const inputValue = event.target.value.split(" ");
+            // for single queries with spacing, use the first word
+            const inputQuery = inputValue[0];
+            searchQueue.push(inputQuery);
+            query = searchQueue.join(" ");
+            initSearchIndex();
+          }  
+          
+          if (!checkbox.checked){
+            const inputValue = event.target.value.split(" ");
+            // for single queries with spacing, use the first word
+            const inputQuery = inputValue[0];
+            searchQueue = searchQueue.filter(
+              (word) => word != inputQuery
+            );
+            query = searchQueue.join(" ");
+            initSearchIndex();
+          }
 
-          if (results.length == 0)
-            title.textContent = `No results found for "${query}"`;
-          else if (results.length == 1)
-            title.textContent = `Found one result for "${query}"`;
-          else if (results.length > 1 && query === "")
-            title.textContent = `${results.length} scalers available`;
-          else
-            title.textContent = `Found ${results.length} results for "${query}"`;
-          externalSearchResultCount.replaceChildren(title);
+          // clear out all the scaler item card during search
+          while (target.firstChild.nextSibling) {
+            target.removeChild(template.nextSibling.nextElementSibling);
+          }
+        });
+      });
 
-          // show the matched result
-          results.forEach(function (result) {
-            const element = template.content.cloneNode(true);
-            element.querySelector(".scaler-title").textContent =
-              result.display_name;
-            element
-              .querySelector(".scaler-title")
-              .setAttribute("href", "https://artifacthub.io/packages/keda-scaler/" + result.repository.name + "/" + result.normalized_name);
-            result.description &&
-              (element.querySelector(".description").textContent =
-                result.description);
-            result.repository.organization_name &&
-              (element.querySelector(".maintainer").textContent =
-                result.repository.organization_name);
-            result.repository.user_alias &&
-              (element.querySelector(".maintainer").textContent =
-                result.repository.user_alias);
-            result.version &&
-              (element.querySelector(
-                ".availability"
-              ).textContent = `v${result.version}`);
-            externalTarget.appendChild(element);
-          }, this);
+      // show filter options on mobile
+      filterIcon.addEventListener("click", function () {
+        if (filterOptions.style.display === "") {
+          filterOptions.style.display = "none";
+        } 
+        
+        if (filterOptions.style.display === "none") {
+          filterOptions.style.display = "flex";
+        }else {
+          filterOptions.style.display = "none";
         }
-      }
+      });
 
       async function initSearchIndex() {
-        const scalers = await fetch("/index.json", { method: "GET" })
+        const builtInScalers = await fetch("/index.json", { method: "GET" })
           .then((response) => response.json())
           .then((data) => {
             return data;
           })
           .catch((err) => console.error("error:", err));
+        
+        const externalScalerUrl = "https://artifacthub.io/api/v1/packages/search?offset=0&limit=20&facets=false&kind=8&deprecated=false&sort=relevance";
+        const externalScalersData = await fetch(externalScalerUrl)
+          .then((response) => response.json())
+          .then((data) => {
+            return data.packages;
+          })
+          .catch((err) => console.error("error:", err));
+        
+        const externalScalers = externalScalersData.map(scaler => ({
+          type: 'external',
+          availability: `v${scaler.version}+`,
+          title: scaler.display_name,
+          maintainer: scaler.repository.organization_name ?? scaler.repository.user_alias,
+          href: "https://artifacthub.io/packages/keda-scaler/" + scaler.repository.name + "/" + scaler.normalized_name,
+          version: currentVersion,
+          description: scaler.description,
+          category: null,
+        }));
+
+        const scalers = [...builtInScalers, ...externalScalers];
+
         index = lunr(function () {
           const documents = scalers;
 
@@ -254,6 +196,12 @@
           this.field("availability", {
             boost: 5,
           });
+          this.field("category", {
+            boost: 10,
+          });
+          this.field("type", {
+            boost: 20,
+          });
 
           documents.forEach(function (doc) {
             if (doc.version === currentVersion) {
@@ -264,6 +212,8 @@
                 maintainer: doc.maintainer,
                 description: doc.description,
                 availability: doc.availability,
+                category: doc.category,
+                type: doc.type,
               };
             }
           }, this);
@@ -308,19 +258,19 @@
           results.forEach(function (result) {
             const doc = parse[result.ref];
             const element = template.content.cloneNode(true);
-            element.querySelector(".scaler-title").textContent = doc.title;
-            element
-              .querySelector(".scaler-title")
-              .setAttribute("href", doc.href);
-            doc.description &&
-              (element.querySelector(".description").textContent =
-                doc.description);
-            doc.maintainer &&
-              (element.querySelector(".maintainer").textContent =
-                doc.maintainer);
-            doc.availability &&
-              (element.querySelector(".availability").textContent =
-                doc.availability);
+              element.querySelector(".scaler-title").textContent = doc.title;
+              element
+                .querySelector(".scaler-title")
+                .setAttribute("href", doc.href);
+              doc.description &&
+                (element.querySelector(".description").textContent =
+                  doc.description);
+              doc.maintainer &&
+                (element.querySelector(".maintainer").textContent =
+                  doc.maintainer);
+              doc.availability &&
+                (element.querySelector(".availability").textContent =
+                  doc.availability);
             target.appendChild(element);
           }, this);
         }
diff --git a/layouts/partials/scaler-layout.html b/layouts/partials/scaler-layout.html
index de982e423..ed402b31e 100644
--- a/layouts/partials/scaler-layout.html
+++ b/layouts/partials/scaler-layout.html
@@ -1,5 +1,5 @@
 <h2 id="available-scalers">Currently available scalers for KEDA</h2>
-<div class="buttons" style="display: flex; justify-content: flex-end">
+<div style="display: flex; justify-content: flex-end">
   <form
     class="control has-icons-left has-extra-sm-right-margin"
     id="search"
@@ -15,37 +15,76 @@ <h2 id="available-scalers">Currently available scalers for KEDA</h2>
       <i class="fas fa-search"></i>
     </span>
   </form>
-  <button
-    id="btn-focus-on-mount"
-    class="button filterBtn is-focused"
-    value="built-in-scalers"
-  >
-    Built-in
-  </button>
-  <button class="button filterBtn" value="external-scalers">External</button>
-</div>
-<div class="results"></div>
-<div class="external-results" style="display: none;"></div>
-<div
-  id="built-in-scalers"
-  style="margin-top: 20px"
-  class="columns is-multiline is-search-result"
->
-  {{ partial "scaler-template" . }}
 </div>
-<div id="external-scalers" style="display: none">
-  <p id="external-banner">
-    External scaler information is pulled from Artifact Hub. External scaler
-    maintainers can learn more on
-    <a
-      href="https://artifacthub.io/docs/topics/repositories/#keda-scalers-repositories"
-      >Artifact Hub docs</a
+<div class="columns">
+  <div class="filter-pane">
+    <h5>FILTER <span class="filter-icon"><i class="fas fa-filter"></i></span></h5>
+    <div class="filter-options">
+      <div class="has-extra-top-margin">
+        <h6>Type</h6>
+        <div>
+          <input id="built-in" type="checkbox" name="resource_filter" value="type:built-in">
+          <label for="built-in">Built-in</label>
+        </div>
+        <div>
+          <input id="external" type="checkbox" name="resource_filter" value="type:external">
+          <label for="external">External</label>
+        </div>
+      </div>
+      <div class="has-extra-top-margin">
+        <h6>Category</h6>
+        {{ $categories := slice }}
+        {{ range $scalers :=  where site.RegularPages ".CurrentSection.Title" "Scalers" }}
+          {{ with $scalers.Params.category }}
+              {{ $categories = $categories | append ($scalers.Params.category) }}
+              {{ $categories = uniq $categories }}
+          {{ end }}
+        {{ end }}
+        {{ range $categories }}
+        {{ $category := . }}
+        <div>
+            <input id="{{ . }}" type="checkbox" name="resource_filter" value="category:{{ . }}">
+            <label for="{{ . }}">{{ . }}</label>
+        </div>
+        {{ end }}
+      </div>    
+      <div class="has-extra-top-margin">
+        <h6>Maintainer</h6>
+        {{ $maintainers := slice }}
+        {{ range $scalers :=  where site.RegularPages ".CurrentSection.Title" "Scalers" }}
+            {{ $maintainers = $maintainers | append ($scalers.Params.maintainer) }}
+            {{ $maintainers = uniq $maintainers }}
+        {{ end }}
+        {{ range $maintainers }}
+        {{ $maintainer := . }}
+        <div>
+            <input id="{{ . }}" type="checkbox" name="resource_filter" value="maintainer:{{ . }}">
+            <label for="{{ . }}">{{ . }}</label>
+        </div>
+        {{ end }}
+        <div>
+          <input id="keda" type="checkbox" name="resource_filter" value="maintainer:keda">
+          <label for="keda">Keda</label>
+        </div>
+        <div>
+          <input id="wsugarman" type="checkbox" name="resource_filter" value="maintainer:wsugarman">
+          <label for="wsugarman">Wsugarman</label>
+        </div>
+        <div>
+          <input id="JensWalter" type="checkbox" name="resource_filter" value="maintainer:JensWalter">
+          <label for="JensWalter">JensWalter</label>
+        </div>
+      </div>
+    </div>   
+  </div>
+  <div class="results-pane column">
+    <div class="results"></div>
+    <div
+      id="scalers"
+      style="margin-top: 20px"
+      class="columns is-multiline is-search-result"
     >
-  </p>
-  <div
-    class="artifacthub-widget-group columns is-multiline is-external-search-result"
-    data-url="https://artifacthub.io/api/v1/packages/search?offset=0&limit=20&facets=false&kind=8&deprecated=false&sort=relevance"
-  >
-  {{ partial "scaler-template" . }}
-</div>
+      {{ partial "scaler-template" . }}
+    </div>
+  </div>
 </div>
diff --git a/layouts/partials/scaler-template.html b/layouts/partials/scaler-template.html
index 4ed58d0fe..4ea1e4a0a 100644
--- a/layouts/partials/scaler-template.html
+++ b/layouts/partials/scaler-template.html
@@ -1,5 +1,5 @@
 <template id="is-search-template">
-  <div class="column is-one-third">
+  <div class="column is-half">
     <div class="card">
       <div class="card-content">
         <a
@@ -14,7 +14,7 @@
 
       <footer class="card-footer">
         <div class="card-footer-item is-spaced card-is-wrapped">
-          Availability&nbsp;<span
+          Availability:&nbsp;<span
             class="has-text-weight-bold availability"
           ></span>
         </div>