First Version

src/data/Biograph.json

+[
+    {
+        "id": 1,
+        "title": "Roberto Clemente",
+        "content": "Pelotero, Filántropo Fue un afamado pelotero puertorriqueño que formó parte de las Grandes Ligas de Estados Unidos...",
+        "tags": "Deportista, Puertorriqueño",
+        "photo": "require('../assets/RobertoClemente.jpg')"
+    },
+    {
+        "id": 2,
+        "title": "Marian Villaronga Toro",
+        "content": "Durante su incumbencia como secretario de Instrucción Pública se fundó la Editorial del Departamento, el servicio público de radio....",
+        "tags": "Educador, Funcionario público, Puertorriqueño",
+        "photo": "require('../assets/MarianoVillaronga.jpg')"
+    },
+    {
+        "id": 3,
+        "title": "German Rieckhoff Sampoyo",
+        "content": "Germán Rieckehoff Sampayo fue un pilar del olimpismo y defensor de la soberanía deportiva puertorriqueña. Fue presidente del Comité Olímpico de Puerto Rico (COPUR)....",
+        "tags": "Líder deportivo, Abogado, Puertorriqueño",
+        "photo": "require('../assets/DonGermán.jpg')"
+    }
+]

src/pages/AboutUs.css

+ion-grid {
+    --ion-grid-width: 50%;
+
+    --ion-grid-width-xs: 50%;
+    --ion-grid-width-sm: 288px;
+    --ion-grid-width-md: 384px;
+    --ion-grid-width-lg: 480px;
+    --ion-grid-width-xl: 570px;
+}
+
+ion-col {
+    text-align: center;
+    align-items: center;
+}

src/pages/AboutUs.tsx

   IonFooter,
   IonNavLink,
   IonTabButton,
-  IonIcon
+  IonIcon,
+  IonGrid,
+  IonRow,
+  IonCol
 } from '@ionic/react';
 import { arrowBack } from 'ionicons/icons';
 import React from 'react';
     <IonPage>
       <IonHeader>
         <IonToolbar>
-          <IonTitle>Más sobre nosotros</IonTitle>
-          <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
+          <IonGrid fixed={true}>
+            <IonRow>
+              <IonCol></IonCol>
+              <IonCol>
+                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
+                <IonTitle>Más sobre nosotros</IonTitle>
+              </IonCol>
+              <IonCol></IonCol>
+            </IonRow>
+          </IonGrid>
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen className="ion-padding">

src/pages/Biography.css

+ion-grid {
+    --ion-grid-width: 50%;
+
+    --ion-grid-width-xs: 50%;
+    --ion-grid-width-sm: 288px;
+    --ion-grid-width-md: 384px;
+    --ion-grid-width-lg: 480px;
+    --ion-grid-width-xl: 570px;
+}
+
+ion-col {
+    text-align: center;
+    align-items: center;
+}

src/pages/Biography.tsx

     IonButton,
     IonTabButton,
     IonIcon,
-    IonImg
+    IonImg,
+    IonGrid,
+    IonRow,
+    IonCol
 } from '@ionic/react';
 import { arrowBack } from 'ionicons/icons';
 import React from 'react';
         <IonPage>
             <IonHeader>
                 <IonToolbar>
-                    <IonTitle>Biografía</IonTitle>
-                    <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
+                    <IonGrid fixed={true}>
+                        <IonRow>
+                            <IonCol></IonCol>
+                            <IonCol>
+                                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
+                                <IonTitle>Biografía</IonTitle>
+                            </IonCol>
+                            <IonCol></IonCol>
+                        </IonRow>
+                    </IonGrid>
                 </IonToolbar>
             </IonHeader>
             <IonContent fullscreen className="ion-padding">
                 <p>Pelotero, Filántropo</p>
                 <p>Fue un afamado pelotero puertorriqueño que formó parte de las Grandes Ligas de Estados Unidos. El notable jardinero derecho y bateador fue el primer latinoamericano en formar parte del Salón de la Fama del Béisbol de Estados Unidos. También fue conocido por su labor filantrópica.</p>
                 <p>Nació el 18 de agosto de 1934 en San Antón, Carolina. Sus padres fueron Melchor Clemente y Luisa Walker. Desde los ocho años mostró habilidades deportivas con su participación en programas de pequeñas ligas y atletismo infantil. Se destacó en pista y campo, deporte en el que ganó varias medallas, específicamente en tiro de jabalina y distancias cortas. Con apenas 14 años, ya formaba parte del equipo de softball de Sello Rojo, compañía procesadora de arroz. Más adelante, formó parte del equipo de pelota aficionado de Juncos. En 1952, con 18 años de edad, ingresó a la liga de beisbol profesional de Puerto Rico, cuando fue contratado por los Cangrejeros de Santurce. El tiempo que formó parte de este equipo fue crucial para su carrera, ya que pudo pulir sus destrezas deportivas.</p>
-            
+
                 <IonNavLink routerDirection="forward" component={() => <Questions />}>
-                <IonButton>Tomar quiz</IonButton>
+                    <IonButton>Tomar quiz</IonButton>
                 </IonNavLink>
             </IonContent>
-            
+
             <IonFooter>
                 <IonToolbar>
                     <IonNavLink routerDirection="forward" component={() => <ListBiographies />}>

src/pages/Capsule.css

+ion-grid {
+    --ion-grid-width: 50%;
+
+    --ion-grid-width-xs: 50%;
+    --ion-grid-width-sm: 288px;
+    --ion-grid-width-md: 384px;
+    --ion-grid-width-lg: 480px;
+    --ion-grid-width-xl: 570px;
+}
+
+ion-col {
+    text-align: center;
+    align-items: center;
+}

src/pages/Capsule.tsx

     IonNavLink,
     IonTabButton,
     IonIcon,
-    IonImg
+    IonImg,
+    IonGrid,
+    IonRow,
+    IonCol
 } from '@ionic/react';
 import { arrowBack } from 'ionicons/icons';
 import React from 'react';
         <IonPage>
             <IonHeader>
                 <IonToolbar>
-                    <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
-                    <IonTitle>Cápsula</IonTitle>
+                    <IonGrid fixed={true}>
+                        <IonRow>
+                            <IonCol></IonCol>
+                            <IonCol>
+                                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
+                                <IonTitle>Cápsula</IonTitle>
+                            </IonCol>
+                            <IonCol></IonCol>
+                        </IonRow>
+                    </IonGrid>
                 </IonToolbar>
             </IonHeader>
             <IonContent fullscreen className="ion-padding">

src/pages/HomePage.css

 ion-card-header.ios {
     display: flex;
     flex-flow: column-reverse;
+}
+
+ion-grid {
+    --ion-grid-width: 50%;
+
+    --ion-grid-width-xs: 50%;
+    --ion-grid-width-sm: 288px;
+    --ion-grid-width-md: 384px;
+    --ion-grid-width-lg: 480px;
+    --ion-grid-width-xl: 570px;
+}
+
+ion-col {
+    text-align: center;
+    align-items: center;
 }

src/pages/HomePage.tsx

   IonTabButton,
   IonIcon,
   IonLabel,
-  IonImg
+  IonImg,
+  IonCol,
+  IonGrid,
+  IonRow
 } from '@ionic/react';
 import { square } from 'ionicons/icons';
 import './HomePage.css';
     <IonPage>
       <IonHeader>
         <IonToolbar>
-          <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
-          <IonTitle>Hogar</IonTitle>
+          <IonGrid fixed={true}>
+            <IonRow>
+              <IonCol></IonCol>
+              <IonCol>
+                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
+                <IonTitle>Hogar</IonTitle>
+              </IonCol>
+              <IonCol></IonCol>
+            </IonRow>
+          </IonGrid>
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>

src/pages/ListBiographies.css

+ion-grid {
+    --ion-grid-width: 50%;
+
+    --ion-grid-width-xs: 50%;
+    --ion-grid-width-sm: 288px;
+    --ion-grid-width-md: 384px;
+    --ion-grid-width-lg: 480px;
+    --ion-grid-width-xl: 570px;
+}
+
+ion-col {
+    text-align: center;
+    align-items: center;
+}

src/pages/ListBiographies.tsx

   IonNavLink,
   IonFooter,
   IonTabButton,
-  IonIcon
+  IonIcon,
+  IonGrid,
+  IonRow,
+  IonCol
 } from '@ionic/react';
 import { arrowBack } from 'ionicons/icons';
 import './ListBiographies.css';
 import HomePage from './HomePage';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import RobertoClemente from '../assets/RobertoClemente.jpg';
+import ListBio from '../data/Biograph.json';
 
 const ListBiographies: React.FC = () => {
   return (
     <IonPage>
       <IonHeader>
         <IonToolbar>
-          <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
-          <IonTitle>Lista de Biografías</IonTitle>
+          <IonGrid fixed={true}>
+            <IonRow>
+              <IonCol></IonCol>
+              <IonCol>
+                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
+                <IonTitle>Lista de Biografías</IonTitle>
+              </IonCol>
+              <IonCol></IonCol>
+            </IonRow>
+          </IonGrid>
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
         <IonSearchbar></IonSearchbar>
-        <IonCard>
-          <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
-          <IonCardHeader>
-            <IonCardTitle>Roberto Clemente</IonCardTitle>
-            <IonCardSubtitle>Tabs: Deportista</IonCardSubtitle>
-          </IonCardHeader>
 
-          <IonCardContent>
-            Fue un afamado pelotero puertorriqueño que formó parte de las Grandes Ligas de Estados Unidos. El notable jardinero derecho y bateador fue el primer latinoamericano en formar parte del Salón de la Fama del Béisbol de Estados Unidos. También fue conocido por su labor filantrópica.
-          </IonCardContent>
+        {
+          ListBio && ListBio.map(listbio => {
+            return (
+              <>
+                <IonCard>
+                  <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
+                  <IonCardHeader>
+                    <IonCardTitle>{listbio.title}</IonCardTitle>
+                    <IonCardSubtitle>{listbio.tags}</IonCardSubtitle>
+                  </IonCardHeader><IonCardContent>
+                    {listbio.content}
+                  </IonCardContent>
+                  <IonNavLink routerDirection="forward" component={() => <Biography />}>
+                    <IonButton>Go to</IonButton>
+                  </IonNavLink>
 
-          <IonNavLink routerDirection="forward" component={() => <Biography />}>
-            <IonButton>Go to</IonButton>
-          </IonNavLink>
+                  <IonNavLink routerDirection="forward" component={() => <Questions />}>
+                    <IonButton>Tomar quiz</IonButton>
+                  </IonNavLink>
+
+                </IonCard>
+              </>
+            )
+          })
+        }
 
-          <IonNavLink routerDirection="forward" component={() => <Questions />}>
-            <IonButton>Tomar quiz</IonButton>
-          </IonNavLink>
 
-        </IonCard>
       </IonContent>
       <IonFooter>
         <IonToolbar>

src/pages/ListCapsules.css

+ion-grid {
+    --ion-grid-width: 50%;
+
+    --ion-grid-width-xs: 50%;
+    --ion-grid-width-sm: 288px;
+    --ion-grid-width-md: 384px;
+    --ion-grid-width-lg: 480px;
+    --ion-grid-width-xl: 570px;
+}
+
+ion-col {
+    text-align: center;
+    align-items: center;
+}

src/pages/ListCapsules.tsx

 import {
-    IonList,
-    IonItem,
-    IonLabel,
-    IonImg,
-    IonSearchbar,
-    IonContent,
-    IonHeader,
-    IonPage,
-    IonTitle,
-    IonToolbar,
-    IonButton,
-    IonNavLink,
-    IonFooter,
-    IonTabButton,
-    IonIcon
-  } from '@ionic/react';
-  import { arrowBack } from 'ionicons/icons';
-  import './ListCapsules.css';
-  import HomePage from './HomePage';
-  import Capsule from './Capsule'
-  import EnciclopediaPR from '../assets/EnciclopediaPR.png';
+  IonList,
+  IonItem,
+  IonLabel,
+  IonImg,
+  IonSearchbar,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  IonButton,
+  IonNavLink,
+  IonFooter,
+  IonTabButton,
+  IonIcon,
+  IonGrid,
+  IonRow,
+  IonCol
+} from '@ionic/react';
+import { arrowBack } from 'ionicons/icons';
+import './ListCapsules.css';
+import HomePage from './HomePage';
+import Capsule from './Capsule'
+import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 
-  const ListCapsules: React.FC = () => {
-    return (
-      <IonPage>
-        <IonHeader>
-          <IonToolbar>
-            <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
-            <IonTitle>Lista de Cápsulas de Contenido</IonTitle>
-          </IonToolbar>
-        </IonHeader>
-        <IonContent fullscreen>
-            <IonSearchbar></IonSearchbar>
-            <IonList inset={true}>
-                <IonItem>
-                    <IonLabel>Breve Historia del baile en Puerto Rico</IonLabel>
-                    <IonNavLink routerDirection="forward" component={() => <Capsule />}>
-                    <IonButton>Visitar</IonButton>
-          </IonNavLink>
-                </IonItem>
-                <IonItem>
-                    <IonLabel>Cápsula#2</IonLabel>
-                </IonItem>
-                <IonItem>
-                    <IonLabel>Cápsula#3</IonLabel>
-                </IonItem>
-            </IonList>
-        </IonContent>
-        <IonFooter>
-          <IonToolbar>
-            <IonNavLink routerDirection="forward" component={() => <HomePage />}>
-                <IonTabButton tab="HomePage" href="/HomePage">
-                <IonIcon icon={arrowBack} />
-              </IonTabButton>
+const ListCapsules: React.FC = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonGrid fixed={true}>
+            <IonRow>
+              <IonCol></IonCol>
+              <IonCol>
+                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
+                <IonTitle>Lista de Cápsulas de Contenido</IonTitle>
+              </IonCol>
+              <IonCol></IonCol>
+            </IonRow>
+          </IonGrid>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonSearchbar></IonSearchbar>
+        <IonList inset={true}>
+          <IonItem>
+            <IonLabel>Breve Historia del baile en Puerto Rico</IonLabel>
+            <IonNavLink routerDirection="forward" component={() => <Capsule />}>
+              <IonButton>Visitar</IonButton>
             </IonNavLink>
-          </IonToolbar>
-        </IonFooter>
-      </IonPage>
-    );
-  };
-  
-  export default ListCapsules;
-  
+          </IonItem>
+          <IonItem>
+            <IonLabel>Cápsula#2</IonLabel>
+          </IonItem>
+          <IonItem>
+            <IonLabel>Cápsula#3</IonLabel>
+          </IonItem>
+        </IonList>
+      </IonContent>
+      <IonFooter>
+        <IonToolbar>
+          <IonNavLink routerDirection="forward" component={() => <HomePage />}>
+            <IonTabButton tab="HomePage" href="/HomePage">
+              <IonIcon icon={arrowBack} />
+            </IonTabButton>
+          </IonNavLink>
+        </IonToolbar>
+      </IonFooter>
+    </IonPage>
+  );
+};
+
+export default ListCapsules;

src/pages/Questions.css

+ion-grid {
+    --ion-grid-width: 50%;
+
+    --ion-grid-width-xs: 50%;
+    --ion-grid-width-sm: 288px;
+    --ion-grid-width-md: 384px;
+    --ion-grid-width-lg: 480px;
+    --ion-grid-width-xl: 570px;
+}
+
+ion-col {
+    text-align: center;
+    align-items: center;
+}

src/pages/Questions.tsx

     IonCardHeader,
     IonCardSubtitle,
     IonCardTitle,
-    IonButton
+    IonButton,
+    IonGrid,
+    IonRow,
+    IonCol
 } from '@ionic/react';
 import { arrowBack } from 'ionicons/icons';
 import React from 'react';
         <IonPage>
             <IonHeader>
                 <IonToolbar>
-                    <IonTitle>Quiz</IonTitle>
-                    <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
+                    <IonGrid fixed={true}>
+                        <IonRow>
+                            <IonCol></IonCol>
+                            <IonCol>
+                                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
+                                <IonTitle>Quiz</IonTitle>
+                            </IonCol>
+                            <IonCol></IonCol>
+                        </IonRow>
+                    </IonGrid>
                 </IonToolbar>
             </IonHeader>
 
                     </IonCardHeader>
                     <IonCardContent>
                         <IonList>
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>1934</IonLabel>
-                        </IonItem>
-
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>1950</IonLabel>
-                        </IonItem>
-
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>1943</IonLabel>
-                        </IonItem>
-
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>2022</IonLabel>
-                        </IonItem>
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>1934</IonLabel>
+                            </IonItem>
+
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>1950</IonLabel>
+                            </IonItem>
+
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>1943</IonLabel>
+                            </IonItem>
+
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>2022</IonLabel>
+                            </IonItem>
                         </IonList>
                     </IonCardContent>
                 </IonCard>
                 <IonCard>
                     <IonCardHeader>
                         <IonCardTitle>¿En que pueblo se crió?</IonCardTitle>
-                        
+
                     </IonCardHeader>
                     <IonCardContent>
                         <IonList>
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>Caguas</IonLabel>
-                        </IonItem>
-
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>Cabo Rojo</IonLabel>
-                        </IonItem>
-
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>Luquillo</IonLabel>
-                        </IonItem>
-
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>Carolina</IonLabel>
-                        </IonItem>
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>Caguas</IonLabel>
+                            </IonItem>
+
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>Cabo Rojo</IonLabel>
+                            </IonItem>
+
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>Luquillo</IonLabel>
+                            </IonItem>
+
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>Carolina</IonLabel>
+                            </IonItem>
                         </IonList>
                     </IonCardContent>
                 </IonCard>
                 <IonCard>
                     <IonCardHeader>
                         <IonCardTitle>¿Para qué equipo de la liga de beisbol profesional de Puerto Rico jugó?</IonCardTitle>
-                        
+
                     </IonCardHeader>
                     <IonCardContent>
                         <IonList>
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>Bacalaos de Fajardo</IonLabel>
-                        </IonItem>
-
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>Alcapurrias de Loiza</IonLabel>
-                        </IonItem>
-
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>Cangrejeros de Santurce</IonLabel>
-                        </IonItem>
-
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>Brujos de Guayama</IonLabel>
-                        </IonItem>
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>Bacalaos de Fajardo</IonLabel>
+                            </IonItem>
+
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>Alcapurrias de Loiza</IonLabel>
+                            </IonItem>
+
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>Cangrejeros de Santurce</IonLabel>
+                            </IonItem>
+
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>Brujos de Guayama</IonLabel>
+                            </IonItem>
                         </IonList>
                     </IonCardContent>
                 </IonCard>
                 <IonCard>
                     <IonCardHeader>
                         <IonCardTitle>¿Para que equipo de la MLB jugó?</IonCardTitle>
-                        
+
                     </IonCardHeader>
                     <IonCardContent>
                         <IonList>
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>New York Yankees</IonLabel>
-                        </IonItem>
-
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>Houston Astros</IonLabel>
-                        </IonItem>
-
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>Chicago Cubs</IonLabel>
-                        </IonItem>
-
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>Pittsburgh Pirates</IonLabel>
-                        </IonItem>
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>New York Yankees</IonLabel>
+                            </IonItem>
+
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>Houston Astros</IonLabel>
+                            </IonItem>
+
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>Chicago Cubs</IonLabel>
+                            </IonItem>
+
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>Pittsburgh Pirates</IonLabel>
+                            </IonItem>
                         </IonList>
                     </IonCardContent>
                 </IonCard>