I am working in my Ionic 4 App and I have installed the Ionic 4 tab theme and I have made the header common by adding the header code in the **app.component.html** but the problem is that my is overlapping with the header.

This is my **app.component.html**:

```html
<ion-header>
    <ion-toolbar>
    <ion-icon name="more" slot="end"></ion-icon>
    </ion-toolbar>
</ion-header>
<ion-app>
    <ion-router-outlet></ion-router-outlet>
</ion-app>

```

This is my **tab1.page.html**:

```html
<ion-content>
    <ion-card class="welcome-card">
        <ion-img src="/assets/shapes.svg"></ion-img>
        <ion-card-header>
        <ion-card-subtitle>Get Started</ion-card-subtitle>
        <ion-card-title>Welcome to Ionic</ion-card-title>
        </ion-card-header>
        <ion-card-content>
        <p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
        </ion-card-content>
    </ion-card>
</ion-content>

```

I have just installed the fresh theme of tabs in Ionic 4 and I have done these changes only.

[![enter image description here](https://i.stack.imgur.com/SXlWQ.jpg)](https://i.stack.imgur.com/SXlWQ.jpg)

[![enter image description here](https://i.stack.imgur.com/smVVF.jpg)](https://i.stack.imgur.com/smVVF.jpg)

Any help is much appreciated.

This is my [StackBlitz](https://stackblitz.com/edit/ionic-3pqhwc?file=app%2Fapp.html)