diff --git a/learn/react-native/react-native-overview.md b/learn/react-native/react-native-overview.md
index 8408880a9..d3cd6b8a5 100644
--- a/learn/react-native/react-native-overview.md
+++ b/learn/react-native/react-native-overview.md
@@ -13,6 +13,38 @@ To develop fully Native apps, you do not need to learn additional programming sk
 
 ## Architecture
 
+### same line single <Flag name="android" />
+
+### same line multiple <Flag name="native" /> <Flag name="web" />
+
+### next line single
+<Flag name="native" style={{marginLeft:0}}/>
+
+### next line multiple
+<Flag name="native" style={{marginLeft:0}}/> <Flag name="android" /> <Flag name="ios" /> <Flag name="web"/>
+
+### default style for new flags <Flag name="some custom text" />
+
+## Example use cases
+
+### this section is only applicable for native <Flag name="native" />
+some description
+
+### this section is only applicable for web <Flag name="web" />
+some description
+
+### some other section
+some text
+
+<Flag name="web" style={{marginLeft:0}}/> - some web specific things
+
+<br />
+<br />
+<br />
+<Flag name="native" style={{marginLeft:0}}/>
+
+some native specific details, long para
+
 React Native is a mobile app framework from Facebook. It is based on ReactJS principles (Virtual DOM). You can define app UI using the React Native markup and extensions in JavaScript. React Native will render UI using native UI controls similar to native apps based on the UI definition in runtime.
 
 ![React Native Architecture](/learn/assets/react-native-architecture.png)
diff --git a/website/src/components/Flag.js b/website/src/components/Flag.js
new file mode 100644
index 000000000..e552490ea
--- /dev/null
+++ b/website/src/components/Flag.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import clsx from 'clsx';
+
+const PLATFORM_LABELS = {
+  android: 'Android',
+  ios: 'iOS',
+  native: 'React Native',
+  web: 'Web Only',
+};
+
+export default function Flag({ name, style, className }) {
+  const key = name?.toLowerCase();
+  const label = PLATFORM_LABELS[key] || name;
+  const combinedClassName = clsx('flag', `flag-${key?.replace(/\s+/g, '-')}`, className);
+  return <span className={combinedClassName} style={style}>{label}</span>;
+}
diff --git a/website/src/theme/MDXComponents.js b/website/src/theme/MDXComponents.js
new file mode 100644
index 000000000..f4aaef0e1
--- /dev/null
+++ b/website/src/theme/MDXComponents.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import MDXComponents from '@theme-original/MDXComponents';
+import Flag from '@site/src/components/Flag';
+
+export default {
+  ...MDXComponents,
+  Flag,
+};
diff --git a/website/static/css/custom.css b/website/static/css/custom.css
index 22a637c08..10898a80d 100644
--- a/website/static/css/custom.css
+++ b/website/static/css/custom.css
@@ -1912,5 +1912,33 @@ h2.widget-header{
     }
 }
 
-
+.flag {
+    font-size: 0.8rem;
+    padding: 0.25rem 0.6rem;
+    border-radius: 0.25rem;
+    background-color: #eee;
+    color: #333;
+    margin-left: 0.25rem;
+    font-weight: var(--ifm-heading-font-weight);
+  }
+  
+  .flag-android {
+    background-color: #a4c639;
+    color: black;
+  }
+  
+  .flag-ios {
+    background-color: #007aff;
+    color: white;
+  }
+  
+  .flag-web {
+    background-color: #f26522;
+    color: white;
+  }
+  
+  .flag-native {
+    background-color: #6f42c1;
+    color: white;
+  }