diff --git a/build/build-modules-js/compilecss.es6.js b/build/build-modules-js/compilecss.es6.js
index cfdcce30cb7fb..858bfea963d38 100644
--- a/build/build-modules-js/compilecss.es6.js
+++ b/build/build-modules-js/compilecss.es6.js
@@ -44,6 +44,7 @@ module.exports.compile = (options, path) => {
           `${RootPath}/templates/cassiopeia/scss/offline.scss`,
           `${RootPath}/templates/cassiopeia/scss/template.scss`,
           `${RootPath}/templates/cassiopeia/scss/template-rtl.scss`,
+          `${RootPath}/templates/cassiopeia/scss/system/searchtools/searchtools.scss`,
           `${RootPath}/administrator/templates/atum/scss/template.scss`,
           `${RootPath}/administrator/templates/atum/scss/template-rtl.scss`,
           `${RootPath}/administrator/templates/atum/scss/system/searchtools/searchtools.scss`,
diff --git a/language/en-GB/joomla.ini b/language/en-GB/joomla.ini
index 4100a991e56fd..768a61e74685e 100644
--- a/language/en-GB/joomla.ini
+++ b/language/en-GB/joomla.ini
@@ -458,6 +458,9 @@ POSTGRESQL="PostgreSQL"
 SQLITE="SQLite"
 
 ; Search tools
+JFILTER_OPTIONS="Filter Options"
 JSEARCH_TOOLS="Search Tools"
 JSEARCH_TOOLS_DESC="Filter the list items."
 JSEARCH_TOOLS_ORDERING="Order by:"
+JTABLE_OPTIONS="Table Options"
+JTABLE_OPTIONS_ORDERING="Order by:"
diff --git a/templates/cassiopeia/images/select-bg-active-rtl.svg b/templates/cassiopeia/images/select-bg-active-rtl.svg
new file mode 100644
index 0000000000000..eae47aa83ead6
--- /dev/null
+++ b/templates/cassiopeia/images/select-bg-active-rtl.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1854.54 295" preserveAspectRatio="xMinYMid" width="1854.54" height="295"><path d="m14.47 145.7 6.898 6.899c0.102 0.101 0.199 0.101 0.3 0.101 0.102 0 0.2 0 0.302-0.101l6.898-6.899c0.102-0.1 0.102-0.2 0.102-0.3s0-0.2-0.102-0.3l-0.7-0.7c-0.101-0.1-0.198-0.1-0.3-0.1-0.101 0-0.2 0-0.301 0.1l-5.8 5.8-5.801-5.8c-0.101-0.1-0.199-0.1-0.301-0.1-0.101 0-0.199 0-0.301 0.1l-0.699 0.7c-0.101 0.1-0.101 0.2-0.101 0.3-0.294 0.1-0.194 0.2-0.094 0.3z" fill="#fff"/></svg>
diff --git a/templates/cassiopeia/images/select-bg-active.svg b/templates/cassiopeia/images/select-bg-active.svg
new file mode 100644
index 0000000000000..19cd7866984c2
--- /dev/null
+++ b/templates/cassiopeia/images/select-bg-active.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1854.54 295" preserveAspectRatio="xMinYMid" width="1854.54" height="295"><path d="M1825.1,145.7l6.9,6.9c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1l6.9-6.9c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3l-0.7-0.7c-0.1-0.1-0.2-0.1-0.3-0.1s-0.2,0-0.3,0.1l-5.8,5.8l-5.8-5.8c-0.1-0.1-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.3,0.1l-0.7,0.7c-0.1,0.1-0.1,0.2-0.1,0.3C1824.9,145.5,1825,145.6,1825.1,145.7z" fill="#fff"/></svg>
diff --git a/templates/cassiopeia/images/select-bg-rtl.svg b/templates/cassiopeia/images/select-bg-rtl.svg
new file mode 100644
index 0000000000000..a1ae9a3e60bb1
--- /dev/null
+++ b/templates/cassiopeia/images/select-bg-rtl.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1854.539" height="295" preserveAspectRatio="xMinYMin meet"><path d="M13.573 145.7l6.9 6.9c.1.1.2.1.3.1s.2 0 .3-.1l6.9-6.9c.1-.1.1-.2.1-.3s0-.2-.1-.3l-.7-.7c-.1-.1-.2-.1-.3-.1s-.2 0-.3.1l-5.8 5.8-5.8-5.8c-.1-.1-.2-.1-.3-.1s-.2 0-.3.1l-.7.7c-.1.1-.1.2-.1.3-.296.1-.195.2-.096.3h-.002z"/><path fill="#fff" d="M44.54 0h1810v295h-1810z"/></svg>
diff --git a/templates/cassiopeia/images/select-bg.svg b/templates/cassiopeia/images/select-bg.svg
new file mode 100644
index 0000000000000..e2fefccf30242
--- /dev/null
+++ b/templates/cassiopeia/images/select-bg.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1854.54 295" preserveAspectRatio="xMinYMid" width="1854.54" height="295"><path d="M1825.1,145.7l6.9,6.9c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1l6.9-6.9c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3l-0.7-0.7c-0.1-0.1-0.2-0.1-0.3-0.1s-0.2,0-0.3,0.1l-5.8,5.8l-5.8-5.8c-0.1-0.1-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.3,0.1l-0.7,0.7c-0.1,0.1-0.1,0.2-0.1,0.3C1824.9,145.5,1825,145.6,1825.1,145.7z" fill="#000"/><rect width="1810" height="295" fill="#fff"/></svg>
diff --git a/templates/cassiopeia/joomla.asset.json b/templates/cassiopeia/joomla.asset.json
index cb880f9c1622f..b7e50d6493c91 100644
--- a/templates/cassiopeia/joomla.asset.json
+++ b/templates/cassiopeia/joomla.asset.json
@@ -93,6 +93,11 @@
         "template.cassiopeia.rtl#style",
         "template.cassiopeia#script"
       ]
+    },
+    {
+      "name": "searchtools",
+      "type": "style",
+      "uri": "system/searchtools/searchtools.min.css"
     }
   ]
 }
diff --git a/templates/cassiopeia/scss/_variables.scss b/templates/cassiopeia/scss/_variables.scss
index 7167f0dd4f9aa..8187f332e3b72 100644
--- a/templates/cassiopeia/scss/_variables.scss
+++ b/templates/cassiopeia/scss/_variables.scss
@@ -137,6 +137,18 @@ $list-group-bg:                      $white-offset;
 // Custom form
 $custom-select-bg:                   $white-offset;
 
+// Custom form
+$custom-select-indicator-padding:    3rem;
+$custom-select-bg-size:              116rem;
+$custom-select-indicator:            url(../images/select-bg.svg);
+$custom-select-indicator-rtl:        url(../images/select-bg-rtl.svg);
+$custom-select-indicator-active:     url(../../../images/select-bg.svg);
+$custom-select-indicator-active-rtl: url(../../../images/select-bg-rtl.svg);
+$custom-select-background:           $custom-select-indicator no-repeat right center / $custom-select-bg-size; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+$custom-select-background-rtl:       $custom-select-indicator-rtl no-repeat left center / $custom-select-bg-size; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+$custom-select-bg-size-sm:           75rem;
+$custom-select-multiple-padding-y:   .3rem;
+
 // Modals
 $modal-header-height:                46px;
 
@@ -146,3 +158,18 @@ $badge-default-bg:                   #5e7082;
 // Gutter
 $grid-gutter-width:                  15px !default;
 $cassiopeia-grid-gutter:             $grid-gutter-width;
+
+// Z-Index list
+$zindex-negative:                  -1;
+$zindex-actions:                   auto;
+$zindex-toolbar:                   1000;
+$zindex-sidebar:                   1010;
+$zindex-header:                    1020;
+$zindex-alerts:                    1030;
+$zindex-modal-backdrop:            1040;
+$zindex-modal:                     1050;
+$zindex-popover:                   1060;
+$zindex-tooltip:                   1070;
+$zindex-mobile-bottom:             8000;
+$zindex-mobile-toggle:             9999;
+$zindex-mobile-menu:               9000;
diff --git a/templates/cassiopeia/scss/blocks/_form.scss b/templates/cassiopeia/scss/blocks/_form.scss
index 8ee3b70648a66..c581ca7762740 100644
--- a/templates/cassiopeia/scss/blocks/_form.scss
+++ b/templates/cassiopeia/scss/blocks/_form.scss
@@ -62,3 +62,38 @@ td .form-control {
 .form-control-feedback {
   display: block;
 }
+
+// set up hidden tooltip
+[role="tooltip"]:not(.show) {
+  z-index: $zindex-tooltip;
+  display: none;
+  max-width: 100%;
+  padding: .25em;
+  margin: .25em;
+  color: $white;
+  background: $black;
+
+  [dir=ltr] & {
+    text-align: left;
+  }
+
+  [dir=rtl] & {
+    text-align: right;
+  }
+}
+
+// reveal associated tooltip on focus
+:focus + [role="tooltip"],
+:hover + [role="tooltip"] {
+  position: absolute;
+  display: block;
+}
+
+[id="filter[search]-desc"] {
+  bottom: 100%;
+}
+
+.container-popup [id="filter[search]-desc"] {
+  top: 100%;
+  bottom: auto;
+}
diff --git a/templates/cassiopeia/scss/system/searchtools/searchtools.scss b/templates/cassiopeia/scss/system/searchtools/searchtools.scss
new file mode 100644
index 0000000000000..9287865f75149
--- /dev/null
+++ b/templates/cassiopeia/scss/system/searchtools/searchtools.scss
@@ -0,0 +1,304 @@
+// Search tools
+@import "../../variables";
+@import "../../../../../media/vendor/bootstrap/scss/variables";
+@import "../../../../../media/vendor/bootstrap/scss/mixins";
+
+
+// Media queries
+@media (max-width: 480px) {
+  .js-stools .js-stools-container-filters {
+    display: block;
+  }
+
+  .js-stools .js-stools-container-filters .btn-group {
+    display: block;
+  }
+
+  .js-stools .js-stools-container-filters .btn-wrapper {
+    width: 100%;
+  }
+
+  .js-stools .js-stools-container-bar {
+    margin-top: 20px;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 979px) {
+
+  .js-stools .js-stools-container-selector,
+  .js-stools .js-stools-container-bar,
+  .js-stools .js-stools-container-list {
+    display: block;
+  }
+}
+
+.js-stools {
+  position: relative;
+  width: 100%;
+  padding: .25rem 0 0;
+  margin: 1rem 0 .5rem;
+
+  > div {
+    margin-bottom: 1rem;
+  }
+
+  button {
+    margin-top: 0;
+  }
+
+  .js-stools-container-filters {
+    display: none;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 100%;
+    padding: 1rem .5rem .5rem;
+    margin-top: .5rem;
+    margin-bottom: 1rem;
+    background-color: $white;
+    border-radius: 0 0 0 $border-radius;
+
+    joomla-field-fancy-select .choices,
+    .custom-select {
+      min-width: 15rem;
+    }
+
+    .chzn-container-single {
+      display: block;
+
+      .chzn-single {
+        display: block;
+        font-size: 1rem;
+      }
+    }
+  }
+
+  .js-stools-field-filter {
+
+    margin: 0 .5rem .5rem;
+
+    @include media-breakpoint-down(sm) {
+      width: 100%;
+    }
+
+    .custom-select {
+      box-shadow:  $input-box-shadow;
+      &.active {
+        //background: $custom-select-indicator-active no-repeat right center;
+        background-color: $custom-select-bg;
+        background-size: $custom-select-bg-size;
+
+        [dir=rtl] & {
+          //background: $custom-select-indicator-active-rtl no-repeat left center;
+          background-color: $custom-select-bg;
+        }
+      }
+
+      option {
+        font-size: .875rem;
+        color: $cassiopeia-template-color-dark;
+        background-color: var(--white);
+      }
+    }
+  }
+
+  .js-stools-container-selector {
+    [dir=ltr] & {
+      float: left;
+      margin-right: .5rem;
+    }
+
+    [dir=rtl] & {
+      float: right;
+      margin-right: 0;
+      margin-left: .5rem;
+    }
+
+    @include media-breakpoint-down(sm) {
+      float: none !important;
+      width: 100%;
+      margin-right: 0;
+    }
+
+    @include media-breakpoint-down(xs) {
+      [dir=ltr] & {
+        margin-right: 0;
+      }
+
+      [dir=rtl] & {
+        margin-left: 0;
+      }
+    }
+
+    .js-stools-field-selector {
+      @include media-breakpoint-down(sm) {
+        margin-right: 0;
+
+        [dir=rtl] & {
+          margin-right: 0;
+        }
+      }
+
+      @include media-breakpoint-down(xs) {
+        [dir=ltr] & {
+          margin-right: 0;
+        }
+
+        [dir=rtl] & {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  .js-stools-container-selector-first {
+    [dir=ltr] & {
+      margin-right: .5rem;
+    }
+
+    [dir=rtl] & {
+      margin-left: .5rem;
+    }
+
+    @include media-breakpoint-down(sm) {
+      float: none !important;
+      width: 100%;
+      margin-right: 0;
+    }
+
+    @include media-breakpoint-down(xs) {
+      [dir=ltr] & {
+        margin-right: 0;
+      }
+
+      [dir=rtl] & {
+        margin-left: 0;
+      }
+    }
+
+    .js-stools-field-selector {
+      @include media-breakpoint-down(sm) {
+        max-width: 100%;
+        margin-right: 0;
+
+        [dir=rtl] & {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+
+  .js-stools-container-list {
+    [dir=ltr] & {
+      float: right;
+      text-align: right;
+    }
+
+    [dir=rtl] & {
+      float: left;
+      text-align: left;
+    }
+  }
+
+  .chosen-container {
+    [dir=ltr] & {
+      text-align: right;
+    }
+
+    [dir=rtl] & {
+      text-align: left;
+    }
+  }
+
+  .js-stools-container-filters-visible {
+    display: flex;
+  }
+
+  .chzn-container-single .chzn-single span {
+    overflow: visible;
+  }
+
+  .js-stools-field-list,
+  .js-stools-field-filter {
+    display: inline-block;
+  }
+
+  .js-stools-container-list .js-stools-field-list:last-child {
+    margin-right: 0;
+  }
+
+  .js-stools-container-bar {
+
+    .btn-toolbar {
+      justify-content: flex-end;
+
+      .js-stools-btn-filter {
+        border: 1px solid var(--border);
+      }
+
+      .js-stools-btn-clear {
+        color: $cassiopeia-template-color-dark;
+        background-color: $gray-400;
+        border: 1px solid $cassiopeia-border-color;
+        border-left: 1px solid $gray-100;
+
+        [dir=rtl] & {
+          margin-right: -1px !important;
+          margin-left: 5px;
+        }
+
+        @include media-breakpoint-down(sm) {
+          [dir=ltr] & {
+            margin-right: 0 !important;
+          }
+
+          [dir=rtl] & {
+            margin-left: 0 !important;
+          }
+        }
+
+        &.disabled,
+        &:disabled {
+          color: $white-offset;
+          cursor: not-allowed;
+          background-color:$cassiopeia-template-color-dark;
+          border-color: rgba($gray-500, .8);
+          opacity: 1;
+        }
+      }
+
+      .js-stools-btn-filter {
+        border-right: 1px solid $cassiopeia-border-color;
+
+        .fas {
+          margin-left: .25rem;
+        }
+      }
+
+      .form-control {
+        height: auto;
+      }
+    }
+
+    .js-stools-field-list {
+      margin-bottom: 0;
+    }
+
+    .input-append {
+      margin-bottom: 0;
+    }
+
+    .btn-primary .caret {
+      margin-top: 7px;
+      margin-bottom: 8px;
+      border-top: 0;
+      border-bottom: 4px solid #fff;
+
+    }
+  }
+}
+
+.js-stools-button-sort {
+  cursor: pointer;
+  background: none;
+  border: 0;
+}