diff --git a/src/pages/SystemBars.tsx b/src/pages/SystemBars.tsx
new file mode 100644
index 0000000..752f398
--- /dev/null
+++ b/src/pages/SystemBars.tsx
@@ -0,0 +1,77 @@
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonMenuButton,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import React from 'react';
+import { SystemBars, SystemBarsStyle, SystemBarType } from '@capacitor/core';
+
+const SystemBarsPage: React.FC = () => {
+  const setSystemBarStyleDefault = async () => {
+    SystemBars.setStyle({
+      style: SystemBarsStyle.Default,
+    });
+  };
+
+  const setSystemBarStyleLight = async () => {
+    await SystemBars.setStyle({ style: SystemBarsStyle.Light });
+  };
+
+  const setSystemBarStyleDark = async () => {
+    await SystemBars.setStyle({ style: SystemBarsStyle.Dark });
+  };
+
+  const showSystemBars = async () => {
+    await SystemBars.show();
+  };
+
+  const hideSystemBars = async () => {
+    await SystemBars.hide();
+  };
+
+  const hideNavigationBar = async () => {
+    await SystemBars.hide({
+      bar: SystemBarType.NavigationBar,
+    });
+  };
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonMenuButton />
+          </IonButtons>
+          <IonTitle>System Bars</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonButton expand="block" onClick={setSystemBarStyleDefault}>
+          Change System Bars Style Default
+        </IonButton>
+        <IonButton expand="block" onClick={setSystemBarStyleLight}>
+          Change System Bars Style Light
+        </IonButton>
+        <IonButton expand="block" onClick={setSystemBarStyleDark}>
+          Change System Bars Style Dark
+        </IonButton>
+        <IonButton expand="block" onClick={showSystemBars}>
+          Show System Bars
+        </IonButton>
+        <IonButton expand="block" onClick={hideSystemBars}>
+          Hide System Bars
+        </IonButton>
+        <IonButton expand="block" onClick={hideNavigationBar}>
+          Hide Navigation Bar
+        </IonButton>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default SystemBarsPage;
diff --git a/src/routes.tsx b/src/routes.tsx
index 5b6a599..37f2ab3 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -23,6 +23,7 @@ import ScreenOrientation from './pages/ScreenOrientation';
 import SharePage from './pages/Share';
 import SplashScreenPage from './pages/SplashScreen';
 import StatusBarPage from './pages/StatusBar';
+import SystemBarsPage from './pages/SystemBars';
 import Preferences from './pages/Preferences';
 import TextZoom from './pages/TextZoom';
 import ToastPage from './pages/Toast';
@@ -265,6 +266,16 @@ const routes: Page[] = [
     ),
     component: StatusBarPage,
   },
+  {
+    title: 'System Bars',
+    url: '/system-bars',
+    icon: (
+      <span role="img" aria-label="vertical traffic light">
+        🚦
+      </span>
+    ),
+    component: SystemBarsPage,
+  },
   {
     title: 'Preferences',
     url: '/preferences',