diff --git a/components/AddTask.js b/components/AddTask.js
index 9652adb..8fa8f0c 100644
--- a/components/AddTask.js
+++ b/components/AddTask.js
@@ -1,25 +1,50 @@
+import axios from "axios";
+import { useState } from "react";
+import { useAuth } from "../context/auth";
 export default function AddTask() {
+  const [task, setTask] = useState("");
+  const { token1, bool, setBool } = useAuth();
   const addTask = () => {
+    let data = {
+      title: task,
+    };
+    axios
+      .post("https://todo-app-csoc.herokuapp.com/todo/create/", data, {
+        headers: {
+          Authorization: "Token " + token1,
+        },
+      })
+      .then((res) => {
+        setBool(!bool);
+        setTask(null);
+      })
+      .catch((e) => {
+        console.log(e);
+      });
     /**
      * @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.
      */
-  }
+  };
   return (
-    <div className='flex items-center max-w-sm mt-24'>
+    <div className="flex items-center max-w-sm mt-24">
       <input
-        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'
+        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}
+        onChange={(e) => {
+          setTask(e.target.value);
+        }}
       />
       <button
-        type='button'
-        className='todo-add-task bg-transparent hover:bg-green-500 text-green-700 text-sm hover:text-white px-3 py-2 border border-green-500 hover:border-transparent rounded'
+        type="button"
+        className="todo-add-task bg-transparent hover:bg-green-500 text-green-700 text-sm hover:text-white px-3 py-2 border border-green-500 hover:border-transparent rounded"
         onClick={addTask}
       >
         Add Task
       </button>
     </div>
-  )
+  );
 }
diff --git a/components/LoginForm.js b/components/LoginForm.js
index fa28f9e..5ede4aa 100644
--- a/components/LoginForm.js
+++ b/components/LoginForm.js
@@ -1,37 +1,72 @@
+import React, { useState } from "react";
+import axios from "../utils/axios";
+import { useAuth } from "../context/auth";
+import router, { useRouter } from "next/router";
+
 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 [password, setPassword] = useState("");
+  const [username, setUsername] = useState("");
+  const { setToken, setToken1 } = useAuth();
+  const login = (e) => {
+    e.preventDefault();
+    // console.log("Yes");
+    if (username != "" && password != "") {
+      axios
+        .post("https://todo-app-csoc.herokuapp.com/auth/login/", {
+          username: username,
+          password: password,
+        })
+        .then(({ data }) => {
+          console.log(data.token);
+          setToken(data.token);
+          setToken1(data.token);
+          router.push("/");
+        })
+        .catch((e) => {
+          console.log(e);
+          alert("Something went wrong");
+        });
+      /***
+       * @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'>
-      <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>
+    <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
-            type='text'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
-            name='inputUsername'
-            id='inputUsername'
-            placeholder='Username'
+            type="text"
+            className="block border border-grey-light w-full p-3 rounded mb-4"
+            name="inputUsername"
+            id="inputUsername"
+            placeholder="Username"
+            onChange={(e) => {
+              setUsername(e.target.value);
+            }}
+            value={username}
           />
 
           <input
-            type='password'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
-            name='inputPassword'
-            id='inputPassword'
-            placeholder='Password'
+            type="password"
+            className="block border border-grey-light w-full p-3 rounded mb-4"
+            name="inputPassword"
+            id="inputPassword"
+            placeholder="Password"
+            onChange={(e) => {
+              setPassword(e.target.value);
+            }}
+            value={password}
           />
 
           <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'
+            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}
           >
             Login
@@ -39,5 +74,5 @@ export default function RegisterForm() {
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/components/Nav.js b/components/Nav.js
index e03cb0f..aa07bfb 100644
--- a/components/Nav.js
+++ b/components/Nav.js
@@ -1,53 +1,55 @@
 /* eslint-disable jsx-a11y/alt-text */
 /* eslint-disable @next/next/no-img-element */
-import Link from 'next/link'
-import { useAuth } from '../context/auth'
+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, token1 } = useAuth();
 
   return (
-    <nav className='bg-blue-600'>
-      <ul className='flex items-center justify-between p-5'>
-        <ul className='flex items-center justify-between space-x-4'>
+    <nav className="bg-blue-600">
+      <ul className="flex items-center justify-between p-5">
+        <ul className="flex items-center justify-between space-x-4">
           <li>
             <Link href="/" passHref={true}>
               <a>
-                <h1 className='text-white font-bold text-xl'>Todo</h1>
+                <h1 className="text-white font-bold text-xl">Todo</h1>
               </a>
             </Link>
           </li>
         </ul>
-        <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>
-        <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'>
+        {!token1 && (
+          <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>
+        )}
+        <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>
+              <span className="mr-1">{profileName}</span>
               <svg
-                className='fill-current h-4 w-4'
-                xmlns='http://www.w3.org/2000/svg'
-                viewBox='0 0 20 20'
+                className="fill-current h-4 w-4"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
               >
-                <path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
+                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
               </svg>
             </button>
-            <ul className='absolute hidden text-gray-700 pt-1 group-hover:block'>
-              <li className=''>
+            <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'
-                  href='#'
+                  className="rounded-b bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap"
+                  href="#"
                   onClick={logout}
                 >
                   Logout
@@ -58,5 +60,5 @@ export default function Nav() {
         </div>
       </ul>
     </nav>
-  )
+  );
 }
diff --git a/components/RegisterForm.js b/components/RegisterForm.js
index a6ef2e3..03d3fe4 100644
--- a/components/RegisterForm.js
+++ b/components/RegisterForm.js
@@ -1,17 +1,17 @@
-import React, { useState } from 'react'
-import axios from '../utils/axios'
-import { useAuth } from '../context/auth'
-import { useRouter } from 'next/router'
+import React, { useState } from "react";
+import axios from "../utils/axios";
+import { useAuth } from "../context/auth";
+import { useRouter } from "next/router";
 
 export default function Register() {
-  const { setToken } = useAuth()
-  const router = useRouter()
+  const { setToken, setToken1 } = useAuth();
+  const router = useRouter();
 
-  const [firstName, setFirstName] = useState('')
-  const [lastName, setLastName] = useState('')
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [username, setUsername] = useState('')
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [username, setUsername] = useState("");
 
   const registerFieldsAreValid = (
     firstName,
@@ -21,110 +21,109 @@ export default function Register() {
     password
   ) => {
     if (
-      firstName === '' ||
-      lastName === '' ||
-      email === '' ||
-      username === '' ||
-      password === ''
+      firstName === "" ||
+      lastName === "" ||
+      email === "" ||
+      username === "" ||
+      password === ""
     ) {
-      console.log('Please fill all the fields correctly.')
-      return false
+      console.log("Please fill all the fields correctly.");
+      return false;
     }
     if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
-      console.log('Please enter a valid email address.')
-      return false
+      console.log("Please enter a valid email address.");
+      return false;
     }
-    return true
-  }
+    return true;
+  };
 
   const register = (e) => {
-    e.preventDefault()
+    e.preventDefault();
 
     if (
       registerFieldsAreValid(firstName, lastName, email, username, password)
     ) {
-      console.log('Please wait...')
+      console.log("Please wait...");
 
       const dataForApiRequest = {
-        name: firstName + ' ' + lastName,
+        name: firstName + " " + lastName,
         email: email,
         username: username,
         password: password,
-      }
+      };
 
-      axios.post(
-        'auth/register/',
-        dataForApiRequest,
-      )
+      axios
+        .post("auth/register/", dataForApiRequest)
         .then(function ({ data, status }) {
-          setToken(data.token)
-          router.push('/')
+          setToken(data.token);
+          setToken1(data.token);
+          router.push("/");
         })
         .catch(function (err) {
           console.log(
-            'An account using same email or username is already created'
-          )
-        })
+            "An account using same email or username is already created"
+          );
+        });
     }
-  }
+  };
 
   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'>Register</h1>
+    <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">Register</h1>
           <input
-            type='text'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
-            name='inputFirstName'
-            id='inputFirstName'
+            type="text"
+            className="block border border-grey-light w-full p-3 rounded mb-4"
+            name="inputFirstName"
+            id="inputFirstName"
             value={firstName}
             onChange={(e) => setFirstName(e.target.value)}
-            placeholder='First Name'
+            placeholder="First Name"
           />
           <input
-            type='text'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
-            name='inputLastName'
-            id='inputLastName'
+            type="text"
+            className="block border border-grey-light w-full p-3 rounded mb-4"
+            name="inputLastName"
+            id="inputLastName"
             value={lastName}
             onChange={(e) => setLastName(e.target.value)}
-            placeholder='Last Name'
+            placeholder="Last Name"
           />
 
           <input
-            type='email'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
-            name='inputEmail'
-            id='inputEmail'
+            type="email"
+            className="block border border-grey-light w-full p-3 rounded mb-4"
+            name="inputEmail"
+            id="inputEmail"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
-            placeholder='Email Address'
+            placeholder="Email Address"
           />
 
           <input
-            type='text'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
-            name='inputUsername'
-            id='inputUsername'
+            type="text"
+            className="block border border-grey-light w-full p-3 rounded mb-4"
+            name="inputUsername"
+            id="inputUsername"
             value={username}
             onChange={(e) => setUsername(e.target.value)}
-            placeholder='Username'
+            placeholder="Username"
           />
 
           <input
-            type='password'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
-            name='inputPassword'
-            id='inputPassword'
+            type="password"
+            className="block border border-grey-light w-full p-3 rounded mb-4"
+            name="inputPassword"
+            id="inputPassword"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
-            placeholder='Password'
+            placeholder="Password"
           />
 
           <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'
+            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={register}
           >
             Register
@@ -132,5 +131,5 @@ export default function Register() {
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/components/TodoListItem.js b/components/TodoListItem.js
index 7965f3b..aac7612 100644
--- a/components/TodoListItem.js
+++ b/components/TodoListItem.js
@@ -1,78 +1,127 @@
 /* eslint-disable @next/next/no-img-element */
 
-export default function TodoListItem() {
+import axios from "axios";
+import { useState } from "react";
+import { useAuth } from "../context/auth";
+
+export default function TodoListItem({ id, title }) {
+  const [showedit, setShowEdit] = useState(false);
+  const [updateData, setUpdateData] = useState();
+  const { token1, bool, setBool } = useAuth();
   const editTask = (id) => {
+    setShowEdit(!showedit);
     /**
      * @todo Complete this function.
      * @todo 1. Update the dom accordingly
      */
-  }
+  };
 
   const deleteTask = (id) => {
+    axios
+      .delete(`https://todo-app-csoc.herokuapp.com/todo/${id}/`, {
+        headers: {
+          Authorization: "Token " + token1,
+        },
+      })
+      .then((e) => {
+        console.log(e);
+        setBool(!bool);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
     /**
      * @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) => {
+    axios
+      .put(
+        `https://todo-app-csoc.herokuapp.com/todo/${id}/`,
+        {
+          title: updateData,
+        },
+        {
+          headers: {
+            Authorization: "Token " + token1,
+          },
+        }
+      )
+      .then((e) => {
+        setShowEdit(!showedit);
+        setBool(!bool);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
     /**
      * @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.
      */
-  }
+  };
 
   return (
     <>
-      <li className='border flex border-gray-500 rounded px-2 py-2 justify-between items-center mb-2'>
+      <li className="border flex border-gray-500 rounded px-2 py-2 justify-between items-center mb-2">
         <input
-          id='input-button-1'
-          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'
+          id="input-button-1"
+          type="text"
+          className={`${
+            showedit ? "" : "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) => {
+            setUpdateData(e.target.value);
+          }}
+          value={updateData}
         />
-        <div id='done-button-1' className='hideme'>
+        <div id="done-button-1" className={`${showedit ? "" : "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)}
+            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(id)}
           >
             Done
           </button>
         </div>
-        <div id='task-1' className='todo-task  text-gray-600'>
-          Sample Task 1
+        <div
+          id="task-1"
+          className={`${!showedit ? "" : "hideme"} todo-task  text-gray-600`}
+        >
+          {title}
         </div>
-        <span id='task-actions-1' className=''>
+        <span id="task-actions-1" className={`${!showedit ? "" : "hideme"}`}>
           <button
-            style={{ marginRight: '5px' }}
-            type='button'
-            onClick={editTask(1)}
-            className='bg-transparent hover:bg-yellow-500 hover:text-white border border-yellow-500 hover:border-transparent rounded px-2 py-2'
+            style={{ marginRight: "5px" }}
+            type="button"
+            onClick={() => editTask(id)}
+            className="bg-transparent hover:bg-yellow-500 hover:text-white border border-yellow-500 hover:border-transparent rounded px-2 py-2"
           >
             <img
-              src='https://res.cloudinary.com/nishantwrp/image/upload/v1587486663/CSOC/edit.png'
-              width='18px'
-              height='20px'
-              alt='Edit'
+              src="https://res.cloudinary.com/nishantwrp/image/upload/v1587486663/CSOC/edit.png"
+              width="18px"
+              height="20px"
+              alt="Edit"
             />
           </button>
           <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)}
+            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(id)}
           >
             <img
-              src='https://res.cloudinary.com/nishantwrp/image/upload/v1587486661/CSOC/delete.svg'
-              width='18px'
-              height='22px'
-              alt='Delete'
+              src="https://res.cloudinary.com/nishantwrp/image/upload/v1587486661/CSOC/delete.svg"
+              width="18px"
+              height="22px"
+              alt="Delete"
             />
           </button>
         </span>
       </li>
     </>
-  )
+  );
 }
diff --git a/middlewares/auth_required.js b/middlewares/auth_required.js
index 7f5e7bc..685c6d4 100644
--- a/middlewares/auth_required.js
+++ b/middlewares/auth_required.js
@@ -1,3 +1,10 @@
+import router from "next/router";
+export function auth_required(token) {
+  if (token == undefined) {
+    router.push("/login");
+  }
+}
+
 /***
  * @todo Redirect the user to login page if token is not present.
  */
diff --git a/middlewares/no_auth_required.js b/middlewares/no_auth_required.js
index 82558d4..73c5ec9 100644
--- a/middlewares/no_auth_required.js
+++ b/middlewares/no_auth_required.js
@@ -1,3 +1,9 @@
+import router from "next/router";
+export function no_auth_required(token) {
+  if (token) {
+    router.push("/");
+  }
+}
 /***
  * @todo Redirect the user to main page if token is present.
- */
\ No newline at end of file
+ */
diff --git a/pages/index.js b/pages/index.js
index c3c9134..6de9f02 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,12 +1,13 @@
-import TodoListItem from '../components/TodoListItem'
-import AddTask from '../components/AddTask'
-import { useEffect, useState } from 'react'
-import axios from '../utils/axios'
-import { useAuth } from '../context/auth'
+import TodoListItem from "../components/TodoListItem";
+import TodoListItem from "../components/TodoListItem";
+import AddTask from "../components/AddTask";
+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([])
+  const { token } = useAuth();
+  const [tasks, setTasks] = useState([]);
 
   function getTasks() {
     /***
@@ -20,13 +21,13 @@ export default function Home() {
     <div>
       <center>
         <AddTask />
-        <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 '>
+        <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 />
         </ul>
       </center>
     </div>
-  )
+  );
 }
diff --git a/pages/login.js b/pages/login.js
index 5f2bbe0..0364d21 100644
--- a/pages/login.js
+++ b/pages/login.js
@@ -1,9 +1,9 @@
-import LoginForm from '../components/LoginForm'
+import LoginForm from "../components/LoginForm";
 
 export default function Login() {
   return (
     <div>
       <LoginForm />
     </div>
-  )
+  );
 }