diff --git a/.gitignore b/.gitignore
index 3f8e1d990..ea04d7c5a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
-.vscode/*
\ No newline at end of file
+.vscode/*
+config/.env
\ No newline at end of file
diff --git a/config/.env b/config/.env
deleted file mode 100644
index dbe126e0a..000000000
--- a/config/.env
+++ /dev/null
@@ -1,2 +0,0 @@
-PORT = 2121
-DB_STRING = mongodb+srv://demo:demo@cluster0.hcds1.mongodb.net/todos?retryWrites=true&w=majority
\ No newline at end of file
diff --git a/controllers/todos.js b/controllers/todos.js
index b10950f93..9d747b6ab 100644
--- a/controllers/todos.js
+++ b/controllers/todos.js
@@ -2,9 +2,9 @@ const Todo = require('../models/Todo')
 
 module.exports = {
     getTodos: async (req,res)=>{
-        console.log(req.user)
+        console.log(req.user)// gets the todos of the just the user logged in. The .user property comes from passport
         try{
-            const todoItems = await Todo.find({userId:req.user.id})
+            const todoItems = await Todo.find({userId:req.user.id})//This goes to the database and finds the todos that matches the user id of the logged in user. Todo is capitalized because thats the name of the model file.
             const itemsLeft = await Todo.countDocuments({userId:req.user.id,completed: false})
             res.render('todos.ejs', {todos: todoItems, left: itemsLeft, user: req.user})
         }catch(err){
diff --git a/middleware/auth.js b/middleware/auth.js
index 8b92a4620..c2f529a62 100644
--- a/middleware/auth.js
+++ b/middleware/auth.js
@@ -1,9 +1,9 @@
 module.exports = {
     ensureAuth: function (req, res, next) {
-      if (req.isAuthenticated()) {
+      if (req.isAuthenticated()) { //checks to see if there was a logged in user. .isAuthenticated comes from passport.
         return next()
       } else {
-        res.redirect('/')
+        res.redirect('/')// if the user is not logged in, return user to main page.
       }
     }
   }
diff --git a/models/Todo.js b/models/Todo.js
index 8698f6900..07af8cc05 100644
--- a/models/Todo.js
+++ b/models/Todo.js
@@ -1,4 +1,4 @@
-const mongoose = require('mongoose')
+const mongoose = require('mongoose')// Talks to the database.
 
 const TodoSchema = new mongoose.Schema({
   todo: {
@@ -12,7 +12,11 @@ const TodoSchema = new mongoose.Schema({
   userId: {
     type: String,
     required: true
+  },
+  dueDate: {
+    type: String,
+    required: true
   }
-})
+})// this model is used to talk to the database
 
-module.exports = mongoose.model('Todo', TodoSchema)
+module.exports = mongoose.model('Todo', TodoSchema)//used in the todos controller.
diff --git a/package-lock.json b/package-lock.json
index f5d8debf0..092ffd806 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "todo-mvc-auth-local",
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
diff --git a/public/css/normalize.css b/public/css/normalize.css
new file mode 100644
index 000000000..8c331ec42
--- /dev/null
+++ b/public/css/normalize.css
@@ -0,0 +1,350 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+  
+  /* Sections
+     ========================================================================== */
+  
+  /**
+   * Remove the margin in all browsers.
+   */
+  
+  body {
+    margin: 0;
+  }
+  
+  /**
+   * Render the `main` element consistently in IE.
+   */
+  
+  main {
+    display: block;
+  }
+  
+  /**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+  
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+  
+  /* Grouping content
+     ========================================================================== */
+  
+  /**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+  
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /* Text-level semantics
+     ========================================================================== */
+  
+  /**
+   * Remove the gray background on active links in IE 10.
+   */
+  
+  a {
+    background-color: transparent;
+  }
+  
+  /**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+  
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+  
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+  
+  b,
+  strong {
+    font-weight: bolder;
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /**
+   * Add the correct font size in all browsers.
+   */
+  
+  small {
+    font-size: 80%;
+  }
+  
+  /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+  
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  
+  sub {
+    bottom: -0.25em;
+  }
+  
+  sup {
+    top: -0.5em;
+  }
+  
+  /* Embedded content
+     ========================================================================== */
+  
+  /**
+   * Remove the border on images inside links in IE 10.
+   */
+  
+  img {
+    border-style: none;
+  }
+  
+  /* Forms
+     ========================================================================== */
+  
+  /**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+  
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+  
+  /**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+  
+  button,
+  input { /* 1 */
+    overflow: visible;
+  }
+  
+  /**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+  
+  button,
+  select { /* 1 */
+    text-transform: none;
+  }
+  
+  /**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+  
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+  
+  /**
+   * Remove the inner border and padding in Firefox.
+   */
+  
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+  
+  /**
+   * Restore the focus styles unset by the previous rule.
+   */
+  
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+  
+  /**
+   * Correct the padding in Firefox.
+   */
+  
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+  
+  /**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+  
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
+  
+  /**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+  
+  progress {
+    vertical-align: baseline;
+  }
+  
+  /**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+  
+  textarea {
+    overflow: auto;
+  }
+  
+  /**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+  
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+  
+  /**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+  
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+  
+  /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+  
+  [type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+  
+  /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+  
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  
+  /**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+  
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+  
+  /* Interactive
+     ========================================================================== */
+  
+  /*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+  
+  details {
+    display: block;
+  }
+  
+  /*
+   * Add the correct display in all browsers.
+   */
+  
+  summary {
+    display: list-item;
+  }
+  
+  /* Misc
+     ========================================================================== */
+  
+  /**
+   * Add the correct display in IE 10+.
+   */
+  
+  template {
+    display: none;
+  }
+  
+  /**
+   * Add the correct display in IE 10.
+   */
+  
+  [hidden] {
+    display: none;
+  }
+  
\ No newline at end of file
diff --git a/public/css/reset.css b/public/css/reset.css
new file mode 100644
index 000000000..5bc7dcdc4
--- /dev/null
+++ b/public/css/reset.css
@@ -0,0 +1,47 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
diff --git a/public/css/style.css b/public/css/style.css
index fbd6b929e..cc4eddb0c 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1,10 +1,394 @@
-h1{
-    color: red;
+
+.body{
+    margin:0;
+    height:100vh;
+    width:100vw;
+    background-color: rgb(157, 113, 232);
+    font-family: 'Poppins', sans-serif;
+}
+
+.login-signup-section, .login-form-section, .signup-form-section{
+    width:40vw;
+    height:70vh;
+    display:flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    background-color: rgba(245, 239, 255, 0.1);
+    border:rgb(245, 239, 255) 1px solid;
+    border-radius:30px;
+}
+
+
+a{
+    text-decoration: none;
+    color:black;
+    text-transform: capitalize;
+}
+
+.github-link{
+    color:rgb(245, 239, 255);
+}
+
+fieldset{
+    border:none;
+}
+
+/* ---------------------------------------- H1 HEADERS -------------------------------- */
+.index-header, .login-header, .signup-header, .todos-heading{
+    color:rgb(245, 239, 255);
+    text-align: center;
+    padding:10px;
+    font-size: 1.8rem;
+    font-family: 'Major Mono Display', monospace;
+}
+
+/* ------------------------------------LABELS---------------------------- */
+.login-email-label, .login-password-label,.signup-email-label, .signup-username-label{
+    width:100px;
+    display: inline-block;
+}
+
+
+/* ------------------------------------INPUTS---------------------------- */
+input[type="email"], input[type="password"], input[type="text"], input[type="date"]{
+    width:300px;
+    height:2rem;
+    font-size: 1.1rem;
+}
+
+/* ---------------------------------INDEX.EJS--------------------------------- */
+.index-body{
+    display:flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.login-signup{
+    width:70%;
+    height:3rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.login-signup a{
+    display:block;
+    font-weight: 600;
+    color:rgb(245, 239, 255) ;
+    border:rgb(245, 239, 255) 2px dashed;
+    border-radius: 20px;
+    width:40%;
+    height:100%;
+    background-color: rgba(30, 0, 78, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin:2%;
+}
+
+.login-signup a:hover{
+    background-color: rgba(245, 239, 255, 1);
+    color:rgb(115, 113, 252)
+}
+
+.github-link i{
+    font-size:4rem;
+}
+/* ---------------------------------LOGIN EJS--------------------------------- */
+.login-body{
+    display:flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+.login-button, .signup-submit-button{
+    background-color: rgba(30, 0, 78, 0.2);
+    border:rgb(245, 239, 255) 2px dashed;
+    border-radius: 20px;
+    padding:10px;
+    width:30%;
+    height:3rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color:rgb(245, 239, 255);
+}
+
+.login-button:hover{
+    background-color: rgba(245, 239, 255, 1);
+    color:rgb(115, 113, 252);
+    border:rgb(245, 239, 255) 2px solid;
+}
+
+
+
+
+/* ---------------------------------SIGNUP EJS--------------------------------- */
+
+.alert{
+    color:rgb(182, 2, 2);
+    margin:10px;
+    font-weight: 600;
+    font-size: 1.1rem;
+}
+
+.signup-body{
+    display:flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.signup-password-field{
+    display: flex;
+    flex-direction: column;
+    width:100px;
+    text-align: center;
+    height: 35%;
+    justify-content: space-evenly;
+}
+
+/* ---------------------------------TODOS EJS--------------------------------- */
+
+
+.todos-header{
+    display:flex;
+    height:15%;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+
+.todos-left-form{
+   display:flex;
+   flex-direction: column;
+   justify-content: space-between;
+   align-items: center;
+}
+
+.logout-button {
+    padding:20px;
+    display:block;
+    width: 100px;
+    padding: 10px;
+    text-align: center;
+    border:rgb(245, 239, 255) 2px dashed;
+    margin-right:50px;
+    color:rgb(245, 239, 255);
+    font-weight: 800;
+}
+
+.logout-button:hover, .todo-form input[type="submit"]:hover {
+    background-color: rgba(245, 239, 255, 1);
+    color:rgb(115, 113, 252);
+    border:rgb(245, 239, 255) 2px solid;
+}
+
+.todos-main{
+    width:100vw;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 50px;
+}
+
+.todos-section{
+    width:40vw;
+    aspect-ratio: 1;
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    background-color: rgba(245, 239, 255, 0.1);
+    border:rgb(245, 239, 255) 1px solid;
+    border-radius:30px;    
+    margin-bottom: 50px;
+}
+
+.todo-form{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.todos-list, .todos-counter{
+    color:rgb(245, 239, 255);
+}
+
+.todos-list li{
+    list-style-type: circle;
+    font-weight: 600;
+    font-size: 1.2rem;
+}
+
+.eachTodo{
+    display: flex;
+    flex-direction: column
+}
+
+.todos-list li .dueDate{
+    color:blue;
+}
+
+.todos-list li .del{
+    color:rgb(182, 2, 2);
+}
+
+.todo-form input[type="submit"]{
+    background-color: rgba(30, 0, 78, 0.2);
+    border:rgb(245, 239, 255) 2px dashed;
+    border-radius: 20px;
+    padding:10px;
+    width:30%;
+    height:3rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color:rgb(245, 239, 255);
+    margin: 20px 0;
+}
+
+/* ---------------------------LARGE SCREENS--------------------------- */   
+
+
+@media (max-width:1100px){
+/* -----------INDEX----------- */   
+.login-signup-section, .login-form-section, .signup-form-section, .todos-section {
+    width:50vw;
+}
+
+/* -----------LOGIN-----------*/
+fieldset {
+    border: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+/*-----------SIGNUP-----------*/
+
+
+    .signup-email-label, .signup-username-label{
+        width:100%;
+        display: inline-block;
+        text-align: center;
+    }    
+
+    .signup-email-field input[type="email"], .signup-password-field input[type="password"], .signup-username-field input[type="text"] {
+        width:300px;
+    }
+
+    .signup-email-field, .signup-username-field{
+        display:flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+
+}
+
+
+
+/* ---------------------------MEDIUM SCREENS--------------------------- */
+@media (max-width:760px){
+    .login-signup-section, .login-form-section, .signup-form-section, .todos-section {
+        width: 60vw;
+    }
+
+
+/*-----------LOGIN----------- */
+.login-email-section input[type="email"], .login-password-section input[type="password"]{
+    width:280px;
+}
+
+}
+
+
+
+/* ---------------------------SMALL SCREENS--------------------------- */
+@media (max-width:550px){
+    .login-signup-section, .login-form-section, .signup-form-section, .todos-section {
+        width: 75vw;
+    }
+
+/*-----------LOGIN----------- */
+.login-email-section input[type="email"], .login-password-section input[type="password"]{
+        max-width:250px;
+    }
+
+/*-----------TODOS----------- */
+.todo-form input[type="text"], .todo-form input[type="date"]{
+    max-width:230px;
+}
+
+.todo-form input[type="submit"] {
+    width:45%;
+}
+
+.todos-header {
+    justify-content: center;
+}
+
+/*-----------SIGNUP-----------*/
+.signup-email-field input[type="email"], .signup-password-field input[type="password"], .signup-username-field input[type="text"] {
+    width:200px;
+}
+}
+
+/* ---------------------------EXTRA SMALL SCREENS--------------------------- */
+
+@media (max-width:350px){
+
+.index-header, .login-header, .signup-header, .todos-heading{
+        font-size: 1.1rem;
+
+    }
+
+/*-----------INDEX----------- */
+
+
+.login-signup{
+    height: 8rem;
+    flex-direction: column;
+}
+
+.login-signup a {
+    width: 80%;
+}
+
+/*----------- LOGIN----------- */
+.login-email-section input[type="email"], .login-password-section input[type="password"]{
+    width:90%;
+}
+
+.login-button{
+    width: 70%;
+}
+
+/*-----------TODOS----------- */
+.todo-form input[type="text"], .todo-form input[type="date"]{
+    width:150px;
+}
+
+.todos-list, .todos-counter {
+    font-size:1rem;
+}
+
+.logout-button{
+    margin:0;
+}
+
+.todo-form input[type="submit"] {
+    width: 60%;
+}
+/*-----------SIGNUP-----------*/
+.signup-email-field input[type="email"], .signup-password-field input[type="password"], .signup-username-field input[type="text"] {
+    width:120px;
+}
+
+.signup-submit-button{
+    width:50%;
 }
-.completed{
-    text-decoration: line-through;
-    color: gray;
 }
-.not{
-    text-decoration: underline;
-}
\ No newline at end of file
diff --git a/public/js/main.js b/public/js/main.js
index b4cfee075..fec84bc89 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -66,4 +66,4 @@ async function markIncomplete(){
     }catch(err){
         console.log(err)
     }
-}
\ No newline at end of file
+}
diff --git a/views/index.ejs b/views/index.ejs
index 774fc9b53..d9c0bc119 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -4,11 +4,29 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+    <title>ToDo List</title>
+    <!-- Font awesome -->
+    <script src="https://kit.fontawesome.com/9f91d488b5.js" crossorigin="anonymous"></script>
+    <!-- Styles -->
+ 
+    <link rel="stylesheet" href="css/style.css">
 </head>
-<body>
-    <h1>Create Your VERY OWN Todolist!</h1>
-    <a href="/login"> Login</a>
-    <a href="/signup"> Signup</a>
+<header>
+    <div>
+        <a href="https://github.com/neverarockstar/todo-mvc-auth-local" class="github-link"><i class="fa-brands fa-github fa-2xl fa-flip" style="--fa-animation-duration: 5s;"></i></a>
+    </div>
+</header>
+<body class="body index-body">
+    <div class="login-signup-section">
+        <h1 class = "index-header">SUPER AMAZING TODO APP 3000</h1>
+        <div class="login-signup">
+            <a href="/login"> Login</a>
+            <a href="/signup"> Signup</a>
+        </div>
+    </div>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/views/login.ejs b/views/login.ejs
index 8c2479ce0..f7f923a9e 100644
--- a/views/login.ejs
+++ b/views/login.ejs
@@ -4,9 +4,14 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+    <title>Login</title>
 </head>
-<body>
+<body class="body login-body">
+
     <% if (locals.messages.errors) { %>
         <% messages.errors.forEach( el => { %>
             <div class="alert alert-danger"><%= el.msg %></div>
@@ -17,10 +22,17 @@
             <div class="alert alert-danger"><%= el.msg %></div>
         <% }) %>    
     <% } %>
-    <form action="/login" method="POST">
-        <input type="email" name="email" placeholder="Email">
-        <input type="password" name="password" placeholder="Password">
-        <input type="submit">
+    <form action="/login" method="POST" class="login-form-section">
+        <h1 class="login-header">Login</h1>
+        <fieldset class="login-email-section">
+            <label for="email" class="login-email-label">Email:</label>
+            <input type="email" name="email" placeholder="Email">            
+        </fieldset>
+        <fieldset class="login-password-section">
+            <label for="password" class="login-password-label">Password:</label>
+            <input type="password" name="password" placeholder="Password">            
+        </fieldset>
+
+        <input type="submit" class="login-button">
     </form>
 </body>
-</html>
\ No newline at end of file
diff --git a/views/signup.ejs b/views/signup.ejs
index 409d7045b..df3761a5d 100644
--- a/views/signup.ejs
+++ b/views/signup.ejs
@@ -4,20 +4,43 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+    <title>Sign Up!</title>
 </head>
-<body>
-    <% if (locals.messages.errors) { %>
-        <% messages.errors.forEach( el => { %>
-            <div class="alert alert-danger"><%= el.msg %></div>
-        <% }) %>    
-    <% } %>
-    <form action="/signup" method="POST">
-        <input type="text" name="userName" placeholder="User Name">
-        <input type="email" name="email" placeholder="Email">
-        <input type="password" name="password" placeholder="Password">
-        <input type="password" name="confirmPassword" placeholder="Confirm Password">
-        <input type="submit">
+<body class="body signup-body">
+    <h1 class="signup-header">Sign Up</h1>
+    <div>
+        <% if (locals.messages.errors) { %>
+            <% messages.errors.forEach( el => { %>
+                <div class="alert alert-danger"><%= el.msg %></div>
+            <% }) %>    
+        <% } %>  
+    </div>
+    <form action="/signup" method="POST" class="signup-form-section">
+        <fieldset class="signup-email-field"> 
+            <label for="email" class="signup-email-label">Email:</label>
+            <input type="email" name="email" placeholder="Email">
+        </fieldset>
+
+        <fieldset class="signup-username-field">
+            <label for="userName" class="signup-username-label">Username:</label>
+            <input type="text" name="userName" placeholder="User Name">
+        </fieldset>
+
+        <fieldset class="signup-password-field">
+            <div class="signup-password-label">
+                <label for="password" >Password:</label>
+            </div>
+            <div class="signup-passwords">
+                <input type="password" name="password" placeholder="Password">
+                <input type="password" name="confirmPassword" placeholder="Confirm Password"> 
+            </div>
+        </fieldset>
+
+        <input type="submit" class="signup-submit-button">
     </form>
 </body>
 </html>
\ No newline at end of file
diff --git a/views/todos.ejs b/views/todos.ejs
index d76747a08..5a141ed58 100644
--- a/views/todos.ejs
+++ b/views/todos.ejs
@@ -4,28 +4,47 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>TODO List</title>
     <link rel="stylesheet" href="css/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
 </head>
-<body>
-    <h1>Todos</h1>
-    <ul>
-    <% todos.forEach( el => { %>
-            <li class='todoItem' data-id='<%=el._id%>'>
-                <span class='<%= el.completed === true ? 'completed' : 'not'%>'><%= el.todo %></span>
-                <span class='del'> Delete </span>
-            </li>
-    <% }) %>    
-    </ul>
+<body class="body todos-body">
+    <header class="todos-header">
+        <a class="logout-button" href="/logout">Logout</a>
+    </header>
 
-    <h2><%= user.userName %> has <%= left %> things left to do.</h2>
-
-    <form action="/todos/createTodo" method='POST'>
-        <input type="text" placeholder="Enter Todo Item" name='todoItem'>
-        <input type="submit">
-    </form>
-
-    <a href="/logout">Logout</a>
+    <main class="todos-main">
+        <div class="todos-section">
+            <h1 class="todos-heading">Todos</h1>
+            <div class="todos-list-section">
+                <ul class="todos-list">
+                <% todos.forEach( el => { %>
+                        <li class='todoItem' data-id='<%=el._id%>'>
+                            <div class="eachTodo">
+                                <span class='<%= el.completed === true ? 'completed' : 'not'%>'><%= el.todo %></span>
+                                <div class="due-delete">
+                                    <span class="dueDate">Due Date: <%= el.dueDate %></span>
+                                    <span class='del'> Delete </span>
+                                </div>
+                            </div>
+                        </li>
+                <% }) %>    
+                </ul>
+            </div>
+            <div class="todos-left-form">
+                <h2 class="todos-counter"><%= user.userName %> has <%= left %> things left to do </h2>
+                <form action="/todos/createTodo" method='POST' class="todo-form">
+                    <input type="text" placeholder="Enter Todo Item" name='todoItem'>
+                    <input type="date" name="dueDate">
+                    <input type="submit">
+                </form> 
+            </div>
+        </div>        
+    </main>
+    
+    
 
     <script src="js/main.js"></script>
 </body>