diff --git a/server.js b/server.js
index 2e386d0b041..0a38e897e8b 100644
--- a/server.js
+++ b/server.js
@@ -5,10 +5,82 @@ var path = require('path');
 var app = express();
 app.use(morgan('combined'));
 
+var articles = {
+ 'article-two': {
+    title: ' Article Two | S.Pawan Kumar',
+    heading: ' Article Two',
+    date: 'August 8,2017.',
+    content: `
+        <p>
+        This is the content for the second article.
+        </p>`
+},  
+'article-one' : {
+    title: 'Article One | S.Pawan Kumar',
+    heading: ' Article One',
+    date: 'August 7,2017.',
+    content: `
+        <p>
+        This is the content for the first article.This is the content for the first article.This is the content for the first article.This is the content for the first article.This is the content for the first article.This is the content for the first article.This is the content for the first article.This is the content for the first article.
+        </p>`
+},
+ 'article-three': {
+    title: ' Article Three | S.Pawan Kumar',
+    heading: ' Article Three',
+    date: 'August 9,2017.',
+    content: `
+        <p>
+        This is the content for the third article.
+        </p>`
+}
+};
+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) {
   res.sendFile(path.join(__dirname, 'ui', 'style.css'));
 });
diff --git a/ui/index.html b/ui/index.html
index 5a28644db45..9fb2b340473 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -5,12 +5,16 @@
     </head>
     <body>
         <div class="center">
-            <img src="/ui/madi.png" class="img-medium"/>
+            <img id = 'madi' src="/ui/madi.png" class="img-medium"/>
         </div>
         <br>
-        <div class="center text-big bold">
-            Hi! I am your webapp.
+        <div id="maintext" class="center text-big bold">
+            Hi! I am Pawan, this is my first web app.
+
         </div>
+        <script>
+            alert('Hi,I\'m a Javascript');
+        </script>
         <script type="text/javascript" src="/ui/main.js">
         </script>
     </body>
diff --git a/ui/main.js b/ui/main.js
index 4cf7ed58de3..3c045da2be3 100644
--- a/ui/main.js
+++ b/ui/main.js
@@ -1 +1,12 @@
 console.log('Loaded!');
+var element=document.getElementById('maintext');
+element.innerHTML='New Value';
+var img=document.getElementById('madi');
+var marginleft = 0;
+function moveright(){
+    marginleft = marginleft + 1;
+    img.marginleft = marginleft + 'px';
+}
+img.onclick = function(){
+    var interval = setInterval(moveright,50);
+};
\ No newline at end of file
diff --git a/ui/style.css b/ui/style.css
index 71a5f6acc1e..765c2da5c70 100644
--- a/ui/style.css
+++ b/ui/style.css
@@ -1,22 +1,30 @@
-body {
-    font-family: sans-serif;
-    background-color: lightgrey;
-    margin-top: 75px;
-}
-
-.center {
-    text-align: center;
-}
-
-.text-big {
-    font-size: 300%;
-}
-
-.bold {
-    font-weight: bold;
-}
-
-.img-medium {
-    height: 200px;
-}
-
+body {
+    font-family: sans-serif;
+    /*background-color: lightgrey;*/
+    margin-top: 75px;
+}
+
+.center {
+    text-align: center;
+}
+
+.text-big {
+    font-size: 300%;
+}
+
+.bold {
+    font-weight: bold;
+}
+
+.img-medium {
+    height: 200px;
+}
+.container{
+             font-family: sans-serif;
+            color:#454343;
+            max-width: 800px;
+            margin: 0 auto;
+            padding-top: 60px;
+            padding-right: 5px;
+            padding-left: 5px;
+        }
\ No newline at end of file
