diff --git a/components/AddTask.js b/components/AddTask.js
index 9652adb..babf554 100644
--- a/components/AddTask.js
+++ b/components/AddTask.js
@@ -1,5 +1,37 @@
-export default function AddTask() {
+import React, { useEffect, useState }from "react"
+import axios from "axios"
+import { useAuth } from '../context/auth'
+import { fuchsia } from "tailwindcss/colors";
+
+export default function AddTask(props) {
+  const [ newTask, setNewTask ] = useState('');
+  const {token} = useAuth();
+
   const addTask = () => {
+    if(newTask === ''){
+      console.log("Please enter task")
+    }
+    else{
+      const dataForApiRequest = {
+        newTask: newTask
+      }
+      const headersForApiRequest = {
+        headers: { Authorization: 'Token '+token }
+      }
+      axios.post(
+        "todo/create/", 
+        dataForApiRequest, 
+        headersForApiRequest
+      )
+      .then(res => {
+        setNewTask("");
+        props.displayTasks();
+        console.log("Task Added");
+      })
+      .catch(function(err){
+        console.log(err);
+      })
+    }
     /**
      * @todo Complete this function.
      * @todo 1. Send the request to add the task to the backend server.
@@ -12,6 +44,10 @@ export default function AddTask() {
         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'
+        onChange={(e) => {
+          setNewTask(e.target.value)
+        }}
+        value={newTask}
       />
       <button
         type='button'
diff --git a/components/LoginForm.js b/components/LoginForm.js
index fa28f9e..e3e5eab 100644
--- a/components/LoginForm.js
+++ b/components/LoginForm.js
@@ -1,12 +1,73 @@
+import React, { useRef, useState, useEffect} from "react";
+import axios from '../utils/axios'
+import { useAuth } from '../context/auth'
+import { useRouter } from 'next/router'
+import tokenNotPresent from "../middlewares/auth_required";
+import tokenPresent from "../middlewares/no_auth_required";
+
+
 export default function RegisterForm() {
-  const login = () => {
+  const { setToken } = useAuth()
+  const router = useRouter()
+  const userRef = useRef();
+  const errRef = useRef();
+
+  const [ username, setUsername ] = useState('');
+  const [ password, setPassword ] = useState('');
+  const [ errMsg, setErrMsg ] = useState('');
+  const [ success, setSuccess ] = useState(false);
+
+  const loginFieldsAreValid = (
+    user,
+    pwd
+  ) => {
+    if (
+      username === '' ||
+      password === ''
+    ) {
+      console.log('Please fill all the fields correctly.')
+      return false
+    }
+    return true
+  }
+
+  const login = (e) => {
+    e.preventDefault()
+
+    if(
+      loginFieldsAreValid(username, password)
+    ){console.log('Please wait...')
+
+    const dataForApiRequest = {
+      username: username,
+      password: password,
+    }
+
+    axios.post(
+      'auth/login/',
+      dataForApiRequest,
+    )
+      .then(function ({ data, status }) {
+        localStorage.setItem("token", data.token);
+        console.log("Logged in successfully")
+        setToken(data.token)
+        router.push('/')
+      
+      })
+      .catch(function (err) {
+        console.log(
+          'Invalid Credentials'
+        )
+      })
+  }
+
+}
     /***
      * @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)
      */
-  }
 
   return (
     <div className='bg-grey-lighter min-h-screen flex flex-col'>
@@ -19,6 +80,11 @@ export default function RegisterForm() {
             name='inputUsername'
             id='inputUsername'
             placeholder='Username'
+            ref={userRef}
+            autoComplete="off"
+            onChange={(e) => setUsername(e.target.value)}
+            value={username}
+            required
           />
 
           <input
@@ -27,6 +93,9 @@ export default function RegisterForm() {
             name='inputPassword'
             id='inputPassword'
             placeholder='Password'
+            onChange={(e) => setPassword(e.target.value)}
+            value={password}
+            required
           />
 
           <button
@@ -40,4 +109,4 @@ export default function RegisterForm() {
       </div>
     </div>
   )
-}
+  }
diff --git a/components/Nav.js b/components/Nav.js
index e03cb0f..ffb5a35 100644
--- a/components/Nav.js
+++ b/components/Nav.js
@@ -2,6 +2,8 @@
 /* eslint-disable @next/next/no-img-element */
 import Link from 'next/link'
 import { useAuth } from '../context/auth'
+import tokenNotPresent from '../middlewares/auth_required'
+import tokenPresent from '../middlewares/no_auth_required'
 /**
  *
  * @todo Condtionally render login/register and Profile name in NavBar
diff --git a/components/TodoListItem.js b/components/TodoListItem.js
index 7965f3b..8a38e6e 100644
--- a/components/TodoListItem.js
+++ b/components/TodoListItem.js
@@ -1,7 +1,34 @@
 /* eslint-disable @next/next/no-img-element */
+import React, { useEffect, useState } from "react"
+import axios from "axios"
+import { useAuth } from '../context/auth'
+import { API_URL } from '../utils/constants'
+
+export default function TodoListItem(props) {
+  const [ newTask, setNewTask ] = useState(props.task)
+  const {token} = useAuth()
+
+  const edited = () => {
+    editTask(props.id)
+  }
+
+  const deleted = () => {
+    deleteTask(props.id)
+  }
+
+  const updated = () => {
+    updateTask(props.id);
+    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-action-"+props.id).classList.remove("hideme");
+  }
 
-export default function TodoListItem() {
   const editTask = (id) => {
+    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");
     /**
      * @todo Complete this function.
      * @todo 1. Update the dom accordingly
@@ -9,14 +36,52 @@ export default function TodoListItem() {
   }
 
   const deleteTask = (id) => {
+    const headersForApiRequest = {
+      headers: {Authorization: 'Token '+token}
+  }
+  axios.delete(
+    'todo/' + id + '/',
+    headersForApiRequest
+  ).then(function ({ data, status }) {
+        console.log("Deleted Task");
+        props.displayTasks();
+    }).catch(function (err) {
+      console.log("Error")
+      }) 
+
+  }
     /**
      * @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.
      */
-  }
+  
 
   const updateTask = (id) => {
+    if(newTask === ''){
+      console.log("Enter Task")
+    }
+    else{
+      const dataForApiRequest = {
+        newTask: newTask
+      }
+      const headersForApiRequest = {
+        headers: { Authorization: 'Token'+token}
+      }
+      axios.patch(
+        'todo/'+id+'/',
+        dataForApiRequest,
+        headersForApiRequest
+      ).then(function({ data, status }){
+        document.getElementById("input-button-"+id).classList.add("hideme");
+        document.getElementById("done-button-"+id).classList.add("hideme");
+        document.getElementById("task-"+id).classList.remove("hideme");
+        document.getElementById("task-actions-"+id).classList.remove("hideme");
+        console.log("Task Updated");
+      }).catch(function(err){
+        console.log("Error")
+      })
+    }
     /**
      * @todo Complete this function.
      * @todo 1. Send the request to update the task to the backend server.
@@ -28,28 +93,30 @@ export default function TodoListItem() {
     <>
       <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.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'
           placeholder='Edit The Task'
+          onChange={(e) => setNewTask(e.target.value)}
+          value={newTask}
         />
-        <div id='done-button-1' className='hideme'>
+        <div id={'done-button-${props.id}'} 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={updated}
           >
             Done
           </button>
         </div>
-        <div id='task-1' className='todo-task  text-gray-600'>
-          Sample Task 1
+        <div id={'task-${props.id}'} className='todo-task  text-gray-600'>
+          {newTask}
         </div>
-        <span id='task-actions-1' className=''>
+        <span id={'task-actions-${props.id}'} className=''>
           <button
             style={{ marginRight: '5px' }}
             type='button'
-            onClick={editTask(1)}
+            onClick={edited}
             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 +129,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={deleted}
           >
             <img
               src='https://res.cloudinary.com/nishantwrp/image/upload/v1587486661/CSOC/delete.svg'
diff --git a/middlewares/auth_required.js b/middlewares/auth_required.js
index 7f5e7bc..08a087c 100644
--- a/middlewares/auth_required.js
+++ b/middlewares/auth_required.js
@@ -1,3 +1,14 @@
 /***
  * @todo Redirect the user to login page if token is not present.
  */
+import React from "react";
+import router from "next/router";
+
+function tokenNotPresent(){
+    const token = localStorage.getItem("token")
+    if(!token){
+        router.push("/login");
+    }
+}
+
+export default tokenNotPresent;
\ No newline at end of file
diff --git a/middlewares/no_auth_required.js b/middlewares/no_auth_required.js
index 82558d4..9931111 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 React from "react";
+ import router from "next/router";
+ 
+ function tokenPresent(){
+     const token = localStorage.getItem("token")
+     if(token){
+         router.push('/');
+     }
+ }
+ 
+ export default tokenPresent;
\ No newline at end of file