diff --git a/core/api.txt b/core/api.txt
index 8c02cb0477..f1073f9232 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -936,6 +936,7 @@ ion-router-link,css-prop,--color
 ion-router-outlet,shadow
 ion-router-outlet,prop,animated,boolean,true,false,false
 ion-router-outlet,prop,animation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-router-outlet,prop,mode,"ios" | "md",getIonMode(this),false,false
 
 ion-row,shadow
 
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 10c45f24e1..0f9d588141 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -2029,6 +2029,10 @@ export namespace Components {
     'commit': (enteringEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: RouterOutletOptions | undefined) => Promise<boolean>;
     'delegate'?: FrameworkDelegate;
     'getRouteId': () => Promise<RouteID | undefined>;
+    /**
+    * The mode determines which platform styles to use.
+    */
+    'mode': "ios" | "md";
     'setRouteId': (id: string, params: ComponentProps<null> | undefined, direction: RouterDirection) => Promise<RouteWrite>;
     'swipeHandler'?: SwipeGestureHandler;
   }
@@ -5254,6 +5258,10 @@ declare namespace LocalJSX {
     * By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions.
     */
     'animation'?: AnimationBuilder;
+    /**
+    * The mode determines which platform styles to use.
+    */
+    'mode'?: "ios" | "md";
   }
   interface IonRow extends JSXBase.HTMLAttributes<HTMLIonRowElement> {}
   interface IonSearchbar extends JSXBase.HTMLAttributes<HTMLIonSearchbarElement> {
diff --git a/core/src/components/router-outlet/readme.md b/core/src/components/router-outlet/readme.md
index 3797c8cfd5..6c7184f082 100644
--- a/core/src/components/router-outlet/readme.md
+++ b/core/src/components/router-outlet/readme.md
@@ -30,10 +30,11 @@ For handling Router Guards, the older `ionViewCanEnter` and `ionViewCanLeave` ha
 
 ## Properties
 
-| Property    | Attribute  | Description                                                                                                                                                                                    | Type                                                                                   | Default     |
-| ----------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
-| `animated`  | `animated` | If `true`, the router-outlet should animate the transition of components.                                                                                                                      | `boolean`                                                                              | `true`      |
-| `animation` | --         | By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
+| Property    | Attribute  | Description                                                                                                                                                                                    | Type                                                                                   | Default            |
+| ----------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ------------------ |
+| `animated`  | `animated` | If `true`, the router-outlet should animate the transition of components.                                                                                                                      | `boolean`                                                                              | `true`             |
+| `animation` | --         | By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined`        |
+| `mode`      | `mode`     | The mode determines which platform styles to use.                                                                                                                                              | `"ios" \| "md"`                                                                        | `getIonMode(this)` |
 
 
 ----------------------------------------------
diff --git a/core/src/components/router-outlet/route-outlet.tsx b/core/src/components/router-outlet/route-outlet.tsx
index 459c623179..ac6c78b345 100644
--- a/core/src/components/router-outlet/route-outlet.tsx
+++ b/core/src/components/router-outlet/route-outlet.tsx
@@ -21,6 +21,11 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
 
   @Element() el!: HTMLElement;
 
+  /**
+   * The mode determines which platform styles to use.
+   */
+  @Prop({ mutable: true }) mode = getIonMode(this);
+
   /** @internal */
   @Prop() delegate?: FrameworkDelegate;
 
@@ -147,8 +152,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
     // emit nav will change event
     this.ionNavWillChange.emit();
 
-    const mode = getIonMode(this);
-    const { el } = this;
+    const { el, mode } = this;
     const animated = this.animated && config.getBoolean('animated', true);
     const animationBuilder = this.animation || opts.animationBuilder || config.get('navAnimation');