Okay, we can finally move on to layout files. So if I switch back, I want you to notice how all of our pages, at the moment, are manually importing the nav, and then adding it here. So it's in Home, it's in Settings, and it's also in Users as well. So if I end up with 20 different pages, that's 20 different times I have to pull in the navigation and render it where it needs to go. Clearly, you already know this, that's not quite right. So instead, let's prepare a layout file, and I'll add it to my shared directory. So the very first thing I'll do here is pull in our nav, and then of course I need to import it.

So the very first thing I'll do here is pull in our nav, and then of course I need to import it. Alright? And then register it as a component. Alright. So now our nav will exclusively live within this layout file. Okay, so now, for example, if I go back to Home, let's swap this out with our layout. And then we'll wrap it up here. Alright? And then put everything in, except the navigation, of course.

And I'm just throwing out numbers here. Maybe six. Alright, we give it a refresh. We're getting there, but this is too close. We don't yet have a background color. And then the navigation bullets are on top of each other. So for the bullets, we either remove them completely, or there's a couple things we could do. First, we could use this Tailwind class called space-x, and then we give it a figure, like four.

So come back to Firefox, give it a good refresh, and now as I click between the pages, I'll need to adjust the font size there. But nonetheless, everything is working like it did before. But now we are using layout files.