diff --git a/apps/chrome-devtools/project.json b/apps/chrome-devtools/project.json
index d2f46a34e6..cc4b25bb38 100644
--- a/apps/chrome-devtools/project.json
+++ b/apps/chrome-devtools/project.json
@@ -154,13 +154,15 @@
       "outputs": [
         "{projectRoot}/dist/assets/**",
         "{projectRoot}/dist/manifest.json",
-        "{projectRoot}/dist/devtools.html"
+        "{projectRoot}/dist/devtools.html",
+        "{projectRoot}/dist/options.html"
       ],
       "inputs": [
         "global",
         "{projectRoot}/src/assets/**",
         "{projectRoot}/src/manifest.json",
-        "{projectRoot}/src/devtools.html"
+        "{projectRoot}/src/devtools.html",
+        "{projectRoot}/src/options.html"
       ]
     },
     "publish-extension": {
diff --git a/apps/chrome-devtools/schemas/state.schema.json b/apps/chrome-devtools/schemas/state.schema.json
index 5faed105fa..9af49b2d7a 100644
--- a/apps/chrome-devtools/schemas/state.schema.json
+++ b/apps/chrome-devtools/schemas/state.schema.json
@@ -10,22 +10,27 @@
   ],
   "properties": {
     "color": {
+      "description": "Background color to identify the state in the selection widget.",
       "type": "string"
     },
     "colorContrast": {
+      "description": "Text color for the state in the selection widget in contrast with the background color.",
       "type": "string"
     },
     "name": {
+      "description": "User friendly name to identify the state in the Chrome Extension state panel.",
       "type": "string"
     },
     "configurations": {
       "type": "object",
+      "description": "List of the configuration-override to apply on the application.",
       "additionalProperties": {
       	"type": "object"
       }
     },
     "localizations": {
       "type": "object",
+      "description": "List of the localization-override to apply on the application.",
       "additionalProperties": {
         "type": "object",
         "additionalProperties": {
@@ -34,6 +39,7 @@
       }
     },
     "stylingVariables": {
+      "description": "List of the css-variable-override to apply on the application.",
       "type": "object",
       "additionalProperties": {
         "type": "string"
diff --git a/apps/chrome-devtools/src/app-devtools/app.component.html b/apps/chrome-devtools/src/app-devtools/app.component.html
index 461e3e9ec5..7b1e51916c 100644
--- a/apps/chrome-devtools/src/app-devtools/app.component.html
+++ b/apps/chrome-devtools/src/app-devtools/app.component.html
@@ -44,7 +44,7 @@
         </ng-template>
       </li>
     </ul>
-    <form [formGroup]="form"  class="px-4 pt-{{hasLocalChanges() ? '2' : '3'}} ng-pristine ng-valid ng-touched border-bottom ms-auto">
+    <form [formGroup]="form"  class="px-4 {{hasLocalChanges() ? 'pt-2' : 'pt-3'}} ng-pristine ng-valid ng-touched border-bottom ms-auto">
       <div>
         <ng-select
           [ngbTooltip]="
diff --git a/apps/chrome-devtools/src/app-devtools/app.component.ts b/apps/chrome-devtools/src/app-devtools/app.component.ts
index 39a1ff4db2..f60b2c97d9 100644
--- a/apps/chrome-devtools/src/app-devtools/app.component.ts
+++ b/apps/chrome-devtools/src/app-devtools/app.component.ts
@@ -22,7 +22,7 @@ import { ThemingPanelPresComponent } from './theming-panel/theming-panel-pres.co
   selector: 'app-root',
   templateUrl: './app.component.html',
   styles: `
-    ::ng-deep ng-select.local-change .ng-select-container {
+    :host ::ng-deep ng-select.local-change .ng-select-container {
       border-color: var(--bs-recommend-warning-color);
       border-width: medium;
       box-sizing: content-box;
diff --git a/apps/chrome-devtools/src/app-devtools/state-panel/state-panel.component.ts b/apps/chrome-devtools/src/app-devtools/state-panel/state-panel.component.ts
index ae6ed33d05..822c7e1410 100644
--- a/apps/chrome-devtools/src/app-devtools/state-panel/state-panel.component.ts
+++ b/apps/chrome-devtools/src/app-devtools/state-panel/state-panel.component.ts
@@ -1,5 +1,16 @@
-import { DOCUMENT, JsonPipe, KeyValuePipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, effect, type ElementRef, inject, type Signal, untracked, viewChild, ViewEncapsulation } from '@angular/core';
+import { DOCUMENT, JsonPipe, KeyValuePipe, NgClass } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  effect,
+  type ElementRef,
+  inject,
+  signal,
+  type Signal,
+  untracked,
+  viewChild,
+  ViewEncapsulation, WritableSignal
+} from '@angular/core';
 import { type AbstractControl, FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, type ValidationErrors, type ValidatorFn, Validators } from '@angular/forms';
 import { DfTooltipModule, DfTriggerClickDirective } from '@design-factory/design-factory';
 import { StateService } from '../../services';
@@ -66,7 +77,8 @@ const createStateForm = (name: string, color?: string | null) => new FormGroup<S
     ReactiveFormsModule,
     FormsModule,
     DfTriggerClickDirective,
-    DfTooltipModule
+    DfTooltipModule,
+    NgClass
   ]
 })
 export class StatePanelComponent {
@@ -80,6 +92,7 @@ export class StatePanelComponent {
   public readonly localState = this.stateService.localState;
   public readonly hasLocalChanges = this.stateService.hasLocalChanges;
   public readonly newStateNameErrorMessage: Signal<string | null>;
+  public readonly downloadState: WritableSignal<{ text: string; success: boolean } | null> = signal<{ text: string; success: boolean } | null>(null);
   public readonly form = this.formBuilder.group<StatesPanelForm>({
     newStateName: new FormControl('', stateNameValidators),
     newStateColor: new FormControl(''),
@@ -154,6 +167,10 @@ export class StatePanelComponent {
     this.stateService.setActiveState(stateName);
   }
 
+  /**
+   * Update a state and save its content in the Chrome Extension store.
+   * @param stateName
+   */
   public updateState(stateName: string) {
     const control = this.form.controls.states.controls[stateName];
     const activeState = this.activeState();
@@ -162,6 +179,9 @@ export class StatePanelComponent {
     }
   }
 
+  /**
+   * Create a new state and save its content in the Chrome Extension store.
+   */
   public saveNewState() {
     if (this.form.value.newStateName) {
       this.saveState(this.form.value.newStateName, this.form.value.newStateName, this.form.value.newStateColor || 'black');
@@ -174,12 +194,23 @@ export class StatePanelComponent {
     }
   }
 
+  /**
+   * Remove a state from the Chrome Extension application and store.
+   * Note that the active store cannot be deleted.
+   *
+   * @param stateName
+   */
   public deleteState(stateName: string) {
     if (this.activeState()?.name !== stateName) {
       this.stateService.deleteState(stateName);
     }
   }
 
+  /**
+   * Download a state as a json file
+   *
+   * @param stateName
+   */
   public exportState(stateName: string) {
     const state = this.states()[stateName];
     if (!state) {
@@ -192,6 +223,11 @@ export class StatePanelComponent {
     a.click();
   }
 
+  /**
+   * Download a state file, add it to the state list and share it .
+   *
+   * @param event
+   */
   public async onFileChange(event: InputEvent) {
     try {
       const element = event.target as HTMLInputElement;
@@ -250,30 +286,12 @@ export class StatePanelComponent {
             stylingVariables: state.stylingVariables
           }
         );
-        const el = this.importStateText();
-        if (!el) {
-          return;
-        }
-        el.nativeElement.innerHTML = `${state.name} imported correctly`;
-        if (el.nativeElement.classList.contains('text-danger')) {
-          el.nativeElement.classList.remove('text-danger');
-        }
-        el.nativeElement.classList.add('text-success');
+        this.downloadState.set({ text: `${state.name} imported correctly`, success: true });
       } else {
         throw new Error('Invalid state');
       }
     } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error(e);
-      const el = this.importStateText();
-      if (!el) {
-        return;
-      }
-      el.nativeElement.innerHTML = (e as Error).message;
-      if (el.nativeElement.classList.contains('text-success')) {
-        el.nativeElement.classList.remove('text-success');
-      }
-      el.nativeElement.classList.add('text-danger');
+      this.downloadState.set({ text: (e as Error).message, success: false });
     } finally {
       // Clear the input once processed
       (event.target as HTMLInputElement).value = '';
diff --git a/apps/chrome-devtools/src/app-devtools/state-panel/state-panel.template.html b/apps/chrome-devtools/src/app-devtools/state-panel/state-panel.template.html
index fd7080f303..2d467c952c 100644
--- a/apps/chrome-devtools/src/app-devtools/state-panel/state-panel.template.html
+++ b/apps/chrome-devtools/src/app-devtools/state-panel/state-panel.template.html
@@ -25,7 +25,11 @@
       </button>
     </div>
   </div>
-  <div #importStateText class="import-state-text mt-2"></div>
+  @if (downloadState()) {
+    <div class="import-state-text mt-2" [ngClass]="{'text-danger': !downloadState()!.success, 'text-success': downloadState()!.success}">
+      {{downloadState()?.text}}
+    </div>
+  }
   <ul class="list-group list-group-flush mt-4" formGroupName="states">
     @for (state of states() | keyvalue; track state.key) {
       <li class="list-group-item d-flex align-items-center gap-4" [formGroupName]="state.key">
diff --git a/apps/chrome-devtools/src/components/app-connection/app-connection.component.ts b/apps/chrome-devtools/src/components/app-connection/app-connection.component.ts
index fb09ede3f7..05f69d4802 100644
--- a/apps/chrome-devtools/src/components/app-connection/app-connection.component.ts
+++ b/apps/chrome-devtools/src/components/app-connection/app-connection.component.ts
@@ -1,11 +1,7 @@
 import { AsyncPipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core';
-import { Observable, of, Subscription } from 'rxjs';
-import { catchError, map, startWith, take, timeout } from 'rxjs/operators';
-import { ChromeExtensionConnectionService, isRuleEngineEventsMessage } from '../../services/connection.service';
-import { RulesetHistoryService } from '../../services/ruleset-history.service';
-
-type AppState = 'loading' | 'timeout' | 'connected';
+import { ChangeDetectionStrategy, Component, inject, OnDestroy } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
+import { AppState, ChromeExtensionConnectionService } from '../../services/connection.service';
 
 @Component({
   selector: 'app-connection',
@@ -17,32 +13,14 @@ type AppState = 'loading' | 'timeout' | 'connected';
   ]
 })
 export class AppConnectionComponent implements OnDestroy {
-  /** Stream of application's state */
-  public appState$: Observable<AppState>;
-
   private readonly subscription = new Subscription();
+  private readonly connectionService = inject(ChromeExtensionConnectionService);
 
-  constructor(
-    connectionService: ChromeExtensionConnectionService,
-    rulesetHistoryService: RulesetHistoryService
-  ) {
-    this.subscription.add(
-      connectionService.message$.subscribe((message) => {
-        if (isRuleEngineEventsMessage(message)) {
-          rulesetHistoryService.update(message);
-        }
-      })
-    );
-
-    this.appState$ = connectionService.message$.pipe(
-      map(() => 'connected' as AppState),
-      take(1),
-      startWith('loading' as AppState),
-      timeout(3000),
-      catchError(() => of('timeout' as AppState))
-    );
+  /** Stream of application's state */
+  public appState$: Observable<AppState> = this.connectionService.appState$;
 
-    connectionService.activate();
+  constructor() {
+    this.connectionService.activate();
   }
 
   /** @inheritDoc */
diff --git a/apps/chrome-devtools/src/services/connection.service.ts b/apps/chrome-devtools/src/services/connection.service.ts
index c2de597a59..9f3653dbf2 100644
--- a/apps/chrome-devtools/src/services/connection.service.ts
+++ b/apps/chrome-devtools/src/services/connection.service.ts
@@ -2,8 +2,18 @@ import { ApplicationRef, Injectable, OnDestroy } from '@angular/core';
 import type { Dictionary } from '@ngrx/entity';
 import type { ConfigurationModel } from '@o3r/configuration';
 import { otterMessageType } from '@o3r/core';
-import { type Observable, ReplaySubject, Subscription } from 'rxjs';
-import { debounceTime, distinctUntilChanged, filter, map, shareReplay } from 'rxjs/operators';
+import {type Observable, of, ReplaySubject, Subscription} from 'rxjs';
+import {
+  catchError,
+  debounceTime,
+  distinctUntilChanged,
+  filter,
+  map,
+  shareReplay,
+  startWith,
+  take,
+  timeout
+} from 'rxjs/operators';
 import type { AvailableMessageContents } from './message.interface';
 
 import type { ApplicationInformationContentMessage } from '@o3r/application';
@@ -59,6 +69,8 @@ export const filterAndMapMessage = <T extends AvailableMessageContents, R>(
     shareReplay({ refCount: true, bufferSize: 1 })
   );
 
+export type AppState = 'loading' | 'timeout' | 'connected';
+
 /**
  * Service to communicate with the current tab
  */
@@ -71,6 +83,15 @@ export class ChromeExtensionConnectionService implements OnDestroy {
 
   /** Stream of messages received from the service worker */
   public message$ = this.messageSubject.asObservable();
+  /** Stream the state of the extension connection to the Otter application*/
+  public appState$ = this.message$.pipe(
+    map(() => 'connected' as AppState),
+    take(1),
+    startWith('loading' as AppState),
+    timeout(3000),
+    catchError(() => of('timeout' as AppState))
+  );
+
 
   private readonly configurations = new ReplaySubject<Dictionary<ConfigurationModel>>(1);
   public configurations$ = this.configurations.asObservable();
diff --git a/apps/chrome-devtools/src/services/localization.service.ts b/apps/chrome-devtools/src/services/localization.service.ts
index 1d856e1572..66295b0500 100644
--- a/apps/chrome-devtools/src/services/localization.service.ts
+++ b/apps/chrome-devtools/src/services/localization.service.ts
@@ -13,6 +13,7 @@ import { ChromeExtensionConnectionService, filterAndMapMessage } from './connect
 @Injectable({ providedIn: 'root' })
 export class LocalizationService {
   private readonly connectionService = inject(ChromeExtensionConnectionService);
+  private readonly lang = signal<string | undefined>(undefined);
   public readonly localizationsMetadata = toSignal(
     this.connectionService.message$.pipe(
       filterAndMapMessage(
@@ -40,7 +41,6 @@ export class LocalizationService {
     ),
     { initialValue: false }
   );
-  private readonly lang = signal<string | undefined>(undefined);
   public readonly currentLanguage = this.lang.asReadonly();
 
   public readonly translationsForCurrentLanguage: Signal<Record<string, string>> = toSignal(
@@ -55,9 +55,29 @@ export class LocalizationService {
   );
 
   constructor() {
+    const activated = toSignal(this.connectionService.appState$);
+    effect(() => {
+      if (activated() === 'connected') {
+        this.connectionService.sendMessage(
+          'requestMessages',
+          {
+            only: [
+              'localizations',
+              'languages',
+              'switchLanguage',
+              'isTranslationDeactivationEnabled'
+            ]
+          }
+        );
+      }
+    });
+
     effect(() => {
-      this.connectionService.sendMessage('switchLanguage', { language: this.currentLanguage() });
-      this.connectionService.sendMessage('requestMessages', { only: ['getTranslationValuesContentMessage'] });
+      const currentLanguage = this.currentLanguage();
+      if (currentLanguage) {
+        this.connectionService.sendMessage('switchLanguage', { language: this.currentLanguage() });
+        this.connectionService.sendMessage('requestMessages', { only: ['getTranslationValuesContentMessage'] });
+      }
     });
     const externalSwitchLanguage = toSignal(
       this.connectionService.message$.pipe(
diff --git a/apps/chrome-devtools/src/services/ruleset-history.service.ts b/apps/chrome-devtools/src/services/ruleset-history.service.ts
index d4a6cc596e..b523930fc9 100644
--- a/apps/chrome-devtools/src/services/ruleset-history.service.ts
+++ b/apps/chrome-devtools/src/services/ruleset-history.service.ts
@@ -1,14 +1,17 @@
-import { Injectable } from '@angular/core';
+import { effect, inject, Injectable } from '@angular/core';
 import type { RulesEngineDebugEventsContentMessage, RulesetExecutionDebug } from '@o3r/rules-engine';
 import { rulesetReportToHistory } from '@o3r/rules-engine';
-import { map, Observable, ReplaySubject } from 'rxjs';
-import {shareReplay} from 'rxjs/operators';
+import { filter, map, Observable, ReplaySubject } from 'rxjs';
+import { shareReplay } from 'rxjs/operators';
+import { ChromeExtensionConnectionService, isRuleEngineEventsMessage } from './connection.service';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 @Injectable({
   providedIn: 'root'
 })
 export class RulesetHistoryService {
   private readonly ruleEngineDebugEventsSubject = new ReplaySubject<RulesEngineDebugEventsContentMessage>(1);
+  private readonly connectionService = inject(ChromeExtensionConnectionService);
 
   /** Ruleset history stream */
   public readonly ruleEngineDebugEvents$ = this.ruleEngineDebugEventsSubject.asObservable();
@@ -21,6 +24,16 @@ export class RulesetHistoryService {
     shareReplay({bufferSize: 1, refCount: true})
   );
 
+  constructor() {
+    const extensionMessage = toSignal(this.connectionService.message$.pipe(filter(isRuleEngineEventsMessage)));
+    effect(() => {
+      const message = extensionMessage();
+      if (message) {
+        this.update(message);
+      }
+    });
+  }
+
   /**
    * Update the ruleset history
    * @param message Message from the background service
diff --git a/apps/chrome-devtools/src/services/state.service.ts b/apps/chrome-devtools/src/services/state.service.ts
index 41a3678f16..dc4b9b8a22 100644
--- a/apps/chrome-devtools/src/services/state.service.ts
+++ b/apps/chrome-devtools/src/services/state.service.ts
@@ -1,10 +1,14 @@
-import { computed, effect, inject, Injectable, signal, type Signal, untracked } from '@angular/core';
+import { computed, effect, inject, Injectable, signal, type Signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { ChromeExtensionConnectionService, filterAndMapMessage, isApplicationInformationMessage } from './connection.service';
+import {
+  ChromeExtensionConnectionService,
+  filterAndMapMessage,
+  isApplicationInformationMessage
+} from './connection.service';
 import { ACTIVE_STATE_NAME_KEY, type State, type StateOverride, STATES_KEY } from '../extension/interface';
 import { LocalizationService } from './localization.service';
 
-@Injectable({ providedIn: 'root' })
+@Injectable({providedIn: 'root'})
 export class StateService {
   private readonly connectionService = inject(ChromeExtensionConnectionService);
   private readonly localizationService = inject(LocalizationService);
@@ -75,12 +79,12 @@ export class StateService {
 
     effect(() => {
       const state = this.activeState();
+      const languages = this.languages();
       this.updateLocalState(state || {}, true);
       // TODO reset configuration (is it possible? based on default value from metadata if present?)
-      // Reset all languages before applying override of the new state
-      untracked(this.languages).forEach((lang) => this.connectionService.sendMessage('reloadLocalizationKeys', { lang }));
       // Reset all styling variables before applying override of the new state
       this.connectionService.sendMessage('resetStylingVariables', {});
+      languages.forEach((lang) => this.connectionService.sendMessage('reloadLocalizationKeys', {lang}));
       if (!state) {
         this.connectionService.sendMessage('unselectState', {});
         return;