diff --git a/Homework/package-lock.json b/Homework/package-lock.json
diff --git a/Homework/package.json b/Homework/package.json
@@ -10,6 +10,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "express": "^4.15.4"
+    "body-parser": "^1.17.2",
+    "express": "^4.15.4",
+    "express-handlebars": "^3.0.0",
+    "nodemon": "^1.12.0"
   }
 }
diff --git a/Homework/public/About.css b/Homework/public/About.css
diff --git a/Homework/public/File.css b/Homework/public/File.css
diff --git a/Homework/public/HomePage.css b/Homework/public/HomePage.css
@@ -18,25 +18,41 @@ span:hover {
   background-color: #9CD08F;
 }
 
-.menu_vertical {
-  width: 100px;
-  bottom: 0px;
+.home.question{
   position: fixed;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%, 0);
 }
 
-.menu_vertical>a {
-  display: inline-block;
-  border-bottom-color: white;
-  border-bottom-style: solid;
-  border-width: thin;
+.about {
+  margin-left: 20px;
 }
 
-h1{
-  position: fixed;
-  left: 50%;
-  margin-right: -50%;
-  transform: translate(-50%, 0);
+.avatar {
+  display: inline;
+  width: 150px;
+  height: 300px;
+}
+
+input.home {
+  text-align: center;
+  position: absolute;
+  /*margin: 100px;*/
+  top: 30%;
+  height: 50px;
+  width: 100px;
+  /*position: fixed;*/
+}
+
+input.yes {
+  left: 40%;
+  /*margin-right: -60%;*/
+  transform: translate(-60%, 0);
+}
+
+input.no {
+  left: 60%;
+  /*margin-right: -60%;*/
+  transform: translate(-40%, 0);
 }
diff --git a/Homework/question.txt b/Homework/question.txt
@@ -0,0 +1,7 @@
+{"id":0,"question":"do you want to build a snow man?","yes":5,"no":2},
+{"id":1,"question":"do u fap ?","yes":4,"no":2},
+{"id":2,"question":"are you stupid?","yes":4,"no":3},
+{"id":3,"question":"do u wanna do me ?","yes":4,"no":1},
+{"id":4,"question":"are you high ?","yes":0,"no":0},
+{"id":5,"question":"r u Snoop ?","yes":1,"no":2},
+{"id":6,"question":"u wanna get high ?","yes":0,"no":1}
diff --git a/Homework/questionRouter.js b/Homework/questionRouter.js
@@ -0,0 +1,19 @@
+const express = require('express');
+const Router = express.Router();
+const fileController = require('./fileController');
+
+Router.get('/', (req, res, next) => {
+  res.render('questionid');
+})
+
+Router.get('/:id', (req, res) => {
+  question = fileController.getListQuestion();
+  question = question[req.params.id];
+  res.render('questionid', {
+    question: question.question,
+    nYes: question.yes,
+    nNo: question.no
+  });
+});
+
+module.exports = Router;
diff --git a/Homework/server.js b/Homework/server.js
@@ -1,22 +1,30 @@
 const express = require('express');
+const handlebars = require('express-handlebars');
+const bodyParser = require('body-parser');
 const fileController = require('./fileController');
+const homeRouter = require('./HomeRouter');
+const askRouter = require('./AskRouter');
+const apiRouter = require('./apiRouter');
+const questionRouter = require('./questionRouter');
 
 let app = express();
-app.use(express.static(__dirname + '/public'));
 
-app.get('/', (req, res) => {
-  res.sendFile(__dirname + '/html/HomePage.html');
-});
+app.engine('handlebars', handlebars({defaultLayout: 'main'}));
+app.set('view engine', 'handlebars');
+app.use(bodyParser.urlencoded({ extended: true}));
+app.use(express.static(__dirname + '/public'));
+app.use('/', homeRouter);
+app.use('/ask', askRouter);
+app.use('/api', apiRouter);
+app.use('/question', questionRouter);
 
 app.get('/About', (req, res) => {
-  res.sendFile(__dirname + '/html/About.html');
+  res.render('about');
 });
 
 app.get('/File', (req, res) => {
-  let file = fileController.readFileSync('package.json');
-  let htmlFile= fileController.readFileSync('./html/File.html');
-  let result = htmlFile.replace(/future/g, file);
-  res.send(result);
+  let textRender = fileController.readFileSync('question.txt');
+  res.render('file', {textRender});
 });
 
 app.listen(6969, () => {

diff --git a/Homework/views/about.handlebars b/Homework/views/about.handlebars
@@ -0,0 +1,7 @@
+<title>About</title>
+<h1 class="about">About me</h1>
+<p><img class="avatar" src="./avatar.jpg" alt="My avatar" align='left' hspace="20">
+  <p>Name: Pham Ngoc Thao<br> Age: 21<br> Gender: Male<br>
+    <q cite="">I'm a fuck boi who like to fuck around</q>
+  </p>
+</p>
diff --git a/Homework/views/askQuestion.handlebars b/Homework/views/askQuestion.handlebars
@@ -0,0 +1,8 @@
+<br>
+<h3 class="ask ">Enter a question: </h3>
+<form class="form" action="/api/question"  method="post">
+  <input type="text" name="question" value="" placeholder="question" >
+  <br>
+  <br>
+  <input type="submit" name="" value="Submit">
+</form>
diff --git a/Homework/views/file.handlebars b/Homework/views/file.handlebars
@@ -0,0 +1,3 @@
+<title>File</title>
+
+<pre>{{textRender}}</pre>
diff --git a/Homework/views/home.handlebars b/Homework/views/home.handlebars
@@ -0,0 +1,6 @@
+<title>Home</title>
+<h1 class="home question">{{question}}</h1>
+<form class="" action="{{{href}}}" method="post">
+  <input class="home yes" type="submit" name="choice" value="yes" style="visibility: {{visibility}}">
+  <input class="home no" type="submit" name="choice" value="no" style="visibility: {{visibility}}">
+</form>
diff --git a/Homework/views/layouts/main.handlebars b/Homework/views/layouts/main.handlebars
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="/HomePage.css">
+</head>
+
+<body>
+  <nav class="menu ">
+    <a href="/"><span>Home Page</span></a>
+    <a href="/Ask"><span>Ask</span></a>
+    <a href="/File"><span>File</span></a>
+    <a href="/About"><span>About</span></a>
+  </nav>
+
+  {{{body}}}
+
+</body>
+
+</html>
diff --git a/Homework/views/questionid.handlebars b/Homework/views/questionid.handlebars
@@ -0,0 +1,3 @@
+<h3>{{question}}</h3>
+<h4>Yes: {{nYes}}</h4>
+<h4>No: {{nNo}}</h4>