diff --git a/.eslintrc b/.eslintrc
index a2ceebe..dffe840 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,3 +1,3 @@
 {
-  "extends": ["next/babel", "next/core-web-vitals"]
+  "extends": ["next"]
 }
diff --git a/components/AddTask.js b/components/AddTask.js
index 9652adb..50eed94 100644
--- a/components/AddTask.js
+++ b/components/AddTask.js
@@ -1,17 +1,87 @@
-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.
-     */
+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 AddTask({tasks, allTasks, setTasks, setAllTasks, query}) {
+  const {token} = useAuth()
+  const [_title, setTitle] = useState('')
+  let adding = false
+  const addTask = async () => {
+    if (adding) return
+    if (_title === '') {
+      toast.error('Task title cannot be empty', {
+        position: "bottom-right",
+        autoClose: 2000,
+        hideProgressBar: true,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "colored",
+      })
+      return
+    }
+    adding = true
+    toast.info('Adding task', {
+      position: "bottom-right",
+      autoClose: 500,
+      hideProgressBar: true,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      progress: undefined,
+      theme: "colored",
+    })
+    await axios({
+      method: 'POST',
+      url: 'todo/create/',
+      headers: {Authorization: `Token ${token}`},
+      data: {title: _title}
+    }).catch( () => {
+      toast.error('Something went wrong', {
+        position: "bottom-right",
+        autoClose: 2000,
+        hideProgressBar: true,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "colored",
+      });
+      return
+    })
+    toast.success('Task added successfully!', {
+      position: "bottom-right",
+      autoClose: 2000,
+      hideProgressBar: true,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      progress: undefined,
+      theme: "colored",
+    });
+    setTitle('')
+    const newTask = await axios({
+      method: 'GET',
+      url: 'todo/',
+      headers: {Authorization: `token ${token}`}
+    }).then(res => res.data.pop())
+
+    if (newTask.title.toLowerCase().indexOf(query) !== -1) setTasks([...tasks, newTask])
+    setAllTasks([...allTasks, newTask])
+    adding = false
   }
+
   return (
-    <div className='flex items-center max-w-sm mt-24'>
+    <div className='flex items-center max-w-sm mt-10'>
       <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'
+        value={_title}
+        onChange={(e) => setTitle(e.target.value)}
       />
       <button
         type='button'
diff --git a/components/LoginForm.js b/components/LoginForm.js
index fa28f9e..3cbeaeb 100644
--- a/components/LoginForm.js
+++ b/components/LoginForm.js
@@ -1,12 +1,61 @@
-export default function RegisterForm() {
+import { useRouter } from "next/router";
+import { useState } from "react";
+import { useAuth } from "../context/auth";
+import axiosInstance from "../utils/axios";
+import {toast} from "react-toastify"
+import 'react-toastify/dist/ReactToastify.css';
+
+export default function LoginForm() {
+  const auth = useAuth()
+  const route = useRouter()
+
   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)
-     */
+    if (username === '' || password === '') {
+      toast.error('Username or Password cannot be empty', {
+        position: "bottom-right",
+        autoClose: 2000,
+        hideProgressBar: true,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "colored",
+      })
+      return
+    }
+
+    axiosInstance.post('auth/login/',{username: username, password: password})
+    .then(ret => ret.data.token)
+    .then((token) => {
+      auth.setToken(token)
+      toast.success('Login successful', {
+        position: "bottom-right",
+        autoClose: 2000,
+        hideProgressBar: true,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "colored",
+      })
+      route.push('/')
+    })
+    .catch(() => {
+      toast.error('Invalid username or password', {
+        position: "bottom-right",
+        autoClose: 2000,
+        hideProgressBar: true,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "colored",
+      })
+    })
   }
+  
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
 
   return (
     <div className='bg-grey-lighter min-h-screen flex flex-col'>
@@ -19,6 +68,7 @@ export default function RegisterForm() {
             name='inputUsername'
             id='inputUsername'
             placeholder='Username'
+            onChange={event => setUsername(event.target.value)}
           />
 
           <input
@@ -27,6 +77,7 @@ export default function RegisterForm() {
             name='inputPassword'
             id='inputPassword'
             placeholder='Password'
+            onChange={event => setPassword(event.target.value)}
           />
 
           <button
diff --git a/components/Nav.js b/components/Nav.js
index e03cb0f..1b4eaa9 100644
--- a/components/Nav.js
+++ b/components/Nav.js
@@ -2,16 +2,21 @@
 /* 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 { useEffect, useState } from 'react';
 
 export default function Nav() {
-  const { logout, profileName, avatarImage } = useAuth()
+
+  const { token, logout, profileName, avatarImage } = useAuth()
+  const [LoginRegisterClass, setLoginRegisterClass] = useState('')
+  const [ProfileClass, setProfileClass] = useState('')
+
+  useEffect(() => {
+    setLoginRegisterClass(`${token ? 'hideme' : ''} flex`)
+    setProfileClass(`${token ? '' : 'hideme'} inline-block relative`)
+  }, [token])
 
   return (
-    <nav className='bg-blue-600'>
+    <nav className='bg-blue-600 sticky top-0'>
       <ul className='flex items-center justify-between p-5'>
         <ul className='flex items-center justify-between space-x-4'>
           <li>
@@ -22,7 +27,7 @@ export default function Nav() {
             </Link>
           </li>
         </ul>
-        <ul className='flex'>
+        <ul className={LoginRegisterClass}>
           <li className='text-white mr-2'>
             <Link href='/login'>Login</Link>
           </li>
@@ -30,26 +35,18 @@ export default function Nav() {
             <Link href='/register'>Register</Link>
           </li>
         </ul>
-        <div className='inline-block relative w-28'>
+        <div className={ProfileClass}>
           <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} />
+              <img src={avatarImage} className='pr-4'/>
               <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'
-              >
+              <svg 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' />
               </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'
-                  href='#'
-                  onClick={logout}
-                >
+                <a className='rounded-b bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap' href='#' onClick={logout}>
                   Logout
                 </a>
               </li>
diff --git a/components/RegisterForm.js b/components/RegisterForm.js
index a6ef2e3..a145fbc 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 {toast} from "react-toastify"
+import 'react-toastify/dist/ReactToastify.css';
 
 export default function Register() {
   const { setToken } = useAuth()
@@ -27,11 +29,29 @@ export default function Register() {
       username === '' ||
       password === ''
     ) {
-      console.log('Please fill all the fields correctly.')
+      toast.error('Please fill all the fields correctly.', {
+        position: "bottom-right",
+        autoClose: 2000,
+        hideProgressBar: true,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "colored",
+      })
       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: "bottom-right",
+        autoClose: 2000,
+        hideProgressBar: true,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "colored",
+      })
       return false
     }
     return true
@@ -43,7 +63,16 @@ export default function Register() {
     if (
       registerFieldsAreValid(firstName, lastName, email, username, password)
     ) {
-      console.log('Please wait...')
+      toast.info('Please wait...', {
+        position: "bottom-right",
+        autoClose: 2000,
+        hideProgressBar: true,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "colored",
+      })
 
       const dataForApiRequest = {
         name: firstName + ' ' + lastName,
@@ -56,14 +85,31 @@ export default function Register() {
         'auth/register/',
         dataForApiRequest,
       )
-        .then(function ({ data, status }) {
+        .then(function ({ data }) {
           setToken(data.token)
           router.push('/')
+          toast.success('Login successful', {
+            position: "bottom-right",
+            autoClose: 2000,
+            hideProgressBar: true,
+            closeOnClick: true,
+            pauseOnHover: true,
+            draggable: true,
+            progress: undefined,
+            theme: "colored",
+          })
         })
         .catch(function (err) {
-          console.log(
-            'An account using same email or username is already created'
-          )
+          toast.warn('An account using same email or username is already created', {
+            position: "bottom-right",
+            autoClose: 2000,
+            hideProgressBar: true,
+            closeOnClick: true,
+            pauseOnHover: true,
+            draggable: true,
+            progress: undefined,
+            theme: "colored",
+          })
         })
     }
   }
diff --git a/components/Search.js b/components/Search.js
new file mode 100644
index 0000000..1aeed9e
--- /dev/null
+++ b/components/Search.js
@@ -0,0 +1,21 @@
+import { useState } from "react"
+
+export default function Search({ allTasks, setTasks, setQuery }) {
+
+  const onChange = (e) => {
+    const a = e.target.value
+    setTasks(allTasks.filter(({title}) => title.toLowerCase().indexOf(a.toLowerCase()) !== -1))
+    setQuery(a.toLowerCase())
+  }
+
+  return (
+    <div className='flex items-center max-w-sm mt-10'>
+      <input
+        type='text'
+        className='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='Search'
+        onChange={onChange}
+      />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/components/TodoListItem.js b/components/TodoListItem.js
index 7965f3b..449e897 100644
--- a/components/TodoListItem.js
+++ b/components/TodoListItem.js
@@ -1,27 +1,101 @@
 /* eslint-disable @next/next/no-img-element */
 
-export default function TodoListItem() {
-  const editTask = (id) => {
-    /**
-     * @todo Complete this function.
-     * @todo 1. Update the dom accordingly
-     */
+import { useState } from "react"
+import { useAuth } from "../context/auth"
+import axios from "../utils/axios"
+import {toast} from "react-toastify"
+import 'react-toastify/dist/ReactToastify.css';
+
+export default function TodoListItem({title, id, index, actualIndex, tasks, allTasks, setTasks, setAllTasks}) {
+  const {token} = useAuth()
+  const [editing, setEditing] = useState(false)
+  const [_title, setTitle] = useState(title)
+
+  const editTask = () => {
+    setEditing(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.
-     */
+  const deleteTask = () => {
+    axios({
+      method: 'DELETE',
+      url: `todo/${id}/`,
+      headers: {Authorization: `token ${token}`}
+    })
+    .then(() => {
+      toast.success('Task deleted successfully', {
+        position: "bottom-right",
+        autoClose: 2000,
+        hideProgressBar: true,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "colored",
+      })
+      setTasks(tasks.filter(task => task.id !== id))
+      setAllTasks(allTasks.filter(task => task.id !== id))
+    })
+    .catch(() => {
+      toast.error('Something went wrong', {
+        position: "bottom-right",
+        autoClose: 2000,
+        hideProgressBar: true,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "colored",
+      })
+    })
   }
 
-  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.
-     */
+  const updateTask = () => {
+    if (_title === '') {
+      toast.error('Task title cannot be empty', {
+        position: "bottom-right",
+        autoClose: 2000,
+        hideProgressBar: true,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "colored",
+      })
+      return
+    }
+    axios({
+      method: 'PUT',
+      url: `todo/${id}/`,
+      headers: {Authorization: `token ${token}`},
+      data: {title: _title}
+    })
+    .then(() => {
+      toast.success('Task updated successfully', {
+        position: "bottom-right",
+        autoClose: 2000,
+        hideProgressBar: true,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "colored",
+      })
+      setTasks([...tasks.slice(0, index), {title: _title, id: id}, ...tasks.slice(index+1)])
+      setAllTasks([...allTasks.slice(0, actualIndex), {title: _title, id: id}, ...allTasks.slice(actualIndex+1)])
+      setEditing(false)
+    })
+    .catch(() => {
+      toast.error('Something went wrong', {
+        position: "bottom-right",
+        autoClose: 2000,
+        hideProgressBar: true,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "colored",
+      })
+    })
   }
 
   return (
@@ -30,26 +104,28 @@ export default function TodoListItem() {
         <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'
+          className={`${editing ? '' :'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) => setTitle(e.target.value)}
+          value={_title}
         />
-        <div id='done-button-1' className='hideme'>
+        <div id='done-button-1' className={editing ? '': '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}
           >
             Done
           </button>
         </div>
-        <div id='task-1' className='todo-task  text-gray-600'>
-          Sample Task 1
+        <div id='task-1' className={`${editing ? 'hideme' : ''} todo-task  text-gray-600`}>
+          {_title}
         </div>
-        <span id='task-actions-1' className=''>
+        <span id='task-actions-1' className={editing ? 'hideme': ''}>
           <button
             style={{ marginRight: '5px' }}
             type='button'
-            onClick={editTask(1)}
+            onClick={editTask}
             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 +138,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}
           >
             <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..8dc5a0e 100644
--- a/context/auth.js
+++ b/context/auth.js
@@ -2,20 +2,40 @@ import { useEffect, useState, useContext, createContext } from 'react'
 import { useCookies } from 'react-cookie'
 import axios from '../utils/axios'
 import { useRouter } from 'next/router'
+import {toast} from "react-toastify"
+import 'react-toastify/dist/ReactToastify.css';
 
-const AuthContext = createContext({})
+export const AuthContext = createContext({})
 
 export const AuthProvider = ({ children }) => {
   const router = useRouter()
   const [profileName, setProfileName] = useState('')
   const [avatarImage, setAvatarImage] = useState('#')
   const [cookies, setCookies, removeCookies] = useCookies(['auth'])
-  const token = cookies.token
+  const [token, setToken_] = useState(cookies.token)
+
+  const setToken = (newToken) => {
+    setToken_(newToken)
+    setCookies('token', newToken, { path: '/' })
+  }
+
+  const deleteToken = () => {
+    setToken_('')
+    removeCookies('token')
+  }
 
-  const setToken = (newToken) => setCookies('token', newToken, { path: '/' })
-  const deleteToken = () => removeCookies('token')
   const logout = () => {
     deleteToken()
+    toast.warn('You have been logged out', {
+      position: "bottom-right",
+      autoClose: 2000,
+      hideProgressBar: true,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      progress: undefined,
+      theme: "colored",
+    })
     router.push('/login')
   }
 
diff --git a/middlewares/auth_required.js b/middlewares/auth_required.js
index 7f5e7bc..14fc90e 100644
--- a/middlewares/auth_required.js
+++ b/middlewares/auth_required.js
@@ -1,3 +1,3 @@
-/***
- * @todo Redirect the user to login page if token is not present.
- */
+export const auth_required = (token, router) => {
+    if (!token) router.push('/login')
+}
\ No newline at end of file
diff --git a/middlewares/no_auth_required.js b/middlewares/no_auth_required.js
index 82558d4..eb59f47 100644
--- a/middlewares/no_auth_required.js
+++ b/middlewares/no_auth_required.js
@@ -1,3 +1,3 @@
-/***
- * @todo Redirect the user to main page if token is present.
- */
\ No newline at end of file
+export const no_auth_required = (token, router) => {
+    if (token) router.push('/')
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 98b7437..d15a3aa 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,8 @@
     "react": "17.0.2",
     "react-cookie": "^4.0.3",
     "react-dom": "17.0.2",
+    "react-toastify": "^9.0.5",
+    "react-transition-group": "^4.4.2",
     "tailwindcss": "^2.2.2"
   },
   "devDependencies": {
diff --git a/pages/_app.js b/pages/_app.js
index 9fc71da..d96b19a 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,10 +1,13 @@
 import '../styles/globals.css'
 import { AuthProvider } from '../context/auth'
 import Nav from '../components/Nav'
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 function MyApp({ Component, pageProps }) {
   return (
     <AuthProvider>
+      <ToastContainer />
       <Nav />
       <Component {...pageProps} />
     </AuthProvider>
diff --git a/pages/index.js b/pages/index.js
index c3c9134..46a5373 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,30 +1,71 @@
 import TodoListItem from '../components/TodoListItem'
 import AddTask from '../components/AddTask'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import axios from '../utils/axios'
 import { useAuth } from '../context/auth'
+import { auth_required } from '../middlewares/auth_required'
+import { useRouter } from 'next/router'
+import Search from '../components/Search'
+import { CSSTransition, TransitionGroup } from 'react-transition-group'
 
 export default function Home() {
+  const route = useRouter()
   const { token } = useAuth()
   const [tasks, setTasks] = useState([])
+  const [allTasks, setAllTasks] = useState([])
+  const [query, setQuery] = useState('')
 
-  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
-     */
+  useEffect(() => {
+    auth_required(token, route)
+    getTasks()
+  },[])
+
+  async function getTasks() {
+    const {data} = await axios({
+      method: 'GET',
+      url: 'todo/',
+      headers: {Authorization: `token ${token}`}
+    })
+    setTasks(Array.from(data))
+    setAllTasks(Array.from(data))
   }
 
   return (
     <div>
       <center>
-        <AddTask />
+        <Search
+          allTasks={allTasks}
+          setTasks={setTasks}
+          setQuery={setQuery}
+        />
+        <AddTask
+          tasks={tasks}
+          allTasks={allTasks}
+          setTasks={setTasks}
+          setAllTasks={setAllTasks}
+          query={query}
+          />
         <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 '>
+          <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 />
+          <TransitionGroup>
+          {tasks.map(({title, id}, index) =>
+            <CSSTransition key={id} timeout={500} classNames="item">
+              <TodoListItem
+                title={title}
+                id={id}
+                key={id}
+                index={index}
+                actualIndex={allTasks.findIndex((task) => task.id === id)}
+                tasks={tasks}
+                allTasks={allTasks}
+                setTasks={setTasks}
+                setAllTasks={setAllTasks}
+              />
+            </CSSTransition>
+          )}
+          </TransitionGroup>
         </ul>
       </center>
     </div>
diff --git a/pages/login.js b/pages/login.js
index 5f2bbe0..079e26d 100644
--- a/pages/login.js
+++ b/pages/login.js
@@ -1,6 +1,18 @@
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 import LoginForm from '../components/LoginForm'
+import { useAuth } from '../context/auth'
+import { no_auth_required } from '../middlewares/no_auth_required'
 
 export default function Login() {
+
+  const route = useRouter()
+  const {token} = useAuth()
+
+  useEffect(() => {
+    no_auth_required(token, route)
+  },[])
+
   return (
     <div>
       <LoginForm />
diff --git a/pages/register.js b/pages/register.js
index 456003a..a6a278d 100644
--- a/pages/register.js
+++ b/pages/register.js
@@ -1,6 +1,18 @@
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 import RegisterForm from '../components/RegisterForm'
+import { useAuth } from '../context/auth'
+import { no_auth_required } from '../middlewares/no_auth_required'
 
 export default function Register() {
+
+  const route = useRouter()
+  const {token} = useAuth()
+
+  useEffect(() => {
+    no_auth_required(token, route)
+  },[])
+
   return (
     <div>
       <RegisterForm />
diff --git a/styles/globals.css b/styles/globals.css
index 872cd43..8c03a52 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -22,3 +22,25 @@
 .todo-task {
   max-width: 260px;
 }
+
+.item-exit {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.item-exit-active {
+  opacity: 0.5;
+  transform: scale(0.5);
+  transition: all 500ms ease;
+}
+
+.item-enter {
+  opacity: 0.5;
+  transform: scale(0.5);
+}
+
+.item-enter-active {
+  opacity: 1;
+  transform: scale(1);
+  transition: all 500ms ease;
+}
diff --git a/yarn.lock b/yarn.lock
index 11dbcb7..cb79af6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -52,6 +52,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.6.tgz#6a1ef59f838debd670421f8c7f2cbb8da9751580"
+  integrity sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/types@7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.3.tgz#5a383dffa5416db1b73dedffd311ffd0788fb31c"
@@ -720,6 +727,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.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 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"
@@ -1024,6 +1036,14 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 domain-browser@4.19.0:
   version "4.19.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-4.19.0.tgz#1093e17c0a17dbd521182fe90d49ac1370054af1"
@@ -2676,6 +2696,15 @@ prop-types@15.7.2, prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+prop-types@^15.6.2:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 public-encrypt@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0"
@@ -2793,7 +2822,7 @@ react-is@17.0.2:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -2803,6 +2832,23 @@ 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@^9.0.5:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.0.5.tgz#310d7bcfcf3887c0e8461ac6068fe1abb8d720e1"
+  integrity sha512-dszPCeQINY+Nm6HmsiAXT/7wsazPqv0S/RuhIYLAW+fTKcd3T1iRjZG0XqrN9nvAzqaE5J6uxMaiBrOevxjY8g==
+  dependencies:
+    clsx "^1.1.1"
+
+react-transition-group@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
+  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"