Nodejs pug extend

Absolute beginner here. I just setup new server using node.js but stuck on the pug views. Trying to extends login.pug into index.pug but all i get is blank content except the footer and head. Where did i do wrong? Help please... p/s: pug already installed

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// for parsing application/json
app.use(bodyParser.json());

// for parsing application/xwww-
app.use(bodyParser.urlencoded({
    extended: true
}));
//form-urlencoded

app.get('/', function (req, res) {
    res.render('index');
});

// for parsing multipart/form-data
app.use(upload.array());
app.use(express.static('public'));

//index.pug

doctype html
html(lang="en")
head
    meta( charset="utf-8")
    meta( name="viewport" content="width=device-width, initial-scale=1")
    title COMPANY WEBAPP
    meta( name="description" content="MKE Web App.")
    meta( name="keywords" content="MKE Web App.")
    link( rel="shortcut icon" type="image/png" href="img/icon/favicon.png")
    link( rel="stylesheet" type="text/css" href="css/index.css")
    link( rel="stylesheet" type="text/css" href="css/default.css")

    body
        block content

        footer
            p( id="copyright") Copyright &copy; 2019
            p( id="visitcount") Loading...

        script( type="text/javascript" src="/socket.io/socket.io.js")
        script( type="text/javascript" src="js/hmac-sha3.js")
        script( type="text/javascript" src="js/index.js")


//login.pug
extends index

block content
    div(class="login-continer")
        form( class="form-login default-box" method="POST" action="/login")
            div
                label( for="user-id") <strong>User ID :</strong>
                span( class="span-login-symbol")  &#128113;
                input( class="default-input" id="user-id" type="test" placeholder="user id" value="" spellcheck="false" required)
            div
                label( for="user-email") <strong>Email :</strong>
                span( class="span-login-symbol") &#128140;
                input( class="default-input" id="user-email" type="email" placeholder="user email" value="" spellcheck="false" required)

Solution

app.get('/', function (req, res) {
    res.render('index');
});

You are rendering index.pub on get. However, you have not extended login.pub into your index. You are instead extending index into your login.pub

If you just change the render to login, you should be able to see the new content.

app.get('/', function (req, res) {
    res.render('login');
});