diff --git a/packages/react/test/base/src/App.tsx b/packages/react/test/base/src/App.tsx
index 475e4fdcd7..2f7f4a63de 100644
--- a/packages/react/test/base/src/App.tsx
+++ b/packages/react/test/base/src/App.tsx
@@ -44,7 +44,7 @@ const App: React.FC = () => (
   <IonApp>
     <IonReactRouter>
       <IonRouterOutlet>
-        <Route path="/" component={Main} />
+        <Route exact path="/" component={Main} />
         <Route path="/overlay-hooks" component={OverlayHooks} />
         <Route path="/overlay-components" component={OverlayComponents} />
         <Route path="/overlay-components/nested-popover" component={IonPopoverNested} />
diff --git a/packages/react/test/base/src/pages/Icons.tsx b/packages/react/test/base/src/pages/Icons.tsx
index caf9f0b4e6..9e0aa52e3f 100644
--- a/packages/react/test/base/src/pages/Icons.tsx
+++ b/packages/react/test/base/src/pages/Icons.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonTitle, IonToolbar } from '@ionic/react';
+import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonTitle, IonToolbar, IonPage } from '@ionic/react';
 import { heart, heartCircleOutline, logoApple, logoTwitter, personCircleOutline, star, starOutline, trash } from 'ionicons/icons';
 
 interface IconsProps {}
@@ -14,10 +14,10 @@ const Icons: React.FC<IconsProps> = () => {
   }
 
   return (
-    <>
+    <IonPage>
       <IonHeader translucent={true}>
         <IonToolbar>
-          <IonButtons>
+          <IonButtons slot="start">
             <IonBackButton></IonBackButton>
           </IonButtons>
           <IonTitle>Icons</IonTitle>
@@ -88,7 +88,7 @@ const Icons: React.FC<IconsProps> = () => {
           </IonItem>
         </IonList>
       </IonContent>
-    </>
+    </IonPage>
   );
 };
 
diff --git a/packages/react/test/base/src/pages/Inputs.tsx b/packages/react/test/base/src/pages/Inputs.tsx
index fd4656ee68..7e5db11b5d 100644
--- a/packages/react/test/base/src/pages/Inputs.tsx
+++ b/packages/react/test/base/src/pages/Inputs.tsx
@@ -98,7 +98,7 @@ const Inputs: React.FC<InputsProps> = () => {
     <IonPage data-pageid="inputs">
       <IonHeader translucent={true}>
         <IonToolbar>
-          <IonButtons>
+          <IonButtons slot="start">
             <IonBackButton></IonBackButton>
           </IonButtons>
           <IonTitle>Inputs</IonTitle>
diff --git a/packages/react/test/base/src/pages/Main.tsx b/packages/react/test/base/src/pages/Main.tsx
index d7fc30c376..dd87350d9b 100644
--- a/packages/react/test/base/src/pages/Main.tsx
+++ b/packages/react/test/base/src/pages/Main.tsx
@@ -40,6 +40,9 @@ const Main: React.FC<MainProps> = () => {
           <IonItem routerLink="/tabs-basic">
             <IonLabel>Tabs with Basic Navigation</IonLabel>
           </IonItem>
+          <IonItem routerLink="/tabs-direct-navigation">
+            <IonLabel>Tabs with Direct Navigation</IonLabel>
+          </IonItem>
           <IonItem routerLink="/icons">
             <IonLabel>Icons</IonLabel>
           </IonItem>
diff --git a/packages/react/test/base/src/pages/Tabs.tsx b/packages/react/test/base/src/pages/Tabs.tsx
index 08a2cfa8af..2098bfcb26 100644
--- a/packages/react/test/base/src/pages/Tabs.tsx
+++ b/packages/react/test/base/src/pages/Tabs.tsx
@@ -1,22 +1,24 @@
 import React from 'react';
-import { IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
+import { IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs, IonPage } from '@ionic/react';
 import { Route, Redirect } from 'react-router';
 
 interface TabsProps {}
 
 const Tabs: React.FC<TabsProps> = () => {
   return (
-    <IonTabs>
-      <IonRouterOutlet>
-        <Redirect from="/tabs" to="/tabs/tab1" exact />
-        <Route path="/tabs/tab1" render={() => <IonLabel>Tab 1</IonLabel>} />
-      </IonRouterOutlet>
-      <IonTabBar slot="bottom">
-        <IonTabButton tab="tab1" onClick={() => window.alert('Tab was clicked')}>
-          <IonLabel>Click Handler</IonLabel>
-        </IonTabButton>
-      </IonTabBar>
-    </IonTabs>
+    <IonPage>
+      <IonTabs>
+        <IonRouterOutlet>
+          <Redirect from="/tabs" to="/tabs/tab1" exact />
+          <Route path="/tabs/tab1" render={() => <IonLabel>Tab 1</IonLabel>} />
+        </IonRouterOutlet>
+        <IonTabBar slot="bottom">
+          <IonTabButton tab="tab1" onClick={() => window.alert('Tab was clicked')}>
+            <IonLabel>Click Handler</IonLabel>
+          </IonTabButton>
+        </IonTabBar>
+      </IonTabs>
+    </IonPage>
   );
 };
 
diff --git a/packages/react/test/base/src/pages/TabsBasic.tsx b/packages/react/test/base/src/pages/TabsBasic.tsx
index 63821f06e0..5751cdb3a2 100644
--- a/packages/react/test/base/src/pages/TabsBasic.tsx
+++ b/packages/react/test/base/src/pages/TabsBasic.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { IonLabel, IonTabBar, IonTabButton, IonTabs, IonTab } from '@ionic/react';
+import { IonLabel, IonTabBar, IonTabButton, IonTabs, IonTab, IonPage } from '@ionic/react';
 
 interface TabsProps {}
 
@@ -13,22 +13,24 @@ const TabsBasic: React.FC<TabsProps> = () => {
   };
 
   return (
-    <IonTabs onIonTabsWillChange={onTabWillChange} onIonTabsDidChange={onTabDidChange}>
-      <IonTab tab="tab1">
-        <IonLabel>Tab 1 Content</IonLabel>
-      </IonTab>
-      <IonTab tab="tab2">
-        <IonLabel>Tab 2 Content</IonLabel>
-      </IonTab>
-      <IonTabBar slot="bottom">
-        <IonTabButton tab="tab1">
-          <IonLabel>Tab 1</IonLabel>
-        </IonTabButton>
-        <IonTabButton tab="tab2">
-          <IonLabel>Tab 2</IonLabel>
-        </IonTabButton>
-      </IonTabBar>
-    </IonTabs>
+    <IonPage>
+      <IonTabs onIonTabsWillChange={onTabWillChange} onIonTabsDidChange={onTabDidChange}>
+        <IonTab tab="tab1">
+          <IonLabel>Tab 1 Content</IonLabel>
+        </IonTab>
+        <IonTab tab="tab2">
+          <IonLabel>Tab 2 Content</IonLabel>
+        </IonTab>
+        <IonTabBar slot="bottom">
+          <IonTabButton tab="tab1">
+            <IonLabel>Tab 1</IonLabel>
+          </IonTabButton>
+          <IonTabButton tab="tab2">
+            <IonLabel>Tab 2</IonLabel>
+          </IonTabButton>
+        </IonTabBar>
+      </IonTabs>
+    </IonPage>
   );
 };
 
diff --git a/packages/react/test/base/src/pages/TabsDirectNavigation.tsx b/packages/react/test/base/src/pages/TabsDirectNavigation.tsx
index 0e8df5db1f..2e412e174a 100644
--- a/packages/react/test/base/src/pages/TabsDirectNavigation.tsx
+++ b/packages/react/test/base/src/pages/TabsDirectNavigation.tsx
@@ -78,7 +78,7 @@ const TabsDirectNavigation: React.FC = () => {
         </IonTabButton>
 
         <IonTabButton tab="library" href="/tabs-direct-navigation/library" data-testid="library-tab">
-          <IonIcon icon={libraryOutline}></IonIcon>  
+          <IonIcon icon={libraryOutline}></IonIcon>
           <IonLabel>Library</IonLabel>
         </IonTabButton>
 
@@ -91,4 +91,4 @@ const TabsDirectNavigation: React.FC = () => {
   );
 };
 
-export default TabsDirectNavigation;
\ No newline at end of file
+export default TabsDirectNavigation;
diff --git a/packages/react/test/base/src/pages/navigation/NavComponent.tsx b/packages/react/test/base/src/pages/navigation/NavComponent.tsx
index 08a5acd5b2..2da3374867 100644
--- a/packages/react/test/base/src/pages/navigation/NavComponent.tsx
+++ b/packages/react/test/base/src/pages/navigation/NavComponent.tsx
@@ -27,7 +27,7 @@ const PageOne = ({
       <IonHeader>
         <IonToolbar>
           <IonTitle>Page One</IonTitle>
-          <IonButtons>
+          <IonButtons slot="start">
             <IonBackButton />
           </IonButtons>
         </IonToolbar>
@@ -57,7 +57,7 @@ const PageTwo = ({ nav, ...rest }: { someValue: string; nav: React.MutableRefObj
       <IonHeader>
         <IonToolbar>
           <IonTitle>Page Two</IonTitle>
-          <IonButtons>
+          <IonButtons slot="start">
             <IonBackButton />
           </IonButtons>
         </IonToolbar>
@@ -84,7 +84,7 @@ const PageThree = ({ nav }: { nav: React.MutableRefObject<HTMLIonNavElement> })
       <IonHeader>
         <IonToolbar>
           <IonTitle>Page Three</IonTitle>
-          <IonButtons>
+          <IonButtons slot="start">
             <IonBackButton />
           </IonButtons>
         </IonToolbar>
diff --git a/packages/react/test/base/tests/e2e/specs/components/tabs-direct-navigation.cy.ts b/packages/react/test/base/tests/e2e/specs/components/tabs-direct-navigation.cy.ts
index b1bc76cb5b..f669470ce6 100644
--- a/packages/react/test/base/tests/e2e/specs/components/tabs-direct-navigation.cy.ts
+++ b/packages/react/test/base/tests/e2e/specs/components/tabs-direct-navigation.cy.ts
@@ -26,10 +26,9 @@ describe('Tabs Direct Navigation', () => {
   it('should update tab selection when navigating between tabs', () => {
     cy.visit('/tabs-direct-navigation/home');
     cy.get('[data-testid="home-tab"]').should('have.class', 'tab-selected');
-    
     cy.get('[data-testid="radio-tab"]').click();
     cy.get('[data-testid="radio-tab"]').should('have.class', 'tab-selected');
     cy.get('[data-testid="home-tab"]').should('not.have.class', 'tab-selected');
     cy.get('[data-testid="radio-content"]').should('be.visible');
   });
-});
\ No newline at end of file
+});