> For the complete documentation index, see [llms.txt](https://cloudinary.gitbook.io/build-a-mini-netflix-clone-with-vue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cloudinary.gitbook.io/build-a-mini-netflix-clone-with-vue/header-and-navigation.md).
# Header and Navigation
1. Clean up the `App.vue` file and add headers and navigation to it. That is, replace the content of the `template` file with the following:
```markup
```
The above HTML code shows a navigation bar along with the Netflix logo. It also allocates the space for a button for uploading media content.
2. Update the style sheet so that it reads like this:
```css
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #e5e5e5;
background-color: #000;
padding-top: 30px;
}
.navbar {
background-color: transparent;
z-index: 2;
padding: 30px 0;
}
.navbar-item {
height: 25px;
width: auto;
}
```
3. Add the Bulma classes, a CSS framework that simplifies most of your styling tasks, below the `head` tag of the `public/index.html` file:
```markup
Netflix
```
4. Add Font Awesome and update the title:
