diff --git a/package-lock.json b/package-lock.json
index 1c53dde3..bfe72ac1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,11 +32,11 @@
         "angular-oauth2-oidc": "^18.0.0",
         "angular-oauth2-oidc-jwks": "^17.0.0",
         "arlas-iam-api": "27.0.0",
-        "arlas-map": "~27.0.2",
+        "arlas-map": "~27.0.3",
         "arlas-permissions-api": "27.0.0",
         "arlas-persistence-api": "27.0.0",
         "arlas-tagger-api": "27.0.0",
-        "arlas-web-components": "~27.0.2",
+        "arlas-web-components": "~27.0.3",
         "arlas-web-contributors": "~27.0.0",
         "cli-color": "^1.2.0",
         "core-js": "~3.26.1",
@@ -7654,9 +7654,9 @@
       }
     },
     "node_modules/arlas-map": {
-      "version": "27.0.2",
-      "resolved": "https://registry.npmjs.org/arlas-map/-/arlas-map-27.0.2.tgz",
-      "integrity": "sha512-/mvttcdv4zad0mhl1vjJsrlq42g7WQWy4kEnsq6tuSJebTtZGQJoprZB6XPILmN09XKzTjAH5CmU6s7WC2MULQ==",
+      "version": "27.0.3",
+      "resolved": "https://registry.npmjs.org/arlas-map/-/arlas-map-27.0.3.tgz",
+      "integrity": "sha512-dn8vCMhhAbR5qwv6bb3ZgUG+h+/gz/dUI5msPBVSusFwYg75wS+GHMHzfhzuBR7/K975CeUse7qfi10qLDnvwg==",
       "dependencies": {
         "@mapbox/mapbox-gl-draw": "^1.4.3",
         "@mapbox/mapbox-gl-draw-static-mode": "^1.0.1",
@@ -7674,7 +7674,7 @@
         "@turf/rhumb-destination": "^6.5.0",
         "@turf/transform-rotate": "^6.5.0",
         "@turf/transform-translate": "^6.5.0",
-        "arlas-web-components": "27.0.2",
+        "arlas-web-components": "27.0.3",
         "geojson-polygon-self-intersections": "1.2.1",
         "geojson-validation": "0.2.1",
         "jsts": "2.1.0",
@@ -7739,9 +7739,9 @@
       }
     },
     "node_modules/arlas-web-components": {
-      "version": "27.0.2",
-      "resolved": "https://registry.npmjs.org/arlas-web-components/-/arlas-web-components-27.0.2.tgz",
-      "integrity": "sha512-p5Xsaja8B2vpdxhU1kytpTEpksaOSkJTMj6fqKvS9E6/6as4HVeQ4O30fBcNewU+8Nh5EIY1UFUy+05jfFgD8Q==",
+      "version": "27.0.3",
+      "resolved": "https://registry.npmjs.org/arlas-web-components/-/arlas-web-components-27.0.3.tgz",
+      "integrity": "sha512-WMoupWuyObidayJE7XiXwHEh0ruPIOdWWa7aShjtu2HylK4w8jAnCR+yKdYFnG95evrXwFwVVOZaRgMA3huBfQ==",
       "dependencies": {
         "arlas-d3": "~12.0.0",
         "iv-viewer": "^2.2.1",
diff --git a/package.json b/package.json
index 39a76dec..aefc724f 100644
--- a/package.json
+++ b/package.json
@@ -47,9 +47,9 @@
     "arlas-permissions-api": "27.0.0",
     "arlas-persistence-api": "27.0.0",
     "arlas-tagger-api": "27.0.0",
-    "arlas-web-components": "~27.0.2",
+    "arlas-web-components": "~27.0.3",
     "arlas-web-contributors": "~27.0.0",
-    "arlas-map": "~27.0.2",
+    "arlas-map": "~27.0.3",
     "cli-color": "^1.2.0",
     "core-js": "~3.26.1",
     "fetch-intercept": "^2.3.1",
diff --git a/projects/arlas-toolkit/package.json b/projects/arlas-toolkit/package.json
index 5f3a9c72..848545c5 100644
--- a/projects/arlas-toolkit/package.json
+++ b/projects/arlas-toolkit/package.json
@@ -45,9 +45,9 @@
     "arlas-permissions-api": "27.0.0",
     "arlas-persistence-api": "27.0.0",
     "arlas-tagger-api": "27.0.0",
-    "arlas-web-components": "~27.0.2",
+    "arlas-web-components": "~27.0.3",
     "arlas-web-contributors": "~27.0.0",
-    "arlas-map": "~27.0.2",
+    "arlas-map": "~27.0.3",
     "cli-color": "^1.2.0",
     "fetch-intercept": "^2.3.1",
     "hopscotch": "0.3.1",
diff --git a/projects/arlas-toolkit/src/lib/components/bookmark/bookmark.component.scss b/projects/arlas-toolkit/src/lib/components/bookmark/bookmark.component.scss
index 8a4155b0..ea196519 100644
--- a/projects/arlas-toolkit/src/lib/components/bookmark/bookmark.component.scss
+++ b/projects/arlas-toolkit/src/lib/components/bookmark/bookmark.component.scss
@@ -18,7 +18,7 @@
  */
 
 ::ng-deep.bookmark-manager .mdc-dialog__surface {
-  padding: 12px 24px;
+  padding: 24px 24px 12px 24px
 }
 
 .bookmark-table-items {
diff --git a/projects/arlas-toolkit/src/lib/components/filter-shortcut/filter-shortcut.component.scss b/projects/arlas-toolkit/src/lib/components/filter-shortcut/filter-shortcut.component.scss
index c824a284..ddbefe99 100644
--- a/projects/arlas-toolkit/src/lib/components/filter-shortcut/filter-shortcut.component.scss
+++ b/projects/arlas-toolkit/src/lib/components/filter-shortcut/filter-shortcut.component.scss
@@ -93,7 +93,7 @@ $border-color: #a1a1a1;
         ::ng-deep.powerbar__powerbar--top-group {
             height: 20px;
         }
-        ::ng-deep .powerbarTitle {
+        ::ng-deep .powerbars--title {
             display: none;
         }
         ::ng-deep.powerbars__powerbar {
diff --git a/projects/arlas-toolkit/src/lib/components/search/search-dialog.component.html b/projects/arlas-toolkit/src/lib/components/search/search-dialog.component.html
index 3df97566..47cfbaa3 100644
--- a/projects/arlas-toolkit/src/lib/components/search/search-dialog.component.html
+++ b/projects/arlas-toolkit/src/lib/components/search/search-dialog.component.html
@@ -23,7 +23,7 @@
     </div>
     <ul class="autocomplete" *ngIf="searchContributors.length === 1">
         <li *ngFor="let search of filteredSearch | async" class="search-option"
-            (click)="clickItemSearch(search.key_as_string)">
+            (click)="clickItemSearch(search.key_as_string)" [matTooltip]="search.key_as_string" matTooltipPosition="after">
             <span class="key">{{ search.key_as_string }}</span>
             <span class="count">{{ search.count }}</span>
         </li>
@@ -37,12 +37,12 @@
 
     <ul class="autocomplete" *ngIf="searchContributors.length > 1">
         <li *ngFor="let search of filteredSearch | async" class="search-option"
-            (click)="clickItemSearch(search.key_as_string)">
+            (click)="clickItemSearch(search.key_as_string)" [matTooltip]="search.key_as_string" matTooltipPosition="after">
             <span class="key">{{ search.key_as_string }}</span>
             <div class="flex-span collections-count" >
             <div *ngFor="let s of search.collections" class="flex-span">
                 <span class="flex-span">
-                    <mat-icon [matTooltip]="s.collection | getCollectionDisplayName | translate" 
+                    <mat-icon [matTooltip]="s.collection | getCollectionDisplayName | translate"
                     [style.color]="s.color"
                         class="chip-collection">fiber_manual_record</mat-icon>
                     <span class="count">{{ s.count }}</span>
diff --git a/projects/arlas-toolkit/src/lib/components/search/search-dialog.component.scss b/projects/arlas-toolkit/src/lib/components/search/search-dialog.component.scss
index 37f8c9b3..54225578 100644
--- a/projects/arlas-toolkit/src/lib/components/search/search-dialog.component.scss
+++ b/projects/arlas-toolkit/src/lib/components/search/search-dialog.component.scss
@@ -49,6 +49,7 @@
     display: flex;
     flex-direction: column;
     padding: 4px;
+    overflow-x: clip;
 
     .arlas-search-container {
         display: flex;
@@ -78,6 +79,9 @@
         }
 
         .close {
+            padding: 0;
+            --mdc-icon-button-state-layer-size: 24px;
+
             .icon {
                 font-size: 18px;
                 height: 18px;
@@ -111,11 +115,13 @@
 
             span {
                 padding: 0 4px;
+                text-overflow: ellipsis;
+                overflow: hidden;
             }
             .count {
                 color: #5a5555;
                 position: relative;
-                top: 10px;
+                top: 5px;
             }
         }
     }
@@ -127,33 +133,32 @@
     box-shadow: none;
 }
 
-::ng-deep .settings-list .mat-menu-content {
-    display: flex;
-    flex-direction: column;
-    margin: 5px;
-    padding: 2px;
-    font-size: smaller;
-}
-
-
-
-::ng-deep .settings-list .mat-checkbox .mat-checkbox-frame {
-    transform: scale(0.8);
-    border-width: 2px;
-    border-style: solid;
-    border-radius: 3px;
-}
-
-::ng-deep .settings-list .mat-checkbox-checked .mat-checkbox-background {
-    transform: scale(0.8);
-    background-color: transparent;
-}
-
-::ng-deep .settings-list .mat-checkbox-inner-container {
-    margin-right: 0px;
-
-}
+::ng-deep .settings-list {
+    .mat-mdc-menu-content {
+        display: flex;
+        flex-direction: column;
+        margin: 5px;
+        padding: 2px;
+        font-size: 12px;
+
+        .mat-mdc-checkbox .mdc-checkbox {
+            --mdc-checkbox-state-layer-size: 18px;
+            --mdc-checkbox-selected-icon-color: var(--arlas-search-checkbox-color, grey);
+            --mdc-checkbox-selected-focus-icon-color: var(--arlas-search-checkbox-color, grey);
+            --mdc-checkbox-selected-hover-icon-color: var(--arlas-search-checkbox-color, grey);
+            --mdc-checkbox-selected-pressed-icon-color: var(--arlas-search-checkbox-color, grey);
+            --mdc-checkbox-selected-checkmark-color: var(--arlas-search-checkbox-color, grey);
+            --mdc-checkbox-unselected-focus-icon-color: var(--arlas-search-checkbox-color, grey);
+            --mdc-checkbox-selected-focus-state-layer-color: var(--arlas-search-checkbox-color, grey);
+            transform: scale(0.8);
+
+            &__ripple {
+                display: none;
+            }
 
-::ng-deep .settings-list mat-checkbox .mat-checkbox-checkmark-path {
-    stroke: grey !important;
+            &__background {
+                background-color: transparent !important;
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/projects/arlas-toolkit/src/lib/components/timeline/timeline/timeline.component.scss b/projects/arlas-toolkit/src/lib/components/timeline/timeline/timeline.component.scss
index 677ba373..5b7311a2 100644
--- a/projects/arlas-toolkit/src/lib/components/timeline/timeline/timeline.component.scss
+++ b/projects/arlas-toolkit/src/lib/components/timeline/timeline/timeline.component.scss
@@ -48,7 +48,7 @@ $large-icon-size: 48px;
 }
 
 .arlas-timeline--legend-collection {
-  font-size: 0.9em;
+  font-size: 15px;
   white-space: nowrap;
 }
 
diff --git a/projects/arlas-toolkit/src/lib/services/error/error.service.ts b/projects/arlas-toolkit/src/lib/services/error/error.service.ts
index fbb90cdf..dd590a52 100644
--- a/projects/arlas-toolkit/src/lib/services/error/error.service.ts
+++ b/projects/arlas-toolkit/src/lib/services/error/error.service.ts
@@ -27,6 +27,8 @@ import { AuthorisationError } from '../../tools/errors/authorisation-error';
 import { BackendError } from '../../tools/errors/backend-error';
 import { SettingsError } from '../../tools/errors/settings-error';
 import { ArlasCollaborativesearchService } from '../collaborative-search/arlas.collaborative-search.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { TranslateService } from '@ngx-translate/core';
 
 @Injectable({
   providedIn: 'root'
@@ -38,7 +40,9 @@ export class ErrorService {
   public constructor(
     private readonly dialog: MatDialog,
     private readonly settingsService: ArlasSettingsService,
-    private readonly arlasCollaborationService: ArlasCollaborativesearchService
+    private readonly arlasCollaborationService: ArlasCollaborativesearchService,
+    private readonly snackBar: MatSnackBar,
+    private readonly translate: TranslateService
   ) { }
 
   public emitAuthorisationError(error: AuthorisationError, forceAction = true) {
@@ -77,15 +81,19 @@ export class ErrorService {
     }
   }
 
-  public emitBackendError(status: number, message: string, service: string) {
-    if (!this.dialog.openDialogs || this.dialog.openDialogs.length === 0) {
-      this.dialog.open(DeniedAccessDialogComponent, {
-        disableClose: true, data: {
-          error: new BackendError(status, message, this.settingsService.getArlasHubUrl(), service),
-          forceAction: true
-        },
-        panelClass: 'arlas-error-dialog'
-      });
+  public emitBackendError(status: number, message: string, service: string, mode: 'snackbar' | 'dialog' = 'dialog') {
+    if (mode === 'dialog') {
+      if (!this.dialog.openDialogs || this.dialog.openDialogs.length === 0) {
+        this.dialog.open(DeniedAccessDialogComponent, {
+          disableClose: true, data: {
+            error: new BackendError(status, message, this.settingsService.getArlasHubUrl(), service),
+            forceAction: true
+          },
+          panelClass: 'arlas-error-dialog'
+        });
+      }
+    } else if (mode === 'snackbar') {
+      this.snackBar.open(message, this.translate.instant('Close'), { panelClass: 'arlas-error-snackbar' });
     }
   }
 
diff --git a/projects/arlas-toolkit/src/lib/services/interceptor/fetch-interceptor.service.ts b/projects/arlas-toolkit/src/lib/services/interceptor/fetch-interceptor.service.ts
index 7ebfd757..2a44abf6 100644
--- a/projects/arlas-toolkit/src/lib/services/interceptor/fetch-interceptor.service.ts
+++ b/projects/arlas-toolkit/src/lib/services/interceptor/fetch-interceptor.service.ts
@@ -91,7 +91,7 @@ export class FetchInterceptorService {
             } else if (code === 404) {
               message = marker('The requested data does not exist.');
             }
-            this.errorService.emitBackendError(code, message, marker('ARLAS-server'));
+            this.errorService.emitBackendError(code, message, marker('ARLAS-server'), 'snackbar');
           }
           return response;
         },
diff --git a/projects/arlas-toolkit/src/lib/toolkit.component.css b/projects/arlas-toolkit/src/lib/toolkit.component.scss
similarity index 81%
rename from projects/arlas-toolkit/src/lib/toolkit.component.css
rename to projects/arlas-toolkit/src/lib/toolkit.component.scss
index 44f56da6..373d732e 100644
--- a/projects/arlas-toolkit/src/lib/toolkit.component.css
+++ b/projects/arlas-toolkit/src/lib/toolkit.component.scss
@@ -16,3 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
+::ng-deep .arlas-error-snackbar {
+    --mdc-snackbar-supporting-text-color: white;
+    --mat-snack-bar-button-color: white;
+    --mdc-snackbar-container-color: rgb(212, 17, 17);
+}
diff --git a/projects/arlas-toolkit/src/lib/toolkit.component.ts b/projects/arlas-toolkit/src/lib/toolkit.component.ts
index ab3d9d82..8209b032 100644
--- a/projects/arlas-toolkit/src/lib/toolkit.component.ts
+++ b/projects/arlas-toolkit/src/lib/toolkit.component.ts
@@ -32,7 +32,7 @@ import { ErrorService } from './services/error/error.service';
   selector: 'arlas-tool-root',
   templateUrl: './toolkit.component.html',
   providers: [Location],
-  styleUrls: ['./toolkit.component.css']
+  styleUrls: ['./toolkit.component.scss']
 })
 export class ToolkitComponent implements AfterViewInit, OnInit, OnDestroy {