diff --git a/components/AddTask.js b/components/AddTask.js
index 9652adb..40da735 100644
--- a/components/AddTask.js
+++ b/components/AddTask.js
@@ -1,25 +1,66 @@
-export default function AddTask() {
+import React, { useState } from "react";
+import axios from "../utils/axios";
+import { useAuth } from "../context/auth";
+import { toast, ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+export default function AddTask(props) {
+  const { token } = useAuth();
+  const [addtask, setAddtask] = useState("");
+
+  const addTaskFieldsAreValid = (addtask) => {
+    if (addtask === "") {
+      toast.warn("Please fill a Task....", { position: "top-center" });
+      return false;
+    }
+    return true;
+  };
   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 (addTaskFieldsAreValid(addtask)) {
+      toast.info("Please wait...", { position: "top-center", autoClose: 1000 });
+
+      const dataForApiRequest = {
+        title: addtask,
+      };
+
+      const headersForApiRequest = {
+        headers: { Authorization: "Token " + token },
+      };
+
+      axios
+        .post("/todo/create/", dataForApiRequest, headersForApiRequest)
+        .then(function ({ data, status }) {
+          setAddtask("");
+          toast.success("Task Added in the Todo Succesfully....", {
+            position: "top-center",
+          });
+        })
+        .catch(function (err) {
+          toast.error("Task Not Added in the Todo ....", {
+            position: "top-center",
+          });
+        });
+    }
+  };
   return (
-    <div className='flex items-center max-w-sm mt-24'>
+    <div className="flex items-center max-w-sm mt-24">
+      <ToastContainer />
       <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"
+        name="addTask"
+        id="addTask"
+        value={addtask}
+        onChange={(e) => setAddtask(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..663a5ce 100644
--- a/components/LoginForm.js
+++ b/components/LoginForm.js
@@ -1,37 +1,85 @@
-export default function RegisterForm() {
+import React, { useState } from "react";
+import axios from "../utils/axios";
+import { useAuth } from "../context/auth";
+import { useRouter } from "next/router";
+import no_authRequired from "../middlewares/no_auth_required";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+export default function LoginForm() {
+  const { setToken } = useAuth();
+  const router = useRouter();
+
+  no_authRequired();
+
+  const [password, setPassword] = useState("");
+  const [username, setUsername] = useState("");
+
+  const loginFieldsAreValid = (username, password) => {
+    if (username === "" || password === "") {
+      toast.warn("Please fill all the fields correctly....", {
+        position: "top-center",
+      });
+      return false;
+    }
+    return true;
+  };
   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 (loginFieldsAreValid(username, password)) {
+      console.log("Please wait...");
+
+      const dataForApiRequest = {
+        username: username,
+        password: password,
+      };
+
+      axios
+        .post("auth/login/", dataForApiRequest)
+        .then(function ({ data, status }) {
+          setToken(data.token);
+          toast.success("Logged in Successfully....", {
+            position: "top-center",
+            autoClose: 2000,
+          });
+          setTimeout(() => router.reload(), 2000);
+        })
+        .catch(function (err) {
+          toast.error("Incorrect Username or Password,Try again ....", {
+            position: "top-center",
+          });
+        });
+    }
+  };
 
   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>
+          <ToastContainer />
           <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"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            placeholder="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"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            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={login}
           >
             Login
@@ -39,5 +87,5 @@ export default function RegisterForm() {
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/components/Nav.js b/components/Nav.js
index e03cb0f..1cdc6b3 100644
--- a/components/Nav.js
+++ b/components/Nav.js
@@ -2,16 +2,18 @@
 /* eslint-disable @next/next/no-img-element */
 import Link from 'next/link'
 import { useAuth } from '../context/auth'
+import 'react-toastify/dist/ReactToastify.css';
+
 /**
  *
  * @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'>
+    <nav className='bg-blue-600' id='navBar'>
       <ul className='flex items-center justify-between p-5'>
         <ul className='flex items-center justify-between space-x-4'>
           <li>
@@ -22,19 +24,20 @@ export default function Nav() {
             </Link>
           </li>
         </ul>
+        {token===undefined?
         <ul className='flex'>
-          <li className='text-white mr-2'>
+          <li className='text-white mr-2' id='btn1'>
             <Link href='/login'>Login</Link>
           </li>
-          <li className='text-white'>
+          <li className='text-white' id='btn2'>
             <Link href='/register'>Register</Link>
           </li>
-        </ul>
+        </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'
@@ -56,6 +59,7 @@ export default function Nav() {
             </ul>
           </div>
         </div>
+}
       </ul>
     </nav>
   )
diff --git a/components/RegisterForm.js b/components/RegisterForm.js
index a6ef2e3..e9c85ab 100644
--- a/components/RegisterForm.js
+++ b/components/RegisterForm.js
@@ -3,10 +3,16 @@ import axios from '../utils/axios'
 import { useAuth } from '../context/auth'
 import { useRouter } from 'next/router'
 
+import no_authRequired from '../middlewares/no_auth_required'
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
 export default function Register() {
   const { setToken } = useAuth()
   const router = useRouter()
 
+  no_authRequired();
+
   const [firstName, setFirstName] = useState('')
   const [lastName, setLastName] = useState('')
   const [email, setEmail] = useState('')
@@ -27,11 +33,11 @@ export default function Register() {
       username === '' ||
       password === ''
     ) {
-      console.log('Please fill all the fields correctly.')
+      toast.warn('Please fill all the fields correctly.',{position: "bottom-right"})
       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: "bottom-right"})
       return false
     }
     return true
@@ -58,17 +64,21 @@ export default function Register() {
       )
         .then(function ({ data, status }) {
           setToken(data.token)
-          router.push('/')
+          toast.success("Registered Successfully...",{position: "top-center",autoClose: 2000})
+          setTimeout(()=>router.push('/'),2000)
         })
         .catch(function (err) {
-          console.log(
+          toast.error(
             'An account using same email or username is already created'
-          )
+            ,{position: "bottom-right"})
         })
     }
   }
 
   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 +142,6 @@ export default function Register() {
         </div>
       </div>
     </div>
+    </>
   )
 }
diff --git a/components/TodoListItem.js b/components/TodoListItem.js
index 7965f3b..0427d0c 100644
--- a/components/TodoListItem.js
+++ b/components/TodoListItem.js
@@ -1,78 +1,131 @@
 /* eslint-disable @next/next/no-img-element */
+import React, { useState } from "react";
+import axios from "../utils/axios";
+import { useRouter } from "next/router";
+import { useAuth } from "../context/auth";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
-export default function TodoListItem() {
+export default function TodoListItem(props) {
+  const { token } = useAuth();
+
+  const [updatetask, setUpdatetask] = useState("");
   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.
-     */
-  }
+    console.log("Please wait...");
+
+    const headersForApiRequest = {
+      headers: { Authorization: "Token " + token },
+    };
+
+    axios
+      .delete("todo/" + id + "/", headersForApiRequest)
+      .then(function ({ data, status }) {
+        toast.success("Task deleted successfully...", {
+          position: "bottom-left",
+        });
+        console.log();
+        // getTasks();
+      })
+      .catch(function (err) {
+        toast.error(
+          "Unable to Delete the given task.<br> Please try again...",
+          { position: "bottom-left" }
+        );
+      });
+  };
 
   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 (updatetask === "") {
+      toast.warn("Enter a Task...", { position: "bottom-left" });
+      return;
+    }
+    const dataForApiRequest = {
+      title: updatetask,
+    };
+
+    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");
+        toast.success("Item updated  successfully...  ", {
+          position: "bottom-left",
+        });
+        // console.log();
+      })
+      .catch(function (err) {
+        console.log(
+          "Unable to Update the item in todo.<br> Please try again..."
+        );
+      });
+  };
 
   return (
     <>
-      <li className='border flex border-gray-500 rounded px-2 py-2 justify-between items-center mb-2'>
+      <ToastContainer />
+      <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-${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"
+          value={updatetask}
+          onChange={(e) => setUpdatetask(e.target.value)}
         />
-        <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)}
+            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(props.id)}
           >
             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">
+          {props.title}
         </div>
-        <span id='task-actions-1' className=''>
+        <span id={`task-actions-${props.id}`} className="">
           <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(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
-              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(props.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/context/auth.js b/context/auth.js
index 646b10e..2707d30 100644
--- a/context/auth.js
+++ b/context/auth.js
@@ -2,6 +2,9 @@ import { useEffect, useState, useContext, createContext } from 'react'
 import { useCookies } from 'react-cookie'
 import axios from '../utils/axios'
 import { useRouter } from 'next/router'
+import authRequired from '../middlewares/auth_required'
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 const AuthContext = createContext({})
 
@@ -11,12 +14,14 @@ export const AuthProvider = ({ children }) => {
   const [avatarImage, setAvatarImage] = useState('#')
   const [cookies, setCookies, removeCookies] = useCookies(['auth'])
   const token = cookies.token
+  authRequired();
 
   const setToken = (newToken) => setCookies('token', newToken, { path: '/' })
   const deleteToken = () => removeCookies('token')
   const logout = () => {
     deleteToken()
-    router.push('/login')
+    toast.success("Logged Out Successfully .....",{position: "bottom-right",autoClose: 2000})
+    setTimeout(()=>router.reload(),2000)
   }
 
   useEffect(() => {
@@ -28,6 +33,8 @@ export const AuthProvider = ({ children }) => {
           },
         })
         .then((response) => {
+          console.log(children);
+          console.log(response.data.name);
           setAvatarImage(
             'https://ui-avatars.com/api/?name=' +
               response.data.name +
@@ -36,26 +43,19 @@ export const AuthProvider = ({ children }) => {
           setProfileName(response.data.name)
         })
         .catch((error) => {
-          console.log('Some error occurred')
+          toast.error('Some error occurred')
         })
     }
   }, [setAvatarImage, setProfileName, token])
 
   return (
-    <AuthContext.Provider
-      value={{
-        token,
-        setToken,
-        deleteToken,
-        profileName,
-        setProfileName,
-        avatarImage,
-        setAvatarImage,
-        logout,
-      }}
-    >
+    
+    <>
+    <ToastContainer />
+    <AuthContext.Provider value={{token,setToken,deleteToken,profileName,setProfileName,avatarImage,setAvatarImage,logout,}}>
       {children}
     </AuthContext.Provider>
+    </>
   )
 }
 
diff --git a/middlewares/auth_required.js b/middlewares/auth_required.js
index 7f5e7bc..b6165e4 100644
--- a/middlewares/auth_required.js
+++ b/middlewares/auth_required.js
@@ -1,3 +1,21 @@
-/***
- * @todo Redirect the user to login page if token is not present.
- */
+import { useEffect} from 'react'
+
+ import { useAuth } from '../context/auth'
+ import { useRouter } from 'next/router'
+
+ function authRequired(){
+
+   const { token } = useAuth()
+
+   const router = useRouter()
+
+   useEffect(()=>{
+   if(token===undefined){
+      router.push('/login');
+   }
+ },[token])
+
+
+ } 
+
+ export default authRequired;
\ No newline at end of file
diff --git a/middlewares/no_auth_required.js b/middlewares/no_auth_required.js
index 82558d4..1a14b38 100644
--- a/middlewares/no_auth_required.js
+++ b/middlewares/no_auth_required.js
@@ -1,3 +1,17 @@
-/***
- * @todo Redirect the user to main page if token is present.
- */
\ No newline at end of file
+import { useEffect, useState } from "react";
+import { useAuth } from "../context/auth";
+import { useRouter } from "next/router";
+
+function no_authRequired() {
+  const { token } = useAuth();
+
+  const router = useRouter();
+
+  useEffect(() => {
+    if (token) {
+      router.push("/");
+    }
+  }, [token]);
+}
+
+export default no_authRequired;
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..a2d9f59 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,32 +1,58 @@
-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 AddTask from "../components/AddTask";
+import { useEffect, useState } from "react";
+import axios from "../utils/axios";
+import { useAuth } from "../context/auth";
+import authRequired from "../middlewares/auth_required";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 export default function Home() {
-  const { token } = useAuth()
-  const [tasks, setTasks] = useState([])
+  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
-     */
+    const headersForApiRequest = {
+      headers: { Authorization: "Token " + token },
+    };
+    axios
+      .get("/todo/", headersForApiRequest)
+      .then(function ({ data, status }) {
+        setTasks(data);
+      })
+      .catch(function (err) {
+        console.log("Error");
+      });
   }
+  useEffect(() => {
+    getTasks();
+  }, [tasks]);
 
   return (
     <div>
+      <ToastContainer />
       <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 />
+          <div>
+            {tasks.length === 0
+              ? "Todo List is Empty"
+              : tasks.map((task) => {
+                  return (
+                    <TodoListItem
+                      key={task.id}
+                      id={task.id}
+                      title={task.title}
+                    />
+                  );
+                })}
+          </div>
         </ul>
       </center>
     </div>
-  )
+  );
 }
diff --git a/styles/globals.css b/styles/globals.css
index 872cd43..2160745 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -22,3 +22,43 @@
 .todo-task {
   max-width: 260px;
 }
+#navBar{
+  background-color: black;
+  height: 16vh;
+  
+}
+#navBar ul li a h1{
+  font-size: 2em;
+}
+body{
+  background-color: rgb(222, 225, 222);
+}
+#btn1, #btn2{
+  padding: 20px;
+}
+#btn1::after{
+  content: '';
+  width: 0%;
+  height: 2px;
+  background: #f44336;
+  display: block;
+  margin: auto;
+  transition: .5s;
+}
+#btn1:hover::after{
+  width: 100%;
+
+}
+#btn2::after{
+  content: '';
+  width: 0%;
+  height: 2px;
+  background: #f44336;
+  display: block;
+  margin: auto;
+  transition: .5s;
+}
+#btn2:hover::after{
+  width: 100%;
+
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 11dbcb7..7e0d3cf 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.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"
@@ -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@^9.0.5:
+  version "9.0.7"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.0.7.tgz#4e6c6e1ae66eb587accc4a7704fb76ff88ab23eb"
+  integrity sha512-UG5P/2F/fYdbK+v3XRWHM6xfMkWeLM+k2swKvwU8oO9DXx31GkeoH7Z6slBTkavZ0VjoQ+n/YD6xOBqEwN7HRg==
+  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"