# Creating the blog page - part 8
Now that we have the homepage ready let's tackle the blog page.
A reminder of what the blog page looks like in the design:
Hopefully, we can reuse the blog elements we created for the homepage.
That is the beautiful world of reusing components in different areas.
Let's get started!
## Creating the blog page
The first thing we'll want to do is ensure the page exists.
Create a new file called `blog.js` in the `pages` directory and use the following markup.
```js
import Head from 'next/head';
export default function Blog() {
return (
NextJS Blog
Blog
);
}
```
Because we created a layout, the header and footer should already be there.
Now we have to start styling the inside part, where we rendered the heading that states the blog.
The first thing we want to tackle is for the element to be inside the container and have padding for the smaller screens. Unfurtionally we have to use two elements with the layout style we choose. (You can opt for one, but it will make the elements smaller and not pixel perfect)
```html
Blog
```
Then let's add some styling to this heading element.
```html
Blog
```
Let's take a look at how it looks so far.
That's pretty much what we are looking for. As dummy data, let's add some of the [articles we created before](https://daily-dev-tips.com/posts/styling-the-recent-posts-part-6/).
```js
import Head from 'next/head';
import Article from '../components/article';
export default function Blog() {
return (
NextJS Blog
Blog
);
}
```
Let's see how it looks without any changes.
That's already nearly there, right?
The only issue I'm seeing is that we don't render the bottom border part for these items as it was not needed on the homepage.
We have two options here. We could simply pass a className and inherit it or set it as an option.
The className approach is generally better as we can perhaps use it later on for other things.
Open up your `article.js` file, and let's add a prop for the className.
```js
export default function Article({className = 'rounded-lg'}) {
});
```
Here we assign a new prop called `className` by default. I put the `rounded-lg` class in there as we don't want to use it for the detailed page.
Now we can use this className in this component like such:
```html
```
Let's return to our `blog.js` file and modify it to include the border.
```js
```
Yep, that's it!
Let's check what we got and see if it matches the design.
Pretty happy with that!
You can also find the completed code on [GitHub](https://github.com/rebelchris/next-portfolio/tree/part-8).
### Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)