Color Added

src/pages/AboutUs.css

 ion-col {
     text-align: center;
     align-items: center;
+}
+
+.Item-Center {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.Header-Color {
+    --background: #4de9d9;
+}
+
+.Footer-Color {
+    --background: #d3d3d3;
 }

src/pages/AboutUs.tsx

   return (
     <IonPage>
       <IonHeader>
-        <IonToolbar>
+        <IonToolbar className="Header-Color">
           <IonGrid fixed={true}>
             <IonRow>
               <IonCol></IonCol>
         }
       </IonContent>
       <IonFooter>
-        <IonToolbar>
-          <IonButtons slot="start">
-            <IonBackButton defaultHref="/home"></IonBackButton>
-          </IonButtons>
+        <IonToolbar className="Footer-Color">
+          <div className='Item-Center'>
+            <IonButtons slot="start">
+              <IonBackButton defaultHref="/home"></IonBackButton>
+            </IonButtons>
+          </div>
         </IonToolbar>
       </IonFooter>
     </IonPage>

src/pages/Biography.css

 ion-col {
     text-align: center;
     align-items: center;
+}
+
+.Item-Center {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.Header-Color {
+    --background: #4de9d9;
+}
+
+.Footer-Color {
+    --background: #d3d3d3;
 }

src/pages/Biography.tsx

     return (
         <IonPage>
             <IonHeader>
-                <IonToolbar>
+                <IonToolbar className="Header-Color">
                     <IonGrid fixed={true}>
                         <IonRow>
                             <IonCol></IonCol>
             </IonContent>
 
             <IonFooter>
-                <IonToolbar>
-                    <IonButtons slot="start">
-                        <IonBackButton defaultHref="/home"></IonBackButton>
-                    </IonButtons>
+                <IonToolbar className="Footer-Color">
+                    <div className='Item-Center'>
+                        <IonButtons slot="start">
+                            <IonBackButton defaultHref="/home"></IonBackButton>
+                        </IonButtons>
+                    </div>
                 </IonToolbar>
             </IonFooter>
         </IonPage>

src/pages/Capsule.css

 ion-col {
     text-align: center;
     align-items: center;
+}
+
+.Item-Center {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.Header-Color {
+    --background: #4de9d9;
+}
+
+.Footer-Color {
+    --background: #d3d3d3;
 }

src/pages/Capsule.tsx

     return (
         <IonPage>
             <IonHeader>
-                <IonToolbar>
+                <IonToolbar className="Header-Color">
                     <IonGrid fixed={true}>
                         <IonRow>
                             <IonCol></IonCol>
 
             </IonContent>
             <IonFooter>
-                <IonToolbar>
-                    <IonButtons slot="start">
-                        <IonBackButton defaultHref="/ListCapsules"></IonBackButton>
-                    </IonButtons>
+                <IonToolbar className="Footer-Color">
+                    <div className='Item-Center'>
+                        <IonButtons slot="start">
+                            <IonBackButton defaultHref="/ListCapsules"></IonBackButton>
+                        </IonButtons>
+                    </div>
                 </IonToolbar>
             </IonFooter>
         </IonPage>

src/pages/HomePage.css

 ion-col {
     text-align: center;
     align-items: center;
+}
+
+.Header-Color {
+    --background: #4de9d9;
+}
+
+.Footer-Color {
+    --background: #d3d3d3;
+}
+
+.Item-Center {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }

src/pages/HomePage.tsx

   return (
     <IonPage>
       <IonHeader>
-        <IonToolbar>
+        <IonToolbar className="Header-Color">
           <IonGrid fixed={true}>
             <IonRow>
               <IonCol></IonCol>
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
-        <IonItem routerLink={`/ListBiographie`} detail={true}>
-          <IonCard>
-            <IonCardHeader>
-              <IonCardTitle>Biografías</IonCardTitle>
-              <IonCardSubtitle>Lista de todas las biografías</IonCardSubtitle>
-            </IonCardHeader>
-          </IonCard>
-        </IonItem>
-        <IonItem routerLink={`/ListCapsules`} detail={true}>
-          <IonCard>
-            <IonCardHeader>
-              <IonCardTitle>Cápsulas</IonCardTitle>
-              <IonCardSubtitle>Lista de todas las cápsulas</IonCardSubtitle>
-            </IonCardHeader>
-          </IonCard>
-        </IonItem>
+        <div className='Item-Center'>
+          <IonItem routerLink={`/ListBiographie`} detail={true}>
+            <IonCard>
+              <IonCardHeader>
+                <IonCardTitle>Biografías</IonCardTitle>
+                <IonCardSubtitle>Lista de todas las biografías</IonCardSubtitle>
+              </IonCardHeader>
+            </IonCard>
+          </IonItem>
+        </div>
+        <div className='Item-Center'>
+          <IonItem routerLink={`/ListCapsules`} detail={true}>
+            <IonCard>
+              <IonCardHeader>
+                <IonCardTitle>Cápsulas</IonCardTitle>
+                <IonCardSubtitle>Lista de todas las cápsulas</IonCardSubtitle>
+              </IonCardHeader>
+            </IonCard>
+          </IonItem>
+        </div>
       </IonContent>
       <IonFooter>
-        <IonToolbar>
-          <IonItem routerLink={`/About`} detail={true}>
-            <IonTabButton tab="AboutUs" href="/AboutUs">
-              <IonIcon icon={square} />
-              <IonLabel>Sobre nosotros</IonLabel>
-            </IonTabButton>
-          </IonItem>
+        <IonToolbar className="Footer-Color">
+          <div className='Item-Center'>
+            <IonItem routerLink={`/About`}>
+              <IonTabButton tab="AboutUs" href="/AboutUs">
+                <IonIcon icon={square} />
+                <IonLabel>Sobre nosotros</IonLabel>
+              </IonTabButton>
+            </IonItem>
+          </div>
         </IonToolbar>
       </IonFooter>
     </IonPage>

src/pages/ListBiographies.css

 ion-col {
     text-align: center;
     align-items: center;
+}
+
+.Item-Center {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.Header-Color {
+    --background: #4de9d9;
+}
+
+.Footer-Color {
+    --background: #d3d3d3;
 }

src/pages/ListBiographies.tsx

   return (
     <IonPage>
       <IonHeader>
-        <IonToolbar>
+        <IonToolbar className="Header-Color">
           <IonGrid fixed={true}>
             <IonRow>
               <IonCol></IonCol>
       </IonHeader>
       <IonContent fullscreen>
         <IonSearchbar></IonSearchbar>
-
         {
           ListBio && ListBio.map(listbio => {
             return (
               <>
-                <IonItem routerLink={`/Biographie/${listbio.id}`} detail={true}>
+                <IonItem routerLink={`/Biographie/${listbio.id}`}>
                   <IonCard>
                     <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
                     <IonCardHeader>
         }
       </IonContent>
       <IonFooter>
-        <IonToolbar>
-          <IonButtons slot="start">
-            <IonBackButton defaultHref="/home"></IonBackButton>
-          </IonButtons>
+        <IonToolbar className="Footer-Color">
+          <div className='Item-Center'>
+            <IonButtons slot="start">
+              <IonBackButton defaultHref="/home"></IonBackButton>
+            </IonButtons>
+          </div>
         </IonToolbar>
       </IonFooter>
     </IonPage>

src/pages/ListCapsules.css

 ion-col {
     text-align: center;
     align-items: center;
+}
+
+.Item-Center {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.Header-Color {
+    --background: #4de9d9;
+}
+
+.Footer-Color {
+    --background: #d3d3d3;
 }

src/pages/ListCapsules.tsx

   return (
     <IonPage>
       <IonHeader>
-        <IonToolbar>
+        <IonToolbar className="Header-Color">
           <IonGrid fixed={true}>
             <IonRow>
               <IonCol></IonCol>
         </IonList>
       </IonContent>
       <IonFooter>
-        <IonToolbar>
-          <IonButtons slot="start">
-            <IonBackButton defaultHref="/home"></IonBackButton>
-          </IonButtons>
+        <IonToolbar className="Footer-Color">
+          <div className='Item-Center'>
+            <IonButtons slot="start">
+              <IonBackButton defaultHref="/home"></IonBackButton>
+            </IonButtons>
+          </div>
         </IonToolbar>
       </IonFooter>
     </IonPage>

src/pages/Questions.css

 ion-col {
     text-align: center;
     align-items: center;
+}
+
+.Item-Center {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.Header-Color {
+    --background: #4de9d9;
+}
+
+.Footer-Color {
+    --background: #d3d3d3;
 }

src/pages/Questions.tsx

     return (
         <IonPage>
             <IonHeader>
-                <IonToolbar>
+                <IonToolbar className="Header-Color">
                     <IonGrid fixed={true}>
                         <IonRow>
                             <IonCol></IonCol>
             </IonContent>
 
             <IonFooter>
-                <IonToolbar>
-                    <IonButtons slot="start">
-                        <IonBackButton defaultHref="/ListBiographie"></IonBackButton>
-                    </IonButtons>
+                <IonToolbar className="Footer-Color">
+                    <div className='Item-Center'>
+                        <IonButtons slot="start">
+                            <IonBackButton defaultHref="/ListBiographie"></IonBackButton>
+                        </IonButtons>
+                    </div>
                 </IonToolbar>
             </IonFooter>
         </IonPage>