diff --git a/components/AddTask.js b/components/AddTask.js
index 9652adb..8851a93 100644
--- a/components/AddTask.js
+++ b/components/AddTask.js
@@ -1,14 +1,41 @@
+import { useState } from 'react'
+import axios from '../utils/axios'
+import { useAuth } from '../context/auth'
+import {toast} from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
+
+toast.configure()
 export default function AddTask() {
-  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.
-     */
+  const [Todotxt, setTodotxt] = useState("");
+  const { config,API_BASE_URL} = useAuth();
+  const addTask = (e) => {
+    e.preventDefault()
+    if (!Todotxt || Todotxt=="") {
+        toast.error("No task entered!",{position: toast.POSITION.BOTTOM_RIGHT});
+        return;
+    }
+    axios
+        .post(API_BASE_URL + "todo/create/",{ title: Todotxt },config)    
+        .then(function (response) {
+            axios
+            .get(API_BASE_URL + "todo/",config)
+            .then(function ({ data, status }) {
+                const newTodo = data[data.length - 1];
+                const taskNo = newTodo.id;
+                setTodotxt("");
+                toast.success('Task added',{position: toast.POSITION.BOTTOM_RIGHT})
+            });
+        })
+        .catch(function (err) {
+          toast.error("An error occurred!");
+          });
   }
+
   return (
     <div className='flex items-center max-w-sm mt-24'>
       <input
+        value={Todotxt}
+        onChange={(e)=>{setTodotxt(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'
diff --git a/components/LoginForm.js b/components/LoginForm.js
index fa28f9e..ab5ce19 100644
--- a/components/LoginForm.js
+++ b/components/LoginForm.js
@@ -1,12 +1,36 @@
+import axios from '../utils/axios';
+import { useAuth } from '../context/auth'
+import {toast} from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
+import { useEffect,useState } from 'react'
+
+toast.configure()
 export default function RegisterForm() {
-  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 { login,API_BASE_URL,setpagetype } = useAuth()
+  useEffect(()=>{setpagetype("LOGIN");return;},[])
+  const [user_name, setuser_name] = useState("");
+  const [user_pass, setuser_pass] = useState("");
+  const loginnow = () => {
+    if (user_name == "" || user_pass == "") {
+        toast.error("Please fill the empty fields.",{position: toast.POSITION.BOTTOM_RIGHT})
+        return;
+    }
+    setuser_name(user_name.trim());
+    toast.info("Checking credentials...",{position: toast.POSITION.BOTTOM_RIGHT})
+    axios
+        .post(API_BASE_URL + "auth/login/",{
+            username: user_name,
+            password: user_pass
+        })
+        .then(({ data, status }) => {
+            toast.success("Successfully logged in!",{position: toast.POSITION.BOTTOM_RIGHT})
+            localStorage.setItem("token", data.token);
+            login(data.token);
+        })
+        .catch((err) => {
+            toast.error("Cannot Login! :( Check credentials.",{position: toast.POSITION.BOTTOM_RIGHT})
+        });
+      }
 
   return (
     <div className='bg-grey-lighter min-h-screen flex flex-col'>
@@ -19,6 +43,8 @@ export default function RegisterForm() {
             name='inputUsername'
             id='inputUsername'
             placeholder='Username'
+            value={user_name}
+            onChange={(e)=>{setuser_name(e.target.value)}}
           />
 
           <input
@@ -27,12 +53,14 @@ export default function RegisterForm() {
             name='inputPassword'
             id='inputPassword'
             placeholder='Password'
+            value={user_pass}
+            onChange={(e)=>{setuser_pass(e.target.value)}}
           />
 
           <button
             type='submit'
             className='w-full text-center py-3 rounded bg-transparent text-green-500 hover:text-white hover:bg-green-500 border border-green-500 hover:border-transparent focus:outline-none my-1'
-            onClick={login}
+            onClick={loginnow}
           >
             Login
           </button>
diff --git a/components/Nav.js b/components/Nav.js
index e03cb0f..7169f84 100644
--- a/components/Nav.js
+++ b/components/Nav.js
@@ -1,15 +1,34 @@
-/* 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
- */
+import {useState,useEffect } from 'react'
+import {toast} from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
 
+toast.configure()
 export default function Nav() {
-  const { logout, profileName, avatarImage } = useAuth()
-
+  const { logout, profileName, avatarImage,pagetype,setpagetype,token } = useAuth();
+  const [showlogin, setShowlogin] = useState(false);
+  const [showregister, setShowregister] = useState(false);
+  const [showavtar, setShowavtar] = useState(true);
+  
+  function pagechange(){
+    if(pagetype=="HOME"){
+      setShowlogin(false);
+      setShowregister(false);
+      setShowavtar(true);
+    }
+    if(pagetype=="LOGIN"){
+      setShowlogin(false);
+      setShowregister(true);
+      setShowavtar(false);
+    }
+    if(pagetype=="REGISTER"){
+      setShowlogin(true);
+      setShowregister(false);
+      setShowavtar(false);
+    }
+  }
+  useEffect(() => {pagechange()},[pagetype]);
   return (
     <nav className='bg-blue-600'>
       <ul className='flex items-center justify-between p-5'>
@@ -23,14 +42,14 @@ export default function Nav() {
           </li>
         </ul>
         <ul className='flex'>
-          <li className='text-white mr-2'>
+          <li className='text-white mr-2' style ={{display: (showlogin?"":"none")}}>
             <Link href='/login'>Login</Link>
           </li>
-          <li className='text-white'>
+          <li className='text-white' style ={{display: (showregister?"":"none")}}>
             <Link href='/register'>Register</Link>
           </li>
         </ul>
-        <div className='inline-block relative w-28'>
+        <div className='inline-block relative w-28' style ={{display: (showavtar?"":"none")}}>
           <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} />
diff --git a/components/RegisterForm.js b/components/RegisterForm.js
index a6ef2e3..d91bfa9 100644
--- a/components/RegisterForm.js
+++ b/components/RegisterForm.js
@@ -1,11 +1,15 @@
-import React, { useState } from 'react'
+import React, { useState,useEffect } from 'react'
 import axios from '../utils/axios'
 import { useAuth } from '../context/auth'
 import { useRouter } from 'next/router'
+import {toast} from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
 
+toast.configure()
 export default function Register() {
-  const { setToken } = useAuth()
+  const { setpagetype,login } = useAuth()
   const router = useRouter()
+  useEffect(()=>{setpagetype("REGISTER");},[])
 
   const [firstName, setFirstName] = useState('')
   const [lastName, setLastName] = useState('')
@@ -27,11 +31,11 @@ export default function Register() {
       username === '' ||
       password === ''
     ) {
-      console.log('Please fill all the fields correctly.')
+      toast.error('Please fill all the fields correctly.',{position: toast.POSITION.BOTTOM_RIGHT})
       return false
     }
     if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
-      console.log('Please enter a valid email address.')
+      toast.error('Please enter a valid email address.',{position: toast.POSITION.BOTTOM_RIGHT})
       return false
     }
     return true
@@ -43,7 +47,7 @@ export default function Register() {
     if (
       registerFieldsAreValid(firstName, lastName, email, username, password)
     ) {
-      console.log('Please wait...')
+      toast.warning('Please wait...',{position: toast.POSITION.BOTTOM_RIGHT})
 
       const dataForApiRequest = {
         name: firstName + ' ' + lastName,
@@ -57,13 +61,11 @@ export default function Register() {
         dataForApiRequest,
       )
         .then(function ({ data, status }) {
-          setToken(data.token)
-          router.push('/')
+          login(data.token)
+          toast.success('Registered Successfully',{position: toast.POSITION.BOTTOM_RIGHT})
         })
         .catch(function (err) {
-          console.log(
-            'An account using same email or username is already created'
-          )
+          toast.warning('An account using same email or username is already created',{position: toast.POSITION.BOTTOM_RIGHT})
         })
     }
   }
diff --git a/components/TodoListItem.js b/components/TodoListItem.js
index 7965f3b..9f97556 100644
--- a/components/TodoListItem.js
+++ b/components/TodoListItem.js
@@ -1,55 +1,76 @@
-/* eslint-disable @next/next/no-img-element */
+import axios from '../utils/axios'
+import { useState } from 'react'
+import { useAuth } from '../context/auth'
+import {toast} from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
 
-export default function TodoListItem() {
+toast.configure()
+export default function TodoListItem(props) {
+  const {config,API_BASE_URL  } = useAuth()
+  const [Newdata, setNewdata] = useState(props.todo.title);
+  const [editnow, seteditnow] = useState(false);
   const editTask = (id) => {
-    /**
-     * @todo Complete this function.
-     * @todo 1. Update the dom accordingly
-     */
+    seteditnow(true);
   }
 
   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
+    .delete(API_BASE_URL + "todo/" + id + "/",config)
+    .then(function ({ data, status }) {
+        toast.success('Task deleted!',{position: toast.POSITION.BOTTOM_RIGHT})
+        props.onDelete(props.todo);
+    })
+    .catch(function (err) {
+      toast.error("An error occurred!");
+    });
   }
 
   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 (!Newdata) {
+      toast.warning("Please enter new task!",{position: toast.POSITION.BOTTOM_RIGHT});
+      return;
+    }
+    axios
+        .patch(API_BASE_URL + "todo/" + id + "/",{ title: Newdata },config)
+        .then(function ({ data, status }) {
+          toast.success('Task updated!',{position: toast.POSITION.BOTTOM_RIGHT})
+          seteditnow(false);
+        })
+        .catch(function (err) {
+          toast.error("An error occurred!");
+          });
+    
   }
-
+  
   return (
     <>
       <li className='border flex border-gray-500 rounded px-2 py-2 justify-between items-center mb-2'>
         <input
-          id='input-button-1'
+          id={"input-button-"+props.todo.id}
           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'
+          value={Newdata}
+          onChange={(e)=>{setNewdata(e.target.value)}}
+          style ={{display: (editnow?"":"none")}}
+          className='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'
         />
-        <div id='done-button-1' className='hideme'>
+        <div style ={{display: (editnow?"":"none")}} id={'done-button-'+props.todo.id}>
           <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.todo.id)}}
           >
             Done
           </button>
         </div>
-        <div id='task-1' className='todo-task  text-gray-600'>
-          Sample Task 1
+        <div id={'task-'+props.todo.id} style ={{display: (editnow?"none":"")}} className='todo-task  text-gray-600'>
+          {Newdata}
         </div>
-        <span id='task-actions-1' className=''>
+        <span id={'task-actions-'+props.todo.id} style ={{display: (editnow?"none":"")}} className=''>
           <button
             style={{ marginRight: '5px' }}
             type='button'
-            onClick={editTask(1)}
+            onClick={()=>{editTask(props.todo.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 +83,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.todo.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..38658ea 100644
--- a/context/auth.js
+++ b/context/auth.js
@@ -10,13 +10,35 @@ export const AuthProvider = ({ children }) => {
   const [profileName, setProfileName] = useState('')
   const [avatarImage, setAvatarImage] = useState('#')
   const [cookies, setCookies, removeCookies] = useCookies(['auth'])
-  const token = cookies.token
-
+  const [pagetype,setpagetype] = useState("HOME"); 
+  const token = cookies.token;
+  const API_BASE_URL = 'https://todo-app-csoc.herokuapp.com/';
+  const config={
+    headers: {
+        Authorization: "Token " + cookies.token
+    },
+  };
+  
   const setToken = (newToken) => setCookies('token', newToken, { path: '/' })
   const deleteToken = () => removeCookies('token')
+  
+  const loginpage=()=>{
+    const text= window.location.href;
+    if(text.indexOf("/login")===-1) router.push('/login')
+  }
+  const homepage=()=>{
+    const text= window.location.href;
+    if(text.indexOf("/login")>-1 || text.indexOf("/register")>-1) router.push('/')
+  }
   const logout = () => {
-    deleteToken()
-    router.push('/login')
+    deleteToken();
+    const text= window.location.href;
+    if(text.indexOf("/login")===-1) router.push('/login');
+  }
+  const login = (newtoken) => {
+    setToken(newtoken);
+    const text= window.location.href;
+    if(text.indexOf("/login")>-1 || text.indexOf("/register")>-1) window.location.href='/';
   }
 
   useEffect(() => {
@@ -52,6 +74,13 @@ export const AuthProvider = ({ children }) => {
         avatarImage,
         setAvatarImage,
         logout,
+        login,
+        loginpage,
+        homepage,
+        pagetype,
+        setpagetype,
+        API_BASE_URL,
+        config,
       }}
     >
       {children}
@@ -59,4 +88,4 @@ export const AuthProvider = ({ children }) => {
   )
 }
 
-export const useAuth = () => useContext(AuthContext)
+export const useAuth = () => useContext(AuthContext);
diff --git a/middlewares/auth_required.js b/middlewares/auth_required.js
index 7f5e7bc..623e0b0 100644
--- a/middlewares/auth_required.js
+++ b/middlewares/auth_required.js
@@ -1,3 +1,20 @@
-/***
- * @todo Redirect the user to login page if token is not present.
- */
+import {useEffect} from 'react';
+import { useAuth } from '../context/auth'
+import { Authorized } from './no_auth_required'
+import {toast} from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
+
+toast.configure()
+export function NotAuthorized(token){
+    const { loginpage,homepage,setpagetype } = useAuth();
+    useEffect(() => {
+        if (!token) {
+            toast.info("Login to continue.....",{position: toast.POSITION.BOTTOM_RIGHT} );
+            loginpage();
+        }
+        else{
+            toast.success("Welcome!!!",{position: toast.POSITION.BOTTOM_RIGHT} );
+            Authorized(homepage,token,setpagetype);
+        }
+    },[token]);
+}
diff --git a/middlewares/no_auth_required.js b/middlewares/no_auth_required.js
index 82558d4..de23121 100644
--- a/middlewares/no_auth_required.js
+++ b/middlewares/no_auth_required.js
@@ -1,3 +1,7 @@
-/***
- * @todo Redirect the user to main page if token is present.
- */
\ No newline at end of file
+
+export function Authorized(homepage,token,setpagetype){
+ if (token) {
+   setpagetype("HOME");
+   homepage();
+ }
+}
diff --git a/package.json b/package.json
index 45c9c27..af52139 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": "^7.0.4",
     "tailwindcss": "^2.2.2"
   },
   "devDependencies": {
diff --git a/pages/_app.js b/pages/_app.js
index 9fc71da..2a19c3f 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -6,7 +6,7 @@ function MyApp({ Component, pageProps }) {
   return (
     <AuthProvider>
       <Nav />
-      <Component {...pageProps} />
+      <Component {...pageProps}/>
     </AuthProvider>
   )
 }
diff --git a/pages/index.js b/pages/index.js
index c3c9134..4de8c8e 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -3,20 +3,33 @@ import AddTask from '../components/AddTask'
 import { useEffect, useState } from 'react'
 import axios from '../utils/axios'
 import { useAuth } from '../context/auth'
+import { NotAuthorized } from '../middlewares/auth_required'
+import { green } from 'ansi-colors'
 
 export default function Home() {
-  const { token } = useAuth()
+  const { token,config,API_BASE_URL  } = useAuth()
   const [tasks, setTasks] = useState([])
-
+  NotAuthorized(token);
   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
+      .get(API_BASE_URL + "todo/", config)
+      .then(function (response) {
+        const { data } = response;
+        setTasks(data);
+      });
+    }
+  useEffect(()=>{
+      if(token) getTasks();
+      return ;
+    },[tasks]);
+    
+  const onDelete = (todo) => {
+    setTasks(tasks.filter((e) => {
+      return e !== todo;
+    }))
   }
-
   return (
+    <>
     <div>
       <center>
         <AddTask />
@@ -24,9 +37,14 @@ export default function Home() {
           <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.length === 0 ? <h4>No tasks to display!</h4> :
+            tasks.map((task) => {
+              return (<TodoListItem todo={task} key={task.id} onDelete={onDelete}/>)
+            })
+          }
         </ul>
       </center>
     </div>
+    </>
   )
 }
diff --git a/pages/login.js b/pages/login.js
index 5f2bbe0..57a18f4 100644
--- a/pages/login.js
+++ b/pages/login.js
@@ -2,8 +2,10 @@ import LoginForm from '../components/LoginForm'
 
 export default function Login() {
   return (
+    <>
     <div>
       <LoginForm />
     </div>
+    </>
   )
 }
diff --git a/yarn.lock b/yarn.lock
index 11dbcb7..42f2b01 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -720,6 +720,11 @@ classnames@2.2.6:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
 
+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 color-convert@^1.9.0, color-convert@^1.9.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -2803,6 +2808,13 @@ react-refresh@0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-toastify@^7.0.4:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-7.0.4.tgz#7d0b743f2b96f65754264ca6eae31911a82378db"
+  integrity sha512-Rol7+Cn39hZp5hQ/k6CbMNE2CKYV9E5OQdC/hBLtIQU2xz7DdAm7xil4NITQTHR6zEbE5RVFbpgSwTD7xRGLeQ==
+  dependencies:
+    clsx "^1.1.1"
+
 react@17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"