diff --git a/components/AddTask.js b/components/AddTask.js
index 9652adb..7e0a31e 100644
--- a/components/AddTask.js
+++ b/components/AddTask.js
@@ -1,17 +1,55 @@
+import TodoListItem from '../components/TodoListItem'
+import { useEffect, useState } from 'react'
+import axios from '../utils/axios'
+import { useAuth } from '../context/auth'
+import { API_URL }from '../utils/constants'
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+export function displaySuccessToast(message) {
+  toast.success(message);
+}
+export function displayWarnToast(message) {
+  toast.warn(message);
+}
+
+export function displayErrorToast(message) {
+  toast.error(message);
+}
 export default function AddTask() {
+  const {token} = useAuth();
+  const [task, setTask] = useState("")
   const addTask = () => {
-    /**
-     * @todo Complete this function.
-     * @todo 1. Send the request to add the task to the backend server.
-     * @todo 2. Add the task in the dom.
-     */
+    if (task==""){
+      displayWarnToast("Task is empty!!");
+    }
+    else{
+      axios({
+          headers: {
+            Authorization: 'Token ' + token
+          },
+          url: API_URL + "todo/create/",
+          method: 'POST',
+          data: {
+            title: task
+          },
+      }).then(res => {
+          displaySuccessToast("Task added!!!");
+          setTask("");
+          props.displayTasks();
+          
+      }).catch(function (err) {
+      })
+    }
   }
   return (
     <div className='flex items-center max-w-sm mt-24'>
       <input
+        onChange={(e)=>setTask(e.target.value)}
         type='text'
         className='todo-add-task-input px-4 py-2 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:ring w-full'
         placeholder='Enter Task'
+        value={task}
       />
       <button
         type='button'
diff --git a/components/LoginForm.js b/components/LoginForm.js
index fa28f9e..f07898a 100644
--- a/components/LoginForm.js
+++ b/components/LoginForm.js
@@ -1,32 +1,90 @@
+import React from "react";
+import axios from '../utils/axios'
+import { useAuth } from '../context/auth'
+import { useRouter } from 'next/router'
+import  noAuthRequired  from "../middlewares/no_auth_required";
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+const BASE_URL = "todo-app-csoc.herokuapp.com/" ;
+
 export default function RegisterForm() {
+  const router = useRouter();
+  const { setToken } = useAuth();
+
+  const [loginData, setLoginData] = React.useState({
+    inputUsername: "",
+    inputPassword: ""
+  })
+
+  function handleChange(event){
+    const {name, value} = event.target;
+    setLoginData(prev => {
+      return {
+        ...prev,
+        [name] : value
+      }
+    })
+  }
+
+  noAuthRequired();
+
   const login = () => {
-    /***
-     * @todo Complete this function.
-     * @todo 1. Write code for form validation.
-     * @todo 2. Fetch the auth token from backend and login the user.
-     * @todo 3. Set the token in the context (See context/auth.js)
-     */
+    
+    const userData = {
+      username: loginData.inputUsername,
+      password: loginData.inputPassword
+    }
+    if(userData.username==="" || userData.password===""){
+      toast.warn("Enter username or password",{position: "top-center"});
+      return;
+    }
+
+    axios({
+        url: "auth/login/",
+        method: 'POST',
+        data: userData,
+    }).then(res => {
+        toast.success("Login Successfull!!!",{position: "top-center"});
+        const authToken = res.data.token;
+        setToken(authToken)
+        router.push('/error', '/');            
+        
+    }).catch(function (err) {
+        // console.log(err);
+        toast.error("Enter correct Username Or Password!!!",{position: "top-center"});
+        setLoginData({
+          inputUsername: "",
+          inputPassword: ""
+        })
+    })
+    
   }
 
   return (
+    <>
     <div className='bg-grey-lighter min-h-screen flex flex-col'>
       <div className='container max-w-sm mx-auto flex-1 flex flex-col items-center justify-center px-2'>
         <div className='bg-white px-6 py-8 rounded shadow-md text-black w-full'>
           <h1 className='mb-8 text-3xl text-center'>Login</h1>
           <input
+            onChange={handleChange}
             type='text'
             className='block border border-grey-light w-full p-3 rounded mb-4'
             name='inputUsername'
             id='inputUsername'
             placeholder='Username'
+            value={loginData.inputUsername}
           />
 
           <input
+            onChange={handleChange}
             type='password'
             className='block border border-grey-light w-full p-3 rounded mb-4'
             name='inputPassword'
             id='inputPassword'
             placeholder='Password'
+            value={loginData.inputPassword}
           />
 
           <button
@@ -39,5 +97,8 @@ export default function RegisterForm() {
         </div>
       </div>
     </div>
+    <ToastContainer/>
+       </>
   )
 }
+
diff --git a/components/Nav.js b/components/Nav.js
index e03cb0f..4a4db6b 100644
--- a/components/Nav.js
+++ b/components/Nav.js
@@ -1,14 +1,9 @@
-/* eslint-disable jsx-a11y/alt-text */
-/* eslint-disable @next/next/no-img-element */
 import Link from 'next/link'
 import { useAuth } from '../context/auth'
-/**
- *
- * @todo Condtionally render login/register and Profile name in NavBar
- */
+
 
 export default function Nav() {
-  const { logout, profileName, avatarImage } = useAuth()
+  const { logout, profileName, avatarImage, token } = useAuth()
 
   return (
     <nav className='bg-blue-600'>
@@ -22,19 +17,22 @@ export default function Nav() {
             </Link>
           </li>
         </ul>
+        {token===undefined ? 
         <ul className='flex'>
           <li className='text-white mr-2'>
             <Link href='/login'>Login</Link>
           </li>
+
           <li className='text-white'>
             <Link href='/register'>Register</Link>
-          </li>
-        </ul>
+          </li>        
+        </ul> :
         <div className='inline-block relative w-28'>
           <div className='group inline-block relative'>
+           
             <button className='bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded inline-flex items-center'>
-              <img src={avatarImage} />
-              <span className='mr-1'>{profileName}</span>
+              <img src={token!=undefined ? avatarImage : null} />
+              <span className='mr-1'>{token!=undefined ? profileName : null}</span>
               <svg
                 className='fill-current h-4 w-4'
                 xmlns='http://www.w3.org/2000/svg'
@@ -44,6 +42,7 @@ export default function Nav() {
               </svg>
             </button>
             <ul className='absolute hidden text-gray-700 pt-1 group-hover:block'>
+              
               <li className=''>
                 <a
                   className='rounded-b bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap'
@@ -53,9 +52,10 @@ export default function Nav() {
                   Logout
                 </a>
               </li>
+              
             </ul>
           </div>
-        </div>
+        </div>}
       </ul>
     </nav>
   )
diff --git a/components/RegisterForm.js b/components/RegisterForm.js
index a6ef2e3..1b4221e 100644
--- a/components/RegisterForm.js
+++ b/components/RegisterForm.js
@@ -2,6 +2,8 @@ import React, { useState } from 'react'
 import axios from '../utils/axios'
 import { useAuth } from '../context/auth'
 import { useRouter } from 'next/router'
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 export default function Register() {
   const { setToken } = useAuth()
@@ -27,11 +29,11 @@ export default function Register() {
       username === '' ||
       password === ''
     ) {
-      console.log('Please fill all the fields correctly.')
+      toast.warn("Please fill all the fields correctly.",{position: "top-center"});
       return false
     }
     if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
-      console.log('Please enter a valid email address.')
+      toast.warn("Please enter a valid email address.",{position: "top-center"})
       return false
     }
     return true
@@ -43,7 +45,7 @@ export default function Register() {
     if (
       registerFieldsAreValid(firstName, lastName, email, username, password)
     ) {
-      console.log('Please wait...')
+      toast.info('Please wait...',{position: "top-center"})
 
       const dataForApiRequest = {
         name: firstName + ' ' + lastName,
@@ -61,14 +63,16 @@ export default function Register() {
           router.push('/')
         })
         .catch(function (err) {
-          console.log(
-            'An account using same email or username is already created'
+          toast.error(
+            "An account using same email or username is already created",{position: "top-center"}
           )
         })
     }
   }
 
   return (
+    <>
+    <ToastContainer/>
     <div className='bg-grey-lighter min-h-screen flex flex-col'>
       <div className='container max-w-sm mx-auto flex-1 flex flex-col items-center justify-center px-2'>
         <div className='bg-white px-6 py-8 rounded shadow-md text-black w-full'>
@@ -132,5 +136,6 @@ export default function Register() {
         </div>
       </div>
     </div>
+   </>
   )
 }
diff --git a/components/TodoListItem.js b/components/TodoListItem.js
index 7965f3b..426a8b8 100644
--- a/components/TodoListItem.js
+++ b/components/TodoListItem.js
@@ -1,55 +1,97 @@
-/* eslint-disable @next/next/no-img-element */
+import React, {useState} from "react"
+import { useAuth } from '../context/auth'
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import axios from '../utils/axios'
+import { API_URL } from '../utils/constants'
+
+export default function TodoListItem(props) {
+  const [task, setTask] = useState(props.task)
+  const {token} = useAuth()
+
+  const inputId = "input-button-"+props.id;
+  const doneId = "done-button-"+props.id;
+  const taskId = "task-"+props.id;
+  const taskActionsId = "task-actions-"+props.id;
 
-export default function TodoListItem() {
   const editTask = (id) => {
-    /**
-     * @todo Complete this function.
-     * @todo 1. Update the dom accordingly
-     */
+    document.getElementById("input-button-"+id).classList.remove("hideme");
+    document.getElementById("done-button-"+id).classList.remove("hideme");
+    document.getElementById("task-"+id).classList.add("hideme");
+    document.getElementById("task-actions-"+id).classList.add("hideme");
   }
 
   const deleteTask = (id) => {
-    /**
-     * @todo Complete this function.
-     * @todo 1. Send the request to delete the task to the backend server.
-     * @todo 2. Remove the task from the dom.
-     */
+    axios({
+        headers: {
+          Authorization: 'Token ' + token
+        },
+        url: API_URL + 'todo/' + id + '/',
+        method: 'DELETE',
+    }).then(() => {
+        toast.success("Task has been deleted",{position: "top-center"});
+        props.displayTasks();
+    }).catch((err) => {
+        toast.warn("error",{position: "top-center"});
+    })
   }
 
   const updateTask = (id) => {
-    /**
-     * @todo Complete this function.
-     * @todo 1. Send the request to update the task to the backend server.
-     * @todo 2. Update the task in the dom.
-     */
+    if (task===""){
+      toast.warn("Task is empty!!",{position: "top-center"});
+    }
+    else{
+      axios({
+          headers: {
+            Authorization: 'Token ' + token
+          },
+          url: API_URL + 'todo/' + id + '/',
+          method: 'PUT',
+          data: {
+            title: task
+          },
+      }).then(() => {
+          toast.success("Todo has been updated...",{position: "top-center"});
+          document.getElementById("input-button-"+props.id).classList.add("hideme");
+          document.getElementById("done-button-"+props.id).classList.add("hideme");
+          document.getElementById("task-"+props.id).classList.remove("hideme");
+          document.getElementById("task-actions-"+props.id).classList.remove("hideme");
+          props.displayTasks();
+      }).catch(function (err) {
+          toast.warn("error",{position: "top-center"});
+      })
+    }
   }
 
   return (
     <>
+    <ToastContainer/>
       <li className='border flex border-gray-500 rounded px-2 py-2 justify-between items-center mb-2'>
         <input
-          id='input-button-1'
+          onChange={(e)=>setTask(e.target.value)}
+          id={inputId}
           type='text'
           className='hideme appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring  todo-edit-task-input'
           placeholder='Edit The Task'
+          value={task}
         />
-        <div id='done-button-1' className='hideme'>
+        <div id={doneId} className='hideme'>
           <button
             className='bg-transparent hover:bg-gray-500 text-gray-700 text-sm  hover:text-white py-2 px-3 border border-gray-500 hover:border-transparent rounded todo-update-task'
             type='button'
-            onClick={updateTask(1)}
+            onClick={()=>updateTask(props.id)}
           >
             Done
           </button>
         </div>
-        <div id='task-1' className='todo-task  text-gray-600'>
-          Sample Task 1
+        <div id={taskId} className='todo-task  text-gray-600'>
+          {task}
         </div>
-        <span id='task-actions-1' className=''>
+        <span id={taskActionsId} className=''>
           <button
             style={{ marginRight: '5px' }}
             type='button'
-            onClick={editTask(1)}
+            onClick={()=>editTask(props.id)}
             className='bg-transparent hover:bg-yellow-500 hover:text-white border border-yellow-500 hover:border-transparent rounded px-2 py-2'
           >
             <img
@@ -62,7 +104,7 @@ export default function TodoListItem() {
           <button
             type='button'
             className='bg-transparent hover:bg-red-500 hover:text-white border border-red-500 hover:border-transparent rounded px-2 py-2'
-            onClick={deleteTask(1)}
+            onClick={()=>deleteTask(props.id)}
           >
             <img
               src='https://res.cloudinary.com/nishantwrp/image/upload/v1587486661/CSOC/delete.svg'
diff --git a/context/auth.js b/context/auth.js
index 646b10e..a9ed6d5 100644
--- a/context/auth.js
+++ b/context/auth.js
@@ -16,7 +16,7 @@ export const AuthProvider = ({ children }) => {
   const deleteToken = () => removeCookies('token')
   const logout = () => {
     deleteToken()
-    router.push('/login')
+    router.push('/error', '/login');
   }
 
   useEffect(() => {
diff --git a/middlewares/auth_required.js b/middlewares/auth_required.js
index 7f5e7bc..c2f20fd 100644
--- a/middlewares/auth_required.js
+++ b/middlewares/auth_required.js
@@ -1,3 +1,15 @@
-/***
- * @todo Redirect the user to login page if token is not present.
- */
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { useAuth } from "../context/auth"
+
+
+export default function authRequired(){
+    
+    const router = useRouter()
+    const { token } = useAuth()
+    useEffect(()=>{
+        if(token===undefined){
+            router.push('/login')
+        }
+    },[token])
+}
diff --git a/middlewares/no_auth_required.js b/middlewares/no_auth_required.js
index 82558d4..d3526ca 100644
--- a/middlewares/no_auth_required.js
+++ b/middlewares/no_auth_required.js
@@ -1,3 +1,14 @@
-/***
- * @todo Redirect the user to main page if token is present.
- */
\ No newline at end of file
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { useAuth } from "../context/auth";
+
+export default function noAuthRequired(){
+    const router = useRouter()
+    const { token } = useAuth()
+
+    useEffect(()=>{
+        if(token){
+            router.push('/')
+        }
+    },[token])
+}
diff --git a/package.json b/package.json
index 98b7437..cfc0a22 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "react": "17.0.2",
     "react-cookie": "^4.0.3",
     "react-dom": "17.0.2",
+    "react-toastify": "^9.0.5",
     "tailwindcss": "^2.2.2"
   },
   "devDependencies": {
diff --git a/pages/index.js b/pages/index.js
index c3c9134..b0315aa 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,32 +1,57 @@
 import TodoListItem from '../components/TodoListItem'
 import AddTask from '../components/AddTask'
+import { API_URL } from '../utils/constants'
+import  authRequired  from '../middlewares/auth_required'
 import { useEffect, useState } from 'react'
 import axios from '../utils/axios'
 import { useAuth } from '../context/auth'
 
+
 export default function Home() {
   const { token } = useAuth()
   const [tasks, setTasks] = useState([])
 
+
+  authRequired();
+
   function getTasks() {
-    /***
-     * @todo Fetch the tasks created by the user.
-     * @todo Set the tasks state and display them in the using TodoListItem component
-     * The user token can be accessed from the context using useAuth() from /context/auth.js
-     */
+
+    axios({
+        headers: {
+          Authorization: 'Token ' + token
+        },
+        url: API_URL + 'todo/',
+        method: 'GET',
+    }).then(function ({ data, status }) {
+        setTasks(data);
+        // console.log(data)
+    }).catch(err => {
+      console.log("error")
+    });
   }
+  
+    useEffect(() => {
+    if (token != undefined)getTasks();
+  }, [tasks])
+
+
 
   return (
+    <>
     <div>
       <center>
-        <AddTask />
+        <AddTask displayTasks={getTasks}/>
         <ul className='flex-col mt-9 max-w-sm mb-3 '>
           <span className='inline-block bg-blue-600 py-1 mb-2 px-9 text-sm text-white font-bold rounded-full '>
             Available Tasks
           </span>
-          <TodoListItem />
+          {tasks.map(task => {
+            return <TodoListItem key={task.id} id={task.id} task={task.title} displayTasks={getTasks} />
+          })}
         </ul>
       </center>
     </div>
+    
+    </>
   )
 }