diff --git a/core/src/components/input/test/basic/index.html b/core/src/components/input/test/basic/index.html
index d8a7bb420d..9aceef7c12 100644
--- a/core/src/components/input/test/basic/index.html
+++ b/core/src/components/input/test/basic/index.html
@@ -13,6 +13,10 @@
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
     <script src="https://unpkg.com/@phosphor-icons/web"></script>
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.14.0/cdn/themes/light.css" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.14.0/cdn/shoelace-autoloader.js"></script>
+
     <style>
       .grid {
         display: grid;
@@ -40,29 +44,35 @@
   <body>
     <ion-app>
       <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button text="Go Back" default-href="/"></ion-back-button>
+          </ion-buttons>
+          <ion-title>Ionic</ion-title>
+        </ion-toolbar>
         <ion-toolbar>
           <ion-buttons slot="start">
             <ion-back-button text="Go Back" default-href="/">
               <i class="ph-fill ph-heart" slot="icon" style="color: hotpink"></i>
             </ion-back-button>
           </ion-buttons>
-          <ion-title>Input - Basic</ion-title>
+          <ion-title>Phosphor</ion-title>
         </ion-toolbar>
         <ion-toolbar>
           <ion-buttons slot="start">
-            <ion-back-button text="Go Back" default-href="/"></ion-back-button>
+            <ion-back-button text="Go Back" default-href="/">
+              <sl-icon name="suit-heart-fill" slot="icon" style="color: hotpink"></sl-icon>
+            </ion-back-button>
           </ion-buttons>
-          <ion-title>Input - Basic</ion-title>
+          <ion-title>Shoelace</ion-title>
         </ion-toolbar>
       </ion-header>
 
       <ion-content id="content" class="ion-padding">
+        <h1>Ionic</h1>
         <div class="grid">
           <div class="grid-item">
             <h2>Input / Clear Input</h2>
-            <ion-input value="hi@ionic.io" label="Email" clear-input="true">
-              <i class="ph-fill ph-heart" slot="clear-input-icon" style="color: hotpink"></i>
-            </ion-input>
             <ion-input value="hi@ionic.io" label="Email" clear-input="true"></ion-input>
           </div>
 
@@ -70,6 +80,32 @@
             <h2>Select</h2>
 
             <ion-select label="Select Value" toggle-icon="arrow-down" expanded-icon="arrow-up"></ion-select>
+          </div>
+
+          <div class="grid-item">
+            <h2>Searchbar / Clear and Search</h2>
+
+            <ion-searchbar clear-icon="trash" cancel-button-icon="sad" show-cancel-button="focus" show-clear-button="always" search-icon="send" value="search"></ion-searchbar>
+          </div>
+          <div class="grid-item">
+            <h2>Toast</h2>
+            <ion-button id="open-icon-prop-toast">Open Toast with Icon Prop</ion-button>
+            <ion-toast trigger="open-icon-prop-toast" icon="heart" duration="5000" message="Icon Property"></ion-toast>
+          </div>
+        </div>
+
+        <h1>Phosphor</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Input / Clear Input</h2>
+            <ion-input value="hi@ionic.io" label="Email" clear-input="true">
+              <i class="ph-fill ph-heart" slot="clear-input-icon" style="color: hotpink"></i>
+            </ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Select</h2>
+
             <ion-select label="Select Value" toggle-icon="arrow-down" expanded-icon="arrow-up">
               <i class="ph-fill ph-heart" slot="toggle-icon" style="color: red"></i>
               <i class="ph-fill ph-heart" slot="expanded-icon" style="color: green"></i>
@@ -79,22 +115,48 @@
           <div class="grid-item">
             <h2>Searchbar / Clear and Search</h2>
 
-            <ion-searchbar clear-icon="trash" cancel-button-icon="sad" show-cancel-button="focus" show-clear-button="always" search-icon="send" value="search"></ion-searchbar>
-            <ion-searchbar clear-icon="trash" cancel-button-icon="sad" show-cancel-button="focus" show-clear-button="always" search-icon="send" value="search">
-              <i class="ph-fill ph-trash" slot="clear-icon" style="color: red"></i>
-              <i class="ph-fill ph-paper-plane" slot="search-icon" style="color: red"></i>
-              <i class="ph-fill ph-smiley-sad" slot="cancel-icon" style="color: red"></i>
-            </ion-searchbar>
+            TODO
+          </div>
+          <div class="grid-item">
+            <h2>Toast</h2>
+            <ion-button id="open-icon-slot-toast">Open Toast with Icon Slot</ion-button>
+            <ion-toast trigger="open-icon-slot-toast" duration="5000" message="Icon Property">
+              <i class="ph-fill ph-heart" slot="icon" style="color: hotpink"></i>
+            </ion-toast>
           </div>
         </div>
 
-        <ion-button id="open-icon-prop-toast">Open Toast with Icon Prop</ion-button>
-        <ion-toast trigger="open-icon-prop-toast" icon="airplane" duration="3000" message="Icon Property"></ion-toast>
+        <h1>Shoelace</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Input / Clear Input</h2>
+            <ion-input value="hi@ionic.io" label="Email" clear-input="true">
+              <sl-icon name="suit-heart-fill" slot="clear-input-icon" style="color: hotpink"></sl-icon>
+            </ion-input>
+          </div>
 
-        <ion-button id="open-icon-slot-toast">Open Toast with Icon Slot</ion-button>
-        <ion-toast trigger="open-icon-slot-toast" duration="0" message="Icon Property">
-          <i class="ph-fill ph-heart" slot="icon" style="color: hotpink"></i>
-        </ion-toast>
+          <div class="grid-item">
+            <h2>Select</h2>
+
+            <ion-select label="Select Value" toggle-icon="arrow-down" expanded-icon="arrow-up">
+              <sl-icon name="suit-heart-fill" slot="toggle-icon" style="color: red"></sl-icon>
+              <sl-icon name="suit-heart-fill" slot="expanded-icon" style="color: green"></sl-icon>
+            </ion-select>
+          </div>
+
+          <div class="grid-item">
+            <h2>Searchbar / Clear and Search</h2>
+
+              TODO
+          </div>
+          <div class="grid-item">
+            <h2>Toast</h2>
+            <ion-button id="open-icon-slot-toast-sl">Open Toast with Icon Slot</ion-button>
+            <ion-toast trigger="open-icon-slot-toast-sl" duration="5000" message="Icon Property">
+              <sl-icon name="suit-heart-fill" slot="icon" style="color: hotpink"></sl-icon>
+            </ion-toast>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>
