diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
index e0c00035e..2f7f06bcf 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
@@ -3,9 +3,8 @@ import Widget from 'App/mstore/types/widget';
 import Funnelbar from './FunnelBar';
 import cn from 'classnames';
 import stl from './FunnelWidget.module.css';
-import { Icon } from 'UI';
 import { useObserver } from 'mobx-react-lite';
-import { NoContent } from 'UI';
+import { NoContent, Icon } from 'UI';
 import { useModal } from 'App/components/Modal';
 
 interface Props {
@@ -109,8 +108,8 @@ function Stage({ stage, index, isWidget }: any) {
 
 function IndexNumber({ index }: any) {
     return (
-        <div className="z-10 w-6 h-6 border mr-4 text-sm rounded-full bg-gray-lightest flex items-center justify-center leading-3">
-            {index}
+        <div className="z-10 w-6 h-6 border shrink-0 mr-4 text-sm rounded-full bg-gray-lightest flex items-center justify-center leading-3">
+            {index === 0 ? <Icon size="14" color="gray-dark" name="list" /> : index}
         </div>
     );
 }
diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx
index 5789ce273..5a46a4e02 100644
--- a/frontend/app/components/ui/SVG.tsx
+++ b/frontend/app/components/ui/SVG.tsx
@@ -271,6 +271,7 @@ const SVG = (props: Props) => {
     case 'link-45deg': return <svg class="bi bi-link-45deg" viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/></svg>;
     case 'list-alt': return <svg viewBox="0 0 512 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M464 64c8.823 0 16 7.178 16 16v352c0 8.822-7.177 16-16 16H48c-8.823 0-16-7.178-16-16V80c0-8.822 7.177-16 16-16h416m0-32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm-336 96c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32zm0 96c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32zm0 96c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32zm288-148v-24a6 6 0 0 0-6-6H198a6 6 0 0 0-6 6v24a6 6 0 0 0 6 6h212a6 6 0 0 0 6-6zm0 96v-24a6 6 0 0 0-6-6H198a6 6 0 0 0-6 6v24a6 6 0 0 0 6 6h212a6 6 0 0 0 6-6zm0 96v-24a6 6 0 0 0-6-6H198a6 6 0 0 0-6 6v24a6 6 0 0 0 6 6h212a6 6 0 0 0 6-6z"/></svg>;
     case 'list-ul': return <svg class="bi bi-list-ul" viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>;
+    case 'list': return <svg class="bi bi-list" viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/></svg>;
     case 'lock-alt': return <svg viewBox="0 0 448 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M224 420c-11 0-20-9-20-20v-64c0-11 9-20 20-20s20 9 20 20v64c0 11-9 20-20 20zm224-148v192c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V272c0-26.5 21.5-48 48-48h16v-64C64 71.6 136-.3 224.5 0 312.9.3 384 73.1 384 161.5V224h16c26.5 0 48 21.5 48 48zM96 224h256v-64c0-70.6-57.4-128-128-128S96 89.4 96 160v64zm320 240V272c0-8.8-7.2-16-16-16H48c-8.8 0-16 7.2-16 16v192c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16z"/></svg>;
     case 'map-marker-alt': return <svg class="bi bi-geo-alt" viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/><path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></svg>;
     case 'memory': return <svg viewBox="0 0 640 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M496 272h32V144h-96v128h64zm-32-96h32v64h-32v-64zm-128 96h32V144h-96v128h64zm-32-96h32v64h-32v-64zm-128 96h32V144h-96v128h64zm-32-96h32v64h-32v-64zm488-16h8V96c0-17.67-14.33-32-32-32H32C14.33 64 0 78.33 0 96v64h8c13.26 0 24 10.74 24 24 0 13.25-10.74 24-24 24H0v240h640V208h-8c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24zm-24 256h-80v-16c0-8.84-7.16-16-16-16s-16 7.16-16 16v16h-96v-16c0-8.84-7.16-16-16-16s-16 7.16-16 16v16h-96v-16c0-8.84-7.16-16-16-16s-16 7.16-16 16v16h-96v-16c0-8.84-7.16-16-16-16s-16 7.16-16 16v16H32v-64h576v64zm0-282.59c-18.91 9-32 28.3-32 50.59s13.09 41.59 32 50.59V320H32v-85.41c18.9-9 32-28.3 32-50.59s-13.1-41.59-32-50.59V96h576v37.41z"/></svg>;
diff --git a/frontend/app/duck/liveSearch.js b/frontend/app/duck/liveSearch.js
index 44d0a97fd..651a0872a 100644
--- a/frontend/app/duck/liveSearch.js
+++ b/frontend/app/duck/liveSearch.js
@@ -40,6 +40,7 @@ function reducer(state = initialState, action = {}) {
         .set('list', list)
         .set('total', total);
     case success(FETCH_FILTER_SEARCH):
+      console.log('FETCH_FILTER_SEARCH', action);
       const groupedList = action.data.reduce((acc, item) => {
         const { projectId, type, value } = item;
         const key = type;
diff --git a/frontend/app/styles/colors-autogen.css b/frontend/app/styles/colors-autogen.css
index 8fa85566e..d1fd5a0a9 100644
--- a/frontend/app/styles/colors-autogen.css
+++ b/frontend/app/styles/colors-autogen.css
@@ -15,6 +15,7 @@
 .fill-tealx { fill: $tealx }
 .fill-tealx-light { fill: $tealx-light }
 .fill-tealx-light-border { fill: $tealx-light-border }
+.fill-tealx-lightest { fill: $tealx-lightest }
 .fill-orange { fill: $orange }
 .fill-yellow { fill: $yellow }
 .fill-yellow2 { fill: $yellow2 }
@@ -24,6 +25,7 @@
 .fill-green-dark { fill: $green-dark }
 .fill-red { fill: $red }
 .fill-red2 { fill: $red2 }
+.fill-red-lightest { fill: $red-lightest }
 .fill-blue { fill: $blue }
 .fill-blue2 { fill: $blue2 }
 .fill-active-blue { fill: $active-blue }
@@ -49,6 +51,7 @@
 .color-tealx { color: $tealx }
 .color-tealx-light { color: $tealx-light }
 .color-tealx-light-border { color: $tealx-light-border }
+.color-tealx-lightest { color: $tealx-lightest }
 .color-orange { color: $orange }
 .color-yellow { color: $yellow }
 .color-yellow2 { color: $yellow2 }
@@ -58,6 +61,7 @@
 .color-green-dark { color: $green-dark }
 .color-red { color: $red }
 .color-red2 { color: $red2 }
+.color-red-lightest { color: $red-lightest }
 .color-blue { color: $blue }
 .color-blue2 { color: $blue2 }
 .color-active-blue { color: $active-blue }
@@ -83,6 +87,7 @@
 .hover-tealx:hover { color: $tealx }
 .hover-tealx-light:hover { color: $tealx-light }
 .hover-tealx-light-border:hover { color: $tealx-light-border }
+.hover-tealx-lightest:hover { color: $tealx-lightest }
 .hover-orange:hover { color: $orange }
 .hover-yellow:hover { color: $yellow }
 .hover-yellow2:hover { color: $yellow2 }
@@ -92,6 +97,7 @@
 .hover-green-dark:hover { color: $green-dark }
 .hover-red:hover { color: $red }
 .hover-red2:hover { color: $red2 }
+.hover-red-lightest:hover { color: $red-lightest }
 .hover-blue:hover { color: $blue }
 .hover-blue2:hover { color: $blue2 }
 .hover-active-blue:hover { color: $active-blue }
@@ -116,6 +122,7 @@
 .border-tealx { border-color: $tealx }
 .border-tealx-light { border-color: $tealx-light }
 .border-tealx-light-border { border-color: $tealx-light-border }
+.border-tealx-lightest { border-color: $tealx-lightest }
 .border-orange { border-color: $orange }
 .border-yellow { border-color: $yellow }
 .border-yellow2 { border-color: $yellow2 }
@@ -125,6 +132,7 @@
 .border-green-dark { border-color: $green-dark }
 .border-red { border-color: $red }
 .border-red2 { border-color: $red2 }
+.border-red-lightest { border-color: $red-lightest }
 .border-blue { border-color: $blue }
 .border-blue2 { border-color: $blue2 }
 .border-active-blue { border-color: $active-blue }
diff --git a/frontend/app/svg/icons/list.svg b/frontend/app/svg/icons/list.svg
new file mode 100644
index 000000000..dc1584af2
--- /dev/null
+++ b/frontend/app/svg/icons/list.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-list" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webpack.config.ts b/frontend/webpack.config.ts
index 88080fc2c..57c739d4a 100644
--- a/frontend/webpack.config.ts
+++ b/frontend/webpack.config.ts
@@ -20,6 +20,7 @@ const config: Configuration = {
   // mode: isDevelopment ? "development" : "production",
   output: {
     publicPath: "/",
+    filename: 'app-[contenthash:7].js',
     path: path.resolve(__dirname, 'public'),
   },
   entry: "./app/initialize.js",