diff --git a/ui/src/app/applications/components/applications-list/applications-filter.tsx b/ui/src/app/applications/components/applications-list/applications-filter.tsx
index ee74c27329f50..14194a9164d3f 100644
--- a/ui/src/app/applications/components/applications-list/applications-filter.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-filter.tsx
@@ -1,4 +1,4 @@
-import {Checkbox, DataLoader} from 'argo-ui';
+import {Checkbox, DataLoader, Tooltip} from 'argo-ui';
 import * as classNames from 'classnames';
 import * as React from 'react';
 
@@ -105,16 +105,38 @@ export class ApplicationsFilter extends React.Component<ApplicationsFilterProps,
                     values.add(app.metadata.labels[label]);
                 })
             );
+
+        const filtersCount = AppsListPreferences.countEnabledFilters(pref);
+
         return (
             <div className={classNames('applications-list__filters-container', {'applications-list__filters-container--expanded': this.state.expanded})}>
-                <i
-                    onClick={() => this.setState({expanded: !this.state.expanded})}
-                    className={classNames('fa applications-list__filters-expander', {'fa-chevron-up': this.state.expanded, 'fa-chevron-down': !this.state.expanded})}
-                />
-                <p className='applications-list__filters-container-title'>Filter By:</p>
-                <div className='row'>
+                <div className={classNames('applications-list__filters-title', {'applications-list__filters-title--expanded': this.state.expanded})}>
+                    <Tooltip content='Filters'>
+                        <i className='fa fa-filter' />
+                    </Tooltip>
+                    <div style={{marginLeft: 'auto'}} />
+                    <div className='applications-list__filters-title__counter tags-input__tag' style={filtersCount === 0 ? {display: 'none'} : {}}>
+                        {filtersCount} Filter{filtersCount === 1 ? '' : 's'}
+                        <Tooltip content='Clear Filters'>
+                            <i
+                                className='fa fa-times'
+                                onClick={() => {
+                                    AppsListPreferences.clearFilters(this.props.pref);
+                                    this.props.onChange(this.props.pref);
+                                }}
+                            />
+                        </Tooltip>
+                    </div>
+                    <Tooltip content={(this.state.expanded ? 'Collapse' : 'Expand') + ' Filters'}>
+                        <i
+                            className={classNames('fa applications-list__filters-title__expander', {'fa-chevron-up': this.state.expanded, 'fa-chevron-down': !this.state.expanded})}
+                            onClick={() => this.setState({expanded: !this.state.expanded})}
+                        />
+                    </Tooltip>
+                </div>
+                <div className='applications-list__filters-container-contents row'>
                     <div className='columns small-12 medium-3 xxlarge-12'>
-                        <p>Sync</p>
+                        <div className='applications-list__filter-title'>Sync</div>
                         <ItemsFilter
                             selected={pref.syncFilter}
                             onChange={selected => onChange({...pref, syncFilter: selected})}
@@ -123,7 +145,7 @@ export class ApplicationsFilter extends React.Component<ApplicationsFilterProps,
                         />
                     </div>
                     <div className='columns small-12 medium-3 xxlarge-12'>
-                        <p>Health</p>
+                        <div className='applications-list__filter-title'>Health</div>
                         <ItemsFilter
                             selected={pref.healthFilter}
                             onChange={selected => onChange({...pref, healthFilter: selected})}
@@ -133,7 +155,7 @@ export class ApplicationsFilter extends React.Component<ApplicationsFilterProps,
                     </div>
                     <div className='columns small-12 medium-6 xxlarge-12'>
                         <div className='applications-list__filter'>
-                            <p>Labels</p>
+                            <div className='applications-list__filter-title'>Labels</div>
                             <ul>
                                 <li>
                                     <TagsInput
@@ -144,7 +166,7 @@ export class ApplicationsFilter extends React.Component<ApplicationsFilterProps,
                                     />
                                 </li>
                             </ul>
-                            <p>Projects</p>
+                            <div className='applications-list__filter-title'>Projects</div>
                             <ul>
                                 <li>
                                     <DataLoader load={() => services.projects.list('items.metadata.name')}>
@@ -164,7 +186,7 @@ export class ApplicationsFilter extends React.Component<ApplicationsFilterProps,
                                     </DataLoader>
                                 </li>
                             </ul>
-                            <p>Clusters</p>
+                            <div className='applications-list__filter-title'>Clusters</div>
                             <ul>
                                 <li>
                                     <TagsInput
@@ -177,7 +199,7 @@ export class ApplicationsFilter extends React.Component<ApplicationsFilterProps,
                                     />
                                 </li>
                             </ul>
-                            <p>Namespaces</p>
+                            <div className='applications-list__filter-title'>Namespaces</div>
                             <ul>
                                 <li>
                                     <TagsInput
diff --git a/ui/src/app/applications/components/applications-list/applications-list.scss b/ui/src/app/applications/components/applications-list/applications-list.scss
index 93cbfbb81dc22..4fdb1fa38368a 100644
--- a/ui/src/app/applications/components/applications-list/applications-list.scss
+++ b/ui/src/app/applications/components/applications-list/applications-list.scss
@@ -66,54 +66,66 @@
         }
     }
 
-    &__filters-expander {
-        position: absolute;
-        top: 0.75em;
-        right: 1em;
-        cursor: pointer;
-    }
+    $filters-container-collapsed-height: 3em;
+    $filters-container-box-shadow: 1px 1px 3px $argo-color-gray-5;
 
     &__filters-container {
-        max-height: 2.5em;
+        max-height: $filters-container-collapsed-height;
         overflow: hidden;
         position: relative;
         border-radius: $border-radius;
-        box-shadow: 1px 1px 3px $argo-color-gray-5;
+        box-shadow: $filters-container-box-shadow;
         padding: 0 1em 0.75em 1em;
         margin: 33px 0;
         background-color: white;
         transition: max-height 0.25s cubic-bezier(0, 1, 0, 1);
 
-        ul, a, p {
+        ul {
             margin: 0;
         }
 
-        p {
-            margin-top: 1em;
-            color: $argo-color-gray-6;
-            text-transform: uppercase;
+        &--expanded {
+            max-height: calc(1.55em * 17);
+            transition: max-height 1s ease-in-out;
         }
+    }
 
-        &::before {
-            content: 'FILTERS';
-            display: block;
-            color: $argo-color-gray-6;
-            padding-bottom: 1em;
-            margin-top: 0.5em;
-        }
+    $filters-title-border-bottom: 1px solid $argo-color-gray-3;
+
+    &__filters-title {
+        height: $filters-container-collapsed-height;
+        padding: 0.25em 0;
+        display: flex;
+        align-items: center;
 
         &--expanded {
-            max-height: calc(1.55em * 17);
-            transition: max-height 1s ease-in-out;
-            &::before {
-                display: none;
-            }
+            border-bottom: $filters-title-border-bottom;
+        }
+
+        &__counter {
+            margin-right: 0;
+            width: 10ch;
+        }
+
+        &__expander {
+            cursor: pointer;
+            margin-left: 1em;
         }
     }
 
-    &__filters-container-title {
-        border-bottom: 1px solid $argo-color-gray-3;
-        margin-bottom: 1em;
+    @include breakpoint(xxlarge up) {
+        &__filters-container {
+            max-height: 100%;
+            transition: max-height 0.5s ease-in-out;
+        }
+
+        &__filters-title {
+            border-bottom: $filters-title-border-bottom;
+        }
+
+        &__filters-title__expander {
+            display: none;
+        }
     }
 
     &__filter {
@@ -125,10 +137,6 @@
         overflow-y: auto;
     }
 
-    &__filter-expander {
-        display: none;
-    }
-
     &__view-type {
         white-space: nowrap;
         i {
@@ -145,30 +153,10 @@
         }
     }
 
-    @include breakpoint(xxlarge up) {
-        &__summary {
-            margin-top: 5.3em;
-        }
-
-        &__filter-expander {
-            display: inline;
-        }
-
-        &__filter--expanded {
-            max-height: 1000px;
-            transition: max-height 0.5s ease-in-out;
-        }
-
-        &__filters-expander {
-            display: none;
-        }
-
-        &__filters-container {
-            max-height: 10000px;
-            &::before {
-                display: none;
-            }
-        }
+    &__filter-title {
+        margin: 0.5em 0 0 0;
+        color: $argo-color-gray-6;
+        text-transform: uppercase;
     }
 
     &__filter-label {
diff --git a/ui/src/app/applications/components/applications-list/applications-list.tsx b/ui/src/app/applications/components/applications-list/applications-list.tsx
index e1c094a772225..539c241e23bba 100644
--- a/ui/src/app/applications/components/applications-list/applications-list.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-list.tsx
@@ -6,7 +6,7 @@ import {RouteComponentProps} from 'react-router';
 import {Observable} from 'rxjs';
 
 import {ClusterCtx, DataLoader, EmptyState, ObservableQuery, Page, Paginate, Query, Spinner} from '../../../shared/components';
-import {Consumer} from '../../../shared/context';
+import {Consumer, ContextApis} from '../../../shared/context';
 import * as models from '../../../shared/models';
 import {AppsListPreferences, AppsListViewType, services} from '../../../shared/services';
 import {ApplicationCreatePanel} from '../application-create-panel/application-create-panel';
@@ -179,6 +179,18 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
         services.applications.get(appName, 'normal');
     }
 
+    function onFilterPrefChanged(ctx: ContextApis, newPref: AppsListPreferences) {
+        services.viewPreferences.updatePreferences({appList: newPref});
+        ctx.navigation.goto('.', {
+            proj: newPref.projectsFilter.join(','),
+            sync: newPref.syncFilter.join(','),
+            health: newPref.healthFilter.join(','),
+            namespace: newPref.namespacesFilter.join(','),
+            cluster: newPref.clustersFilter.join(','),
+            labels: newPref.labelsFilter.map(encodeURIComponent).join(',')
+        });
+    }
+
     return (
         <ClusterCtx.Provider value={clusters}>
             <Consumer>
@@ -274,6 +286,7 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                                                     }
                                                                                 }}
                                                                                 className='argo-field'
+                                                                                placeholder='Search applications...'
                                                                             />
                                                                         )}
                                                                         renderItem={item => (
@@ -298,21 +311,12 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                                         clusters={clusterList}
                                                                         applications={applications}
                                                                         pref={pref}
-                                                                        onChange={newPref => {
-                                                                            services.viewPreferences.updatePreferences({appList: newPref});
-                                                                            ctx.navigation.goto('.', {
-                                                                                proj: newPref.projectsFilter.join(','),
-                                                                                sync: newPref.syncFilter.join(','),
-                                                                                health: newPref.healthFilter.join(','),
-                                                                                namespace: newPref.namespacesFilter.join(','),
-                                                                                cluster: newPref.clustersFilter.join(','),
-                                                                                labels: newPref.labelsFilter.map(encodeURIComponent).join(',')
-                                                                            });
-                                                                        }}
+                                                                        onChange={newPref => onFilterPrefChanged(ctx, newPref)}
                                                                     />
                                                                 );
                                                             }}
                                                         </DataLoader>
+
                                                         {syncAppsInput && (
                                                             <ApplicationsSyncPanel
                                                                 key='syncsPanel'
@@ -329,8 +333,17 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                                 page={pref.page}
                                                                 emptyState={() => (
                                                                     <EmptyState icon='fa fa-search'>
-                                                                        <h4>No applications found</h4>
-                                                                        <h5>Try to change filter criteria</h5>
+                                                                        <h4>No matching applications found</h4>
+                                                                        <h5>
+                                                                            Change filter criteria or&nbsp;
+                                                                            <a
+                                                                                onClick={() => {
+                                                                                    AppsListPreferences.clearFilters(pref);
+                                                                                    onFilterPrefChanged(ctx, pref);
+                                                                                }}>
+                                                                                clear filters
+                                                                            </a>
+                                                                        </h5>
                                                                     </EmptyState>
                                                                 )}
                                                                 data={filterApps(applications, pref, pref.search)}
diff --git a/ui/src/app/shared/components/paginate/paginate.tsx b/ui/src/app/shared/components/paginate/paginate.tsx
index 9f0bce9a83c3e..09ce8838ad2a0 100644
--- a/ui/src/app/shared/components/paginate/paginate.tsx
+++ b/ui/src/app/shared/components/paginate/paginate.tsx
@@ -43,7 +43,7 @@ export function Paginate<T>({page, onPageChange, children, data, emptyState, pre
                                 <DropDownMenu
                                     anchor={() => (
                                         <a>
-                                            page size: {pageSize === -1 ? 'all' : pageSize} <i className='fa fa-caret-down' />
+                                            Items per page: {pageSize === -1 ? 'all' : pageSize} <i className='fa fa-caret-down' />
                                         </a>
                                     )}
                                     items={[5, 10, 15, 20, -1].map(count => ({
diff --git a/ui/src/app/shared/components/tags-input/tags-input.scss b/ui/src/app/shared/components/tags-input/tags-input.scss
index ad235373d2166..5e9dfc4c0647c 100644
--- a/ui/src/app/shared/components/tags-input/tags-input.scss
+++ b/ui/src/app/shared/components/tags-input/tags-input.scss
@@ -35,8 +35,7 @@
         background: $argo-color-gray-3;
         box-shadow: 1px 1px 3px $argo-color-gray-5;
         border-radius: 5px;
-        padding: 4px;
-        padding: 4px 15px 4px 4px;
+        padding: 4px 18px 4px 4px;
         margin: 0.2em 0.75em 0.2em 0;
         cursor: default;
         max-width: 100%;
diff --git a/ui/src/app/shared/components/tags-input/tags-input.tsx b/ui/src/app/shared/components/tags-input/tags-input.tsx
index eaa8cb6a0538c..040efdfa8a269 100644
--- a/ui/src/app/shared/components/tags-input/tags-input.tsx
+++ b/ui/src/app/shared/components/tags-input/tags-input.tsx
@@ -10,9 +10,20 @@ export interface TagsInputProps {
     placeholder?: string;
 }
 
+interface TagsInputState {
+    tags: string[];
+    input: string;
+    focused: boolean;
+}
+
 require('./tags-input.scss');
 
-export class TagsInput extends React.Component<TagsInputProps, {tags: string[]; input: string; focused: boolean}> {
+export class TagsInput extends React.Component<TagsInputProps, TagsInputState> {
+    public static getDerivedStateFromProps(props: TagsInputProps, state: TagsInputState) {
+        state.tags = props.tags;
+        return state;
+    }
+
     private inputEl: HTMLInputElement;
     private autocompleteApi: AutocompleteApi;
 
diff --git a/ui/src/app/shared/services/view-preferences-service.ts b/ui/src/app/shared/services/view-preferences-service.ts
index 859660c0c7812..531bd05823b04 100644
--- a/ui/src/app/shared/services/view-preferences-service.ts
+++ b/ui/src/app/shared/services/view-preferences-service.ts
@@ -13,15 +13,45 @@ export interface AppDetailsPreferences {
 
 export type AppsListViewType = 'tiles' | 'list' | 'summary';
 
-export interface AppsListPreferences {
-    labelsFilter: string[];
-    projectsFilter: string[];
-    reposFilter: string[];
-    syncFilter: string[];
-    healthFilter: string[];
-    namespacesFilter: string[];
-    clustersFilter: string[];
-    view: AppsListViewType;
+export class AppsListPreferences {
+    public static countEnabledFilters(pref: AppsListPreferences) {
+        // tslint:disable-next-line: prettier
+        return [
+            pref.clustersFilter,
+            pref.healthFilter,
+            pref.labelsFilter,
+            pref.namespacesFilter,
+            pref.projectsFilter,
+            pref.reposFilter,
+            pref.syncFilter
+        ].reduce((count, filter) => {
+                if (filter && filter.length > 0) {
+                    return count + 1;
+                }
+                return count;
+            },
+            0
+        );
+    }
+
+    public static clearFilters(pref: AppsListPreferences) {
+        pref.clustersFilter = [];
+        pref.healthFilter = [];
+        pref.labelsFilter = [];
+        pref.namespacesFilter = [];
+        pref.projectsFilter = [];
+        pref.reposFilter = [];
+        pref.syncFilter = [];
+    }
+
+    public labelsFilter: string[];
+    public projectsFilter: string[];
+    public reposFilter: string[];
+    public syncFilter: string[];
+    public healthFilter: string[];
+    public namespacesFilter: string[];
+    public clustersFilter: string[];
+    public view: AppsListViewType;
 }
 
 export interface ViewPreferences {