diff --git a/server.js b/server.js
index 3d5cece3abd..0bab262305e 100644
--- a/server.js
+++ b/server.js
@@ -5,8 +5,89 @@ var path = require('path');
 var app = express();
 app.use(morgan('combined'));
 
+var articles = {
+	'article-one': {
+		title: 'Article one | Ila Amaresan',
+		heading: 'Article one',
+		date: 'Nov 1, 2016',
+		content: `	<p> This is content for article one. This is content for article one. This is content for article one. 
+					This is content for article one. This is content for article one. This is content for article one. 
+					This is content for article one. This is content for article one. This is content for article one. 
+					</p>
+					
+					<p> This is content for article one. This is content for article one. This is content for article one. 
+					This is content for article one. This is content for article one. This is content for article one. 
+					This is content for article one. This is content for article one. This is content for article one. 
+					</p>
+			
+					<p> This is content for article one. This is content for article one. This is content for article one. 
+					This is content for article one. This is content for article one. This is content for article one. 
+					This is content for article one. This is content for article one. This is content for article one. 
+					</p> `
+	},
+	'article-two': {
+		title: 'Article two | Ila Amaresan',
+		heading: 'Article two',
+		date: 'Nov 2, 2016',
+		content: `
+		<p>
+			This is the content for article two.
+		</p>`
+	},
+	'article-three': {
+		title: 'Article 3 | Ila Amaresan',
+		heading: 'Article 3',
+		date: 'Nov 3, 2016',
+		content: 'This is article three content'
+	}
+};
+
+function createTemplate (data) {
+	var title = data.title;
+	var date = data.date;
+	var heading = data.heading;
+	var content = data.content;
+	var htmlTemplate = `
+	<html>
+		<head>
+			<title>
+			${title}
+			</title>
+			<meta name = "viewport" content="width=device-width, initial-scale=1"</>
+			<link href="/ui/style.css" rel="stylesheet" />
+		</head>
+		<body>
+			<div class="container">
+				<div>
+					<a href="/">Home</a>
+				</div>
+				<hr/>
+				<h3>${heading}</h3>
+				<div>
+					${date}			
+				</div>
+				<div>
+					${content}
+				</div>
+			</div>
+		</body>
+	</html>
+	`;
+	return htmlTemplate;
+}
+
 app.get('/', function (req, res) {
   res.sendFile(path.join(__dirname, 'ui', 'index.html'));
+
+});
+
+app.get('/:articleName', function (req, res) {
+	var articleName = req.params.articleName;
+	res.send(createTemplate(articles[articleName]));
+});
+
+app.get('/ui/main.js', function (req, res) {
+  res.sendFile(path.join(__dirname, 'ui', 'main.js'));
 });
 
 app.get('/ui/style.css', function (req, res) {
diff --git a/ui/index.html b/ui/index.html
index 5a28644db45..644eeef0641 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -10,7 +10,26 @@
         <br>
         <div class="center text-big bold">
             Hi! I am your webapp.
+			<h2> Welcome bro! </h2>
         </div>
+		
+		<div>
+		
+<table style="width:100%">
+ <!--  <tr>
+    <th>Article 1</th>
+    <th>Article 2</th>
+    <th>Article 3</th>
+	<th>error</th>
+  </tr> -->
+  <tr>
+    <td><a href="/article-one">Article one</a> </td>
+	<td><a href="/article-two">Article two</a> </td>
+	<td><a href="/article-three">Article three</a> </td>
+	<td><a href="/article-error">Error Page</a> </td>
+  </tr>
+</table>
+
         <script type="text/javascript" src="/ui/main.js">
         </script>
     </body>
diff --git a/ui/style.css b/ui/style.css
index 71a5f6acc1e..24cda82b416 100644
--- a/ui/style.css
+++ b/ui/style.css
@@ -1,7 +1,7 @@
 body {
     font-family: sans-serif;
     background-color: lightgrey;
-    margin-top: 75px;
+    margin-top: 60px;
 }
 
 .center {
@@ -20,3 +20,11 @@ body {
     height: 200px;
 }
 
+.container{
+	max-width: 800px;
+	margin: 0 auto;
+	color: #864646;
+	font-family: sans-serif;
+	padding-left: 10px;
+	padding-right: 10px;
+}
