diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 000000000..b86bd0570
Binary files /dev/null and b/.DS_Store differ
diff --git a/README.md b/README.md
index eee74593d..7c4f86ce6 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@ It uses:
 
 ## Card wall
 
-REPLACE THIS TEXT WITH A LINK TO YOUR CARD WALL
+(https://trello.com/b/9wjGVeJU/kittens)
 
 ## Quickstart
 
diff --git a/app.js b/app.js
index bb2057955..ab4b56f5d 100644
--- a/app.js
+++ b/app.js
@@ -10,6 +10,7 @@ const homeRouter = require("./routes/home");
 const postsRouter = require("./routes/posts");
 const sessionsRouter = require("./routes/sessions");
 const usersRouter = require("./routes/users");
+const friendsRouter = require("./routes/friends");
 
 const app = express();
 
@@ -56,8 +57,14 @@ const sessionChecker = (req, res, next) => {
 // route setup
 app.use("/", homeRouter);
 app.use("/posts", sessionChecker, postsRouter);
+app.use("posts/explore", sessionChecker, postsRouter); //do we need this for it to work?
 app.use("/sessions", sessionsRouter);
 app.use("/users", usersRouter);
+app.use("/friends", sessionChecker, friendsRouter) //added SC to check user is logged in
+
+//posts router to listen to a post request to the id/act
+app.use("/posts/:id/act", postsRouter)
+//app.use("/users/:id/befriend", postsRouter)
 
 // catch 404 and forward to error handler
 app.use((req, res, next) => {
diff --git a/car.txt b/car.txt
new file mode 100644
index 000000000..e69de29bb
diff --git a/controllers/friends.js b/controllers/friends.js
new file mode 100644
index 000000000..2d55b3003
--- /dev/null
+++ b/controllers/friends.js
@@ -0,0 +1,19 @@
+const User = require("../models/user");
+
+
+const FriendsController = {
+    Index: (req, res) => {
+      const user = req.session.user.username
+      User.find({username: user}, { friends: 1 }, (err, friendsArray) => {
+      if (err) {
+        throw err
+  
+      }
+      //console.log(friendsArray[0].friends) - the find returns a list of objects which includes ids as well 
+      //list of friends to be sent as an argument - this needs usercontroller and a method to list it
+      res.render("friends/index", { title: "Furrends", shownavbar:true, friendslist:friendsArray[0], user:user });
+    })
+  }
+}
+  
+  module.exports = FriendsController;
\ No newline at end of file
diff --git a/controllers/home.js b/controllers/home.js
index 667b4decc..ccd5bbe52 100644
--- a/controllers/home.js
+++ b/controllers/home.js
@@ -1,6 +1,6 @@
 const HomeController = {
   Index: (req, res) => {
-    res.render("home/index", { title: "Acebook" });
+    res.render("home/index", { title: "Acebook", shownavbar:false });
   },
 };
 
diff --git a/controllers/posts.js b/controllers/posts.js
index 4b521304d..277b5d0fe 100644
--- a/controllers/posts.js
+++ b/controllers/posts.js
@@ -1,28 +1,149 @@
 const Post = require("../models/post");
+const User = require("../models/user");
 
 const PostsController = {
   Index: (req, res) => {
+    //do we only see posts from users that are friends?  yes
+    const postIds = req.params.id
+    console.log(postIds)
+    // const postauthor = Post.findOne({ _id:  })
+    const user = req.session.user
+    const friendsList = user.friends
+    friendsList.push(user.username)
+    Post.find({author: {$in: friendsList}},(err, posts) => {
+      
+      if (err) {
+        throw err;
+      }
+      posts = posts.sort((a,b) => b.date-a.date ) //sorts the posts by date order before rendering
+      res.render("posts/index", { posts: posts, shownavbar:true, user: user});
+    }); 
+  },
+  Explore: (req, res) => {
+    //page to see all posts make it happen
+    const user = req.session.user
     Post.find((err, posts) => {
       if (err) {
         throw err;
       }
-
-      res.render("posts/index", { posts: posts });
-    });
+      posts = posts.sort((a,b) => b.date-a.date ) //sorts the posts by date order before rendering
+      res.render("posts/explore", { posts: posts, shownavbar:true, user: user});
+    }); 
   },
+
   New: (req, res) => {
-    res.render("posts/new", {});
+    res.render("posts/new", {shownavbar:true});
   },
+  
   Create: (req, res) => {
-    const post = new Post(req.body);
+    const post = new Post({message:req.body.message,author:req.session.user.username,image:req.body.photoURL.trim()});
     post.save((err) => {
       if (err) {
         throw err;
       }
-
       res.status(201).redirect("/posts");
     });
   },
+  //added a like object that has an anonymous f(x) for the PostController 'class'
+  //this should send a post request to update the db using the postID retrieved from the 
+  Like: (req, res) => {
+    const postId = req.params.id;
+    const action = req.body.action;
+    if (action === 'Like') {
+      Post.updateOne({ _id: postId }, { $inc: { likes: 1 } }, function (error) {
+        if (error) {
+          res.send(error);
+          console.log(error)
+        } else {
+          console.log('like updated')
+          res.send('Like added');
+        }
+      });
+    } else if (action === 'Unlike') {
+      Post.updateOne({ _id: postId }, { $inc: { likes: -1 } }, function (error) {
+        if (error) {
+          res.send(error);
+        } else {
+          res.send('Unlike added');
+        }
+      });
+    } 
+  },
+
+  Love: (req, res) => {
+    const postId = req.params.id;
+    const action = req.body.action;
+    if (action === 'Love') {
+      Post.updateOne({ _id: postId }, { $inc: { loves: 1 } }, function (error) {
+        if (error) {
+          res.send(error);
+          console.log(error)
+        } else {
+          console.log('love updated')
+          res.send('Love added');
+        }
+      });
+    } else if (action === 'Hate') {
+      Post.updateOne({ _id: postId }, { $inc: { loves: -1 } }, function (error) {
+        if (error) {
+          res.send(error);
+        } else {
+          res.send('Hate added');
+        }
+      });
+    } 
+  },
+  //added a follow object THIS IS ACTUALLY A MESS ATM
+  Follow: (req,res) => {
+    //const postId = req.params.id;
+    const usersname = req.body.main //gets the main user (user who's friend list is created)
+    // console.log(req.param.id)
+    // console.log(req.body.friend)
+    // console.log(req.body.action)
+    // console.log(req.body.main)
+    const friend = req.body.friend; //get friend to add from the post req body
+    const action = req.body.action; //get action
+    if (action === 'Follow') {
+      //use addToSet because want unique values to be added only
+      User.updateOne({ username: usersname }, {$addToSet:{ friends: friend}}, function (error) {
+        if (error) {
+          res.send(error);
+          console.log(error)
+        } else {
+          console.log('Followed');
+        }
+      });
+    } else if (action === 'Unfollow') {
+      User.updateOne({ username: usersname }, { $pull: { friends: friend } }, function (error) {
+        if (error) {
+          res.send(error);
+        } else {
+          console.log('Unfollowed');
+        }
+      });
+    } 
+
+},
+  Comment: (req, res) => {
+
+    // const usersname = req.body.main //gets the main user (user who's friend list is created)
+    // const friend = req.body.friend; //get friend to add from the post req body
+    // const action = req.body.action; //get action
+      const postId = req.params.id
+      const comment = req.body.comment
+      const commenter = req.session.user.username
+      const commentObject = {comment:comment, user:commenter}
+      Post.updateOne({ _id: postId }, {$push: {comments:commentObject}}, {new:true}, function 
+      (error) {
+        if (error) {
+          res.send(error);
+          console.log(error)
+       }
+       
+      });
+      res.status(201).redirect("/posts");
+    }
 };
 
+
 module.exports = PostsController;
diff --git a/controllers/sessions.js b/controllers/sessions.js
index 917e2e14c..cd6635d57 100644
--- a/controllers/sessions.js
+++ b/controllers/sessions.js
@@ -2,7 +2,7 @@ const User = require("../models/user");
 
 const SessionsController = {
   New: (req, res) => {
-    res.render("sessions/new", {});
+    res.render("sessions/new", {shownavbar:false});
   },
 
   Create: (req, res) => {
@@ -11,10 +11,14 @@ const SessionsController = {
     const password = req.body.password;
 
     User.findOne({ email: email }).then((user) => {
+      //if user doesn't exist in the db, redirects to /new which creates a new account
       if (!user) {
-        res.redirect("/sessions/new");
+        var wronguser = true;
+        res.render("home/index", {wronguser});
+        //if the userpassword doesn't match it redirects
       } else if (user.password != password) {
-        res.redirect("/sessions/new");
+        var wrongpass = true;
+        res.render("home/index",{wrongpass});
       } else {
         req.session.user = user;
         res.redirect("/posts");
diff --git a/controllers/users.js b/controllers/users.js
index bdc2ea8f3..96c207956 100644
--- a/controllers/users.js
+++ b/controllers/users.js
@@ -2,18 +2,41 @@ const User = require("../models/user");
 
 const UsersController = {
   New: (req, res) => {
-    res.render("users/new", {});
+    res.render("users/new", {shownavbar:true});
   },
-
   Create: (req, res) => {
-    const user = new User(req.body);
-    user.save((err) => {
+    const newuser = new User(req.body);
+    const email = req.body.email
+    const username = req.body.username
+    User.findOne({ email: email }).then((user) => {
+      //if user doesn't exist in the db, redirects to /new which creates a new account
+      if (!user)       {
+        User.findOne({ username: username }).then((name) => {
+            if (!name) {                 
+        newuser.save((err) => {
       if (err) {
         throw err;
       }
-      res.status(201).redirect("/posts");
-    });
-  },
-};
+        var accountCreated = true;
+        res.render("home/index", {accountCreated})
+    })}
+    else
+      {
+        console.log('User already exists!')
+        var usernameExists = true;
+        res.render("home/index", {usernameExists})
+      } 
+  })}
+    //if user email and name doesn't exist, save it
+    else
+      {
+        console.log('User already exists!')
+        var emailExists = true;        
+        res.render("home/index", {emailExists})
+      } 
+  })
+  }
+  }
+
 
-module.exports = UsersController;
+module.exports = UsersController;
\ No newline at end of file
diff --git a/models/post.js b/models/post.js
index 3ef06ae2d..b7b6fafe7 100644
--- a/models/post.js
+++ b/models/post.js
@@ -1,10 +1,22 @@
 const mongoose = require("mongoose");
 
+ 
 const PostSchema = new mongoose.Schema({
-  message: String,
-  likes: { type: Number, default: 0 }
+  message: {type:String, required:true},
+  author: {type:String, required:true}, //required true means it is needed when a post is created, we can then pass an objecrt including user info to the new post initialisation.
+  likes: { type: Number, default: 0 },
+  loves: { type: Number, default: 0 },
+  date: { type: Date, default:Date.now },
+  image: {type:String},
+  comments: [{
+    date: { type: Date, default: Date.now },
+    comment: {type: String},
+    user: {type:String}
+}]
+
 });
 
+
 const Post = mongoose.model("Post", PostSchema);
 
 module.exports = Post;
diff --git a/models/user.js b/models/user.js
index 27406b498..321d54a2c 100644
--- a/models/user.js
+++ b/models/user.js
@@ -1,10 +1,22 @@
 const mongoose = require("mongoose");
 
 const UserSchema = new mongoose.Schema({
-  email: String,
+  username: {type: String, unique: true},
+  email: {type: String, unique: true},
   password: String,
+  profilepic: {type:String},
+  friends: {type: [String], default: []}
 });
 
 const User = mongoose.model("User", UserSchema);
+//const friend = new User({username: "Kitten", email: "kitten@kitten.com", password: "password "})
+//friend.friends.push("Steve")
 
-module.exports = User;
+//friend.save()
+// User.findOneAndUpdate(
+//   { _id:	"63bc4bc14dbd82782c7cc65c" }, 
+//   { $push: { 
+//             friends : "Steve"
+//           } 
+//   })
+module.exports = User;
\ No newline at end of file
diff --git a/public/.DS_Store b/public/.DS_Store
new file mode 100644
index 000000000..52846d7f3
Binary files /dev/null and b/public/.DS_Store differ
diff --git a/public/images/.DS_Store b/public/images/.DS_Store
new file mode 100644
index 000000000..9aba217bd
Binary files /dev/null and b/public/images/.DS_Store differ
diff --git a/public/images/Catbook.gif b/public/images/Catbook.gif
new file mode 100644
index 000000000..8cb5c9370
Binary files /dev/null and b/public/images/Catbook.gif differ
diff --git a/public/images/favicon.ico b/public/images/favicon.ico
new file mode 100644
index 000000000..9159cba1a
Binary files /dev/null and b/public/images/favicon.ico differ
diff --git a/public/images/paw.jpg b/public/images/paw.jpg
new file mode 100644
index 000000000..9159cba1a
Binary files /dev/null and b/public/images/paw.jpg differ
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 9453385b9..4119dbcc9 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -4,5 +4,176 @@ body {
 }
 
 a {
-  color: #00B7FF;
+  color: #911758;
 }
+
+.like-button{ 
+  width:15px;
+  height:15px;
+}
+
+.row{
+  width:15px;
+  height:15px;
+}
+body{
+  padding: 0;
+  margin: 0;
+  background-color: #a205;
+}
+.container{
+  height: 500px;
+  width: 350px;
+  position: absolute;
+  margin: auto;
+  top: 0;
+  bottom: 0;
+  left: 1000;
+  right: 0; 
+  z-index: -1;
+}
+.cat{
+  position: relative;
+  top: 150px;
+  left: 50px;
+}
+.face{
+  background-color: #33292b;
+  height: 100px;
+  width: 150px;
+  border-radius: 30px;
+}
+.ear-1,.ear-r{
+  width: 0;
+  height: 0;
+  border-bottom: 50px solid #33292b;
+  border-left: 20px solid transparent;
+  border-right: 20px solid transparent;
+  position: relative;
+  z-index: -1;
+}
+.ear-1{
+  bottom: 35px;
+  transform: rotate(-30deg);
+}
+.ear-r{
+  bottom: 85px;
+  left: 110px;
+  transform: rotate(30deg);
+}
+.inner-1{
+  width: 0;
+  height: 0;
+  border-bottom: 50px solid #d36149;
+  border-left: 25px solid transparent;
+  right: 25px;
+  position: relative;  
+}
+.inner-2{
+  width: 0;
+  height: 0;
+  border-bottom: 50px solid #d36149;
+  border-right: 25px solid transparent;
+  position: relative;
+}
+.eye-1,.eye-r{
+  background-color: #d2873b;
+  height: 30px;
+  width: 30px;
+  border-radius: 50%;
+  position: relative; 
+}
+.eye-1{
+  bottom: 75px;
+  left: 30px;
+}
+.eye-r{
+  bottom: 105px;
+  left: 90px;
+}
+.eyeball{
+  background-color: #262626;
+  height: 24px;
+  width: 24px;
+  border-radius: 50%;
+  position: relative;
+  top: 3px;
+  left: 3px;
+}
+.nose{
+  height: 0;
+  width: 0;
+  border-top: 8px solid #d36149;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  position: relative;
+  bottom: 110px;
+  left: 68px;  
+}
+.l1,.l2{
+  background-color: #d36149;
+  height: 8px;
+  width: 1px;
+  position: relative;
+}
+.l1{
+  transform: rotate(45deg);
+  right: 4px;
+  bottom: 1.5px;  
+}
+.l2{
+  transform: rotate(-45deg);
+  bottom: 10px;
+  left: 3px;  
+}
+.body{
+  background-color: #33292b;
+  height: 120px;
+  width: 150px;
+  position: relative;
+  left: 30px;
+  border: 5px;
+  border-radius: 0 65px 0 0;
+}
+.paw-1,.paw-2{
+  background-color: #33292b;
+  height: 10px;
+  width: 22px;
+  position: relative;
+  border-radius: 0 0 10px 10px;
+}
+.paw-1{
+  top: 120px;
+}
+.paw-2{
+  top: 110px;
+  left: 50px;
+}
+.tail{
+  background-color: #33292b;
+  width: 100px;
+  height: 20px;
+  position: relative;
+  top: 80px;
+  left: 100px;
+  border-radius: 0 20px 20px 0;
+}
+.shadow{
+  background-color: rgba(8,8,8,0.05);
+  height: 30px;
+  width: 150px;
+  border-radius: 50%;
+  position: relative;
+  bottom: 15px;
+  left: 20px;
+  z-index: -1;
+}
+
+.box {
+  border: 1px solid black;
+  padding: 20px;
+}
+
+.box:hover {
+  box-shadow: 4px 4px 4px grey;
+}
\ No newline at end of file
diff --git a/routes/friends.js b/routes/friends.js
new file mode 100644
index 000000000..b480b4aa7
--- /dev/null
+++ b/routes/friends.js
@@ -0,0 +1,8 @@
+const express = require("express");
+const router = express.Router();
+
+const FriendsController = require("../controllers/friends");
+
+router.get("/", FriendsController.Index);
+
+module.exports = router;
\ No newline at end of file
diff --git a/routes/posts.js b/routes/posts.js
index d4ec2d937..f4d8311a1 100644
--- a/routes/posts.js
+++ b/routes/posts.js
@@ -6,5 +6,14 @@ const PostsController = require("../controllers/posts");
 router.get("/", PostsController.Index);
 router.post("/", PostsController.Create);
 router.get("/new", PostsController.New);
+router.get("/explore", PostsController.Explore); //is this weird?
+
+router.post('/:id/act', PostsController.Like);
+router.post('/:id/love', PostsController.Love);
+
+//add a friend to follow
+router.post('/:id/befriend', PostsController.Follow);
+// submit is a comment
+router.post('/:id/comment', PostsController.Comment);
 
 module.exports = router;
diff --git a/spec/models/post.spec.js b/spec/models/post.spec.js
index 3acfd48ce..038097628 100644
--- a/spec/models/post.spec.js
+++ b/spec/models/post.spec.js
@@ -9,10 +9,15 @@ describe("Post model", () => {
       done();
     });
   });
-
+//this has been changed due to the fact it now saves a post with an author
+  // it("has a message", () => {
+  //   var post = new Post({ message: "some message" });
+  //   expect(post.message).toEqual("some message");
+  // });
   it("has a message", () => {
-    var post = new Post({ message: "some message" });
+    var post = new Post({ message: "some message", author:'Andy Pandy'});
     expect(post.message).toEqual("some message");
+    expect(post.author).toEqual("Andy Pandy")
   });
 
   it("can list all posts", (done) => {
@@ -36,5 +41,11 @@ describe("Post model", () => {
         done();
       });
     });
+  xit("can like a post and increase the likes by 1", () => {
+    //we need to change it so it can only be liked and then freeze the button forevermore? 
+  });
+  xit("can love a post and increase the loves by 1", () => {
+
+  })
   });
 });
diff --git a/views/friends/index.hbs b/views/friends/index.hbs
new file mode 100644
index 000000000..12298f007
--- /dev/null
+++ b/views/friends/index.hbs
@@ -0,0 +1,43 @@
+<html>
+
+
+<head>
+<h1> Furrends</h1>
+<h1 style="display:none;" id="mainuser">{{user.username}} </h1>
+<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+<script>
+        var toggleUnfollowText = {
+            Unfollow: function(button) {
+                button.textContent = "Unfollowed";
+                button.disabled = true;
+            }
+        }; 
+        var unfollow = function (event) {
+            var userId = event.target.dataset.id; //gets userId from data-id
+            console.log(userId) 
+            var mainuser = document.getElementById('mainuser').innerHTML.trim() //gets the main username from the welcome page
+            //console.log(mainuser)
+            toggleUnfollowText["Unfollow"](event.target); //toggles the button to show the opposite
+            axios.post('/posts/' + userId + '/befriend', { action: "Unfollow", friend: userId, main: mainuser }); //create a post route - this route is dodge
+            }     //params are passed into the req body through the curly braces as instance vars?
+</script>
+</head>
+
+<body>
+{{!-- loop through the friends list array and print each one to the screen --}}
+{{#each friendslist.friends }}  
+<div style="display: flex">
+   <p id='user'+{{this}}> {{this}} </p> 
+   <button data-id={{this}} onclick="unfollow(event)">Unfollow</button>
+    <br>
+</div>
+
+{{/each}}
+
+</body>
+
+
+
+
+
+</html>
diff --git a/views/home/index.hbs b/views/home/index.hbs
index 7ad30d847..892e606c2 100644
--- a/views/home/index.hbs
+++ b/views/home/index.hbs
@@ -1,2 +1,52 @@
-<h1 class="title">{{title}}</h1>
-<p>Welcome to {{title}}</p>
+<html>
+
+<head>
+
+</head>
+
+<body>
+<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+<p>Please log in or sign up</p>
+<br>
+
+<div class="box">
+<br>
+<form id="new-session-form" action="/sessions" method="post">
+  
+  <input id="email" type="email" name="email" value="" type="text" placeholder="Enter your e-mail">
+  <br>
+  
+  <input id="password" type="password" name="password" value="" type="text" placeholder="Password"> <br> <br>
+  {{#if accountCreated}}
+  Account created! Please sign in.
+  {{/if}}
+  {{#if emailExists}}
+  Email already exists! <br>
+  Please try to log in, or try to sign up with a different email.
+  {{/if}}
+  {{#if usernameExists}}
+  Username already exists! <br>
+  Please try to log in, or try to sign up with a different username.
+  {{/if}}
+  {{#if wronguser}}
+  User does not exist, please sign up!
+  {{/if}}
+  {{#if wrongpass}}
+  Password is incorrect, please try again.
+  {{/if}}
+  <br>
+  {{!-- password and user prompts for incorrect --}}
+  <br>
+  <br> <input id="submit" type="submit" value="Log in" style="position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+</form> <br>
+<form id="new-session-form" action="/users/new" method="get">
+<input id="submit" type="submit" value="Sign up" style="position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+</form> <br>
+{{!-- currently doesn't work needs to have a new route added with a form --}}
+<form id="new-session-form" action="/sessions" method="post">
+<input id="submit" type="submit" value="Forgot password" style="position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+</form><br>
+</div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/views/layout.hbs b/views/layout.hbs
index 17645b71e..1a6064b1a 100644
--- a/views/layout.hbs
+++ b/views/layout.hbs
@@ -1,13 +1,171 @@
 <!DOCTYPE html>
+
 <html>
-  <head>
-    <title>{{title}}</title>
-    <link rel='stylesheet' href='/stylesheets/style.css' />
-  </head>
-  <body>
-    <form action='/sessions?_method=DELETE' method='POST'>
-      <input type="submit" value="Log Out">
-    </form>
-    {{{body}}}
-  </body>
+
+<head>
+
+  <title>Catbook</title>
+  <link rel="shortcut icon" type="image/jpg" href="/images/favicon.ico">
+  <link rel='stylesheet' href='/stylesheets/style.css' />
+</head>
+
+<body>
+  
+  <div class="container" >
+    <div class="cat">
+      <div class="face">
+        <div class="ear-1">
+          <div class="inner-1"></div>
+        </div>
+        <div class="ear-r">
+          <div class="inner-2"></div>
+        </div>
+        <div class="eye-1">
+          <div class="eyeball"></div>
+        </div>
+        <div class="eye-r">
+          <div class="eyeball"></div>
+        </div>
+        <div class="nose">
+          <div class="l1"></div>
+          <div class="l2"></div>
+        </div>
+      </div>
+      <div class="body">
+        <div class="paw-1"></div>
+        <div class="paw-2"></div>
+        <div class="tail"></div>
+      </div>
+      <div class="shadow"></div>
+    </div>
+  </div>
+</body>
+
+
+<style>
+  nav {
+    width: 180px;
+    background: rgb(255, 255, 255);
+    color: rgba(8, 8, 8, 0.87);
+    -webkit-clip-path: circle(24px at 30px 24px);
+    clip-path: circle(24px at 32px 24px);
+    -webkit-transition: -webkit-clip-path 0.5625s, clip-path 0.375s;
+    transition: -webkit-clip-path 0.5625s, clip-path 0.375s;
+    position:absolute;
+    top:34px;
+    left:600px;
+  }
+
+  nav:hover {
+    -webkit-transition-timing-function: ease-out;
+    transition-timing-function: ease-out;
+    -webkit-transition-duration: 0.75s;
+    transition-duration: 0.75s;
+    -webkit-clip-path: circle(390px at 225px 24px);
+    clip-path: circle(390px at 150px 24px);
+  }
+
+  a {
+    display: block;
+    line-height: 30px;
+    padding: 0 20px;
+    color: inherit;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+  a:hover {
+    background: #FFE082;
+  }
+
+  a:active {
+    background: #FFCA28;
+  }
+
+  .navicon {
+    padding: 23px 20px;
+    cursor: pointer;
+    -webkit-transform-origin: 32px 24px;
+    -ms-transform-origin: 32px 24px;
+    transform-origin: 32px 24px;
+  }
+
+  .navicon div {
+    position: relative;
+    width: 20px;
+    height: 2px;
+    background: rgba(0, 0, 0, 0.87);
+  }
+
+  .navicon div:before,
+  .navicon div:after {
+    display: block;
+    content: "";
+    width: 20px;
+    height: 2px;
+    background: rgba(0, 0, 0, 0.87);
+    position: absolute;
+  }
+
+  .navicon div:before {
+    top: -7px;
+  }
+
+  .navicon div:after {
+    top: 7px;
+  }
+
+   #banner{
+    position:relative;
+    top:-35px;
+    left:0px;
+}
+
+#pawburger{
+  position:absolute;
+  width:35%;
+  height:35%;
+  z-index: 1;
+  top:-9.5px;
+  left:0px;
+}
+#headers{
+  object-fit: contain;
+}
+</style>
+</head>
+
+<body>
+  
+
+
+<div id="headers">
+  <div style="display:inline-block">
+        <div id="banner" style="display:inline-block">
+    <img src="/images/Catbook.gif" alt="Welcome To Catbook">
+
+  {{#if shownavbar}}
+  <nav> 
+    <div class="navicon">
+    <img src="/images/paw.jpg"  id="pawburger" alt="=">
+    </div>
+    <a href="/posts">Home</a>
+    <a href="/friends">Friends</a>
+    <a href="/posts/explore">Explore posts</a>
+    <a href="/">Logout</a>
+    </div>
+    </nav>
+    {{/if}}
+  </div>
+   {{{body}}}
+
+
+
+  </div>
+
+</body>
+
 </html>
diff --git a/views/posts/explore.hbs b/views/posts/explore.hbs
new file mode 100644
index 000000000..dffe53b4e
--- /dev/null
+++ b/views/posts/explore.hbs
@@ -0,0 +1,249 @@
+<html>
+
+<head>
+
+  <style>
+h1 {text-align: center;}
+p {text-align: center;}
+div {text-align: center;}
+      
+    
+    * {
+      padding: 0;
+      margin: 0;
+    }
+
+    .main-div {
+      height: 100vh;
+      display: flex;
+      justify-content: left;
+      align-items: left;
+    }
+
+    .button-div {
+      padding: 10px;
+      position: relative;
+    }
+
+    .love-button,
+    .like-button,
+    .fav-button,
+    .submit-button {
+      border: none;
+      height: 30px;
+      width: 60px;
+      font-size: 15px;
+      background-color: #000;
+      color: #fff;
+      border-radius: 5px;
+      cursor: pointer;
+      display: inline;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .love-button i,
+    .like-button i,
+    .fav-button i {
+      position: relative;
+      left: 70px;
+    }
+
+    .profile {
+      display: flex
+    }
+
+    #usericon {
+      width: 50px;
+      height: 50px;
+      margin-right: 10px;
+    }
+
+
+  </style>
+
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+
+  <script>
+    //updatePostStats is an object with a like/unlike function - 
+    var updatePostStats = {
+      Like: function (postId) {
+        document.querySelector('#likes-count-' + postId).textContent++;
+      },
+      Unlike: function (postId) {
+        document.querySelector('#likes-count-' + postId).textContent--;
+      }
+    };
+    //toggles the button
+    var toggleButtonText = {
+      Like: function (button) {
+        button.textContent = "Unlike";
+
+      },
+      Unlike: function (button) {
+        button.textContent = "Like";
+      }
+    };
+    //
+    var actOnPost = function (event) {
+      var postId = event.target.dataset.postId;
+      var action = event.target.textContent.trim(); //will either be like or unlike
+      toggleButtonText[action](event.target); //toggles the button to show the opposite
+      updatePostStats[action](postId);
+      axios.post('/posts/' + postId + '/act', { action: action });
+    }
+
+    //implementation of love button
+    var updatePostStatsLove = {
+      Love: function (postId) {
+        document.querySelector('#loves-count-' + postId).textContent++;
+      },
+      Hate: function (postId) {
+        document.querySelector('#loves-count-' + postId).textContent--;
+      }
+    };
+    //toggles the button
+    var toggleButtonTextLove = {
+      Love: function (button) {
+        button.textContent = "Hate";
+
+      },
+      Hate: function (button) {
+        button.textContent = "Love";
+      }
+    };
+    //
+    var actOnPostLove = function (event) {
+      var postId = event.target.dataset.postId;
+      console.log(postId)
+      var action = event.target.textContent.trim(); //will either be like or unlike
+      toggleButtonTextLove[action](event.target); //toggles the button to show the opposite
+      updatePostStatsLove[action](postId);
+      axios.post('/posts/' + postId + '/love', { action: action });
+    }
+
+
+    //Follow buttons functionality
+
+    var toggleFollowText = {
+      Follow: function (button) {
+        button.textContent = "Followed";
+        button.disabled = true;
+      }
+    };
+
+    var actFollow = function (event) {
+      //{{!-- var postId = event.target.dataset.postId; --}}
+      var userId = event.target.dataset.id; //gets userId from data-id
+      //console.log(userId) 
+      var mainuser = document.getElementById('mainuser').innerHTML.trim() //gets the main username from the welcome page
+      //console.log(mainuser)
+      toggleFollowText["Follow"](event.target); //toggles the button to show the opposite
+      axios.post('/posts/' + userId + '/befriend', { action: "Follow", friend: userId, main: mainuser }); //create a post route - this route is dodge
+    }     //params are passed into the req body through the curly braces as instance vars?
+
+  </script>
+
+</head>
+
+<body>
+  <div>
+    <div class="profile" style="display: flex; justify-content: center; align-items: center;">
+      {{#if user.profilepic }}
+      <img src="{{user.profilepic}}" width="50" height="50">
+      {{else}}
+      <img id="usericon" src="https://visualpharm.com/assets/422/Cat%20Profile-595b40b65ba036ed117d3d6b.svg" alt="User">
+      {{/if}}
+      <span class="author"></span>
+      <h1 style="display:none;" id="mainuser">{{user.username}}</h1>
+      <p style="font-size:40px;">Welcome {{user.username}}
+      </p>
+    </div>
+    
+    <br>
+
+    <div class="container-fluid text-center">
+      {{!-- for each of the posts array, the message and date is posted and a button
+      rendered - the button has a onclick method that runs a method from the script,
+      each button has a data-post-id attached in which the posts.id is attached to.
+      the item with likes count is given an idea which is also associated with posts.id --}}
+      {{#each posts }}
+      <div class="box">
+      <div class="posts" style="margin-left: 50px">
+        <div>
+          <b>{{ this.message }}</b><br>
+          <div class="photoURL">
+
+            {{#if this.image }}
+            <img src="{{this.image}}" width="100" height="100" alt="image not found!">
+            {{else}}
+            <p></p>
+            {{/if}}
+
+          </div>
+          <span id="author-{{ this.author }}">
+            <h3>{{ this.author }}</h3>
+            {{!-- {{#if }}
+            <img src="{{this.}}" width="100" height="100" alt="image not found!">
+            {{else}}
+            <p></p>
+            {{/if}} --}}
+          </span>
+          <br>
+          <button data-id="{{ this.author }}" class="fav-button" onclick="actFollow(event)">Follow</button><br>
+          <small>{{ this.date }}</small>
+        </div>
+        {{!-- adds a little meow with the like counter, associated with this.id and showing this.likes_count --}}
+        <div class="row" style="margin-left:30px">
+          
+        </div>
+        <span style="margin-left: -40px;"> &#x1F63B;</span>
+        <span id="likes-count-{{ this.id }}">{{ this.likes }}</span>
+
+        <span style="margin-left:60px">&#128062;</span>
+        <span id="loves-count-{{ this.id }}">{{ this.loves }}</span>
+
+      </div>
+      {{!-- set the data-post-id as posts.id onto this button --}}
+
+      <div id="button-div">
+        <button style="display: flex; justify-content: center;" ><button style="margin-left:30px" onclick="actOnPost(event);" data-post-id="{{ this.id }}" class="like-button">Like</button>
+        <button style="margin-left:30px" onclick="actOnPostLove(event);" data-post-id="{{ this.id }}" class="love-button">Love</button>
+      </div>
+    </div>
+  </div>
+  {{!-- adds a little meow with the like counter, associated with this.id and showing this.likes_count --}}
+  {{!-- set the data-post-id as posts.id onto this button --}}
+  <br>
+  <div id="post-comments" style="font-size: 18px">
+    <h5> Comments: </h5>
+    {{#each this.comments}}
+    <div class="comment-container" style="text-align:center">
+    "{{this.comment}}" - <small>{{this.user}}, {{this.date}}</small></div>
+    
+    {{/each}}
+  </div>
+  <br>
+  <div style="display: flex; justify-content: center;">
+  <form id="comment-form" method="post" action="/posts/{{ this.id }}/comment">
+    <input
+      style="height:50px; width:200px; display: inline-block; margin-left: 30px; border: 2px solid black; border-radius: 20px;"
+      type="text" id="comment-" +{{ this.id }} name="comment" placeholder=" Enter your comment here">
+
+    <button class="submit-button" type="submit">Submit</button>
+  </form>
+
+  </div>
+
+
+
+  <br>
+  {{/each}}
+  </div>
+  </div>
+<br>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/views/posts/index.hbs b/views/posts/index.hbs
index 4a4bca1d8..b054461b1 100644
--- a/views/posts/index.hbs
+++ b/views/posts/index.hbs
@@ -1,9 +1,250 @@
-<h1>Timeline</h1>
-<ul class="posts">
-  {{#each posts}}
-  <li>{{this.message}}</li> 
-  <li>{{this.likes}} likes</li>
+<html>
+
+<head>
+
+  <style>
+h1 {text-align: center;}
+p {text-align: center;}
+div {text-align: center;}
+      
+    
+    * {
+      padding: 0;
+      margin: 0;
+    }
+
+    .main-div {
+      height: 100vh;
+      display: flex;
+      justify-content: left;
+      align-items: left;
+    }
+
+    .button-div {
+      padding: 10px;
+      position: relative;
+    }
+
+    .love-button,
+    .like-button,
+    .fav-button,
+    .submit-button {
+      border: none;
+      height: 30px;
+      width: 60px;
+      font-size: 15px;
+      background-color: #000;
+      color: #fff;
+      border-radius: 5px;
+      cursor: pointer;
+      display: inline;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .love-button i,
+    .like-button i,
+    .fav-button i {
+      position: relative;
+      left: 70px;
+    }
+
+    .profile {
+      display: flex
+    }
+
+    #usericon {
+      width: 50px;
+      height: 50px;
+      margin-right: 10px;
+    }
+
+
+  </style>
+
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+
+  <script>
+    //updatePostStats is an object with a like/unlike function - 
+    var updatePostStats = {
+      Like: function (postId) {
+        document.querySelector('#likes-count-' + postId).textContent++;
+      },
+      Unlike: function (postId) {
+        document.querySelector('#likes-count-' + postId).textContent--;
+      }
+    };
+    //toggles the button
+    var toggleButtonText = {
+      Like: function (button) {
+        button.textContent = "Unlike";
+
+      },
+      Unlike: function (button) {
+        button.textContent = "Like";
+      }
+    };
+    //
+    var actOnPost = function (event) {
+      var postId = event.target.dataset.postId;
+      var action = event.target.textContent.trim(); //will either be like or unlike
+      toggleButtonText[action](event.target); //toggles the button to show the opposite
+      updatePostStats[action](postId);
+      axios.post('/posts/' + postId + '/act', { action: action });
+    }
+
+    //implementation of love button
+    var updatePostStatsLove = {
+      Love: function (postId) {
+        document.querySelector('#loves-count-' + postId).textContent++;
+      },
+      Hate: function (postId) {
+        document.querySelector('#loves-count-' + postId).textContent--;
+      }
+    };
+    //toggles the button
+    var toggleButtonTextLove = {
+      Love: function (button) {
+        button.textContent = "Hate";
+
+      },
+      Hate: function (button) {
+        button.textContent = "Love";
+      }
+    };
+    //
+    var actOnPostLove = function (event) {
+      var postId = event.target.dataset.postId;
+      console.log(postId)
+      var action = event.target.textContent.trim(); //will either be like or unlike
+      toggleButtonTextLove[action](event.target); //toggles the button to show the opposite
+      updatePostStatsLove[action](postId);
+      axios.post('/posts/' + postId + '/love', { action: action });
+    }
+
+
+    //Follow buttons functionality
+
+    var toggleFollowText = {
+      Follow: function (button) {
+        button.textContent = "Followed";
+        button.disabled = true;
+      }
+    };
+
+    var actFollow = function (event) {
+      //{{!-- var postId = event.target.dataset.postId; --}}
+      var userId = event.target.dataset.id; //gets userId from data-id
+      //console.log(userId) 
+      var mainuser = document.getElementById('mainuser').innerHTML.trim() //gets the main username from the welcome page
+      //console.log(mainuser)
+      toggleFollowText["Follow"](event.target); //toggles the button to show the opposite
+      axios.post('/posts/' + userId + '/befriend', { action: "Follow", friend: userId, main: mainuser }); //create a post route - this route is dodge
+    }     //params are passed into the req body through the curly braces as instance vars?
+
+  </script>
+
+</head>
+
+<body>
+  <div>
+    <div class="profile" style="display: flex; justify-content: center; align-items: center;">
+      {{#if user.profilepic }}
+      <img src="{{user.profilepic}}" width="50" height="50">
+      {{else}}
+      <img id="usericon" src="https://visualpharm.com/assets/422/Cat%20Profile-595b40b65ba036ed117d3d6b.svg" alt="User">
+      {{/if}}
+      <span class="author"></span>
+      <h1 style="display:none;" id="mainuser">{{user.username}}</h1>
+      <p style="font-size:40px;">Welcome {{user.username}}
+      </p>
+    </div>
+    
+    <br>
+
+    <div class="container-fluid text-center">
+      {{!-- for each of the posts array, the message and date is posted and a button
+      rendered - the button has a onclick method that runs a method from the script,
+      each button has a data-post-id attached in which the posts.id is attached to.
+      the item with likes count is given an idea which is also associated with posts.id --}}
+      {{#each posts }}
+      <div class="box">
+      <div class="posts" style="margin-left: 50px">
+        <div>
+          <b>{{ this.message }}</b><br>
+          <div class="photoURL">
+
+            {{#if this.image }}
+            <img src="{{this.image}}" width="100" height="100" alt="image not found!">
+            {{else}}
+            <p></p>
+            {{/if}}
+
+          </div>
+          <span id="author-{{ this.author }}">
+            <h3>{{ this.author }}</h3>
+            {{!-- {{#if }}
+            <img src="{{this.}}" width="100" height="100" alt="image not found!">
+            {{else}}
+            <p></p>
+            {{/if}} --}}
+          </span>
+          <br>
+          <button data-id="{{ this.author }}" class="fav-button" onclick="actFollow(event)">Follow</button><br>
+          <small>{{ this.date }}</small>
+        </div>
+        {{!-- adds a little meow with the like counter, associated with this.id and showing this.likes_count --}}
+        <div class="row" style="margin-left:30px">
+          
+        </div>
+        <span style="margin-left: -40px;"> &#x1F63B;</span>
+        <span id="likes-count-{{ this.id }}">{{ this.likes }}</span>
+
+        <span style="margin-left:60px">&#128062;</span>
+        <span id="loves-count-{{ this.id }}">{{ this.loves }}</span>
+
+      </div>
+      {{!-- set the data-post-id as posts.id onto this button --}}
+
+      <div id="button-div">
+        <button style="display: flex; justify-content: center;" ><button style="margin-left:30px" onclick="actOnPost(event);" data-post-id="{{ this.id }}" class="like-button">Like</button>
+        <button style="margin-left:30px" onclick="actOnPostLove(event);" data-post-id="{{ this.id }}" class="love-button">Love</button>
+      </div>
+    </div>
+  </div>
+  {{!-- adds a little meow with the like counter, associated with this.id and showing this.likes_count --}}
+  {{!-- set the data-post-id as posts.id onto this button --}}
+  <br>
+  <div id="post-comments" style="font-size: 18px">
+    <h5> Comments: </h5>
+    {{#each this.comments}}
+    <div class="comment-container" style="text-align:center">
+    "{{this.comment}}" - <small>{{this.user}}, {{this.date}}</small></div>
+    
+    {{/each}}
+  </div>
+  <br>
+  <div style="display: flex; justify-content: center;">
+  <form id="comment-form" method="post" action="/posts/{{ this.id }}/comment">
+    <input
+      style="height:50px; width:200px; display: inline-block; margin-left: 30px; border: 2px solid black; border-radius: 20px;"
+      type="text" id="comment-" +{{ this.id }} name="comment" placeholder=" Enter your comment here">
+
+    <button class="submit-button" type="submit">Submit</button>
+  </form>
+
+  </div>
+
+
+
+  <br>
   {{/each}}
-</ul>
+  </div>
+  </div>
+<br>
+
+<div style="display: flex; align-items: center; justify-content: center;">
+  <a class="new-post-link" href="/posts/new">New post</a></div>
+</body>
 
-<a class="new-post-link" href="/posts/new">New post</a>
+</html>
\ No newline at end of file
diff --git a/views/posts/new.hbs b/views/posts/new.hbs
index a80541cdf..5a05a5e96 100644
--- a/views/posts/new.hbs
+++ b/views/posts/new.hbs
@@ -1,5 +1,18 @@
+<html>
+<head>
+
+</head>
+  <body>
+
 <form id="new-post-form" action="/posts" method="post">
   <label for="message">Message: </label>
   <input id="message" type="text" name="message" value="">
+  
+  <label for="photo-upload">Photo URL: </label>
+  <input id="photoURL" type="text" name="photoURL" value="">
   <input type="submit" value="Submit">
 </form>
+
+  </body>
+
+</html>
diff --git a/views/sessions/new.hbs b/views/sessions/new.hbs
index 86de20b62..892e606c2 100644
--- a/views/sessions/new.hbs
+++ b/views/sessions/new.hbs
@@ -1,7 +1,52 @@
+<html>
+
+<head>
+
+</head>
+
+<body>
+<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+<p>Please log in or sign up</p>
+<br>
+
+<div class="box">
+<br>
 <form id="new-session-form" action="/sessions" method="post">
-  <label for="email">Email: </label>
-  <input id="email" type="email" name="email" value="">
-  <label for="password">Password: </label>
-  <input id="password" type="password" name="password" value="">
-  <input id="submit" type="submit" value="Submit">
-</form>
+  
+  <input id="email" type="email" name="email" value="" type="text" placeholder="Enter your e-mail">
+  <br>
+  
+  <input id="password" type="password" name="password" value="" type="text" placeholder="Password"> <br> <br>
+  {{#if accountCreated}}
+  Account created! Please sign in.
+  {{/if}}
+  {{#if emailExists}}
+  Email already exists! <br>
+  Please try to log in, or try to sign up with a different email.
+  {{/if}}
+  {{#if usernameExists}}
+  Username already exists! <br>
+  Please try to log in, or try to sign up with a different username.
+  {{/if}}
+  {{#if wronguser}}
+  User does not exist, please sign up!
+  {{/if}}
+  {{#if wrongpass}}
+  Password is incorrect, please try again.
+  {{/if}}
+  <br>
+  {{!-- password and user prompts for incorrect --}}
+  <br>
+  <br> <input id="submit" type="submit" value="Log in" style="position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+</form> <br>
+<form id="new-session-form" action="/users/new" method="get">
+<input id="submit" type="submit" value="Sign up" style="position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+</form> <br>
+{{!-- currently doesn't work needs to have a new route added with a form --}}
+<form id="new-session-form" action="/sessions" method="post">
+<input id="submit" type="submit" value="Forgot password" style="position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+</form><br>
+</div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/views/test.hbs b/views/test.hbs
new file mode 100644
index 000000000..17645b71e
--- /dev/null
+++ b/views/test.hbs
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>{{title}}</title>
+    <link rel='stylesheet' href='/stylesheets/style.css' />
+  </head>
+  <body>
+    <form action='/sessions?_method=DELETE' method='POST'>
+      <input type="submit" value="Log Out">
+    </form>
+    {{{body}}}
+  </body>
+</html>
diff --git a/views/users/new.hbs b/views/users/new.hbs
index 13e3b4fc1..325887948 100644
--- a/views/users/new.hbs
+++ b/views/users/new.hbs
@@ -1,7 +1,18 @@
+<html>
+<head>
+  
+</head>
+  <body>
 <form id="new-user-form" action="/users" method="post">
-  <label for="email">Email: </label>
   <input id="email" type="email" name="email" value="">
-  <label for="password">Password: </label>
+  <label for="email">Email: </label><br>
+  <input id="username" type="username" name="username" value="">
+  <label for="username">Username: </label><br>
   <input id="password" type="password" name="password" value="">
+  <label for="password">Password: </label><br>
+  <input id="profilepic" type="profilepic" name="profilepic" value="">
+  <label for="profilepic">Profile Pic URL --optional!</label><br>
   <input id="submit" type="submit" value="Submit">
 </form>
+</body>
+</html>
\ No newline at end of file