diff --git a/versioned_docs/version-7.x/MST-integration.md b/versioned_docs/version-7.x/MST-integration.md
index 929f73af0f4..421ba23c01f 100755
--- a/versioned_docs/version-7.x/MST-integration.md
+++ b/versioned_docs/version-7.x/MST-integration.md
@@ -4,6 +4,9 @@ title: Integrating with MobX State Tree
 sidebar_label: MobX State Tree integration
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 :::note
 
 This guide is incomplete. Please help improve this by sending pull requests.
@@ -32,12 +35,27 @@ At this point, you're probably wondering how to connect your MST objects with th
 
 Use `Provider` to wrap what you return from your root component's render method:
 
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```js
+<Provider myObject={this.myObject}>
+  <Navigation />
+</Provider>
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic" default>
+
 ```js
 <Provider myObject={this.myObject}>
   <NavigationContainer>{/* Screen configuration */}</NavigationContainer>
 </Provider>
 ```
 
+</TabItem>
+</Tabs>
+
 this will allow you to access `myObject` from any React component in the application through the `inject` function which can be quite useful.
 
 Use `observer` function to wrap all components that render observable data. This will make sure the components re-render once the data they render changes.