diff --git a/backend/app.js b/backend/app.js
index 078ed6b..cc33da3 100644
--- a/backend/app.js
+++ b/backend/app.js
@@ -1,15 +1,15 @@
+const bcrypt = require('bcryptjs');
+const User = require('./models/User');
+const passport = require('passport');
 var mongoose = require('mongoose');
-var prodSchema = require('./models/product');
+var nodemailer = require('nodemailer')
+var ejs = require("ejs");
+const { ensureAuthenticated } = require('./config/auth');
+const Product = require('./models/Product');
+var Cart = require('./models/carts')
+var Order = require('./models/Order')
 
 module.exports = function(app){
-    app.get('/products', async (req,res) => {
-        var prods = await prodSchema.find({});
-        //console.log(prods);
-        res.render('products', {'prods': prods});
-    });
-    app.get('/', (req,res) => {
-        res.render('index');
-    });
     app.get('/contactus', (req,res) => {
         res.render('contactus');
     });
@@ -19,55 +19,300 @@ module.exports = function(app){
     app.get('/signup', (req,res) => {
         res.render('signup');
     });
-    app.get('/cart', (req,res) => {
-        res.render('cart');
-    });
-    app.get('/wishlist', (req,res) => {
-        res.render('wishlist');
-    });
-    app.get('/beaded', async (req,res) => {
-        var prods = await prodSchema.find({category: 'Beaded'});
-        //console.log(prods);
-        res.render('categories/beaded', {'prods': prods});
+    app.get('/myprofile', (req,res) => {
+        res.render('my_profile', {user: req.user});
     });
-    app.get('/bracelets', async (req,res) => {
-        var prods = await prodSchema.find({category: 'Bracelets'});
-        //console.log(prods);
-        res.render('categories/bracelets', {'prods': prods});
+    app.get('/logout', async (req,res) => {
+        req.logout();
+        req.flash('success_msg', 'Logout successful!');
+        res.redirect('login');
     });
-    app.get('/earcuffs', async (req,res) => {
-        var prods = await prodSchema.find({category: 'Earcuffs'});
-        //console.log(prods);
-        res.render('categories/ear_cuffs', {'prods': prods});
+    app.get('/wishlist', ensureAuthenticated, async (req,res) => {
+        wishlist = req.user.wishlist;
+        var prods = [];
+        for(let name of wishlist){
+            var prod = await Product.findOne({name: name});
+            prods.push(prod);
+        }
+        // console.log(prods);
+        res.render('wishlist', {'prods': prods});
     });
-    app.get('/necklaces', async (req,res) => {
-        var prods = await prodSchema.find({category: 'Necklaces'});
-        //console.log(prods);
-        res.render('categories/necklaces', {'prods': prods});
+    app.post('/auth', (req,res,next) => {
+        passport.authenticate('local', {
+            successRedirect: '/',
+            failureRedirect: '/login',
+            failureFlash: true,
+        })(req,res,next);
     });
-    app.get('/pearls', async (req,res) => {
-        var prods = await prodSchema.find({category: 'Pearls'});
-        //console.log(prods);
-        res.render('categories/pearls', {'prods': prods});
-    });
-    app.get('/polymerclay', async (req,res) => {
-        var prods = await prodSchema.find({category: 'Polymer Clay'});
-        //console.log(prods);
-        res.render('categories/polymer_clay', {'prods': prods});
+    app.get('/details/:id', (req,res,next) => {
+        var productID = req.params.id;
+        Product.findById(productID, (err, product) => {
+            if(err){
+                return res.redirect('back');
+            }
+            try{
+                res.render('product_details', {'product':product, 'wishlist': req.user.wishlist});
+            }
+            catch(err){
+                res.render('product_details', {'product':product});
+            }
+        });
+    })
+    app.get('/add-to-cart/:id', (req,res,next) => {
+        var productID = req.params.id;
+        var cart = new Cart(req.session.cart ? req.session.cart : {});
+
+        Product.updateOne({_id: productID}, {$inc: {stock: -1}}, (err,product) => {
+            if(err){
+                req.flash('error_msg','Error. Please try again.')
+                return res.redirect('back');
+            }
+        });
+        Product.findById(productID, (err,product) => {
+            if(err){
+                req.flash('error_msg','Error. Please try again.')
+                return res.redirect('back');
+            }
+            cart.add(product, product._id);
+            req.session.cart = cart;
+            // if(typeof req.user.wishlist != 'undefined'){
+            //     if(req.user.wishlist.includes(product.name)){
+            //         User.updateOne({email: req.user.email}, {$pullAll: {wishlist: [product.name]}}, (err,product) => {
+            //             if(err){
+            //                 req.flash('error_msg','Error. Please try again.')
+            //                 return res.redirect('back');
+            //             }
+            //         });
+            //     }
+            // }
+            req.flash('success_msg','Item added to cart!')
+            res.redirect('back');
+        });
+    })
+    app.get('/add-to-wishlist/:name', ensureAuthenticated, (req,res,next) => {
+        User.updateOne({email: req.user.email}, {$push: {wishlist: [req.params.name]}}, (err,product) => {
+            if(err){
+                req.flash('error_msg','Error. Please try again.')
+                return res.redirect('/');
+            }
+            req.flash('success_msg','Item removed from wishlist!')
+            res.redirect('back');
+        });
+    })
+    app.get('/remove-from-wishlist/:name', ensureAuthenticated, (req,res,next) => {
+        User.updateOne({email: req.user.email}, {$pullAll: {wishlist: [req.params.name]}}, (err,product) => {
+            if(err){
+                req.flash('error_msg','Error. Please try again.')
+                return res.redirect('/');
+            }
+            req.flash('success_msg','Item removed from wishlist!')
+            res.redirect('back');
+        });
+    })
+    app.get('/reduce/:id', (req,res,next) => {
+        var productID = req.params.id;
+        Product.updateOne({_id: productID}, {$inc: {stock: 1}}, (err,product) => {
+            if(err){
+                req.flash('error_msg','Error. Please try again.')
+                return res.redirect('back');
+            }
+        });
+        var cart = new Cart(req.session.cart ? req.session.cart : {});
+        cart.reduceByOne(productID);
+        req.session.cart = cart;
+        res.redirect('/cart');
+    })
+    app.get('/remove-from-cart/:id', (req,res,next) => {
+        var cart = new Cart(req.session.cart);
+        var productID = req.params.id;
+        var incQty = cart.items[productID].qty;
+        Product.updateOne({_id: productID}, {$inc: {stock: incQty}}, (err,product) => {
+            if(err){
+                req.flash('error_msg','Error. Please try again.')
+                return res.redirect('back');
+            }
+        });
+        var cart = new Cart(req.session.cart);
+        cart.removeItem(productID);
+        req.session.cart = cart;
+        res.redirect('/cart');
+        
     });
-    app.get('/tassels', async (req,res) => {
-        var prods = await prodSchema.find({category: 'Tassels'});
-        //console.log(prods);
-        res.render('categories/tassels', {'prods': prods});
+    app.get('/clear-cart', (req,res,next) => {
+        var cart = new Cart(req.session.cart);
+        for(const property in cart.items){
+            var productID = cart.items[property].item._id
+            var incQty = cart.items[property].qty
+            Product.updateOne({_id: productID}, {$inc: {stock: incQty}}, (err,product) => {
+                if(err){
+                    req.flash('error_msg','Error. Please try again.')
+                    return res.redirect('back');
+                }
+            });
+        }
+        req.session.cart = null;
+        res.redirect('/cart');
+        
     });
-    app.get('/threads', async (req,res) => {
-        var prods = await prodSchema.find({category: 'Threads'});
-        //console.log(prods);
-        res.render('categories/threads', {'prods': prods});
+    app.get('/cart', async (req,res) => {
+        if(!req.session.cart){
+            return res.render('cart', {products: null});
+        }
+        var cart = new Cart(req.session.cart);
+        var prods = [];
+        var prod = {};
+        for(const property in cart.items){
+            var prod = {};
+            var product = await Product.findById(property);
+            prod = {
+                '_id': cart.items[property].item._id,
+                'name': cart.items[property].item.name,
+                'price': cart.items[property].item.price,
+                'qty': cart.items[property].qty,
+                'total': cart.items[property].price,
+                'path': cart.items[property].item.imgPath,
+                'stock': product.stock
+            }
+            prods.push(prod);
+        }
+
+        res.render('cart', {products: prods, totalPrice: cart.totalPrice});
     });
-    app.get('/wiredearrings', async (req,res) => {
-        var prods = await prodSchema.find({category: 'Wired Earrings'});
-        //console.log(prods);
-        res.render('categories/wired_earrings', {'prods': prods});
+    app.get('/checkout', ensureAuthenticated, (req,res,next) => {
+        if(!req.session.cart){
+            return res.redirect('/cart');
+        }
+        console.log(req.body.note);
+        var cart = new Cart(req.session.cart);
+        var prods = [];
+        for(const property in cart.items){
+            var prod = {};
+            prod = {
+                '_id': cart.items[property].item._id,
+                'name': cart.items[property].item.name,
+                'price': cart.items[property].item.price,
+                'qty': cart.items[property].qty,
+                'total': cart.items[property].price,
+            }
+            prods.push(prod);
+        }
+        var order = new Order({
+            email: req.user.email,
+            cart: prods,
+            // note: note,
+            totalAmount: cart.totalPrice,
+            totalQty: cart.totalQty,
+        });
+        order.save((err,result) => {
+            if(err){
+                req.flash('error_msg', 'Order placement unsuccessful. Please try again.')
+                return res.redirect('/cart');
+            }
+            var transporter = nodemailer.createTransport({
+                service: 'gmail',
+                auth: {
+                    user: 'elysianhandmade.official@gmail.com',
+                    pass: 'Elysian@1234'
+                }
+            });
+            ejs.renderFile('./views/confirmation_mail.ejs', {order: order}, (err,data)=>{
+                if(err){
+                    console.log(err);
+                }
+                else{
+                    var mailOptions = {
+                        from: 'elysianhandmade.official@gmail.com',
+                        to: req.user.email,
+                        subject: 'Order Confirmed',
+                        html: data
+                    };
+        
+                    transporter.sendMail(mailOptions, (err, info) => {
+                        if(err){
+                            console.log(err);
+                        }
+                        else{
+                            console.log('Email sent: '+ info.response);
+                        }
+                    });
+                }
+            })
+
+            // req.flash('success_msg', 'Order placed successfully!');
+            req.session.cart = null;
+            res.render('thank_you');
+        })
+    })
+    app.post('/register', (req,res) => {
+        //console.log(req.body);
+        const { firstname, lastname, email, contact, password, password2 } = req.body;
+        let errors = [];
+        // console.log({ firstname, lastname, email, contact, password, password2 });
+
+        //Check if any fields are empty
+        if(!firstname || !lastname || !email || !contact || !password || !password2){
+            errors.push({ msg: 'Please fill in all fields.' });
+        }
+
+        //Check if passwords match
+        if(password !== password2){
+            errors.push({ msg: 'Passwords do no match.' })
+        }
+
+        //Check password length
+        if(password.length < 6){
+            errors.push({ msg: 'Password should be atleast 6 characters.'})
+        }
+
+        if(errors.length > 0){
+            // console.log(errors);
+            res.render('signup', {
+                errors,
+                firstname,
+                lastname,
+                email,
+                contact,
+                password,
+                password2,
+            });
+        }
+        else{
+            User.findOne({email: email}).then(user => {
+                if(user){
+                    errors.push({msg: 'E-mail already exists.'})
+                    res.render('signup', {
+                        errors,
+                        firstname,
+                        lastname,
+                        email,
+                        contact,
+                        password,
+                        password2,
+                    });
+                }
+                else{
+                    const newUser = new User({
+                        firstName: firstname,
+                        lastName: lastname,
+                        email,
+                        password,
+                        contact,
+                    });
+
+                    bcrypt.genSalt(10, (err,salt) => 
+                        bcrypt.hash(newUser.password, salt, (err, hash) => {
+                            if(err) throw err;
+
+                            newUser.password = hash;
+                            newUser.save()
+                            .then((user) => {
+                                req.flash('success_msg', 'Sign up successful! You can now login.')
+                                res.redirect('/login');
+                            })
+                            .catch(err => console.log(err));
+                    }))
+                }
+            })
+        }
     });
 };
\ No newline at end of file
diff --git a/backend/config/auth.js b/backend/config/auth.js
new file mode 100644
index 0000000..889c1e5
--- /dev/null
+++ b/backend/config/auth.js
@@ -0,0 +1,17 @@
+module.exports = {
+    ensureAuthenticated: function(req,res,next) {
+        if(req.isAuthenticated()){
+            return next();
+        }
+
+        str=req.url.substring(1);
+        if(str=='checkout'){
+            req.flash('error_msg', `Please log in to ${str}.`);
+        }
+        else{
+            req.flash('error_msg', `Please log in to access your ${str}.`);
+        }
+        
+        res.redirect('/login');
+    }
+}
\ No newline at end of file
diff --git a/backend/config/passport.js b/backend/config/passport.js
new file mode 100644
index 0000000..b6ad3a5
--- /dev/null
+++ b/backend/config/passport.js
@@ -0,0 +1,38 @@
+const LocalStrategy = require('passport-local').Strategy;
+const bcrypt = require('bcryptjs');
+const User = require('../models/User');
+
+module.exports = function(passport){
+    passport.use(
+        new LocalStrategy({usernameField: 'email'}, (email,password,done) => {
+            User.findOne({email: email})
+            .then(user => {
+                if(!user) {
+                    return done(null, false, {message: 'This email is not registered.'});
+                }
+
+                bcrypt.compare(password, user.password, (err, isMatch) => {
+                    if(err) throw err;
+
+                    if(isMatch){
+                        return done(null, user);
+                    }
+                    else{
+                        return done(null, false, {message: 'Incorrect password.'})
+                    }
+                });
+            })
+            .catch(err => console.log(err));
+        })
+    );
+
+    passport.serializeUser((user, done) => {
+        done(null, user.id);
+      });
+      
+    passport.deserializeUser((id, done) => {
+        User.findById(id, (err, user) => {
+            done(err, user);
+        });
+    });
+};
\ No newline at end of file
diff --git a/backend/index.js b/backend/index.js
deleted file mode 100644
index e69de29..0000000
diff --git a/backend/models/Address.js b/backend/models/Address.js
new file mode 100644
index 0000000..c2499e9
--- /dev/null
+++ b/backend/models/Address.js
@@ -0,0 +1,39 @@
+var mongoose = require('mongoose')
+var Schema = mongoose.Schema;
+
+const addressSchema = new Schema(
+    {
+        city:
+        {
+            type: String,
+            required: true,
+        },
+        state:
+        {
+            type: String,
+            required: true,
+        },
+        country:
+        {
+            type: String,
+            required: true,
+        },
+        addLine1:
+        {
+            type: String,
+            required: true,
+        },
+        addLine2:
+        {
+            type: String,
+            required: true,
+        },
+        pinCode:
+        {
+            type: Number,
+            required: true,
+        },
+    }
+)
+
+module.exports = addressSchema;
\ No newline at end of file
diff --git a/backend/models/Cart.js b/backend/models/Cart.js
new file mode 100644
index 0000000..ead1996
--- /dev/null
+++ b/backend/models/Cart.js
@@ -0,0 +1,34 @@
+var mongoose = require('mongoose')
+var Schema = mongoose.Schema;
+
+const cartSchema = Schema( 
+    {
+        item:
+        {
+            type: String,
+            required: true,
+        },
+        sku:
+        {
+            type: String,
+            required: true,
+        },
+        quantity:
+        {
+            type: String,
+            required: true,
+        },
+        discount: 
+        {
+            type: Number,
+            required: true,
+        },
+        amount:
+        {
+            type: Number,
+            required: true,
+        },
+    },
+)
+
+module.exports = cartSchema;
\ No newline at end of file
diff --git a/backend/models/Page.js b/backend/models/Page.js
new file mode 100644
index 0000000..e23f234
--- /dev/null
+++ b/backend/models/Page.js
@@ -0,0 +1,19 @@
+var mongoose = require('mongoose');
+var pageSchema = mongoose.Schema({
+    title: {
+        type: String,
+        required: true
+    },
+    slug: {
+        type: String,
+    },
+    content: {
+        type: String,
+        required: true
+    },
+    sorting: {
+        type: Number,
+    }
+})
+
+module.exports = mongoose.model('Page', pageSchema);
\ No newline at end of file
diff --git a/backend/models/add_items.js b/backend/models/add_items.js
index 460947f..5e34fc3 100644
--- a/backend/models/add_items.js
+++ b/backend/models/add_items.js
@@ -15,14 +15,40 @@ db.on('error', console.error.bind(console, 'connection error:'));
  
 db.once('open', function() {
     console.log("Connection Successful!");
- 
-    // a document instance
-    var product = new Product({name: 'Aster', price: 150, stock: 0, description: 'Pearl hoops.', category: ['Pearls'], size: '4cm diameter' , imgPath: 'images/15.jpg'});
- 
-    // save model to database
-    product.save(function (err, prod) {
-      if (err) return console.error(err);
-      console.log(prod.name + " saved to collection.");
+
+    var list = [
+      {
+        name: 'Viola', 
+        price: 130, 
+        stock: 0, 
+        color: [
+          'Violet',
+          'Green',
+          'Light Blue',
+          'White',
+          'Red'
+        ],
+        description: 'Crystal drop Kidney hoops.', 
+        category: ['Pearls', 'Wired Earrings'], 
+        imgPath: 'images/12.jpg'
+      },
+    ];
+
+    list.forEach(function(item) {
+      var product = new Product({
+        name: item.name, 
+        price: item.price, 
+        stock: item.stock, 
+        description: item.description, 
+        category: item.category, 
+        imgPath: item.imgPath,
+      });
+
+      // save model to database
+      product.save(function (err, prod) {
+        if (err) return console.error(err);
+        console.log(prod.name + " saved to collection.");
+      });
     });
      
 });
\ No newline at end of file
diff --git a/backend/models/carts.js b/backend/models/carts.js
new file mode 100644
index 0000000..c71ad91
--- /dev/null
+++ b/backend/models/carts.js
@@ -0,0 +1,41 @@
+module.exports = function Cart(oldCart) {
+    this.items = oldCart.items || {};
+    this.totalQty = oldCart.totalQty || 0;
+    this.totalPrice = oldCart.totalPrice || 0;
+
+    this.add = (item,id) => {
+        var storedItem = this.items[id];
+        if(!storedItem){
+            storedItem = this.items[id] = {item: item, qty:0, price: 0};
+        }
+        storedItem.qty++;
+        storedItem.price = storedItem.item.price * storedItem.qty;
+        this.totalQty++;
+        this.totalPrice += storedItem.item.price;
+    };
+
+    this.reduceByOne = (id) => {
+        this.items[id].qty--;
+        this.items[id].price -= this.items[id].item.price;
+        this.totalQty--;
+        this.totalPrice -= this.items[id].item.price;
+
+        if(this.items[id].qty <= 0){
+            delete this.items[id];
+        }
+    }
+
+    this.removeItem = (id) => {
+        this.totalQty -= this.items[id].qty;
+        this.totalPrice -= this.items[id].price;
+        delete this.items[id];
+    };
+
+    this.generateArray = () => {
+        var arr = [];
+        for(var id in this.items){
+            arr.push(this.items[id]);
+        }
+        return arr;
+    };
+};
\ No newline at end of file
diff --git a/backend/models/order.js b/backend/models/order.js
index 9eba69c..782f0b4 100644
--- a/backend/models/order.js
+++ b/backend/models/order.js
@@ -1,113 +1,69 @@
-var mongoose = require('mongoose')
+var mongoose = require('mongoose');
+var addressSchema = require('./Address');
+const User = require('./User');
 var Schema = mongoose.Schema;
 
 const orderSchema = Schema( 
     {
-        userID:
+        email:
         {
             type: String,
             required: true,
         },
-        paymentStatus:
+        cart:
         {
-            type: String,
-            required:true,
+            type: Array,
+            required: true,
         },
-        shippingStatus:
+        totalAmount:
         {
-            type: String,
+            type: Number,
             required: true,
         },
-        amount:
+        totalQty:
         {
             type: Number,
-            // required: true,
+            required: true,
         },
-        items:
+        shippingStatus:
         {
-            type: Array,
-            required: true,
+            type: String,
+            // required: true,
         },
         shippingAddress:
         {
             type: [addressSchema],
-            required: true,
+            // required: true,
         },
         billingAddress:
         {
             type: [addressSchema],
-            required: true,
-        },
-        trackingID:
-        {
-            type: String,
-            required: true,
-        },
-    },
-)
-
-const itemSchema = new Schema(
-    {
-        sku: {
-            type: String,
             // required: true,
         },
-        quantity: {
-            type: Number,
-            required: true,
-        },
-        price: {
-            type: Number,
-            required: true,
-        },
-        discount: {
-            type: Number,
-            required: true,
-        },
-        preTax: {
-            type: Number,
-            required: true,
-        },
-        postTax: {
-            type: Number,
-            required: true,
-        },
-    }
-)
-
-const addressSchema = new Schema(
-    {
-        city:
+        paymentID:
         {
             type: String,
-            required: true,
-        },
-        state:
-        {
-            type: String,
-            required: true,
+            // required: true,
         },
-        country:
+        fulfilled:
         {
-            type: String,
-            required: true,
+            type: Boolean,
+            default: false,
         },
-        addLine1:
+        shipped:
         {
-            type: String,
-            required: true,
+            type: Boolean,
+            default: false,
         },
-        addLine2:
+        delivered:
         {
-            type: String,
-            required: true,
-        },
-        pinCode:
-        {
-            type: Number,
-            required: true,
+            type: Boolean,
+            default: false,
         },
+    },
+    {
+        timestamps: true
     }
 )
 
-module.exports = mongoose.model('orders',ordersSchema)
\ No newline at end of file
+module.exports = mongoose.model('order', orderSchema);
\ No newline at end of file
diff --git a/backend/models/product.js b/backend/models/product.js
index 343edf2..62fe752 100644
--- a/backend/models/product.js
+++ b/backend/models/product.js
@@ -25,7 +25,7 @@ const prodSchema = Schema(
         },
         color:
         {
-            type: String,
+            type: [String],
             // required:true,
         },
         size:
diff --git a/backend/models/user.js b/backend/models/user.js
index d624d16..d954d08 100644
--- a/backend/models/user.js
+++ b/backend/models/user.js
@@ -1,13 +1,10 @@
-var mongoose = require('mongoose')
+var mongoose = require('mongoose');
+var addressSchema = require('./Address');
+var cartSchema = require('./Cart');
 var Schema = mongoose.Schema;
 
 const userSchema = new Schema( 
     {
-        _id:
-        {
-            type: String,
-            required: true,
-        },
         firstName:
         {
             type: String,
@@ -18,57 +15,38 @@ const userSchema = new Schema(
             type: String,
             required: true,
         },
-        hashPass:
-        {
-            type: String,
-            // required: true,
-        },
-        billingAddress:
-        {
-            type: [addressSchema],
-            required: true,
-        },
-        shippingAddress:
-        {
-            type: [addressSchema],
-            // required: true,
-        },
-    },
-)
-
-const addressSchema = new Schema(
-    {
-        city:
+        email:
         {
             type: String,
             required: true,
         },
-        state:
+        password:
         {
             type: String,
             required: true,
         },
-        country:
+        contact:
         {
-            type: String,
+            type: Number,
             required: true,
         },
-        addLine1:
+        date:
         {
-            type: String,
-            required: true,
+            type: Date,
+            default: Date.now
         },
-        addLine2:
+        address:
         {
-            type: String,
-            required: true,
+            type: [addressSchema],
+            // required: true,
         },
-        pinCode:
+        wishlist: 
         {
-            type: Number,
-            required: true,
+            type: [String],
+            // required: true,
+            default: []
         },
-    }
+    },
 )
 
 module.exports = mongoose.model('users',userSchema)
\ No newline at end of file
diff --git a/backend/package-lock.json b/backend/package-lock.json
index 333e823..2d591bd 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -26,18 +26,18 @@
       }
     },
     "@types/mongodb": {
-      "version": "3.6.12",
-      "resolved": "https://registry.npmjs.org/@types/mongodb/-/mongodb-3.6.12.tgz",
-      "integrity": "sha512-49aEzQD5VdHPxyd5dRyQdqEveAg9LanwrH8RQipnMuulwzKmODXIZRp0umtxi1eBUfEusRkoy8AVOMr+kVuFog==",
+      "version": "3.6.16",
+      "resolved": "https://registry.npmjs.org/@types/mongodb/-/mongodb-3.6.16.tgz",
+      "integrity": "sha512-D3tM0iRUet3TiIMAdvovxAIRG9gYqFd4j7visGwmPNdQj8Fq/uFFfRxyGCgEwVXAs0NnJPMI/QGVTADxDwhmSQ==",
       "requires": {
         "@types/bson": "*",
         "@types/node": "*"
       }
     },
     "@types/node": {
-      "version": "15.3.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-15.3.0.tgz",
-      "integrity": "sha512-8/bnjSZD86ZfpBsDlCIkNXIvm+h6wi9g7IqL+kmFkQ+Wvu3JrasgLElfiPgoo8V8vVfnEi0QVS12gbl94h9YsQ=="
+      "version": "15.6.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-15.6.0.tgz",
+      "integrity": "sha512-gCYSfQpy+LYhOFTKAeE8BkyGqaxmlFxe+n4DKM6DR0wzw/HISUE/hAmkC/KT8Sw5PCJblqg062b3z9gucv3k0A=="
     },
     "abbrev": {
       "version": "1.1.1",
@@ -100,6 +100,17 @@
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
       "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
     },
+    "asn1.js": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
+      "integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==",
+      "requires": {
+        "bn.js": "^4.0.0",
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
     "async": {
       "version": "0.9.2",
       "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
@@ -118,6 +129,11 @@
         "safe-buffer": "5.1.2"
       }
     },
+    "bcryptjs": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
+      "integrity": "sha1-mrVie5PmBiH/fNrF2pczAn3x0Ms="
+    },
     "binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -137,6 +153,11 @@
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.1.tgz",
       "integrity": "sha512-MKiLiV+I1AA596t9w1sQJ8jkiSr5+ZKi0WKrYGUn6d1Fx+Ij4tIj+m2WMQSGczs5jZVxV339chE8iwk6F64wjA=="
     },
+    "bn.js": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+      "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA=="
+    },
     "body-parser": {
       "version": "1.19.0",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
@@ -349,6 +370,49 @@
         "xdg-basedir": "^4.0.0"
       }
     },
+    "connect-flash": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/connect-flash/-/connect-flash-0.1.1.tgz",
+      "integrity": "sha1-2GMPJtlaf4UfmVax6MxnMvO2qjA="
+    },
+    "connect-mongo": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/connect-mongo/-/connect-mongo-4.4.1.tgz",
+      "integrity": "sha512-I1QUE2tSGPtIBDAL2sFqUEPspDeJOR0u4g+N41ARJZk958pncu2PBG48Ev++fnldljobpIfdafak7hSlPYarvA==",
+      "requires": {
+        "debug": "^4.3.1",
+        "kruptein": "^3.0.0",
+        "mongodb": "3.6.5"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "mongodb": {
+          "version": "3.6.5",
+          "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.6.5.tgz",
+          "integrity": "sha512-mQlYKw1iGbvJJejcPuyTaytq0xxlYbIoVDm2FODR+OHxyEiMR021vc32bTvamgBjCswsD54XIRwhg3yBaWqJjg==",
+          "requires": {
+            "bl": "^2.2.1",
+            "bson": "^1.1.4",
+            "denque": "^1.4.1",
+            "require_optional": "^1.0.1",
+            "safe-buffer": "^5.1.2",
+            "saslprep": "^1.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        }
+      }
+    },
     "content-disposition": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
@@ -556,6 +620,52 @@
         "vary": "~1.1.2"
       }
     },
+    "express-ejs-layouts": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/express-ejs-layouts/-/express-ejs-layouts-2.5.0.tgz",
+      "integrity": "sha512-27Kza3FR8UqvQsq1ewaxC2IwpgrQttYDEFN5s8D74Fv1VPdzsXFWsiKhPMlNauG+DrgMAmh7FhQl5hKHffd+wQ=="
+    },
+    "express-session": {
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/express-session/-/express-session-1.17.2.tgz",
+      "integrity": "sha512-mPcYcLA0lvh7D4Oqr5aNJFMtBMKPLl++OKKxkHzZ0U0oDq1rpKBnkR5f5vCHR26VeArlTOEF9td4x5IjICksRQ==",
+      "requires": {
+        "cookie": "0.4.1",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "~2.0.0",
+        "on-headers": "~1.0.2",
+        "parseurl": "~1.3.3",
+        "safe-buffer": "5.2.1",
+        "uid-safe": "~2.1.5"
+      },
+      "dependencies": {
+        "cookie": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
+          "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA=="
+        },
+        "depd": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+          "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
+        },
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+        }
+      }
+    },
+    "express-validator": {
+      "version": "6.11.1",
+      "resolved": "https://registry.npmjs.org/express-validator/-/express-validator-6.11.1.tgz",
+      "integrity": "sha512-XAMdu1P6RESd8bvKtNdgNPsW+abkY6UQ2EVUqPpK6QVqieZKaLrN7W/zeFzDWZmgAy/RPEW8M4KYXMqQk6GmTA==",
+      "requires": {
+        "lodash": "^4.17.21",
+        "validator": "^13.5.2"
+      }
+    },
     "filelist": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.2.tgz",
@@ -826,6 +936,14 @@
         "json-buffer": "3.0.0"
       }
     },
+    "kruptein": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/kruptein/-/kruptein-3.0.0.tgz",
+      "integrity": "sha512-Fh5sIb+3XI9L12GsgeBQqXVRPLB1HVViKSUkqPPOcqTEX4NwoF8Z3pEfMSl3Psd1j+QlloV8Uxxwp4gk3aFBGA==",
+      "requires": {
+        "asn1.js": "^5.4.1"
+      }
+    },
     "latest-version": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-5.1.0.tgz",
@@ -834,6 +952,11 @@
         "package-json": "^6.3.0"
       }
     },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "lowercase-keys": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
@@ -898,6 +1021,11 @@
       "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
       "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="
     },
+    "minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
+    },
     "minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -925,9 +1053,9 @@
       }
     },
     "mongoose": {
-      "version": "5.12.9",
-      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-5.12.9.tgz",
-      "integrity": "sha512-ZSDjW15DmUbHQcZ2PqoXsJeYnpYipISi6QJH/XHR9dcSg3IRNCa86apcTptBux03/YBPiSZlKNYUNDx7iuMWoA==",
+      "version": "5.12.10",
+      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-5.12.10.tgz",
+      "integrity": "sha512-/VmFFEACH2yiuPcJoBjOzVTXozBhCeminVbWI8mxiZwvgCbNu9PQrIABIgeCJncnZH8VT4G7s2IXO5FySxF1XA==",
       "requires": {
         "@types/mongodb": "^3.5.27",
         "bson": "^1.1.4",
@@ -1125,6 +1253,28 @@
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
       "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
     },
+    "passport": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/passport/-/passport-0.4.1.tgz",
+      "integrity": "sha512-IxXgZZs8d7uFSt3eqNjM9NQ3g3uQCW5avD8mRNoXV99Yig50vjuaez6dQK2qC0kVWPRTujxY0dWgGfT09adjYg==",
+      "requires": {
+        "passport-strategy": "1.x.x",
+        "pause": "0.0.1"
+      }
+    },
+    "passport-local": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/passport-local/-/passport-local-1.0.0.tgz",
+      "integrity": "sha1-H+YyaMkudWBmJkN+O5BmYsFbpu4=",
+      "requires": {
+        "passport-strategy": "1.x.x"
+      }
+    },
+    "passport-strategy": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/passport-strategy/-/passport-strategy-1.0.0.tgz",
+      "integrity": "sha1-tVOaqPwiWj0a0XlHbd8ja0QPUuQ="
+    },
     "path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -1135,6 +1285,11 @@
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
       "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
     },
+    "pause": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
+      "integrity": "sha1-HUCLP9t2kjuVQ9lvtMnf1TXZy10="
+    },
     "picomatch": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.3.tgz",
@@ -1186,6 +1341,11 @@
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
       "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
     },
+    "random-bytes": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/random-bytes/-/random-bytes-1.0.0.tgz",
+      "integrity": "sha1-T2ih3Arli9P7lYSMMDJNt11kNgs="
+    },
     "range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -1256,6 +1416,20 @@
         "rc": "^1.2.8"
       }
     },
+    "require_optional": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/require_optional/-/require_optional-1.0.1.tgz",
+      "integrity": "sha512-qhM/y57enGWHAe3v/NcwML6a3/vfESLe/sGM2dII+gEO0BpKRUkWZow/tyloNqJyN6kXSl3RyyM8Ll5D/sJP8g==",
+      "requires": {
+        "resolve-from": "^2.0.0",
+        "semver": "^5.1.0"
+      }
+    },
+    "resolve-from": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-2.0.0.tgz",
+      "integrity": "sha1-lICrIOlP+h2egKgEx+oUdhGWa1c="
+    },
     "responselike": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz",
@@ -1505,6 +1679,14 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "uid-safe": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-2.1.5.tgz",
+      "integrity": "sha512-KPHm4VL5dDXKz01UuEd88Df+KzynaohSL9fBh096KWAxSKZQDI2uBrVqtvRM4rwrIrRRKsdLNML/lnaaVSRioA==",
+      "requires": {
+        "random-bytes": "~1.0.0"
+      }
+    },
     "undefsafe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.3.tgz",
@@ -1609,6 +1791,11 @@
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
     },
+    "validator": {
+      "version": "13.6.0",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.6.0.tgz",
+      "integrity": "sha512-gVgKbdbHgtxpRyR8K0O6oFZPhhB5tT1jeEHZR0Znr9Svg03U0+r9DXWMrnRAB+HtCStDQKlaIZm42tVsVjqtjg=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/backend/package.json b/backend/package.json
index bb6ff75..4f23469 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -4,19 +4,26 @@
   "description": "Backend for Elysian Website",
   "main": "server.js",
   "scripts": {
-    "start": "nodemon server.js",
-    "dev": "cross-env NODE_ENV=development nodemon server"
+    "start": "nodemon server.js"
   },
   "author": "Akshar",
   "license": "ISC",
   "dependencies": {
+    "bcryptjs": "^2.4.3",
+    "connect-flash": "^0.1.1",
+    "connect-mongo": "^4.4.1",
     "cors": "^2.8.5",
     "cross-env": "^7.0.3",
     "dotenv": "^9.0.2",
     "ejs": "^3.1.6",
     "express": "^4.17.1",
-    "mongoose": "^5.12.9",
+    "express-ejs-layouts": "^2.5.0",
+    "express-session": "^1.17.2",
+    "express-validator": "^6.11.1",
+    "mongoose": "^5.12.10",
     "morgan": "^1.10.0",
-    "nodemon": "^2.0.7"
+    "nodemon": "^2.0.7",
+    "passport": "^0.4.1",
+    "passport-local": "^1.0.0"
   }
 }
diff --git a/backend/public/stylesheet1.css b/backend/public/stylesheet1.css
index 309d6e7..e094670 100644
--- a/backend/public/stylesheet1.css
+++ b/backend/public/stylesheet1.css
@@ -166,3 +166,11 @@ font-family: 'Roboto', sans-serif;
     text-align: center;
     color: #ecbbaa;
 }
+.fa {
+    font-size: 12px;
+}
+a:hover {
+    color: #ecbbaa;
+    background-color: transparent;
+    text-decoration: underline;
+  }
\ No newline at end of file
diff --git a/backend/routes/admin_pages.js b/backend/routes/admin_pages.js
new file mode 100644
index 0000000..3aef8fe
--- /dev/null
+++ b/backend/routes/admin_pages.js
@@ -0,0 +1,22 @@
+var express = require('express');
+var router = express.Router();
+
+//get index page
+router.get('/', (req,res) => {
+    res.send('Admin Page');
+})
+
+//get add page
+router.get('/add-page', (req,res) => {
+    var title = "";
+    var slug = "";
+    var content = "";
+
+    res.render('admin/add_page', {
+        title: title,
+        slug: slug,
+        content: content,
+    });
+});
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/routes/cart.js b/backend/routes/cart.js
new file mode 100644
index 0000000..0427207
--- /dev/null
+++ b/backend/routes/cart.js
@@ -0,0 +1,9 @@
+var express = require('express');
+var router = express.Router();
+var Product = require('../models/Product');
+
+router.get('/add/:product', (req,res) => {
+
+})
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/routes/pages.js b/backend/routes/pages.js
new file mode 100644
index 0000000..80358c2
--- /dev/null
+++ b/backend/routes/pages.js
@@ -0,0 +1,10 @@
+var express = require('express');
+var router = express.Router();
+
+router.get('/', (req,res) => {
+    res.render('index', {
+        title: 'Home'
+    });
+});
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/routes/products.js b/backend/routes/products.js
new file mode 100644
index 0000000..a2e2efc
--- /dev/null
+++ b/backend/routes/products.js
@@ -0,0 +1,46 @@
+var prodSchema = require('../models/Product');
+var express = require('express');
+var router = express.Router();
+
+router.get('/', async (req,res) => {
+    var prods = await prodSchema.find({});
+    res.render('products', {'prods': prods});
+});
+router.get('/beaded', async (req,res) => {
+    var prods = await prodSchema.find({category: 'Beaded'});
+    res.render('categories/beaded', {'prods': prods});
+});
+router.get('/bracelets', async (req,res) => {
+    var prods = await prodSchema.find({category: 'Bracelets'});
+    res.render('categories/bracelets', {'prods': prods});
+});
+router.get('/earcuffs', async (req,res) => {
+    var prods = await prodSchema.find({category: 'Earcuffs'});
+    res.render('categories/ear_cuffs', {'prods': prods});
+});
+router.get('/necklaces', async (req,res) => {
+    var prods = await prodSchema.find({category: 'Necklaces'});
+    res.render('categories/necklaces', {'prods': prods});
+});
+router.get('/pearls', async (req,res) => {
+    var prods = await prodSchema.find({category: 'Pearls'});
+    res.render('categories/pearls', {'prods': prods});
+});
+router.get('/polymerclay', async (req,res) => {
+    var prods = await prodSchema.find({category: 'Polymer Clay'});
+    res.render('categories/polymer_clay', {'prods': prods});
+});
+router.get('/tassels', async (req,res) => {
+    var prods = await prodSchema.find({category: 'Tassels'});
+    res.render('categories/tassels', {'prods': prods});
+});
+router.get('/threads', async (req,res) => {
+    var prods = await prodSchema.find({category: 'Threads'});
+    res.render('categories/threads', {'prods': prods});
+});
+router.get('/wiredearrings', async (req,res) => {
+    var prods = await prodSchema.find({category: 'Wired Earrings'});
+    res.render('categories/wired_earrings', {'prods': prods});
+});
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/server.js b/backend/server.js
index 7ce1dcb..5f2207b 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -1,26 +1,67 @@
 const express = require('express')
 const connectDB = require('./config/db')
-const cors = require('cors')
-const morgan = require('morgan')
+const passport = require('passport')
+const flash = require('connect-flash')
+const session = require('express-session')
+const MongoStore = require('connect-mongo')
 require('dotenv').config()
-var productsController = require('./app')
+
 const app = express()
 
-connectDB()
+require('./config/passport')(passport)
 
-if(process.env.NODE_ENV === 'development'){
-    app.use(morgan('dev'))
-}
+var controller = require('./app')
 
-app.use(cors())
+connectDB()
+
+//view engine setup
 app.set('view engine', 'ejs')
 app.use(express.static('public'))
+
+//body parser middleware
 app.use(express.urlencoded({extended: true}))
 app.use(express.json())
 
-productsController(app)
+//express session middleware
+app.use(session({
+    secret: 'secret',
+    resave: false,
+    saveUninitialized: false,
+    store: MongoStore.create({
+      mongoUrl: `mongodb+srv://akshar:akshar2103@cluster0.70u0k.mongodb.net/elysian?retryWrites=true&w=majority`
+    }),
+    cookie: { maxAge: 180*60*1000 }
+  }))
+app.use(passport.initialize());
+app.use(passport.session());
+
+//express flash middleware
+app.use(flash())
+app.use((req, res, next) => {
+    res.locals.success_msg = req.flash('success_msg')
+    res.locals.error_msg = req.flash('error_msg')
+    res.locals.error = req.flash('error')
+    next()
+});
+
+//pass login and session states to all views
+app.use((req,res,next) => {
+  res.locals.login = req.isAuthenticated();
+  res.locals.session = req.session;
+  next();
+})
+
+//set routes
+var pages = require('./routes/pages')
+var adminPages = require('./routes/admin_pages')
+var products = require('./routes/products')
+app.use('/admin/pages', adminPages)
+app.use('/', pages)
+app.use('/products', products)
+
+controller(app)
 
-const PORT = process.env.PORT || 3000
+const PORT = process.env.PORT || 5000
 
 console.log(`Server running on port ${PORT}`)
 app.listen(PORT)
\ No newline at end of file
diff --git a/backend/views/admin/add_page.ejs b/backend/views/admin/add_page.ejs
new file mode 100644
index 0000000..7162856
--- /dev/null
+++ b/backend/views/admin/add_page.ejs
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Elysian</title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+        <link href="//db.onlinewebfonts.com/c/9bffdc939e6dc320b41ed75a76a55e69?family=Golden+Plains+-+Demo" rel="stylesheet" type="text/css"/>
+        <link rel="preconnect" href="https://fonts.gstatic.com">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+        <link rel="stylesheet" type="text/css" href="stylesheet1.css">
+        
+        <style>
+            .topnav {
+                overflow: hidden;
+                background-color: #282828;
+                display:block;
+            }
+
+            .topnav a {
+              float: left;
+              display: inline;
+              color: #f2f2f2;
+              text-decoration: none;
+              font-size: 17px;
+            }
+
+            .topnav a:hover {
+              background-color: #282828;
+              color: #ecbbaa;
+            }
+
+            .topnav .icon {
+              display: none;
+            }
+
+            @media screen and (max-width: 988px) {
+              .topnav a:not(:out-of-range){display: none;}
+              .topnav a.icon {
+                float: right;
+                display: block;
+              }
+            }
+
+            @media screen and (max-width: 988px) {
+              .topnav.responsive {position: relative;}
+              .topnav.responsive .icon {
+                position: relative;
+              }
+              .topnav.responsive a {
+                float: none;
+                display: block;
+                text-align: right;
+                padding: 52px 15px 0px;
+              }
+            }
+        </style>    
+    </head>
+    
+    <body style="background-color: #282828;">
+        
+    <!-- Navigation Bar -->
+    <nav class="navbar navbar-static-top">
+        <div class="container">
+            <!-- Logo -->
+            <div class="topnav">
+              <a href="/">
+                <img src="../images/Logo_bar.png" alt="logo" style="width: 350px; height: 110px; padding-top: 20px">
+              </a>
+            <!-- Navbar List -->
+                <div style="float: right;" id="myTopnav">
+                    <a href="javascript:void(0);" class="icon" style="color: #ecbbaa; padding-top: 52px; float: right; " onclick="myFunction()">
+                        <i class="fa fa-bars"></i>
+                    </a><br><br>
+                    <a href="/" style="color: #ecbbaa; padding: 10px 15px 0px;">Home</a>
+                    <a href="/contactus" style="color: #ecbbaa;padding: 10px 15px 0px;">Contact</a>
+                    <a href="/login" style="color: #ecbbaa;padding: 10px 15px 0px;">Login</a>
+                    <a href="/signup" style="color: #ecbbaa;padding: 10px 15px 0px;">Sign Up</a>
+                    <a href="/wishlist" style="color: #ecbbaa;padding: 10px 15px 0px;"><span class="glyphicon glyphicon-heart"></span></a><!-- comment -->
+                    <a href="/cart" style="color: #ecbbaa;padding: 10px 10px 0px;"><span class="glyphicon glyphicon-shopping-cart"></span></a>
+                    
+                </div>
+
+            </div>
+        </div>
+    </nav>
+
+    <div style="padding-top: 50px;">
+            <hr id="line">
+            <p class="container-fluid" style="color: #ecbbaa;font-size: 10px;font-family: 'Roboto', sans-serif; text-align: left;">
+                Copyrights under Elysian, All Rights Reserved.
+            </p>
+        </div>
+    <script>
+            function myFunction() {
+              var x = document.getElementById("myTopnav");
+              if (x.className === "topnav") {
+                x.className += " responsive";
+              } else {
+                x.className = "topnav";
+              }
+            }
+        </script>
+    </body>
+</html>
diff --git a/backend/views/cart.ejs b/backend/views/cart.ejs
index 5f784a0..078297d 100644
--- a/backend/views/cart.ejs
+++ b/backend/views/cart.ejs
@@ -1,149 +1,94 @@
-<!DOCTYPE html>
 <html>
-    <head>
-        <title>Elysian</title>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-        <link href="//db.onlinewebfonts.com/c/9bffdc939e6dc320b41ed75a76a55e69?family=Golden+Plains+-+Demo" rel="stylesheet" type="text/css"/>
-        <link rel="preconnect" href="https://fonts.gstatic.com">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link rel="stylesheet" href="stylesheet1.css">
-        
-        <style>
-            .topnav {
-                overflow: hidden;
-                background-color: #282828;
-                display:block;
-            }
-
-            .topnav a {
-              float: left;
-              display: inline;
-              color: #f2f2f2;
-              text-decoration: none;
-              font-size: 17px;
-            }
-
-            .topnav a:hover {
-              background-color: #282828;
-              color: #ecbbaa;
-            }
-
-            .topnav .icon {
-              display: none;
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav a:not(:out-of-range){display: none;}
-              .topnav a.icon {
-                float: right;
-                display: block;
-              }
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav.responsive {position: relative;}
-              .topnav.responsive .icon {
-                position: relative;
-              }
-              .topnav.responsive a {
-                float: none;
-                display: block;
-                text-align: right;
-                padding: 52px 15px 0px;
-              }
-            }
-        </style>    
-    </head>
-    
+    <%- include('layouts/head') %>
     <body style="background-color: #282828;">
-        
-    <!-- Navigation Bar -->
-    <nav class="navbar navbar-static-top">
-        <div class="container">
-            <!-- Logo -->
-            <div class="topnav">
-                <img src="images/Logo_bar.png" alt="logo" style="width: 350px; height: 110px; padding-top: 20px">
-            <!-- Navbar List -->
-                <div style="float: right;" id="myTopnav">
-                    <a href="javascript:void(0);" class="icon" style="color: #ecbbaa; padding-top: 52px; float: right; " onclick="myFunction()">
-                        <i class="fa fa-bars"></i>
-                    </a><br><br>
-                    <a href="/" style="color: #ecbbaa; padding: 10px 15px 0px;">Home</a>
-                    <a href="/contactus" style="color: #ecbbaa;padding: 10px 15px 0px;">Contact</a>
-                    <a href="/login" style="color: #ecbbaa;padding: 10px 15px 0px;">Login</a>
-                    <a href="/signup" style="color: #ecbbaa;padding: 10px 15px 0px;">Sign Up</a>
-                    <a href="/wishlist" style="color: #ecbbaa;padding: 10px 15px 0px;"><span class="glyphicon glyphicon-heart"></span></a><!-- comment -->
-                    <a href="/cart" style="color: #ecbbaa;padding: 10px 10px 0px;"><span class="glyphicon glyphicon-shopping-cart"></span></a>
-                    
-                </div>
+    <%- include('layouts/header') %>
 
-            </div>
-        </div>
-    </nav>
-          
-    
     <div>
         <h1 class="cart_heading"> Cart </h1>
     </div>
-    
-    <div class="container">
-        <table class="table table-responsive table-hover text-center">
-            <tbody class="text-center">
-                <tr>
-                    <td><p><b>Item</b></p></td>
-                    <td><p><b>Price</b></p></td>
-                    <td><p><b>Quantity</b></p></td>
-                    <td><p><b>Total</b></p></td>
-                </tr>
-                <tr>
-                    <td><p>Product</p></td>
-                    <td><p>Rs.0.00</p></td>
-                    <td><p>1</p></td>
-                    <td><p>Rs.0.00</p></td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-    <div class="container">
-        <div class="row">
-            <div class="col-sm-3 col-sm-offset-9">
-                <form class="form-group text-right">
-                    <input class="form-control" type="text" placeholder="Is it a gift? Enter a personalized note :) ">
-                </form>
+    <% if(products && session.cart.totalQty){ %>
+        <div class="container">
+            <table class="table table-responsive table-hover text-center">
+                <tbody class="text-center">
+                    <tr>
+                        <td><p><b>PREVIEW</b></p></td>
+                        <td><p><b>ITEM</b></p></td>
+                        <td><p><b>PRICE</b></p></td>
+                        <td><p><b>QUANTITY</b></p></td>
+                        <td><p><b>TOTAL</b></p></td>
+                        <td><p><b>
+                            <a href="/clear-cart" 
+                                class="fa fa-close" role='button' style="text-decoration: none; font-size: 15px; color: #ecbbaa; border: none;">
+                            </a>
+                        </b></p></td>
+                    </tr>
+                    <% products.forEach(function(prod){ %>
+                    <tr>
+                        <td><img src="/<%= prod.path %>" alt="image" style="width:40px;height:40px;"></td>
+                        <td>
+                            <a href="/details/<%- prod._id %>">
+                                <p style="color: #ecbbaa;"><%= prod.name %></p>
+                            </a>
+                        </td>
+                        <td><p>&#x20b9;<%= prod.price %></p></td>
+                        <td><p>
+                            <a href="/reduce/<%- prod._id %>" 
+                                class="fa fa-minus" role='button' style="text-decoration: none; color: #ecbbaa;">
+                            </a>
+                            <%= prod.qty %>
+                            <% if(prod.stock > 0){ %>
+                                <a href="/add-to-cart/<%- prod._id %>"
+                                    class="fa fa-plus" role='button' style="text-decoration: none; color: #ecbbaa; border: none;">
+                                </a>
+                            <% }else { %>
+                                <button class="fa fa-plus" role='button' style="text-decoration: none; color: #ecbbaa; border: none;" disabled></button>
+                            <% } %>
+                        </p></td>
+                        <td><p>&#x20b9;<%= prod.total %></p></td>
+                        <td><p>
+                            <a href="/remove-from-cart/<%- prod._id %>" 
+                                class="fa fa-trash" role='button' style="text-decoration: none; color: #ecbbaa; border: none;">
+                            </a>
+                        </p></td>
+                    </tr>
+                    <% }) %>
+                </tbody>
+            </table>
+        </div>
+    <% }else{ %>
+        <p class="container-fluid" style="color: #ecbbaa;font-size: 20px;font-family: 'Roboto', sans-serif; text-align: center;">
+            Your cart is empty. Add items to the cart to view it here.
+        </p>
+    <% } %>
+    <% if(products && session.cart.totalQty){ %>
+        <div class="container">
+            <div class="row">
+                <div class="col-sm-4 col-sm-offset-8">
+                    <form action="/checkout" method="POST" class="form-group text-right">
+                        <input 
+                            class="form-control" 
+                            type="text" 
+                            placeholder="Enter any personalized note here:)"
+                            name="note"
+                        >
+                    </form>
+                </div>
             </div>
         </div>
-    </div>
-    <div class="container">
-        <div class="row checkout">
-            <div class="col-sm-3 col-sm-offset-9 text-right">
-                <h3>SUBTOTAL Rs.0.00</h3><!-- comment -->
-                <p>Shipping, taxes, and discount codes calculated at checkout.</p><!-- comment -->
-                <button class="btn btn-default">Check Out</button><br><br>
-                <a style="text-decoration: none; color: #ecbbaa" href="/">Continue Shopping</a>
+        <div class="container">
+            <div class="row checkout">
+                <div class="col-sm-3 col-sm-offset-9 text-right">
+                    <h4>Grand Total: <strong>&#x20b9;<%= totalPrice %></strong></h4>
+                    <p>Shipping, taxes, and discount codes calculated at checkout.</p>
+                    <a href="/checkout" 
+                        class="btn btn-default" role='button' style="color: #282828; background-color: #ecbbaa; border: none;"> Check Out 
+                    </a>
+                </div>
             </div>
         </div>
-    </div>
+    <% } %>
     
-<footer>
-            <hr id="line">
-            <p class="container-fluid" style="color: #ecbbaa;font-size: 10px;font-family: 'Roboto', sans-serif; text-align: left;">
-                Copyrights under Elysian, All Rights Reserved
-            </p>
-        </footer>
-<script>
-            function myFunction() {
-              var x = document.getElementById("myTopnav");
-              if (x.className === "topnav") {
-                x.className += " responsive";
-              } else {
-                x.className = "topnav";
-              }
-            }
-        </script>    
+    <%- include('layouts/footer') %>
+    <%- include('layouts/responsive') %> 
     </body>
 </html>
diff --git a/backend/views/categories/beaded.ejs b/backend/views/categories/beaded.ejs
index ff0d442..6047f33 100644
--- a/backend/views/categories/beaded.ejs
+++ b/backend/views/categories/beaded.ejs
@@ -1,126 +1,10 @@
 <!DOCTYPE html>
-
 <html>
-    <head>
-       <title>Elysian</title>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-        <link href="//db.onlinewebfonts.com/c/9bffdc939e6dc320b41ed75a76a55e69?family=Golden+Plains+-+Demo" rel="stylesheet" type="text/css"/>
-        <link rel="preconnect" href="https://fonts.gstatic.com">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link rel="stylesheet" href="stylesheet1.css">
-        
-        <style>
-            .topnav {
-                overflow: hidden;
-                background-color: #282828;
-                display:block;
-            }
-
-            .topnav a {
-              float: left;
-              display: inline;
-              color: #f2f2f2;
-              text-decoration: none;
-              font-size: 17px;
-            }
-
-            .topnav a:hover {
-              background-color: #282828;
-              color: #ecbbaa;
-            }
-
-            .topnav .icon {
-              display: none;
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav a:not(:out-of-range){display: none;}
-              .topnav a.icon {
-                float: right;
-                display: block;
-              }
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav.responsive {position: relative;}
-              .topnav.responsive .icon {
-                position: relative;
-              }
-              .topnav.responsive a {
-                float: none;
-                display: block;
-                text-align: right;
-                padding: 52px 15px 0px;
-              }
-            }
-        </style>    
-    </head>
-    
-    <body style="background-color: #282828;">
-        
-    <!-- Navigation Bar -->
-    <nav class="navbar navbar-static-top">
-        <div class="container">
-            <!-- Logo -->
-            <div class="topnav">
-                <img src="images/Logo_bar.png" alt="logo" style="width: 350px; height: 110px; padding-top: 20px">
-            <!-- Navbar List -->
-                <div style="float: right;" id="myTopnav">
-                    <a href="javascript:void(0);" class="icon" style="color: #ecbbaa; padding-top: 52px; float: right; " onclick="myFunction()">
-                        <i class="fa fa-bars"></i>
-                    </a><br><br>
-                    <a href="/" style="color: #ecbbaa; padding: 10px 15px 0px;">Home</a>
-                    <a href="/contactus" style="color: #ecbbaa;padding: 10px 15px 0px;">Contact</a>
-                    <a href="/login" style="color: #ecbbaa;padding: 10px 15px 0px;">Login</a>
-                    <a href="/signup" style="color: #ecbbaa;padding: 10px 15px 0px;">Sign Up</a>
-                    <a href="/wishlist" style="color: #ecbbaa;padding: 10px 15px 0px;"><span class="glyphicon glyphicon-heart"></span></a><!-- comment -->
-                    <a href="/cart" style="color: #ecbbaa;padding: 10px 10px 0px;"><span class="glyphicon glyphicon-shopping-cart"></span></a>
-                    
-                </div>
-
-            </div>
-        </div>
-    </nav>
-          
-    
-    <div class="container">
-        <div class="row text-center">
-            <% prods.forEach(function(prod){%>
-              <div class="col-md-3 col-sm-6">
-                  <div class="thumbnail">
-                      <img src="<%=prod.imgPath%>" alt="image">
-                      <div class="caption">
-                        <h3 class="text"> <%=prod.name%> </h3>
-                        <p class="text"> Rs. <%=prod.price%> </p>
-                        <button class="btn btn-primary btn-block" style="color: #282828; background-color: #ecbbaa; border: none;"> Add to cart </button>
-                      </div>
-                  </div>
-              </div>
-            <% }); %>
-        </div>
-    </div>
-          
-    <div style="padding-top: 50px;">
-            <hr id="line">
-            <p class="container-fluid" style="color: #ecbbaa;font-size: 10px;font-family: 'Roboto', sans-serif; text-align: left;">
-                Copyrights under Elysian, All Rights Reserved.
-            </p>
-        </div>  
-    <script>
-            function myFunction() {
-              var x = document.getElementById("myTopnav");
-              if (x.className === "topnav") {
-                x.className += " responsive";
-              } else {
-                x.className = "topnav";
-              }
-            }
-        </script>            
-    </body>
+  <%- include('../layouts/head') %>
+  <body style="background-color: #282828;">
+    <%- include('../layouts/header') %>
+    <%- include('../layouts/items') %>
+    <%- include('../layouts/footer') %>    
+    <%- include('../layouts/responsive') %> 
+  </body>
 </html>
-
diff --git a/backend/views/categories/bracelets.ejs b/backend/views/categories/bracelets.ejs
index 0d9883e..6047f33 100644
--- a/backend/views/categories/bracelets.ejs
+++ b/backend/views/categories/bracelets.ejs
@@ -1,125 +1,10 @@
 <!DOCTYPE html>
-
 <html>
-    <head>
-       <title>Elysian</title>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-        <link href="//db.onlinewebfonts.com/c/9bffdc939e6dc320b41ed75a76a55e69?family=Golden+Plains+-+Demo" rel="stylesheet" type="text/css"/>
-        <link rel="preconnect" href="https://fonts.gstatic.com">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link rel="stylesheet" href="stylesheet1.css">
-        
-        <style>
-            .topnav {
-                overflow: hidden;
-                background-color: #282828;
-                display:block;
-            }
-
-            .topnav a {
-              float: left;
-              display: inline;
-              color: #f2f2f2;
-              text-decoration: none;
-              font-size: 17px;
-            }
-
-            .topnav a:hover {
-              background-color: #282828;
-              color: #ecbbaa;
-            }
-
-            .topnav .icon {
-              display: none;
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav a:not(:out-of-range){display: none;}
-              .topnav a.icon {
-                float: right;
-                display: block;
-              }
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav.responsive {position: relative;}
-              .topnav.responsive .icon {
-                position: relative;
-              }
-              .topnav.responsive a {
-                float: none;
-                display: block;
-                text-align: right;
-                padding: 52px 15px 0px;
-              }
-            }
-        </style>    
-    </head>
-    
-    <body style="background-color: #282828;">
-        
-    <!-- Navigation Bar -->
-    <nav class="navbar navbar-static-top">
-        <div class="container">
-            <!-- Logo -->
-            <div class="topnav">
-                <img src="images/Logo_bar.png" alt="logo" style="width: 350px; height: 110px; padding-top: 20px">
-            <!-- Navbar List -->
-                <div style="float: right;" id="myTopnav">
-                    <a href="javascript:void(0);" class="icon" style="color: #ecbbaa; padding-top: 52px; float: right; " onclick="myFunction()">
-                        <i class="fa fa-bars"></i>
-                    </a><br><br>
-                    <a href="/" style="color: #ecbbaa; padding: 10px 15px 0px;">Home</a>
-                    <a href="/contactus" style="color: #ecbbaa;padding: 10px 15px 0px;">Contact</a>
-                    <a href="/login" style="color: #ecbbaa;padding: 10px 15px 0px;">Login</a>
-                    <a href="/signup" style="color: #ecbbaa;padding: 10px 15px 0px;">Sign Up</a>
-                    <a href="/wishlist" style="color: #ecbbaa;padding: 10px 15px 0px;"><span class="glyphicon glyphicon-heart"></span></a><!-- comment -->
-                    <a href="/cart" style="color: #ecbbaa;padding: 10px 10px 0px;"><span class="glyphicon glyphicon-shopping-cart"></span></a>
-                    
-                </div>
-
-            </div>
-        </div>
-    </nav>
-          
-    
-    <div class="container">
-      <div class="row text-center">
-          <% prods.forEach(function(prod){%>
-            <div class="col-md-3 col-sm-6">
-                <div class="thumbnail">
-                    <img src="<%=prod.imgPath%>" alt="image">
-                    <div class="caption">
-                      <h3 class="text"> <%=prod.name%> </h3>
-                      <p class="text"> Rs. <%=prod.price%> </p>
-                      <button class="btn btn-primary btn-block" style="color: #282828; background-color: #ecbbaa; border: none;"> Add to cart </button>
-                    </div>
-                </div>
-            </div>
-          <% }); %>
-      </div>
-  </div>
-          
-    <div style="padding-top: 50px;">
-            <hr id="line">
-            <p class="container-fluid" style="color: #ecbbaa;font-size: 10px;font-family: 'Roboto', sans-serif; text-align: left;">
-                Copyrights under Elysian, All Rights Reserved.
-            </p>
-        </div>
-    <script>
-            function myFunction() {
-              var x = document.getElementById("myTopnav");
-              if (x.className === "topnav") {
-                x.className += " responsive";
-              } else {
-                x.className = "topnav";
-              }
-            }
-        </script>
-    </body>
+  <%- include('../layouts/head') %>
+  <body style="background-color: #282828;">
+    <%- include('../layouts/header') %>
+    <%- include('../layouts/items') %>
+    <%- include('../layouts/footer') %>    
+    <%- include('../layouts/responsive') %> 
+  </body>
 </html>
diff --git a/backend/views/categories/ear_cuffs.ejs b/backend/views/categories/ear_cuffs.ejs
index 28e7ebf..6047f33 100644
--- a/backend/views/categories/ear_cuffs.ejs
+++ b/backend/views/categories/ear_cuffs.ejs
@@ -1,124 +1,10 @@
 <!DOCTYPE html>
 <html>
-    <head>
-       <title>Elysian</title>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-        <link href="//db.onlinewebfonts.com/c/9bffdc939e6dc320b41ed75a76a55e69?family=Golden+Plains+-+Demo" rel="stylesheet" type="text/css"/>
-        <link rel="preconnect" href="https://fonts.gstatic.com">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link rel="stylesheet" href="stylesheet1.css">
-        
-        <style>
-            .topnav {
-                overflow: hidden;
-                background-color: #282828;
-                display:block;
-            }
-
-            .topnav a {
-              float: left;
-              display: inline;
-              color: #f2f2f2;
-              text-decoration: none;
-              font-size: 17px;
-            }
-
-            .topnav a:hover {
-              background-color: #282828;
-              color: #ecbbaa;
-            }
-
-            .topnav .icon {
-              display: none;
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav a:not(:out-of-range){display: none;}
-              .topnav a.icon {
-                float: right;
-                display: block;
-              }
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav.responsive {position: relative;}
-              .topnav.responsive .icon {
-                position: relative;
-              }
-              .topnav.responsive a {
-                float: none;
-                display: block;
-                text-align: right;
-                padding: 52px 15px 0px;
-              }
-            }
-        </style>    
-    </head>
-    
-    <body style="background-color: #282828;">
-        
-    <!-- Navigation Bar -->
-    <nav class="navbar navbar-static-top">
-        <div class="container">
-            <!-- Logo -->
-            <div class="topnav">
-                <img src="images/Logo_bar.png" alt="logo" style="width: 350px; height: 110px; padding-top: 20px">
-            <!-- Navbar List -->
-                <div style="float: right;" id="myTopnav">
-                    <a href="javascript:void(0);" class="icon" style="color: #ecbbaa; padding-top: 52px; float: right; " onclick="myFunction()">
-                        <i class="fa fa-bars"></i>
-                    </a><br><br>
-                    <a href="/" style="color: #ecbbaa; padding: 10px 15px 0px;">Home</a>
-                    <a href="/contactus" style="color: #ecbbaa;padding: 10px 15px 0px;">Contact</a>
-                    <a href="/login" style="color: #ecbbaa;padding: 10px 15px 0px;">Login</a>
-                    <a href="/signup" style="color: #ecbbaa;padding: 10px 15px 0px;">Sign Up</a>
-                    <a href="/wishlist" style="color: #ecbbaa;padding: 10px 15px 0px;"><span class="glyphicon glyphicon-heart"></span></a><!-- comment -->
-                    <a href="/cart" style="color: #ecbbaa;padding: 10px 10px 0px;"><span class="glyphicon glyphicon-shopping-cart"></span></a>
-                    
-                </div>
-
-            </div>
-        </div>
-    </nav>
-          
-    
-    <div class="container">
-        <div class="row text-center">
-            <% prods.forEach(function(prod){%>
-              <div class="col-md-3 col-sm-6">
-                  <div class="thumbnail">
-                      <img src="<%=prod.imgPath%>" alt="image">
-                      <div class="caption">
-                        <h3 class="text"> <%=prod.name%> </h3>
-                        <p class="text"> Rs. <%=prod.price%> </p>
-                        <button class="btn btn-primary btn-block" style="color: #282828; background-color: #ecbbaa; border: none;"> Add to cart </button>
-                      </div>
-                  </div>
-              </div>
-            <% }); %>
-        </div>
-    </div>        
-
-    <div style="padding-top: 50px;">
-            <hr id="line">
-            <p class="container-fluid" style="color: #ecbbaa;font-size: 10px;font-family: 'Roboto', sans-serif; text-align: left;">
-                Copyrights under Elysian, All Rights Reserved.
-            </p>
-        </div>
-    <script>
-            function myFunction() {
-              var x = document.getElementById("myTopnav");
-              if (x.className === "topnav") {
-                x.className += " responsive";
-              } else {
-                x.className = "topnav";
-              }
-            }
-        </script>
-    </body>
+  <%- include('../layouts/head') %>
+  <body style="background-color: #282828;">
+    <%- include('../layouts/header') %>
+    <%- include('../layouts/items') %>
+    <%- include('../layouts/footer') %>    
+    <%- include('../layouts/responsive') %> 
+  </body>
 </html>
diff --git a/backend/views/categories/necklaces.ejs b/backend/views/categories/necklaces.ejs
index b559655..6047f33 100644
--- a/backend/views/categories/necklaces.ejs
+++ b/backend/views/categories/necklaces.ejs
@@ -1,124 +1,10 @@
 <!DOCTYPE html>
 <html>
-    <head>
-       <title>Elysian</title>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-        <link href="//db.onlinewebfonts.com/c/9bffdc939e6dc320b41ed75a76a55e69?family=Golden+Plains+-+Demo" rel="stylesheet" type="text/css"/>
-        <link rel="preconnect" href="https://fonts.gstatic.com">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link rel="stylesheet" href="stylesheet1.css">
-        
-        <style>
-            .topnav {
-                overflow: hidden;
-                background-color: #282828;
-                display:block;
-            }
-
-            .topnav a {
-              float: left;
-              display: inline;
-              color: #f2f2f2;
-              text-decoration: none;
-              font-size: 17px;
-            }
-
-            .topnav a:hover {
-              background-color: #282828;
-              color: #ecbbaa;
-            }
-
-            .topnav .icon {
-              display: none;
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav a:not(:out-of-range){display: none;}
-              .topnav a.icon {
-                float: right;
-                display: block;
-              }
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav.responsive {position: relative;}
-              .topnav.responsive .icon {
-                position: relative;
-              }
-              .topnav.responsive a {
-                float: none;
-                display: block;
-                text-align: right;
-                padding: 52px 15px 0px;
-              }
-            }
-        </style>    
-    </head>
-    
-    <body style="background-color: #282828;">
-        
-    <!-- Navigation Bar -->
-    <nav class="navbar navbar-static-top">
-        <div class="container">
-            <!-- Logo -->
-            <div class="topnav">
-                <img src="images/Logo_bar.png" alt="logo" style="width: 350px; height: 110px; padding-top: 20px">
-            <!-- Navbar List -->
-                <div style="float: right;" id="myTopnav">
-                    <a href="javascript:void(0);" class="icon" style="color: #ecbbaa; padding-top: 52px; float: right; " onclick="myFunction()">
-                        <i class="fa fa-bars"></i>
-                    </a><br><br>
-                    <a href="/" style="color: #ecbbaa; padding: 10px 15px 0px;">Home</a>
-                    <a href="/contactus" style="color: #ecbbaa;padding: 10px 15px 0px;">Contact</a>
-                    <a href="/login" style="color: #ecbbaa;padding: 10px 15px 0px;">Login</a>
-                    <a href="/signup" style="color: #ecbbaa;padding: 10px 15px 0px;">Sign Up</a>
-                    <a href="/wishlist" style="color: #ecbbaa;padding: 10px 15px 0px;"><span class="glyphicon glyphicon-heart"></span></a><!-- comment -->
-                    <a href="/cart" style="color: #ecbbaa;padding: 10px 10px 0px;"><span class="glyphicon glyphicon-shopping-cart"></span></a>
-                    
-                </div>
-
-            </div>
-        </div>
-    </nav>
-          
-    
-    <div class="container">
-        <div class="row text-center">
-            <% prods.forEach(function(prod){%>
-              <div class="col-md-3 col-sm-6">
-                  <div class="thumbnail">
-                      <img src="<%=prod.imgPath%>" alt="image">
-                      <div class="caption">
-                        <h3 class="text"> <%=prod.name%> </h3>
-                        <p class="text"> Rs. <%=prod.price%> </p>
-                        <button class="btn btn-primary btn-block" style="color: #282828; background-color: #ecbbaa; border: none;"> Add to cart </button>
-                      </div>
-                  </div>
-              </div>
-            <% }); %>
-        </div>
-    </div>
-                        
-    <div style="padding-top: 50px;">
-            <hr id="line">
-            <p class="container-fluid" style="color: #ecbbaa;font-size: 10px;font-family: 'Roboto', sans-serif; text-align: left;">
-                Copyrights under Elysian, All Rights Reserved.
-            </p>
-        </div>
-            <script>
-            function myFunction() {
-              var x = document.getElementById("myTopnav");
-              if (x.className === "topnav") {
-                x.className += " responsive";
-              } else {
-                x.className = "topnav";
-              }
-            }
-        </script>
-    </body>
+  <%- include('../layouts/head') %>
+  <body style="background-color: #282828;">
+    <%- include('../layouts/header') %>
+    <%- include('../layouts/items') %>
+    <%- include('../layouts/footer') %>    
+    <%- include('../layouts/responsive') %> 
+  </body>
 </html>
diff --git a/backend/views/categories/pearls.ejs b/backend/views/categories/pearls.ejs
index a9633c6..6047f33 100644
--- a/backend/views/categories/pearls.ejs
+++ b/backend/views/categories/pearls.ejs
@@ -1,126 +1,10 @@
 <!DOCTYPE html>
 <html>
-    <head>
-       <title>Elysian</title>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-        <link href="//db.onlinewebfonts.com/c/9bffdc939e6dc320b41ed75a76a55e69?family=Golden+Plains+-+Demo" rel="stylesheet" type="text/css"/>
-        <link rel="preconnect" href="https://fonts.gstatic.com">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link rel="stylesheet" href="stylesheet1.css">
-        
-        <style>
-            .topnav {
-                overflow: hidden;
-                background-color: #282828;
-                display:block;
-            }
-
-            .topnav a {
-              float: left;
-              display: inline;
-              color: #f2f2f2;
-              text-decoration: none;
-              font-size: 17px;
-            }
-
-            .topnav a:hover {
-              background-color: #282828;
-              color: #ecbbaa;
-            }
-
-            .topnav .icon {
-              display: none;
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav a:not(:out-of-range){display: none;}
-              .topnav a.icon {
-                float: right;
-                display: block;
-              }
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav.responsive {position: relative;}
-              .topnav.responsive .icon {
-                position: relative;
-              }
-              .topnav.responsive a {
-                float: none;
-                display: block;
-                text-align: right;
-                padding: 52px 15px 0px;
-              }
-            }
-        </style>    
-    </head>
-    
-    <body style="background-color: #282828;">
-        
-    <!-- Navigation Bar -->
-    <nav class="navbar navbar-static-top">
-        <div class="container">
-            <!-- Logo -->
-            <div class="topnav">
-                <img src="images/Logo_bar.png" alt="logo" style="width: 350px; height: 110px; padding-top: 20px">
-            <!-- Navbar List -->
-                <div style="float: right;" id="myTopnav">
-                    <a href="javascript:void(0);" class="icon" style="color: #ecbbaa; padding-top: 52px; float: right; " onclick="myFunction()">
-                        <i class="fa fa-bars"></i>
-                    </a><br><br>
-                    <a href="/" style="color: #ecbbaa; padding: 10px 15px 0px;">Home</a>
-                    <a href="/contactus" style="color: #ecbbaa;padding: 10px 15px 0px;">Contact</a>
-                    <a href="/login" style="color: #ecbbaa;padding: 10px 15px 0px;">Login</a>
-                    <a href="/signup" style="color: #ecbbaa;padding: 10px 15px 0px;">Sign Up</a>
-                    <a href="/wishlist" style="color: #ecbbaa;padding: 10px 15px 0px;"><span class="glyphicon glyphicon-heart"></span></a><!-- comment -->
-                    <a href="/cart" style="color: #ecbbaa;padding: 10px 10px 0px;"><span class="glyphicon glyphicon-shopping-cart"></span></a>
-                    
-                </div>
-
-            </div>
-        </div>
-    </nav>
-          
-    
-    <div class="container">
-        <div class="row text-center">
-            <% prods.forEach(function(prod){%>
-              <div class="col-md-3 col-sm-6">
-                  <div class="thumbnail">
-                      <img src="<%=prod.imgPath%>" alt="image">
-                      <div class="caption">
-                        <h3 class="text"> <%=prod.name%> </h3>
-                        <p class="text"> Rs. <%=prod.price%> </p>
-                        <button class="btn btn-primary btn-block" style="color: #282828; background-color: #ecbbaa; border: none;"> Add to cart </button>
-                      </div>
-                  </div>
-              </div>
-            <% }); %>
-        </div>
-    </div>
-         
-                        
-    <div style="padding-top: 50px;">
-            <hr id="line">
-            <p class="container-fluid" style="color: #ecbbaa;font-size: 10px;font-family: 'Roboto', sans-serif; text-align: left;">
-                Copyrights under Elysian, All Rights Reserved.
-            </p>
-        </div>
-    <script>
-            function myFunction() {
-              var x = document.getElementById("myTopnav");
-              if (x.className === "topnav") {
-                x.className += " responsive";
-              } else {
-                x.className = "topnav";
-              }
-            }
-        </script>
-    </body>
+  <%- include('../layouts/head') %>
+  <body style="background-color: #282828;">
+    <%- include('../layouts/header') %>
+    <%- include('../layouts/items') %>
+    <%- include('../layouts/footer') %>    
+    <%- include('../layouts/responsive') %> 
+  </body>
 </html>
-
diff --git a/backend/views/categories/polymer_clay.ejs b/backend/views/categories/polymer_clay.ejs
index 7f7fe06..f5d9d4b 100644
--- a/backend/views/categories/polymer_clay.ejs
+++ b/backend/views/categories/polymer_clay.ejs
@@ -1,127 +1,10 @@
 <!DOCTYPE html>
 <html>
-    <head>
-       <title>Elysian</title>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-        <link href="//db.onlinewebfonts.com/c/9bffdc939e6dc320b41ed75a76a55e69?family=Golden+Plains+-+Demo" rel="stylesheet" type="text/css"/>
-        <link rel="preconnect" href="https://fonts.gstatic.com">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link rel="stylesheet" href="stylesheet1.css">
-        
-        <style>
-            .topnav {
-                overflow: hidden;
-                background-color: #282828;
-                display:block;
-            }
-
-            .topnav a {
-              float: left;
-              display: inline;
-              color: #f2f2f2;
-              text-decoration: none;
-              font-size: 17px;
-            }
-
-            .topnav a:hover {
-              background-color: #282828;
-              color: #ecbbaa;
-            }
-
-            .topnav .icon {
-              display: none;
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav a:not(:out-of-range){display: none;}
-              .topnav a.icon {
-                float: right;
-                display: block;
-              }
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav.responsive {position: relative;}
-              .topnav.responsive .icon {
-                position: relative;
-              }
-              .topnav.responsive a {
-                float: none;
-                display: block;
-                text-align: right;
-                padding: 52px 15px 0px;
-              }
-            }
-        </style>    
-    </head>
-    
-    <body style="background-color: #282828;">
-        
-    <!-- Navigation Bar -->
-    <nav class="navbar navbar-static-top">
-        <div class="container">
-            <!-- Logo -->
-            <div class="topnav">
-                <img src="images/Logo_bar.png" alt="logo" style="width: 350px; height: 110px; padding-top: 20px">
-            <!-- Navbar List -->
-                <div style="float: right;" id="myTopnav">
-                    <a href="javascript:void(0);" class="icon" style="color: #ecbbaa; padding-top: 52px; float: right; " onclick="myFunction()">
-                        <i class="fa fa-bars"></i>
-                    </a><br><br>
-                    <a href="/" style="color: #ecbbaa; padding: 10px 15px 0px;">Home</a>
-                    <a href="/contactus" style="color: #ecbbaa;padding: 10px 15px 0px;">Contact</a>
-                    <a href="/login" style="color: #ecbbaa;padding: 10px 15px 0px;">Login</a>
-                    <a href="/signup" style="color: #ecbbaa;padding: 10px 15px 0px;">Sign Up</a>
-                    <a href="/wishlist" style="color: #ecbbaa;padding: 10px 15px 0px;"><span class="glyphicon glyphicon-heart"></span></a><!-- comment -->
-                    <a href="/cart" style="color: #ecbbaa;padding: 10px 10px 0px;"><span class="glyphicon glyphicon-shopping-cart"></span></a>
-                    
-                </div>
-
-            </div>
-        </div>
-    </nav>
-          
-    
-    <div class="container">
-        <div class="row text-center">
-            <% prods.forEach(function(prod){%>
-              <div class="col-md-3 col-sm-6">
-                  <div class="thumbnail">
-                      <img src="<%=prod.imgPath%>" alt="image">
-                      <div class="caption">
-                        <h3 class="text"> <%=prod.name%> </h3>
-                        <p class="text"> Rs. <%=prod.price%> </p>
-                        <button class="btn btn-primary btn-block" style="color: #282828; background-color: #ecbbaa; border: none;"> Add to cart </button>
-                      </div>
-                  </div>
-              </div>
-            <% }); %>
-        </div>
-    </div>
-         
-                        
-    <div style="padding-top: 50px;">
-            <hr id="line">
-            <p class="container-fluid" style="color: #ecbbaa;font-size: 10px;font-family: 'Roboto', sans-serif; text-align: left;">
-                Copyrights under Elysian, All Rights Reserved.
-            </p>
-        </div>
-    <script>
-            function myFunction() {
-              var x = document.getElementById("myTopnav");
-              if (x.className === "topnav") {
-                x.className += " responsive";
-              } else {
-                x.className = "topnav";
-              }
-            }
-        </script>
-    </body>
-</html>
-
-
+  <%- include('../layouts/head') %>
+  <body style="background-color: #282828;">
+    <%- include('../layouts/header') %>
+    <%- include('../layouts/items') %>
+    <%- include('../layouts/footer') %>    
+    <%- include('../layouts/responsive') %> 
+  </body>
+</html>
\ No newline at end of file
diff --git a/backend/views/categories/tassels.ejs b/backend/views/categories/tassels.ejs
index 96bde62..f5d9d4b 100644
--- a/backend/views/categories/tassels.ejs
+++ b/backend/views/categories/tassels.ejs
@@ -1,125 +1,10 @@
 <!DOCTYPE html>
 <html>
-    <head>
-       <title>Elysian</title>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-        <link href="//db.onlinewebfonts.com/c/9bffdc939e6dc320b41ed75a76a55e69?family=Golden+Plains+-+Demo" rel="stylesheet" type="text/css"/>
-        <link rel="preconnect" href="https://fonts.gstatic.com">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link rel="stylesheet" href="stylesheet1.css">
-        
-        <style>
-            .topnav {
-                overflow: hidden;
-                background-color: #282828;
-                display:block;
-            }
-
-            .topnav a {
-              float: left;
-              display: inline;
-              color: #f2f2f2;
-              text-decoration: none;
-              font-size: 17px;
-            }
-
-            .topnav a:hover {
-              background-color: #282828;
-              color: #ecbbaa;
-            }
-
-            .topnav .icon {
-              display: none;
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav a:not(:out-of-range){display: none;}
-              .topnav a.icon {
-                float: right;
-                display: block;
-              }
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav.responsive {position: relative;}
-              .topnav.responsive .icon {
-                position: relative;
-              }
-              .topnav.responsive a {
-                float: none;
-                display: block;
-                text-align: right;
-                padding: 52px 15px 0px;
-              }
-            }
-        </style>    
-    </head>
-    
-    <body style="background-color: #282828;">
-        
-    <!-- Navigation Bar -->
-    <nav class="navbar navbar-static-top">
-        <div class="container">
-            <!-- Logo -->
-            <div class="topnav">
-                <img src="images/Logo_bar.png" alt="logo" style="width: 350px; height: 110px; padding-top: 20px">
-            <!-- Navbar List -->
-                <div style="float: right;" id="myTopnav">
-                    <a href="javascript:void(0);" class="icon" style="color: #ecbbaa; padding-top: 52px; float: right; " onclick="myFunction()">
-                        <i class="fa fa-bars"></i>
-                    </a><br><br>
-                    <a href="/" style="color: #ecbbaa; padding: 10px 15px 0px;">Home</a>
-                    <a href="/contactus" style="color: #ecbbaa;padding: 10px 15px 0px;">Contact</a>
-                    <a href="/login" style="color: #ecbbaa;padding: 10px 15px 0px;">Login</a>
-                    <a href="/signup" style="color: #ecbbaa;padding: 10px 15px 0px;">Sign Up</a>
-                    <a href="/wishlist" style="color: #ecbbaa;padding: 10px 15px 0px;"><span class="glyphicon glyphicon-heart"></span></a><!-- comment -->
-                    <a href="/cart" style="color: #ecbbaa;padding: 10px 10px 0px;"><span class="glyphicon glyphicon-shopping-cart"></span></a>
-                    
-                </div>
-
-            </div>
-        </div>
-    </nav>
-          
-    
-    <div class="container">
-        <div class="row text-center">
-            <% prods.forEach(function(prod){%>
-              <div class="col-md-3 col-sm-6">
-                  <div class="thumbnail">
-                      <img src="<%=prod.imgPath%>" alt="image">
-                      <div class="caption">
-                        <h3 class="text"> <%=prod.name%> </h3>
-                        <p class="text"> Rs. <%=prod.price%> </p>
-                        <button class="btn btn-primary btn-block" style="color: #282828; background-color: #ecbbaa; border: none;"> Add to cart </button>
-                      </div>
-                  </div>
-              </div>
-            <% }); %>
-        </div>
-    </div>
-                        
-    <div style="padding-top: 50px;">
-            <hr id="line">
-            <p class="container-fluid" style="color: #ecbbaa;font-size: 10px;font-family: 'Roboto', sans-serif; text-align: left;">
-                Copyrights under Elysian, All Rights Reserved.
-            </p>
-        </div>
-    <script>
-            function myFunction() {
-              var x = document.getElementById("myTopnav");
-              if (x.className === "topnav") {
-                x.className += " responsive";
-              } else {
-                x.className = "topnav";
-              }
-            }
-        </script>
-    </body>
-</html>
-
+  <%- include('../layouts/head') %>
+  <body style="background-color: #282828;">
+    <%- include('../layouts/header') %>
+    <%- include('../layouts/items') %>
+    <%- include('../layouts/footer') %>    
+    <%- include('../layouts/responsive') %> 
+  </body>
+</html>
\ No newline at end of file
diff --git a/backend/views/categories/threads.ejs b/backend/views/categories/threads.ejs
index 65901dc..f5d9d4b 100644
--- a/backend/views/categories/threads.ejs
+++ b/backend/views/categories/threads.ejs
@@ -1,124 +1,10 @@
 <!DOCTYPE html>
 <html>
-    <head>
-       <title>Elysian</title>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-        <link href="//db.onlinewebfonts.com/c/9bffdc939e6dc320b41ed75a76a55e69?family=Golden+Plains+-+Demo" rel="stylesheet" type="text/css"/>
-        <link rel="preconnect" href="https://fonts.gstatic.com">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link rel="stylesheet" href="stylesheet1.css">
-        
-        <style>
-            .topnav {
-                overflow: hidden;
-                background-color: #282828;
-                display:block;
-            }
-
-            .topnav a {
-              float: left;
-              display: inline;
-              color: #f2f2f2;
-              text-decoration: none;
-              font-size: 17px;
-            }
-
-            .topnav a:hover {
-              background-color: #282828;
-              color: #ecbbaa;
-            }
-
-            .topnav .icon {
-              display: none;
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav a:not(:out-of-range){display: none;}
-              .topnav a.icon {
-                float: right;
-                display: block;
-              }
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav.responsive {position: relative;}
-              .topnav.responsive .icon {
-                position: relative;
-              }
-              .topnav.responsive a {
-                float: none;
-                display: block;
-                text-align: right;
-                padding: 52px 15px 0px;
-              }
-            }
-        </style>    
-    </head>
-    
-    <body style="background-color: #282828;">
-        
-    <!-- Navigation Bar -->
-    <nav class="navbar navbar-static-top">
-        <div class="container">
-            <!-- Logo -->
-            <div class="topnav">
-                <img src="images/Logo_bar.png" alt="logo" style="width: 350px; height: 110px; padding-top: 20px">
-            <!-- Navbar List -->
-                <div style="float: right;" id="myTopnav">
-                    <a href="javascript:void(0);" class="icon" style="color: #ecbbaa; padding-top: 52px; float: right; " onclick="myFunction()">
-                        <i class="fa fa-bars"></i>
-                    </a><br><br>
-                    <a href="/" style="color: #ecbbaa; padding: 10px 15px 0px;">Home</a>
-                    <a href="/contactus" style="color: #ecbbaa;padding: 10px 15px 0px;">Contact</a>
-                    <a href="/login" style="color: #ecbbaa;padding: 10px 15px 0px;">Login</a>
-                    <a href="/signup" style="color: #ecbbaa;padding: 10px 15px 0px;">Sign Up</a>
-                    <a href="/wishlist" style="color: #ecbbaa;padding: 10px 15px 0px;"><span class="glyphicon glyphicon-heart"></span></a><!-- comment -->
-                    <a href="/cart" style="color: #ecbbaa;padding: 10px 10px 0px;"><span class="glyphicon glyphicon-shopping-cart"></span></a>
-                    
-                </div>
-
-            </div>
-        </div>
-    </nav>
-          
-    
-    <div class="container">
-        <div class="row text-center">
-            <% prods.forEach(function(prod){%>
-              <div class="col-md-3 col-sm-6">
-                  <div class="thumbnail">
-                      <img src="<%=prod.imgPath%>" alt="image">
-                      <div class="caption">
-                        <h3 class="text"> <%=prod.name%> </h3>
-                        <p class="text"> Rs. <%=prod.price%> </p>
-                        <button class="btn btn-primary btn-block" style="color: #282828; background-color: #ecbbaa; border: none;"> Add to cart </button>
-                      </div>
-                  </div>
-              </div>
-            <% }); %>
-        </div>
-    </div>
-                        
-    <div style="padding-top: 50px;">
-            <hr id="line">
-            <p class="container-fluid" style="color: #ecbbaa;font-size: 10px;font-family: 'Roboto', sans-serif; text-align: left;">
-                Copyrights under Elysian, All Rights Reserved.
-            </p>
-        </div>
-    <script>
-            function myFunction() {
-              var x = document.getElementById("myTopnav");
-              if (x.className === "topnav") {
-                x.className += " responsive";
-              } else {
-                x.className = "topnav";
-              }
-            }
-        </script>
-    </body>
-</html>
+  <%- include('../layouts/head') %>
+  <body style="background-color: #282828;">
+    <%- include('../layouts/header') %>
+    <%- include('../layouts/items') %>
+    <%- include('../layouts/footer') %>    
+    <%- include('../layouts/responsive') %> 
+  </body>
+</html>
\ No newline at end of file
diff --git a/backend/views/categories/wired_earrings.ejs b/backend/views/categories/wired_earrings.ejs
index 73bb409..f5d9d4b 100644
--- a/backend/views/categories/wired_earrings.ejs
+++ b/backend/views/categories/wired_earrings.ejs
@@ -1,125 +1,10 @@
 <!DOCTYPE html>
-
 <html>
-    <head>
-       <title>Elysian</title>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-        <link href="//db.onlinewebfonts.com/c/9bffdc939e6dc320b41ed75a76a55e69?family=Golden+Plains+-+Demo" rel="stylesheet" type="text/css"/>
-        <link rel="preconnect" href="https://fonts.gstatic.com">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link rel="stylesheet" href="stylesheet1.css">
-        
-        <style>
-            .topnav {
-                overflow: hidden;
-                background-color: #282828;
-                display:block;
-            }
-
-            .topnav a {
-              float: left;
-              display: inline;
-              color: #f2f2f2;
-              text-decoration: none;
-              font-size: 17px;
-            }
-
-            .topnav a:hover {
-              background-color: #282828;
-              color: #ecbbaa;
-            }
-
-            .topnav .icon {
-              display: none;
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav a:not(:out-of-range){display: none;}
-              .topnav a.icon {
-                float: right;
-                display: block;
-              }
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav.responsive {position: relative;}
-              .topnav.responsive .icon {
-                position: relative;
-              }
-              .topnav.responsive a {
-                float: none;
-                display: block;
-                text-align: right;
-                padding: 52px 15px 0px;
-              }
-            }
-        </style>    
-    </head>
-    
-    <body style="background-color: #282828;">
-        
-    <!-- Navigation Bar -->
-    <nav class="navbar navbar-static-top">
-        <div class="container">
-            <!-- Logo -->
-            <div class="topnav">
-                <img src="images/Logo_bar.png" alt="logo" style="width: 350px; height: 110px; padding-top: 20px">
-            <!-- Navbar List -->
-                <div style="float: right;" id="myTopnav">
-                    <a href="javascript:void(0);" class="icon" style="color: #ecbbaa; padding-top: 52px; float: right; " onclick="myFunction()">
-                        <i class="fa fa-bars"></i>
-                    </a><br><br>
-                    <a href="/" style="color: #ecbbaa; padding: 10px 15px 0px;">Home</a>
-                    <a href="/contactus" style="color: #ecbbaa;padding: 10px 15px 0px;">Contact</a>
-                    <a href="/login" style="color: #ecbbaa;padding: 10px 15px 0px;">Login</a>
-                    <a href="/signup" style="color: #ecbbaa;padding: 10px 15px 0px;">Sign Up</a>
-                    <a href="/wishlist" style="color: #ecbbaa;padding: 10px 15px 0px;"><span class="glyphicon glyphicon-heart"></span></a><!-- comment -->
-                    <a href="/cart" style="color: #ecbbaa;padding: 10px 10px 0px;"><span class="glyphicon glyphicon-shopping-cart"></span></a>
-                    
-                </div>
-
-            </div>
-        </div>
-    </nav>
-          
-    
-    <div class="container">
-        <div class="row text-center">
-            <% prods.forEach(function(prod){%>
-              <div class="col-md-3 col-sm-6">
-                  <div class="thumbnail">
-                      <img src="<%=prod.imgPath%>" alt="image">
-                      <div class="caption">
-                        <h3 class="text"> <%=prod.name%> </h3>
-                        <p class="text"> Rs. <%=prod.price%> </p>
-                        <button class="btn btn-primary btn-block" style="color: #282828; background-color: #ecbbaa; border: none;"> Add to cart </button>
-                      </div>
-                  </div>
-              </div>
-            <% }); %>
-        </div>
-    </div>       
-
-    <div style="padding-top: 50px;">
-            <hr id="line">
-            <p class="container-fluid" style="color: #ecbbaa;font-size: 10px;font-family: 'Roboto', sans-serif; text-align: left;">
-                Copyrights under Elysian, All Rights Reserved.
-            </p>
-        </div>
-            <script>
-            function myFunction() {
-              var x = document.getElementById("myTopnav");
-              if (x.className === "topnav") {
-                x.className += " responsive";
-              } else {
-                x.className = "topnav";
-              }
-            }
-        </script>
-    </body>
-</html>
+  <%- include('../layouts/head') %>
+  <body style="background-color: #282828;">
+    <%- include('../layouts/header') %>
+    <%- include('../layouts/items') %>
+    <%- include('../layouts/footer') %>    
+    <%- include('../layouts/responsive') %> 
+  </body>
+</html>
\ No newline at end of file
diff --git a/backend/views/confirmation_mail.ejs b/backend/views/confirmation_mail.ejs
new file mode 100644
index 0000000..1b0846e
--- /dev/null
+++ b/backend/views/confirmation_mail.ejs
@@ -0,0 +1,24 @@
+<html>
+    <h2 style="color: crimson;">
+        Thank you for shopping with us! You will receive your order tracking details shortly.
+    </h2>
+    <tr>
+        <td><p><b>ITEM</b></p></td>
+        <td><p><b>PRICE</b></p></td>
+        <td><p><b>QUANTITY</b></p></td>
+        <td><p><b>TOTAL</b></p></td>
+    </tr>
+    <% order.cart.forEach(function(prod){ %>
+        <tr>
+            <td><p style="color: brown;"><%= prod.name %></p></td>
+            <td><p>&#x20b9;<%= prod.price %></p></td>
+            <td><p><%= prod.qty %></p></td>
+            <td><p>&#x20b9;<%= prod.total %></p></td>
+        </tr>
+    <% }) %>
+    
+    <h3 style="color: crimson;">
+        Total Quantity: <%= order.totalQty %> <br>
+        Total Amount: &#x20b9;<%= order.totalAmount %>
+    </h3>
+</html>
\ No newline at end of file
diff --git a/backend/views/contactus.ejs b/backend/views/contactus.ejs
index 74de89b..6b5c695 100644
--- a/backend/views/contactus.ejs
+++ b/backend/views/contactus.ejs
@@ -1,92 +1,8 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>Elysian</title>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-        <link href="//db.onlinewebfonts.com/c/9bffdc939e6dc320b41ed75a76a55e69?family=Golden+Plains+-+Demo" rel="stylesheet" type="text/css"/>
-        <link rel="preconnect" href="https://fonts.gstatic.com">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link rel="stylesheet" href="stylesheet1.css">
-        
-        <style>
-            .topnav {
-                overflow: hidden;
-                background-color: #282828;
-                display:block;
-            }
-
-            .topnav a {
-              float: left;
-              display: inline;
-              color: #f2f2f2;
-              text-decoration: none;
-              font-size: 17px;
-            }
-
-            .topnav a:hover {
-              background-color: #282828;
-              color: #ecbbaa;
-            }
-
-            .topnav .icon {
-              display: none;
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav a:not(:out-of-range){display: none;}
-              .topnav a.icon {
-                float: right;
-                display: block;
-              }
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav.responsive {position: relative;}
-              .topnav.responsive .icon {
-                position: relative;
-              }
-              .topnav.responsive a {
-                float: none;
-                display: block;
-                text-align: right;
-                padding: 52px 15px 0px;
-              }
-            }
-        </style>    
-    </head>
-    
+    <%- include('layouts/head') %>
     <body style="background-color: #282828;">
-        
-    <!-- Navigation Bar -->
-    <nav class="navbar navbar-static-top">
-        <div class="container">
-            <!-- Logo -->
-            <div class="topnav">
-                <img src="images/Logo_bar.png" alt="logo" style="width: 350px; height: 110px; padding-top: 20px">
-            <!-- Navbar List -->
-                <div style="float: right;" id="myTopnav">
-                    <a href="javascript:void(0);" class="icon" style="color: #ecbbaa; padding-top: 52px; float: right; " onclick="myFunction()">
-                        <i class="fa fa-bars"></i>
-                    </a><br><br>
-                    <a href="/" style="color: #ecbbaa; padding: 10px 15px 0px;">Home</a>
-                    <a href="/contactus" style="color: #ecbbaa;padding: 10px 15px 0px;">Contact</a>
-                    <a href="/login" style="color: #ecbbaa;padding: 10px 15px 0px;">Login</a>
-                    <a href="/signup" style="color: #ecbbaa;padding: 10px 15px 0px;">Sign Up</a>
-                    <a href="/wishlist" style="color: #ecbbaa;padding: 10px 15px 0px;"><span class="glyphicon glyphicon-heart"></span></a><!-- comment -->
-                    <a href="/cart" style="color: #ecbbaa;padding: 10px 10px 0px;"><span class="glyphicon glyphicon-shopping-cart"></span></a>
-                    
-                </div>
-
-            </div>
-        </div>
-    </nav>
-          
-    
+    <%- include('layouts/header') %>
     
     <div class="text-center">
         <p class="cart_heading"> Contact Us </p><br>
@@ -114,21 +30,7 @@
         </div>
     </div>
     
-    <div style="padding-top: 50px;">
-            <hr id="line">
-            <p class="container-fluid" style="color: #ecbbaa;font-size: 10px;font-family: 'Roboto', sans-serif; text-align: left;">
-                Copyrights under Elysian, All Rights Reserved
-            </p>
-        </div>
-    <script>
-            function myFunction() {
-              var x = document.getElementById("myTopnav");
-              if (x.className === "topnav") {
-                x.className += " responsive";
-              } else {
-                x.className = "topnav";
-              }
-            }
-        </script>
+    <%- include('layouts/footer') %>
+    <%- include('layouts/responsive') %>
     </body>
 </html>
diff --git a/backend/views/index.ejs b/backend/views/index.ejs
index 10c2050..841fcf3 100644
--- a/backend/views/index.ejs
+++ b/backend/views/index.ejs
@@ -1,94 +1,9 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>Elysian</title>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-        <link href="//db.onlinewebfonts.com/c/9bffdc939e6dc320b41ed75a76a55e69?family=Golden+Plains+-+Demo" rel="stylesheet" type="text/css"/>
-        <link rel="preconnect" href="https://fonts.gstatic.com">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link rel="stylesheet" href="stylesheet1.css">
-        
-        <style>
-            .topnav {
-                overflow: hidden;
-                background-color: #282828;
-                display:block;
-            }
-
-            .topnav a {
-              float: left;
-              display: inline;
-              color: #f2f2f2;
-              text-decoration: none;
-              font-size: 17px;
-            }
-
-            .topnav a:hover {
-              background-color: #282828;
-              color: #ecbbaa;
-            }
-
-            .topnav .icon {
-              display: none;
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav a:not(:out-of-range){display: none;}
-              .topnav a.icon {
-                float: right;
-                display: block;
-              }
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav.responsive {position: relative;}
-              .topnav.responsive .icon {
-                position: relative;
-                right:0;
-                top:0;
-              }
-              .topnav.responsive a {
-                float: none;
-                display: block;
-                text-align: right;
-                padding: 52px 15px 0px;
-              }
-            }
-        </style>    
-    </head>
-    
+    <%- include('layouts/head') %>
     <body style="background-color: #282828;">
-        
-    <!-- Navigation Bar -->
-    <nav class="navbar navbar-static-top">
-        <div class="container">
-            <!-- Logo -->
-            <div class="topnav">
-                <img src="images/Logo_bar.png" alt="logo" style="width: 350px; height: 110px; padding-top: 20px">
-            <!-- Navbar List -->
-                <div style="float: right;" id="myTopnav">
-                    <a href="javascript:void(0);" class="icon" style="color: #ecbbaa; padding-top: 52px; float: right; " onclick="myFunction()">
-                        <i class="fa fa-bars"></i>
-                    </a><br><br>
-                    <a href="/" style="color: #ecbbaa; padding: 10px 15px 0px;">Home</a>
-                    <a href="/contactus" style="color: #ecbbaa;padding: 10px 15px 0px;">Contact</a>
-                    <a href="/login" style="color: #ecbbaa;padding: 10px 15px 0px;">Login</a>
-                    <a href="/signup" style="color: #ecbbaa;padding: 10px 15px 0px;">Sign Up</a>
-                    <a href="/wishlist" style="color: #ecbbaa;padding: 10px 15px 0px;"><span class="glyphicon glyphicon-heart"></span></a><!-- comment -->
-                    <a href="/cart" style="color: #ecbbaa;padding: 10px 10px 0px;"><span class="glyphicon glyphicon-shopping-cart"></span></a>
-                    
-                </div>
-
-            </div>
-        </div>
-    </nav>
+    <%- include('layouts/header') %>
           
-    
         <!-- Big display image -->
     <div class="container">
         <div class="banner-image img-responsive">
@@ -123,7 +38,7 @@
             <div class="row text-center">
                 <div class="col-md-4 col-sm-6">
                     <div class="thumbnail c" style="border: none;">
-                        <a href="/bracelets" style="text-decoration: none;">
+                        <a href="/products/bracelets" style="text-decoration: none;">
                         <img class="img-responsive" src="images/83.jpg" alt="bracelets" style="height: 266px;width: 266px;">
                         <div class="caption">
                             <p style="font-size: 20px; font-family: 'Roboto', sans-serif; color: #ecbbaa;">
@@ -135,7 +50,7 @@
                 </div>
                 <div class="col-md-4 col-sm-6">
                     <div class="thumbnail c" style="border: none;">
-                        <a href="/wiredearrings" style="text-decoration: none;">
+                        <a href="/products/wiredearrings" style="text-decoration: none;">
                         <img class="img-responsive" src="images/c1.png" alt="Earrings" style="height: 266px;width: 266px;">
                         <div class="caption">
                             <p style="font-size: 20px; font-family: 'Roboto', sans-serif; color: #ecbbaa;">
@@ -147,7 +62,7 @@
                 </div>
                 <div class="col-md-4 col-sm-6">
                     <div class="thumbnail c" style="border: none;">
-                        <a href="/necklaces" style="text-decoration: none;">
+                        <a href="/products/necklaces" style="text-decoration: none;">
                         <img class="img-responsive" src="images/c3.png" alt="Necklaces" style="height: 266px;width: 266px;">
                         <div class="caption">
                             <p style="font-size: 20px; font-family: 'Roboto', sans-serif; color: #ecbbaa;">
@@ -163,7 +78,7 @@
             <div class="row text-center">
                 <div class="col-md-4 col-sm-6">
                     <div class="thumbnail c" style="border: none;">
-                        <a href="/pearls" style="text-decoration: none;">
+                        <a href="/products/pearls" style="text-decoration: none;">
                         <img class="img-responsive" src="images/c4.png" alt="Pearls" style="height: 266px;width: 266px;">
                         <div class="caption">
                             <p style="font-size: 20px; font-family: 'Roboto', sans-serif; color: #ecbbaa;">
@@ -175,7 +90,7 @@
                 </div>
                 <div class="col-md-4 col-sm-6">
                     <div class="thumbnail c" style="border: none;">
-                        <a href="/polymerclay" style="text-decoration: none;">
+                        <a href="/products/polymerclay" style="text-decoration: none;">
                         <img class="img-responsive" src="images/52.jpg" alt="Polymer Clay" style="height: 266px;width: 266px;">
                         <div class="caption">
                             <p style="font-size: 20px; font-family: 'Roboto', sans-serif; color: #ecbbaa;">
@@ -187,7 +102,7 @@
                 </div> 
                 <div class="col-md-4 col-sm-6">
                     <div class="thumbnail c" style="border: none;">
-                        <a href="/beaded" style="text-decoration: none;">
+                        <a href="/products/beaded" style="text-decoration: none;">
                         <img class="img-responsive" src="images/c6.png" alt="Beaded" style="height: 266px;width: 266px;">
                         <div class="caption">
                             <p style="font-size: 20px; font-family: 'Roboto', sans-serif; color: #ecbbaa;">
@@ -203,7 +118,7 @@
             <div class="row text-center">
                 <div class="col-md-4 col-sm-6">
                     <div class="thumbnail c" style="border: none;">
-                        <a href="/earcuffs" style="text-decoration: none;">
+                        <a href="/products/earcuffs" style="text-decoration: none;">
                         <img class="img-responsive" src="images/84.jpg" alt="Ear cuffs" style="height: 266px;width: 266px;">
                         <div class="caption">
                             <p style="font-size: 20px; font-family: 'Roboto', sans-serif; color: #ecbbaa;">
@@ -215,7 +130,7 @@
                 </div>
                 <div class="col-md-4 col-sm-6">
                     <div class="thumbnail c" style="border: none;">
-                        <a href="/threads" style="text-decoration: none;">
+                        <a href="/products/threads" style="text-decoration: none;">
                         <img class="img-responsive" src="images/19.jpg" alt="Tassels" style="height: 266px;width: 266px;">
                         <div class="caption">
                             <p style="font-size: 20px; font-family: 'Roboto', sans-serif; color: #ecbbaa;">
@@ -227,7 +142,7 @@
                 </div>
                 <div class="col-md-4 col-sm-6">
                     <div class="thumbnail c" style="border: none;">
-                        <a href="/tassels" style="text-decoration: none;">
+                        <a href="/products/tassels" style="text-decoration: none;">
                         <img class="img-responsive" src="images/20.jpg" alt="Tassels" style="height: 266px;width: 266px;">
                         <div class="caption">
                             <p style="font-size: 20px; font-family: 'Roboto', sans-serif; color: #ecbbaa;">
@@ -389,24 +304,8 @@
         <br>
         
 
-        <footer>
-            <hr id="line">
-            <p class="container-fluid" style="color: #ecbbaa;font-size: 10px;font-family: 'Roboto', sans-serif; text-align: left;">
-                Copyrights under Elysian, All Rights Reserved.
-            </p>
-        </footer>
-        
-        
-        <script>
-            function myFunction() {
-              var x = document.getElementById("myTopnav");
-              if (x.className === "topnav") {
-                x.className += " responsive";
-              } else {
-                x.className = "topnav";
-              }
-            }
-        </script>
+        <%- include('layouts/footer') %>
+        <%- include('layouts/responsive') %>
     </body>
 </html>
 
diff --git a/backend/views/layouts/footer.ejs b/backend/views/layouts/footer.ejs
new file mode 100644
index 0000000..e4d77c3
--- /dev/null
+++ b/backend/views/layouts/footer.ejs
@@ -0,0 +1,6 @@
+<footer style="padding-top: 50px;">
+    <hr id="line">
+    <p class="container-fluid" style="color: #ecbbaa;font-size: 10px;font-family: 'Roboto', sans-serif; text-align: left;">
+        Copyrights under Elysian, All Rights Reserved.
+    </p>
+</footer>
\ No newline at end of file
diff --git a/backend/views/layouts/head.ejs b/backend/views/layouts/head.ejs
new file mode 100644
index 0000000..9dd1b26
--- /dev/null
+++ b/backend/views/layouts/head.ejs
@@ -0,0 +1,59 @@
+<head>
+    <title>Elysian</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    <link href="//db.onlinewebfonts.com/c/9bffdc939e6dc320b41ed75a76a55e69?family=Golden+Plains+-+Demo" rel="stylesheet" type="text/css"/>
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="/stylesheet1.css">
+    
+    <style>
+        .topnav {
+            overflow: hidden;
+            background-color: #282828;
+            display:block;
+        }
+
+        .topnav a {
+          float: left;
+          display: inline;
+          color: #f2f2f2;
+          text-decoration: none;
+          font-size: 17px;
+        }
+
+        .topnav a:hover {
+          background-color: #282828;
+          color: #ecbbaa;
+        }
+
+        .topnav .icon {
+          display: none;
+        }
+
+        @media screen and (max-width: 988px) {
+          .topnav a:not(:out-of-range){display: none;}
+          .topnav a.icon {
+            float: right;
+            display: block;
+          }
+        }
+
+        @media screen and (max-width: 988px) {
+          .topnav.responsive {position: relative;}
+          .topnav.responsive .icon {
+            position: relative;
+          }
+          .topnav.responsive a {
+            float: none;
+            display: block;
+            text-align: right;
+            padding: 52px 15px 0px;
+          }
+        }
+    </style>    
+</head>
\ No newline at end of file
diff --git a/backend/views/layouts/header.ejs b/backend/views/layouts/header.ejs
new file mode 100644
index 0000000..53e6dcf
--- /dev/null
+++ b/backend/views/layouts/header.ejs
@@ -0,0 +1,37 @@
+<!-- Navigation Bar -->
+<nav class="navbar navbar-static-top">
+    <div class="container">
+        <!-- Logo -->
+        <div class="topnav">
+            <a href="/">
+                <img src="/images/Logo_bar.png" alt="logo" style="width: 350px; height: 110px; padding-top: 20px">
+            </a>
+        <!-- Navbar List -->
+            <div style="float: right;" id="myTopnav">
+                <a href="javascript:void(0);" class="icon" style="color: #ecbbaa; padding-top: 52px; float: right; " onclick="myFunction()">
+                    <i class="fa fa-bars"></i>
+                </a><br><br>
+                <a href="/" style="color: #ecbbaa; padding: 10px 15px 0px;">Home</a>
+                <a href="/contactus" style="color: #ecbbaa;padding: 10px 15px 0px;">Contact</a>
+                <% if(login){ %>
+                    <a href="/myprofile" style="color: #ecbbaa;padding: 10px 15px 0px;">My Profile</a>
+                <% } else{ %>
+                <a href="/signup" style="color: #ecbbaa;padding: 10px 15px 0px;">Sign Up</a>
+                <% } %>
+                <% if(login){ %>
+                    <a href="/logout" style="color: #ecbbaa;padding: 10px 15px 0px;">Logout</a>
+                <% } else{ %>
+                    <a href="/login" style="color: #ecbbaa;padding: 10px 15px 0px;">Login</a>
+                <% } %>
+                <a href="/wishlist" style="color: #ecbbaa;padding: 10px 15px 0px;"><span class="glyphicon glyphicon-heart"></span></a>
+                <a href="/cart" style="color: #ecbbaa;padding: 10px 10px 0px;"><span class="glyphicon glyphicon-shopping-cart"></span>
+                    <% try{ %>
+                        <span class="badge"><%= Object.keys(session.cart.items).length %></span>
+                    <% }catch(err){ %>
+                        <span class="badge"><%= 0 %></span>
+                    <% } %>  
+                </a>
+            </div>
+        </div>
+    </div>
+</nav>
\ No newline at end of file
diff --git a/backend/views/layouts/items.ejs b/backend/views/layouts/items.ejs
new file mode 100644
index 0000000..5e56ca2
--- /dev/null
+++ b/backend/views/layouts/items.ejs
@@ -0,0 +1,30 @@
+<div class="container">
+    <div class="row text-center">
+      <% if(prods.length == 0){ %>
+        <p style="color: #ecbbaa;font-size: 20px;font-family: 'Roboto', sans-serif;">
+          Sorry, all products in this category are currently out of stock. They will be available soon!
+        </p>
+      <% } %>
+      <% prods.forEach(function(prod){%>
+        <div class="col-md-3 col-sm-6">
+            <div class="thumbnail">
+              <a href="/details/<%- prod._id %>">
+                <img src="/<%=prod.imgPath%>" alt="image">
+              </a>
+                
+                <div class="caption">
+                  <a href="/details/<%- prod._id %>" style="text-decoration: none;">
+                    <h3 class="text"> <%=prod.name%> </h3>
+                  </a>
+                  <p class="text"> &#x20b9;<%=prod.price%> </p>
+                  <% if(prod.stock <= 0){ %>
+                    <h4 style="color: #ffffff"; >Out of stock</h4>
+                  <% }else{ %>
+                    <a href="/add-to-cart/<%- prod._id %>" class="btn btn-primary btn-block" style="color: #282828; background-color: #ecbbaa; border: none;"> Add to cart </a>
+                  <% } %>
+                </div>
+            </div>
+        </div>
+      <% }); %>
+    </div>
+</div>
\ No newline at end of file
diff --git a/backend/views/layouts/responsive.ejs b/backend/views/layouts/responsive.ejs
new file mode 100644
index 0000000..64a7cd9
--- /dev/null
+++ b/backend/views/layouts/responsive.ejs
@@ -0,0 +1,10 @@
+<script>
+    function myFunction() {
+      var x = document.getElementById("myTopnav");
+      if (x.className === "topnav") {
+        x.className += " responsive";
+      } else {
+        x.className = "topnav";
+      }
+    }
+</script>
\ No newline at end of file
diff --git a/backend/views/login.ejs b/backend/views/login.ejs
index 97b2e4f..ab3ac1e 100644
--- a/backend/views/login.ejs
+++ b/backend/views/login.ejs
@@ -1,92 +1,8 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>Elysian</title>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-        <link href="//db.onlinewebfonts.com/c/9bffdc939e6dc320b41ed75a76a55e69?family=Golden+Plains+-+Demo" rel="stylesheet" type="text/css"/>
-        <link rel="preconnect" href="https://fonts.gstatic.com">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link rel="stylesheet" href="stylesheet1.css">
-        
-        <style>
-            .topnav {
-                overflow: hidden;
-                background-color: #282828;
-                display:block;
-            }
-
-            .topnav a {
-              float: left;
-              display: inline;
-              color: #f2f2f2;
-              text-decoration: none;
-              font-size: 17px;
-            }
-
-            .topnav a:hover {
-              background-color: #282828;
-              color: #ecbbaa;
-            }
-
-            .topnav .icon {
-              display: none;
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav a:not(:out-of-range){display: none;}
-              .topnav a.icon {
-                float: right;
-                display: block;
-              }
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav.responsive {position: relative;}
-              .topnav.responsive .icon {
-                position: relative;
-              }
-              .topnav.responsive a {
-                float: none;
-                display: block;
-                text-align: right;
-                padding: 52px 15px 0px;
-              }
-            }
-        </style>    
-    </head>
-    
+    <%- include('layouts/head') %>
     <body style="background-color: #282828;">
-        
-    <!-- Navigation Bar -->
-    <nav class="navbar navbar-static-top">
-        <div class="container">
-            <!-- Logo -->
-            <div class="topnav">
-                <img src="images/Logo_bar.png" alt="logo" style="width: 350px; height: 110px; padding-top: 20px">
-            <!-- Navbar List -->
-                <div style="float: right;" id="myTopnav">
-                    <a href="javascript:void(0);" class="icon" style="color: #ecbbaa; padding-top: 52px; float: right; " onclick="myFunction()">
-                        <i class="fa fa-bars"></i>
-                    </a><br><br>
-                    <a href="/" style="color: #ecbbaa; padding: 10px 15px 0px;">Home</a>
-                    <a href="/contactus" style="color: #ecbbaa;padding: 10px 15px 0px;">Contact</a>
-                    <a href="/login" style="color: #ecbbaa;padding: 10px 15px 0px;">Login</a>
-                    <a href="/signup" style="color: #ecbbaa;padding: 10px 15px 0px;">Sign Up</a>
-                    <a href="/wishlist" style="color: #ecbbaa;padding: 10px 15px 0px;"><span class="glyphicon glyphicon-heart"></span></a><!-- comment -->
-                    <a href="/cart" style="color: #ecbbaa;padding: 10px 10px 0px;"><span class="glyphicon glyphicon-shopping-cart"></span></a>
-                    
-                </div>
-
-            </div>
-        </div>
-    </nav>
-          
-    
+    <%- include('layouts/header') %>
         
         <!-- Sign up form -->
         <div class="container">
@@ -96,12 +12,25 @@
                             <h1 class="text-left signup_heading"> Login </h1>
                             <br>
                         </div>
-                    <form class="form-style-8">
+
+                    <%- include ('partials/messages.ejs') %>
+                    <form action="/auth" method="POST" class="form-style-8">
                         <div class="form-group">
-                            <input class="form-control label_type" type="text" placeholder="Name" name="name">
+                            <input 
+                                class="form-control label_type" 
+                                type="email" 
+                                id="email"
+                                placeholder="E-mail" 
+                                name="email"
+                            />
                         </div>
                         <div class="form-group">
-                            <input class="form-control" type="password" placeholder="Password" name="password">
+                            <input 
+                                class="form-control" 
+                                type="password" 
+                                id="password"
+                                placeholder="Password" 
+                                name="password">
                         </div>
                         <div class='form-group'>
                             <button class="btn btn-primary text-left" style="float: left; color: #282828; background-color: #ecbbaa; border: none;">Login</button><br><br>
@@ -116,21 +45,8 @@
         </div><br>
         <br><br><br><br>
         
-        <footer>
-            <hr id="line">
-            <p class="container-fluid" style="color: #ecbbaa;font-size: 10px;font-family: 'Roboto', sans-serif; text-align: left;">
-                Copyrights under Elysian, All Rights Reserved
-            </p>
-        </footer>
-       <script>
-            function myFunction() {
-              var x = document.getElementById("myTopnav");
-              if (x.className === "topnav") {
-                x.className += " responsive";
-              } else {
-                x.className = "topnav";
-              }
-            }
-        </script>     
+        <%- include('layouts/footer') %>
+        <%- include('layouts/responsive') %>
+        
     </body>
 </html>
diff --git a/backend/views/my_profile.ejs b/backend/views/my_profile.ejs
new file mode 100644
index 0000000..6d919f5
--- /dev/null
+++ b/backend/views/my_profile.ejs
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+    <%- include('layouts/head') %>
+    <body style="background-color: #282828;">
+    <%- include('layouts/header') %>
+          
+    <p class="content"><%= user.firstName %>'s Profile %></p>
+    
+    <%- include('layouts/footer') %>
+    <%- include('layouts/responsive') %> 
+    </body>
+</html>
diff --git a/backend/views/partials/messages.ejs b/backend/views/partials/messages.ejs
new file mode 100644
index 0000000..dccbc24
--- /dev/null
+++ b/backend/views/partials/messages.ejs
@@ -0,0 +1,29 @@
+<% if(typeof errors != 'undefined') { %>
+    <% errors.forEach(function(error) { %>
+        <div class="alert alert-warning alert-dismissible" role="alert">
+            <span type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></span>
+            <%= error.msg %>
+          </div>
+    <% }); %>
+<% } %>
+
+<% if(success_msg != '') { %>
+    <div class="alert alert-success alert-dismissible" role="alert">
+        <span type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></span>
+        <%= success_msg %>
+      </div>
+<% } %>
+
+<% if(error_msg != '') { %>
+    <div class="alert alert-warning alert-dismissible" role="alert">
+        <span type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></span>
+        <%= error_msg %>
+      </div>
+<% } %>
+
+<% if(error != '') { %>
+    <div class="alert alert-warning alert-dismissible" role="alert">
+        <span type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></span>
+        <%= error %>
+      </div>
+<% } %>
\ No newline at end of file
diff --git a/backend/views/product_details.ejs b/backend/views/product_details.ejs
new file mode 100644
index 0000000..e927918
--- /dev/null
+++ b/backend/views/product_details.ejs
@@ -0,0 +1,92 @@
+<html>
+  <%- include('layouts/head') %>
+  <body style="background-color: #282828;">
+    <%- include('layouts/header') %>
+    <div class="container">
+      <div class="row">
+          <div class="col-md-6">
+              <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
+
+                  <!-- Wrapper for slides -->
+                  <div class="carousel-inner">
+                    <div class="item active">
+                      <img src="/<%= product.imgPath %>" alt="<%-product.name %> image">
+                    </div>
+                  </div>
+                  <!-- Controls -->
+                  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
+                    <span class="glyphicon glyphicon-chevron-right"></span>
+                  </a>
+                  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
+                    <span class="glyphicon glyphicon-chevron-left"></span>
+                  </a>
+                  
+              </div> <!-- Carousel -->
+          </div>
+          <div class="col-md-6" >
+              <h1 class="content" style="text-align: left; padding-left: 10px;"> <%= product.name %> </h1>
+              <h4 class="content" style="text-align: left; padding-left: 10px;"> <%= product.description %> </h3><br>
+              <% if(typeof product.size != 'undefined'){ %>
+                <h5 class="content" style="text-align: left; padding-left: 10px;">Specification: <%= product.size %> </h5><br>
+              <% } %>
+              <div>
+              <% if(product.color.length != 0){ %>
+                <div class="row">
+                  <div class="col-md-4 col-4">
+                      <p class="content" style="text-align: left; padding-left: 10px;"> Available colours: </p><br>
+                  </div>
+                  <div class="col-md-8 col-8">
+                      <div class="dropdown">
+                          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" style="background-color: #282828; color: #ecbbaa; border-color: #ecbbaa">Dropdown Example
+                          <span class="caret"></span></button>
+                          <ul class="dropdown-menu">
+                              <li><a href="#" style="text-align: center;"></a></li><br>
+                          </ul>
+                      </div>
+                  </div>
+                </div><br>
+              <% } %>
+              <% if(typeof product.size != 'undefined'){ %>
+                <div class="row">
+                    <div class="col-md-4 col-4">
+                    <p class="content" style="text-align: left; padding-left: 10px;"> Choose size: </p><br>
+                    </div>
+                    <div class="col-md-8 col-8">
+                        <div class="dropdown">
+                            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" style="background-color: #282828; color: #ecbbaa; border-color: #ecbbaa">Dropdown Example
+                            <span class="caret"></span></button>
+                            <ul class="dropdown-menu">
+                                <li><a href="#" style="text-align: center;"></a></li><br>
+                            </ul><br>
+                        </div>
+                    </div>
+                </div> 
+              <% } %>
+              </div>
+          </div><br>
+          <div class="text-center">
+            <% try{ %>
+              <% if(wishlist.includes(product.name)){ %>
+                <a href="/remove-from-wishlist/<%- product.name %>" class="btn btn-primary" style="text-align: left;"> Remove From Wishlist </a>
+              <% } else{ %>
+                <a href="/add-to-wishlist/<%- product.name %>" class="btn btn-primary" style="text-align: left;"> Add To Wishlist </a>
+              <% } %>
+              <% if(product.stock){ %>
+                <a href="/add-to-cart/<%- product._id %>" class="btn btn-primary" role="button" style="text-align: left;"> Add To Cart </a>
+              <% } else{ %>
+                <button class="btn btn-primary" role="button" style="text-align: left;" disabled> Out of Stock </button>
+              <% } %>
+            <% } catch(err){ %>
+                <a href="/login" class="btn btn-primary" style="text-align: left;"> Add To Wishlist </a>
+                <a href="/add-to-cart/<%- product._id %>" class="btn btn-primary" role="button" style="text-align: left;"> Add To Cart </a>
+            <% } %>
+            <a href="" class="btn btn-primary" role="button" style="text-align: left;"> View On AR</a>
+          </div>
+      </div>
+  </div>
+  
+
+    <%- include('layouts/footer') %>
+    <%- include('layouts/responsive') %>
+  </body>
+</html>
diff --git a/backend/views/products.ejs b/backend/views/products.ejs
index 8ebbfc7..d693b05 100644
--- a/backend/views/products.ejs
+++ b/backend/views/products.ejs
@@ -1,122 +1,9 @@
 <html>
-    <head>
-        <title>Elysian</title>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
-        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-        <link href="//db.onlinewebfonts.com/c/9bffdc939e6dc320b41ed75a76a55e69?family=Golden+Plains+-+Demo" rel="stylesheet" type="text/css"/>
-        <link rel="preconnect" href="https://fonts.gstatic.com">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link rel="stylesheet" href="stylesheet1.css">
-        
-        <style>
-            .topnav {
-                overflow: hidden;
-                background-color: #282828;
-                display:block;
-            }
-
-            .topnav a {
-              float: left;
-              display: inline;
-              color: #f2f2f2;
-              text-decoration: none;
-              font-size: 17px;
-            }
-
-            .topnav a:hover {
-              background-color: #282828;
-              color: #ecbbaa;
-            }
-
-            .topnav .icon {
-              display: none;
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav a:not(:out-of-range){display: none;}
-              .topnav a.icon {
-                float: right;
-                display: block;
-              }
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav.responsive {position: relative;}
-              .topnav.responsive .icon {
-                position: relative;
-              }
-              .topnav.responsive a {
-                float: none;
-                display: block;
-                text-align: right;
-                padding: 52px 15px 0px;
-              }
-            }
-        </style>    
-    </head>
-    
-    <body style="background-color: #282828;">
-        
-    <!-- Navigation Bar -->
-    <nav class="navbar navbar-static-top">
-        <div class="container">
-            <!-- Logo -->
-            <div class="topnav">
-                <img src="../images/Logo_bar.png" alt="logo" style="width: 350px; height: 110px; padding-top: 20px">
-            <!-- Navbar List -->
-                <div style="float: right;" id="myTopnav">
-                    <a href="javascript:void(0);" class="icon" style="color: #ecbbaa; padding-top: 52px; float: right; " onclick="myFunction()">
-                        <i class="fa fa-bars"></i>
-                    </a><br><br>
-                    <a href="/" style="color: #ecbbaa; padding: 10px 15px 0px;">Home</a>
-                    <a href="/contactus" style="color: #ecbbaa;padding: 10px 15px 0px;">Contact</a>
-                    <a href="/login" style="color: #ecbbaa;padding: 10px 15px 0px;">Login</a>
-                    <a href="/signup" style="color: #ecbbaa;padding: 10px 15px 0px;">Sign Up</a>
-                    <a href="/wishlist" style="color: #ecbbaa;padding: 10px 15px 0px;"><span class="glyphicon glyphicon-heart"></span></a><!-- comment -->
-                    <a href="/cart" style="color: #ecbbaa;padding: 10px 10px 0px;"><span class="glyphicon glyphicon-shopping-cart"></span></a>
-                    
-                </div>
-
-            </div>
-        </div>
-    </nav>
-
-    <div class="container">
-      <div class="row text-center">
-          <% prods.forEach(function(prod){%>
-            <div class="col-md-3 col-sm-6">
-                <div class="thumbnail">
-                    <img src="<%=prod.imgPath %>" alt="image">
-                    <div class="caption">
-                      <h3 class="text"> <%=prod.name%> </h3>
-                      <p class="text"> Rs. <%=prod.price%> </p>
-                      <button class="btn btn-primary btn-block" style="color: #282828; background-color: #ecbbaa; border: none;"> Add to cart </button>
-                    </div>
-                </div>
-            </div>
-          <% }); %>
-      </div>
-  </div>
-
-    <div style="padding-top: 50px;">
-            <hr id="line">
-            <p class="container-fluid" style="color: #ecbbaa;font-size: 10px;font-family: 'Roboto', sans-serif; text-align: left;">
-                Copyrights under Elysian, All Rights Reserved.
-            </p>
-        </div>
-    <script>
-            function myFunction() {
-              var x = document.getElementById("myTopnav");
-              if (x.className === "topnav") {
-                x.className += " responsive";
-              } else {
-                x.className = "topnav";
-              }
-            }
-        </script>
-    </body>
+  <%- include('layouts/head') %>
+  <body style="background-color: #282828;">
+    <%- include('layouts/header') %>
+    <%- include('layouts/items') %>
+    <%- include('layouts/footer') %>
+    <%- include('layouts/responsive') %>
+  </body>
 </html>
diff --git a/backend/views/signup.ejs b/backend/views/signup.ejs
index fd02306..84ce871 100644
--- a/backend/views/signup.ejs
+++ b/backend/views/signup.ejs
@@ -1,93 +1,9 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>Elysian</title>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-        <link href="//db.onlinewebfonts.com/c/9bffdc939e6dc320b41ed75a76a55e69?family=Golden+Plains+-+Demo" rel="stylesheet" type="text/css"/>
-        <link rel="preconnect" href="https://fonts.gstatic.com">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link rel="stylesheet" href="stylesheet1.css">
-        
-        <style>
-            .topnav {
-                overflow: hidden;
-                background-color: #282828;
-                display:block;
-            }
-
-            .topnav a {
-              float: left;
-              display: inline;
-              color: #f2f2f2;
-              text-decoration: none;
-              font-size: 17px;
-            }
-
-            .topnav a:hover {
-              background-color: #282828;
-              color: #ecbbaa;
-            }
-
-            .topnav .icon {
-              display: none;
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav a:not(:out-of-range){display: none;}
-              .topnav a.icon {
-                float: right;
-                display: block;
-              }
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav.responsive {position: relative;}
-              .topnav.responsive .icon {
-                position: relative;
-              }
-              .topnav.responsive a {
-                float: none;
-                display: block;
-                text-align: right;
-                padding: 52px 15px 0px;
-              }
-            }
-        </style>    
-    </head>
-    
+    <%- include('layouts/head') %>
     <body style="background-color: #282828;">
-        
-    <!-- Navigation Bar -->
-    <nav class="navbar navbar-static-top">
-        <div class="container">
-            <!-- Logo -->
-            <div class="topnav">
-                <img src="images/Logo_bar.png" alt="logo" style="width: 350px; height: 110px; padding-top: 20px">
-            <!-- Navbar List -->
-                <div style="float: right;" id="myTopnav">
-                    <a href="javascript:void(0);" class="icon" style="color: #ecbbaa; padding-top: 52px; float: right; " onclick="myFunction()">
-                        <i class="fa fa-bars"></i>
-                    </a><br><br>
-                    <a href="/" style="color: #ecbbaa; padding: 10px 15px 0px;">Home</a>
-                    <a href="/contactus" style="color: #ecbbaa;padding: 10px 15px 0px;">Contact</a>
-                    <a href="/login" style="color: #ecbbaa;padding: 10px 15px 0px;">Login</a>
-                    <a href="/signup" style="color: #ecbbaa;padding: 10px 15px 0px;">Sign Up</a>
-                    <a href="/wishlist" style="color: #ecbbaa;padding: 10px 15px 0px;"><span class="glyphicon glyphicon-heart"></span></a><!-- comment -->
-                    <a href="/cart" style="color: #ecbbaa;padding: 10px 10px 0px;"><span class="glyphicon glyphicon-shopping-cart"></span></a>
-                    
-                </div>
-
-            </div>
-        </div>
-    </nav>
-          
+    <%- include('layouts/header') %>
     
-        
         <!-- Sign up form -->
         <div class="container">
             <div class="row text-center" style="padding-top: 0px;">
@@ -96,25 +12,69 @@
                             <h1 class="text-left signup_heading"> Sign Up </h1>
                             <br>
                         </div>
-                    <form class="form-style-8">
+                    <%- include ('partials/messages.ejs') %>
+                    <form action="/register" method="POST" class="form-style-8">
                         <div class="form-group">
-                            <input class="form-control label_type" type="text" placeholder="First name" name="firstname">
+                            <input 
+                                class="form-control label_type" 
+                                type="text" 
+                                id="firstname"
+                                placeholder="First Name" 
+                                name="firstname"
+                                value="<%=typeof firstname!='undefined' ? firstname : '' %>"
+                            />
                         </div>
                         <div class="form-group">
-                            <input class="form-control label_type " type="text" placeholder="Last name" name="lastname">
+                            <input 
+                                class="form-control label_type " 
+                                type="text" 
+                                id="lastname"
+                                placeholder="Last Name" 
+                                name="lastname"
+                                value="<%=typeof lastname!='undefined' ? lastname : '' %>"
+                            />
                         </div> 
                         <div class="form-group">
-                            <input class="form-control" type="email" placeholder="Email" name="email">
+                            <input 
+                                class="form-control" 
+                                type="email" 
+                                id="email"
+                                placeholder="E-mail" 
+                                name="email"
+                                value="<%=typeof email!='undefined' ? email : '' %>"
+                            />
                         </div>    
                         <div class="form-group">
-                            <input class="form-control" type="number" placeholder="Contact" name="contact">
+                            <input 
+                                class="form-control" 
+                                type="tel" 
+                                id="contact"
+                                placeholder="Contact" 
+                                name="contact"
+                                value="<%=typeof contact!='undefined' ? contact : '' %>"
+                            />
                         </div>
                         <div class="form-group">
-                            <input class="form-control" type="password" placeholder="Password" name="password">
+                            <input 
+                                class="form-control" 
+                                type="password"
+                                id="password"
+                                placeholder="Password" 
+                                name="password"
+                                value="<%=typeof password!='undefined' ? password : '' %>"
+                            />
                         </div>
                         <div class="form-group">
-                            <input class="form-control" type="password" placeholder="Re-enter password" name="password">
+                            <input 
+                                class="form-control" 
+                                type="password" 
+                                id="password2"
+                                placeholder="Confirm Password" 
+                                name="password2"
+                                value="<%=typeof password2!='undefined' ? password2 : '' %>"
+                            />
                         </div>
+                        
                         <br>
                         <div class='form-group'>
                             <button class="btn btn-primary text-left" style="float: left; color: #282828; background-color: #ecbbaa; border: none;">Submit</button><br><br>
@@ -128,21 +88,8 @@
                 </div>
         </div><br>
         
-        <footer>
-            <hr id="line">
-            <p class="container-fluid" style="color: #ecbbaa;font-size: 10px;font-family: 'Roboto', sans-serif; text-align: left;">
-                Copyrights under Elysian, All Rights Reserved
-            </p>
-        </footer>
-        <script>
-            function myFunction() {
-              var x = document.getElementById("myTopnav");
-              if (x.className === "topnav") {
-                x.className += " responsive";
-              } else {
-                x.className = "topnav";
-              }
-            }
-        </script>
+        <%- include('layouts/footer') %>
+        <%- include('layouts/responsive') %>
+
     </body>
 </html>
diff --git a/backend/views/thank_you.ejs b/backend/views/thank_you.ejs
new file mode 100644
index 0000000..a8d8a31
--- /dev/null
+++ b/backend/views/thank_you.ejs
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+    <%- include('layouts/head') %>
+    <body style="background-color: #282828;">
+    <%- include('layouts/header') %>
+          
+    <h2 class="content">Thank you for shopping with us!</h2>
+    <br>
+    <h4 class="content">Your order has been placed successfully. An order confirmation has been sent to your mail.</h4>
+    <br><br><br><br>
+    <center>
+        <a href="/" class="btn btn-danger btn-lg active" style="color: #282828; background-color: #ecbbaa; border: none;">Continue Shopping</a>
+    </center>
+
+    <%- include('layouts/footer') %>
+    <%- include('layouts/responsive') %> 
+    </body>
+</html>
diff --git a/backend/views/wishlist.ejs b/backend/views/wishlist.ejs
index 8fbb682..4016ffc 100644
--- a/backend/views/wishlist.ejs
+++ b/backend/views/wishlist.ejs
@@ -1,115 +1,37 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>Elysian</title>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-        <link href="//db.onlinewebfonts.com/c/9bffdc939e6dc320b41ed75a76a55e69?family=Golden+Plains+-+Demo" rel="stylesheet" type="text/css"/>
-        <link rel="preconnect" href="https://fonts.gstatic.com">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-        <link rel="stylesheet" href="stylesheet1.css">
-        
-        <style>
-            .topnav {
-                overflow: hidden;
-                background-color: #282828;
-                display:block;
-            }
-
-            .topnav a {
-              float: left;
-              display: inline;
-              color: #f2f2f2;
-              text-decoration: none;
-              font-size: 17px;
-            }
-
-            .topnav a:hover {
-              background-color: #282828;
-              color: #ecbbaa;
-            }
-
-            .topnav .icon {
-              display: none;
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav a:not(:out-of-range){display: none;}
-              .topnav a.icon {
-                float: right;
-                display: block;
-              }
-            }
-
-            @media screen and (max-width: 988px) {
-              .topnav.responsive {position: relative;}
-              .topnav.responsive .icon {
-                position: relative;
-              }
-              .topnav.responsive a {
-                float: none;
-                display: block;
-                text-align: right;
-                padding: 52px 15px 0px;
-              }
-            }
-        </style>    
-    </head>
+  <%- include('layouts/head') %>
+  <body style="background-color: #282828;">
+    <%- include('layouts/header') %>
     
-    <body style="background-color: #282828;">
-        
-    <!-- Navigation Bar -->
-    <nav class="navbar navbar-static-top">
-        <div class="container">
-            <!-- Logo -->
-            <div class="topnav">
-                <img src="images/Logo_bar.png" alt="logo" style="width: 350px; height: 110px; padding-top: 20px">
-            <!-- Navbar List -->
-                <div style="float: right;" id="myTopnav">
-                    <a href="javascript:void(0);" class="icon" style="color: #ecbbaa; padding-top: 52px; float: right; " onclick="myFunction()">
-                        <i class="fa fa-bars"></i>
-                    </a><br><br>
-                    <a href="/" style="color: #ecbbaa; padding: 10px 15px 0px;">Home</a>
-                    <a href="/contactus" style="color: #ecbbaa;padding: 10px 15px 0px;">Contact</a>
-                    <a href="/login" style="color: #ecbbaa;padding: 10px 15px 0px;">Login</a>
-                    <a href="/signup" style="color: #ecbbaa;padding: 10px 15px 0px;">Sign Up</a>
-                    <a href="/wishlist" style="color: #ecbbaa;padding: 10px 15px 0px;"><span class="glyphicon glyphicon-heart"></span></a><!-- comment -->
-                    <a href="/cart" style="color: #ecbbaa;padding: 10px 10px 0px;"><span class="glyphicon glyphicon-shopping-cart"></span></a>
+    <div class="text-center  info_content">
+        <p class="cart_heading content"> Wishlist </p><br>
+        <% if(prods.length == 0){ %>
+          <p class="content">Here you can save your favourite pieces. <br>They will be here waiting till you are ready to make your purchase.<br> 
+            <br>Just click on the heart icon on a product to add it to your wishlist.
+          </p>
+          <br><br>
+        <% }else{ %>
+          <% prods.forEach(function(prod){%>
+            <div class="col-md-3 col-sm-6">
+                <div class="thumbnail">
+                    <a href="/details/<%- prod._id %>">
+                      <img src="/<%=prod.imgPath%>" alt="image">
+                    </a>
                     
+                    <div class="caption">
+                      <a href="/details/<%- prod._id %>" style="text-decoration: none;">
+                        <h3 class="text"> <%=prod.name%> </h3>
+                      </a>
+                      <p class="text"> &#x20b9;<%=prod.price%> </p>
+                    </div>
                 </div>
-
             </div>
-        </div>
-    </nav>
-          
-    
-    <div class="text-center  info_content">
-        <p class="cart_heading content"> Wishlist </p><br>
-        <p class="content">Here you can save your favourite pieces. <br>They will be here waiting when you are ready to make your purchase.<br> 
-            Just click the heart icon below the product image on the product page.
-        </p>
-        <br><br>
-        <a href="/login" style="text-decoration: none; font-size: 18px;" class="content"> Please login to add items to wishlist. </a>
+          <% }); %>
+        <% } %>
     </div>
-    <div style="padding-top: 125px;">
-            <hr id="line">
-            <p class="container-fluid" style="color: #ecbbaa;font-size: 10px;font-family: 'Roboto', sans-serif; text-align: left;">
-                Copyrights under Elysian, All Rights Reserved
-            </p>
-        </div>
-    <script>
-            function myFunction() {
-              var x = document.getElementById("myTopnav");
-              if (x.className === "topnav") {
-                x.className += " responsive";
-              } else {
-                x.className = "topnav";
-              }
-            }
-        </script>
-    </body>
+    
+    <%- include('layouts/footer') %>
+    <%- include('layouts/responsive') %> 
+  </body>
 </html>
diff --git a/frontend/product_info.html b/frontend/product_info.html
new file mode 100644
index 0000000..72beebe
--- /dev/null
+++ b/frontend/product_info.html
@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Elysian</title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+        <link href="//db.onlinewebfonts.com/c/9bffdc939e6dc320b41ed75a76a55e69?family=Golden+Plains+-+Demo" rel="stylesheet" type="text/css"/>
+        <link rel="preconnect" href="https://fonts.gstatic.com">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+        <link rel="stylesheet" href="stylesheet1.css">
+        
+        <style>
+            .topnav {
+                overflow: hidden;
+                background-color: #282828;
+                display:block;
+            }
+
+            .topnav a {
+              float: left;
+              display: inline;
+              color: #f2f2f2;
+              text-decoration: none;
+              font-size: 17px;
+            }
+
+            .topnav a:hover {
+              background-color: #282828;
+              color: #ecbbaa;
+            }
+
+            .topnav .icon {
+              display: none;
+            }
+
+            @media screen and (max-width: 988px) {
+              .topnav a:not(:out-of-range){display: none;}
+              .topnav a.icon {
+                float: right;
+                display: block;
+              }
+            }
+
+            @media screen and (max-width: 988px) {
+              .topnav.responsive {position: relative;}
+              .topnav.responsive .icon {
+                position: relative;
+                right:0;
+                top:0;
+              }
+              .topnav.responsive a {
+                float: none;
+                display: block;
+                text-align: right;
+                padding: 52px 15px 0px;
+              }
+            }
+        </style>    
+    </head>
+    
+    <body style="background-color: #282828;">
+        
+    <!-- Navigation Bar -->
+    <nav class="navbar navbar-static-top">
+        <div class="container">
+            <!-- Logo -->
+            <div class="topnav">
+                <img class="img-responsive" src="images/Logo_bar.png" alt="logo" style="width: 350px; height: 110px; padding-top: 20px; float: left;">
+            <!-- Navbar List -->
+                <div style="float: right;" id="myTopnav">
+                    <a href="javascript:void(0);" class="icon" style="color: #ecbbaa; padding-top: 52px; float: right; " onclick="myFunction()">
+                        <i class="fa fa-bars"></i>
+                    </a><br><br>
+                    <a href="index1.html" style="color: #ecbbaa; padding: 10px 15px 0px;">Home</a>
+                    <a href="contactus.html" style="color: #ecbbaa;padding: 10px 15px 0px;">Contact</a>
+                    <a href="login.html" style="color: #ecbbaa;padding: 10px 15px 0px;">Login</a>
+                    <a href="signup.html" style="color: #ecbbaa;padding: 10px 15px 0px;">SignUp</a>
+                    <a href="wishlist.html" style="color: #ecbbaa;padding: 10px 15px 0px;"><span class="glyphicon glyphicon-heart"></span></a><!-- comment -->
+                    <a href="cart.html" style="color: #ecbbaa;padding: 10px 10px 0px;"><span class="glyphicon glyphicon-shopping-cart"></span></a>
+                    
+                </div>
+
+            </div>
+        </div>
+    </nav>
+    <br><br>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-6">
+                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
+
+                    <!-- Wrapper for slides -->
+                    <div class="carousel-inner">
+                      <div class="item active">
+                        <img src="images/83.jpg" alt="...">
+                      </div>
+                      <div class="item">
+                          <img src="images/2.jpg" alt="...">
+                      </div>
+                      <div class="item">
+                        <img src="images/6.jpg" alt="...">
+                      </div>
+                    </div>
+                    <!-- Controls -->
+                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
+                      <span class="glyphicon glyphicon-chevron-right"></span>
+                    </a>
+                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
+                      <span class="glyphicon glyphicon-chevron-left"></span>
+                    </a>
+                    
+                </div> <!-- Carousel -->
+            </div>
+            <div class="col-md-6" >
+                <h1 class="content" style="text-align: left; padding-left: 10px;"> Name </h1><!-- comment -->
+                <h3 class="content" style="text-align: left; padding-left: 10px;"> Description </h3><br>
+                <h5 class="content" style="text-align: left; padding-left: 10px;"> Specifications </h5><br><!-- comment -->
+                <div>
+                <div class="row">
+                    <div class="col-md-4 col-4">
+                        <p class="content" style="text-align: left; padding-left: 10px;"> Available colours: </p><br>
+                    </div>
+                    <div class="col-md-8 col-8">
+                        <div class="dropdown">
+                            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" style="background-color: #282828; color: #ecbbaa; border-color: #ecbbaa">Dropdown Example
+                            <span class="caret"></span></button>
+                            <ul class="dropdown-menu">
+                                <li><a href="#" style="text-align: center;"></a></li><br>
+                                <li><a href="#" style="text-align: center;"></a></li><br>
+                                <li><a href="#" style="text-align: center;"></a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div><br>
+                    <div class="row">
+                        <div class="col-md-4 col-4">
+                        <p class="content" style="text-align: left; padding-left: 10px;"> Choose size: </p><br>
+                        </div>
+                        <div class="col-md-8 col-8">
+                            <div class="dropdown">
+                                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" style="background-color: #282828; color: #ecbbaa; border-color: #ecbbaa">Dropdown Example
+                                <span class="caret"></span></button>
+                                <ul class="dropdown-menu">
+                                    <li><a href="#" style="text-align: center;"></a></li><br>
+                                    <li><a href="#" style="text-align: center;"></a></li><br>
+                                    <li><a href="#" style="text-align: center;"></a></li>
+                                </ul><br>
+                            </div>
+                        </div>
+                    </div> 
+                </div>
+            </div><br>
+            <div class="text-center">
+                <button class="btn btn-primary" style="text-align: left;"> Wishlist </button>
+            <button class="btn btn-primary" style="text-align: left;"> Buy Now </button>
+            </div>
+        </div>
+    </div>
+     <footer>
+            <hr id="line">
+            <p class="container-fluid" style="color: #ecbbaa;font-size: 10px;font-family: 'Roboto', sans-serif; text-align: left;">
+                Copyrights under Elysian, All Rights Reserved
+            </p>
+        </footer>
+        
+        
+        <script>
+            function myFunction() {
+              var x = document.getElementById("myTopnav");
+              if (x.className === "topnav") {
+                x.className += " responsive";
+              } else {
+                x.className = "topnav";
+              }
+            }
+        </script><!-- comment -->
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+        <script src="js/bootstrap.min.js"></script>
+        <script>
+	$('.carousel').carousel({
+		interval: 3000
+	});
+        </script>
+    </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..a087d91
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,756 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "@sindresorhus/is": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
+      "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ=="
+    },
+    "@szmarczak/http-timer": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
+      "integrity": "sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==",
+      "requires": {
+        "defer-to-connect": "^1.0.1"
+      }
+    },
+    "abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+    },
+    "ansi-align": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz",
+      "integrity": "sha512-ZpClVKqXN3RGBmKibdfWzqCY4lnjEuoNzU5T0oEFpfd/z5qJHVarukridD4juLO2FXMiwUQxr9WqQtaYa8XRYw==",
+      "requires": {
+        "string-width": "^3.0.0"
+      },
+      "dependencies": {
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        }
+      }
+    },
+    "ansi-regex": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+      "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+    },
+    "ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "requires": {
+        "color-convert": "^2.0.1"
+      }
+    },
+    "anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
+    },
+    "boxen": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/boxen/-/boxen-4.2.0.tgz",
+      "integrity": "sha512-eB4uT9RGzg2odpER62bBwSLvUeGC+WbRjjyyFhGsKnc8wp/m0+hQsMUvUe3H2V0D5vw0nBdO1hCJoZo5mKeuIQ==",
+      "requires": {
+        "ansi-align": "^3.0.0",
+        "camelcase": "^5.3.1",
+        "chalk": "^3.0.0",
+        "cli-boxes": "^2.2.0",
+        "string-width": "^4.1.0",
+        "term-size": "^2.1.0",
+        "type-fest": "^0.8.1",
+        "widest-line": "^3.1.0"
+      }
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+    },
+    "chalk": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "requires": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "chokidar": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
+      "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
+      "requires": {
+        "anymatch": "~3.1.1",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.1",
+        "glob-parent": "~5.1.0",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.5.0"
+      }
+    },
+    "ci-info": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
+      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ=="
+    },
+    "cli-boxes": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz",
+      "integrity": "sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw=="
+    },
+    "clone-response": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
+      "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=",
+      "requires": {
+        "mimic-response": "^1.0.0"
+      }
+    },
+    "color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "requires": {
+        "color-name": "~1.1.4"
+      }
+    },
+    "color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+    },
+    "configstore": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz",
+      "integrity": "sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==",
+      "requires": {
+        "dot-prop": "^5.2.0",
+        "graceful-fs": "^4.1.2",
+        "make-dir": "^3.0.0",
+        "unique-string": "^2.0.0",
+        "write-file-atomic": "^3.0.0",
+        "xdg-basedir": "^4.0.0"
+      }
+    },
+    "crypto-random-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
+      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA=="
+    },
+    "debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "requires": {
+        "ms": "^2.1.1"
+      }
+    },
+    "decompress-response": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
+      "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
+      "requires": {
+        "mimic-response": "^1.0.0"
+      }
+    },
+    "deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="
+    },
+    "defer-to-connect": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.1.3.tgz",
+      "integrity": "sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ=="
+    },
+    "dot-prop": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
+      "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
+      "requires": {
+        "is-obj": "^2.0.0"
+      }
+    },
+    "duplexer3": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
+      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI="
+    },
+    "emoji-regex": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
+    },
+    "end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "requires": {
+        "once": "^1.4.0"
+      }
+    },
+    "escape-goat": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-2.1.1.tgz",
+      "integrity": "sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q=="
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "optional": true
+    },
+    "get-stream": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+      "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+      "requires": {
+        "pump": "^3.0.0"
+      }
+    },
+    "glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
+    "global-dirs": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-2.1.0.tgz",
+      "integrity": "sha512-MG6kdOUh/xBnyo9cJFeIKkLEc1AyFq42QTU4XiX51i2NEdxLxLWXIjEjmqKeSuKR7pAZjTqUVoT2b2huxVLgYQ==",
+      "requires": {
+        "ini": "1.3.7"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
+      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ=="
+    },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+    },
+    "has-yarn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/has-yarn/-/has-yarn-2.1.0.tgz",
+      "integrity": "sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw=="
+    },
+    "http-cache-semantics": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
+      "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ=="
+    },
+    "ignore-by-default": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
+      "integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk="
+    },
+    "import-lazy": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
+      "integrity": "sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM="
+    },
+    "imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
+    },
+    "ini": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.7.tgz",
+      "integrity": "sha512-iKpRpXP+CrP2jyrxvg1kMUpXDyRUFDWurxbnVT1vQPx+Wz9uCYsMIqYuSBLV+PAaZG/d7kRLKRFc9oDMsH+mFQ=="
+    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-ci": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
+      "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
+      "requires": {
+        "ci-info": "^2.0.0"
+      }
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
+    },
+    "is-fullwidth-code-point": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+    },
+    "is-glob": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-installed-globally": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.3.2.tgz",
+      "integrity": "sha512-wZ8x1js7Ia0kecP/CHM/3ABkAmujX7WPvQk6uu3Fly/Mk44pySulQpnHG46OMjHGXApINnV4QhY3SWnECO2z5g==",
+      "requires": {
+        "global-dirs": "^2.0.1",
+        "is-path-inside": "^3.0.1"
+      }
+    },
+    "is-npm": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-4.0.0.tgz",
+      "integrity": "sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig=="
+    },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
+    },
+    "is-obj": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+      "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w=="
+    },
+    "is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ=="
+    },
+    "is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
+    },
+    "is-yarn-global": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz",
+      "integrity": "sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw=="
+    },
+    "lowercase-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
+      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA=="
+    },
+    "make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "requires": {
+        "semver": "^6.0.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
+    "mimic-response": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
+      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+    },
+    "ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
+    "nodemailer": {
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.6.1.tgz",
+      "integrity": "sha512-1xzFN3gqv+/qJ6YRyxBxfTYstLNt0FCtZaFRvf4Sg9wxNGWbwFmGXVpfSi6ThGK6aRxAo+KjHtYSW8NvCsNSAg=="
+    },
+    "nopt": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
+      "integrity": "sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=",
+      "requires": {
+        "abbrev": "1"
+      }
+    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+    },
+    "normalize-url": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.0.tgz",
+      "integrity": "sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ=="
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "p-cancelable": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz",
+      "integrity": "sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw=="
+    },
+    "picomatch": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.3.tgz",
+      "integrity": "sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg=="
+    },
+    "prepend-http": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
+      "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc="
+    },
+    "pstree.remy": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
+      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w=="
+    },
+    "pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "pupa": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/pupa/-/pupa-2.1.1.tgz",
+      "integrity": "sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==",
+      "requires": {
+        "escape-goat": "^2.0.0"
+      }
+    },
+    "rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "requires": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      }
+    },
+    "readdirp": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
+      "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
+    "registry-auth-token": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.1.tgz",
+      "integrity": "sha512-6gkSb4U6aWJB4SF2ZvLb76yCBjcvufXBqvvEx1HbmKPkutswjW1xNVRY0+daljIYRbogN7O0etYSlbiaEQyMyw==",
+      "requires": {
+        "rc": "^1.2.8"
+      }
+    },
+    "registry-url": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-5.1.0.tgz",
+      "integrity": "sha512-8acYXXTI0AkQv6RAOjE3vOaIXZkT9wo4LOFbBKYQEEnnMNBpKqdUrI6S4NT0KPIo/WVvJ5tE/X5LF/TQUf0ekw==",
+      "requires": {
+        "rc": "^1.2.8"
+      }
+    },
+    "responselike": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz",
+      "integrity": "sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=",
+      "requires": {
+        "lowercase-keys": "^1.0.0"
+      }
+    },
+    "semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+    },
+    "semver-diff": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-3.1.1.tgz",
+      "integrity": "sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==",
+      "requires": {
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
+    "signal-exit": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
+      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA=="
+    },
+    "string-width": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
+      "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+      "requires": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        }
+      }
+    },
+    "strip-ansi": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+      "requires": {
+        "ansi-regex": "^4.1.0"
+      }
+    },
+    "strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo="
+    },
+    "supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "requires": {
+        "has-flag": "^3.0.0"
+      }
+    },
+    "term-size": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.1.tgz",
+      "integrity": "sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg=="
+    },
+    "to-readable-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/to-readable-stream/-/to-readable-stream-1.0.0.tgz",
+      "integrity": "sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q=="
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
+    "touch": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz",
+      "integrity": "sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==",
+      "requires": {
+        "nopt": "~1.0.10"
+      }
+    },
+    "type-fest": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA=="
+    },
+    "typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "requires": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
+    "undefsafe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.3.tgz",
+      "integrity": "sha512-nrXZwwXrD/T/JXeygJqdCO6NZZ1L66HrxM/Z7mIq2oPanoN0F1nLx3lwJMu6AwJY69hdixaFQOuoYsMjE5/C2A==",
+      "requires": {
+        "debug": "^2.2.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
+    "unique-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
+      "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
+      "requires": {
+        "crypto-random-string": "^2.0.0"
+      }
+    },
+    "url-parse-lax": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
+      "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
+      "requires": {
+        "prepend-http": "^2.0.0"
+      }
+    },
+    "widest-line": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
+      "integrity": "sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==",
+      "requires": {
+        "string-width": "^4.0.0"
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+    },
+    "write-file-atomic": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
+      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
+      "requires": {
+        "imurmurhash": "^0.1.4",
+        "is-typedarray": "^1.0.0",
+        "signal-exit": "^3.0.2",
+        "typedarray-to-buffer": "^3.1.5"
+      }
+    },
+    "xdg-basedir": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz",
+      "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q=="
+    }
+  }
+}