diff --git a/frontend/app/about/page.js b/frontend/app/about/page.js
index 70e918c..65ccc06 100644
--- a/frontend/app/about/page.js
+++ b/frontend/app/about/page.js
@@ -1,11 +1,10 @@
 import React from "react";
 import Navbar from "../../components/navbar";
 
-// Sample data for developers
 const developers = [
     {
         name: "Sai Charan",
-        photo: "/charan.jpg", // Ensure you have the photo in the public/images directory
+        photo: "/charan.jpg",
     },
     {
         name: "Yashwanth Reddy",
diff --git a/frontend/app/dashboard/notes/page.jsx b/frontend/app/dashboard/notes/page.jsx
index 812cc79..2487036 100644
--- a/frontend/app/dashboard/notes/page.jsx
+++ b/frontend/app/dashboard/notes/page.jsx
@@ -1,62 +1,11 @@
-"use client";
+"use client"
 
 import React, { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation'; // Import useRouter
+import { useRouter } from 'next/navigation';
 import Navbar from '../../../components/navbar';
-import { onAuthStateChangedListener } from '/app/firebase'; // Adjust path as necessary
+import { onAuthStateChangedListener } from '/app/firebase';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import { MdModeEditOutline, MdDelete } from "react-icons/md";
-
-const Modal = ({ isOpen, onClose, onSave, title, content, setTitle, setContent }) => {
-    if (!isOpen) return null;
-
-    const handleSave = () => {
-        onSave();
-        onClose();
-    };
-
-    return (
-        <div className="fixed top-0 left-0 w-full h-full bg-gray-900 bg-opacity-75 flex items-center justify-center z-50">
-            <div className="bg-white rounded-lg p-8 max-w-md w-full">
-                <h2 className="text-2xl font-bold mb-4">Edit Note</h2>
-                <input
-                    type="text"
-                    id="title"
-                    name="title"
-                    className="w-full px-3 py-2 placeholder-gray-400 rounded-lg focus:outline-none bg-gray-100 text-gray-800 transition duration-300 transform focus:ring-2"
-                    placeholder="Title..."
-                    value={title}
-                    onChange={(e) => setTitle(e.target.value)}
-                />
-                <textarea
-                    id="content"
-                    name="content"
-                    rows="5"
-                    className="w-full mt-2 px-3 py-2 placeholder-gray-400 rounded-lg focus:outline-none bg-gray-100 text-gray-800 transition duration-300 transform focus:ring-2"
-                    placeholder="Content..."
-                    value={content}
-                    onChange={(e) => setContent(e.target.value)}
-                    style={{ resize: "none" }}
-                ></textarea>
-                <div className="flex justify-end mt-4">
-                    <button
-                        className="px-4 py-2 bg-yellow-700 text-white rounded-md hover:bg-yellow-800 transition duration-300 ease-in-out"
-                        onClick={handleSave}
-                    >
-                        Save
-                    </button>
-                    <button
-                        className="ml-2 px-4 py-2 bg-gray-300 text-gray-800 rounded-md hover:bg-gray-400 transition duration-300 ease-in-out"
-                        onClick={onClose}
-                    >
-                        Cancel
-                    </button>
-                </div>
-            </div>
-        </div>
-    );
-};
 
 const NoteAdder = () => {
     const [title, setTitle] = useState('');
@@ -64,7 +13,8 @@ const NoteAdder = () => {
     const [notes, setNotes] = useState([]);
     const [user, setUser] = useState(null);
     const [editingNote, setEditingNote] = useState(null);
-    const [modalOpen, setModalOpen] = useState(false);
+    const [color, setColor] = useState(null); // No default color initially
+    const [showColorPalette, setShowColorPalette] = useState(false); // State to manage color palette visibility
     const router = useRouter();
 
     useEffect(() => {
@@ -104,13 +54,15 @@ const NoteAdder = () => {
             return;
         }
 
+        const noteColor = color || colors[0]; // Default color if no color is selected
+
         try {
             const response = await fetch('https://produpbackend.vercel.app/addnote', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
-                body: JSON.stringify({ user_id: user.uid, title, content }),
+                body: JSON.stringify({ user_id: user.uid, title, content, color: noteColor }),
             });
 
             if (!response.ok) {
@@ -118,52 +70,20 @@ const NoteAdder = () => {
                 throw new Error(errorResponse.message || 'Failed to add note');
             }
 
-            const newNote = { title, content };
+            const newNote = { title, content, color: noteColor };
             setNotes([...notes, newNote]);
             setTitle('');
             setContent('');
+            setColor(null); // Reset color
             toast.success('Note added successfully!');
 
-            window.location.reload('Brother'); // Optional: Reload the page to reflect the new note
+            window.location.reload();
         } catch (error) {
             toast.error('Failed to add note');
             console.error('Error adding note:', error);
         }
     };
 
-    const handleEditNote = async () => {
-        if (!title || !content || !editingNote) {
-            toast.error('Title, content, and note ID are required');
-            return;
-        }
-
-        try {
-            const response = await fetch(`https://produpbackend.vercel.app/editnote/${editingNote}`, {
-                method: 'PUT',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({ title, content }),
-            });
-
-            if (!response.ok) {
-                const errorResponse = await response.json();
-                throw new Error(errorResponse.message || 'Failed to edit note');
-            }
-
-            setNotes(notes.map(note => note.note_id === editingNote ? { ...note, title, content } : note));
-            setTitle('');
-            setContent('');
-            setEditingNote(null);
-            toast.success('Note edited successfully!');
-
-            window.location.reload();
-        } catch (error) {
-            toast.error('Failed to edit note');
-            console.error('Error editing note:', error);
-        }
-    };
-
     const handleDelete = async (noteId) => {
         try {
             const response = await fetch(`https://produpbackend.vercel.app/deletenote/${noteId}`, {
@@ -184,13 +104,6 @@ const NoteAdder = () => {
         }
     };
 
-    const startEditing = (note) => {
-        setTitle(note.title);
-        setContent(note.content);
-        setEditingNote(note.note_id);
-        setModalOpen(true);
-    };
-
     if (!user) {
         return <div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">Loading...</div>;
     }
@@ -199,58 +112,73 @@ const NoteAdder = () => {
         <div className="bg-gray-900 text-white min-h-screen font-mono">
             <Navbar />
             <h1 className='mx-auto justify-center items-center flex text-4xl font-bold text-yellow-700 mt-10 animate-bounce'>Notes!</h1>
-            <div className="container mx-auto py-8 w-2/3 lg:w-1/2">
+            <div className="container mx-auto py-8 max-w-7xl">
                 <div className="bg-gray-800 rounded-lg shadow-lg px-8 py-6 mb-8 border-gray-600 border mx-auto hover:border-yellow-700 transition duration-300 transform hover:scale-105 hover:shadow-2xl">
                     <div className="mb-4">
-                        <input
-                            type="text"
+                        <TextField
                             id="title"
-                            name="title"
-                            className="w-full px-3 py-2 placeholder-gray-400 rounded-lg focus:outline-none bg-transparent text-white transition duration-300 transform focus:ring-2"
-                            placeholder="Title..."
+                            label="Title"
+                            variant="standard"
+                            fullWidth
                             value={title}
                             onChange={(e) => setTitle(e.target.value)}
+                            InputProps={{
+                                className: "text-white",
+                                style: { color: 'white' },
+                            }}
+                            InputLabelProps={{
+                                className: "text-white",
+                                style: { color: 'white' },
+                            }}
                         />
                     </div>
                     <div className="mb-4">
-                        <textarea
+                        <TextField
                             id="content"
-                            name="content"
-                            rows="5"
-                            className="w-full px-3 py-2 placeholder-gray-400 rounded-lg focus:outline-none bg-transparent text-white transition duration-300 transform focus:ring-2"
-                            placeholder="Content..."
+                            label="Content"
+                            variant="standard"
+                            fullWidth
+                            multiline
+                            rows={5}
                             value={content}
                             onChange={(e) => setContent(e.target.value)}
-                            style={{ resize: "none" }}
-                        ></textarea>
+                            InputProps={{
+                                className: "text-white",
+                                style: { color: 'white' },
+                            }}
+                            InputLabelProps={{
+                                className: "text-white",
+                                style: { color: 'white' },
+                            }}
+                        />
                     </div>
                     <button
                         className="flex items-center justify-center px-4 py-2 mt-4 text-white bg-yellow-700 rounded-full hover:bg-yellow-800 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-yellow-700 focus:ring-opacity-50"
-                        onClick={editingNote ? handleEditNote : handleAddNote}
+                        onClick={handleAddNote}
                     >
                         <svg className="w-6 h-6 mr-2" viewBox="0 0 20 20" fill="currentColor">
-                            <path fillRule="evenodd" d={editingNote ? "M16.862 3.138a1.5 1.5 0 00-2.121 0L7.5 10.379l-.379.38L5 13l.379-.379 7.24-7.241a1.5 1.5 0 000-2.121z" : "M14.328 10.172a.25.25 0 010 .354l-3.823 3.823a.25.25 0 01-.354 0l-3.823-3.823a.25.25 0 01.354-.354L10 12.293l3.328-3.328a.25.25 0 01.354 0z"} clipRule="evenodd" />
+                            <path fillRule="evenodd" d="M14.328 10.172a.25.25 0 010 .354l-3.823 3.823a.25.25 0 01-.354 0l-3.823-3.823a.25.25 0 01.354-.354L10 12.293l3.328-3.328a.25.25 0 01.354 0z" clipRule="evenodd" />
                             <path fillRule="evenodd" d="M10 0a10 10 0 100 20 10 10 0 000-20zM1.25 10a8.75 8.75 0 1117.5 0 8.75 8.75 0 01-17.5 0z" clipRule="evenodd" />
                         </svg>
-                        {editingNote ? 'Save Note' : 'Add Note'}
+                        Add Note
                     </button>
                 </div>
-            </div>
 
             <div className="columns-1 sm:columns-1 md:columns-2 lg:columns-3 lg:max-w-7xl max-w-xl gap-6 mx-auto">
                 {notes.map((note) => (
                     <div
                         key={note.note_id}
                         className="bg-gray-900 rounded-lg shadow-lg p-6 mb-6 break-inside-avoid break-words hover:border-yellow-700 border transition-all duration-300 ease-in-out transform hover:scale-105 relative"
+                        style={{ backgroundColor: note.color || 'transparent' }} // Apply the note color
                     >
                         <h3 className="font-mono font-extrabold text-white">{note.title}</h3>
-                        <p className="text-gray-300">{note.content}</p>
+                        <p className="text-gray-300">{renderContent(note.content)}</p>
                         <br />
 
-                        <div className=' relative bottom-0 left-0 flex flex-row gap-5'>
+                        <div className='relative bottom-0 left-0 flex flex-row gap-5'>
                             <div>
                                 <button
-                                    className=" p-1 text-white hover:text-yellow-600 transition-all duration-300 ease-in-out opacity-100 group-hover:opacity-100"
+                                    className="p-1 text-white hover:text-yellow-600 transition-all duration-300 ease-in-out opacity-100 group-hover:opacity-100"
                                     onClick={() => startEditing(note)}
                                 >
                                     <MdModeEditOutline />
@@ -258,7 +186,7 @@ const NoteAdder = () => {
                             </div>
                             <div>
                                 <button
-                                    className=" p-1 text-white hover:text-red-600 transition-all duration-300 ease-in-out opacity-100 group-hover:opacity-100"
+                                    className="p-1 text-white hover:text-red-600 transition-all duration-300 ease-in-out opacity-100 group-hover:opacity-100"
                                     onClick={() => handleDelete(note.note_id)}
                                 >
                                     <MdDelete />
@@ -269,23 +197,8 @@ const NoteAdder = () => {
                 ))}
             </div>
             <ToastContainer />
-
-            <Modal
-                isOpen={modalOpen}
-                onClose={() => {
-                    setModalOpen(false);
-                    setTitle('');
-                    setContent('');
-                    setEditingNote(null);
-                }}
-                onSave={editingNote ? handleEditNote : handleAddNote}
-                title={title}
-                content={content}
-                setTitle={setTitle}
-                setContent={setContent}
-            />
         </div>
     );
 };
 
-export default NoteAdder;
+export default NoteAdder;
\ No newline at end of file
diff --git a/frontend/app/dashboard/page.jsx b/frontend/app/dashboard/page.jsx
index 4ea6245..a6af02c 100644
--- a/frontend/app/dashboard/page.jsx
+++ b/frontend/app/dashboard/page.jsx
@@ -6,6 +6,7 @@ import Link from 'next/link'; // Ensure Link is imported from 'next/link'
 import Navbar from '../../components/navbar';
 import { FaStickyNote, FaBell, FaListUl } from 'react-icons/fa';
 import { onAuthStateChangedListener } from '@/app/firebase'; // Ensure path is correct
+import CircularProgress from '@mui/material/CircularProgress';
 
 const Dashboard = () => {
   const [user, setUser] = useState(null);
@@ -25,7 +26,7 @@ const Dashboard = () => {
 
   if (!user) {
     // Optionally, render a loading state or a placeholder while checking auth
-    return <div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">Loading...</div>;
+    return <div className="min-h-screen bg-gray-900 text-white flex items-center justify-center"><CircularProgress color="inherit" /></div>;
   }
 
   return (
@@ -42,10 +43,6 @@ const Dashboard = () => {
               <div className="relative group cursor-pointer bg-gradient-to-r from-teal-500 to-purple-600 rounded-xl shadow-lg p-8 transition-transform transform hover:scale-105 hover:shadow-2xl">
                 <FaStickyNote className="text-4xl mx-auto mb-4" />
                 <h3 className="text-2xl font-semibold text-center mb-4">Notes</h3>
-                {/* Message Bubble */}
-                <div className="absolute left-1/2 top-full mt-2 w-64 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gray-800 text-white p-2 rounded-lg shadow-lg">
-                  Take down and save notes to keep track of your thoughts and ideas.
-                </div>
               </div>
             </Link>
             {/* Reminders Card */}
@@ -53,10 +50,6 @@ const Dashboard = () => {
               <div className="relative group cursor-pointer bg-gradient-to-r from-teal-500 to-purple-600 rounded-xl shadow-lg p-8 transition-transform transform hover:scale-105 hover:shadow-2xl">
                 <FaBell className="text-4xl mx-auto mb-4" />
                 <h3 className="text-2xl font-semibold text-center mb-4">Reminders</h3>
-                {/* Message Bubble */}
-                <div className="absolute left-1/2 top-full mt-2 w-64 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gray-800 text-white p-2 rounded-lg shadow-lg">
-                  Set reminders for your tasks to ensure you never miss a deadline.
-                </div>
               </div>
             </Link>
             {/* Todo List Card */}
@@ -64,10 +57,6 @@ const Dashboard = () => {
               <div className="relative group cursor-pointer bg-gradient-to-r from-teal-500 to-purple-600 rounded-xl shadow-lg p-8 transition-transform transform hover:scale-105 hover:shadow-2xl">
                 <FaListUl className="text-4xl mx-auto mb-4" />
                 <h3 className="text-2xl font-semibold text-center mb-4">Todo List</h3>
-                {/* Message Bubble */}
-                <div className="absolute left-1/2 top-full mt-2 w-64 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gray-800 text-white p-2 rounded-lg shadow-lg">
-                  Create and manage your todo list to stay organized and productive.
-                </div>
               </div>
             </Link>
           </div>
diff --git a/frontend/app/dashboard/reminders/page.jsx b/frontend/app/dashboard/reminders/page.jsx
index c7123e6..aa264f8 100644
--- a/frontend/app/dashboard/reminders/page.jsx
+++ b/frontend/app/dashboard/reminders/page.jsx
@@ -88,7 +88,9 @@ const Reminders = () => {
   return (
     <>
       <Navbar />
-      <div className="min-h-screen bg-gray-900 flex flex-col items-center justify-center py-2">
+      <div
+        className="min-h-screen bg-cover bg-center flex flex-col items-center justify-center py-2 bg-gray-900"
+      >
         <ToastContainer />
         <h1 className="text-3xl text-white font-bold mb-6">Set a Reminder</h1>
         <div className="bg-white shadow-md rounded-lg p-8 w-full max-w-md">
@@ -128,7 +130,7 @@ const Reminders = () => {
             </button>
           </div>
         </div>
-        <div className="mt-6">
+        <div className="mt-8 animate__animated animate__fadeInUp">
           <SoundComponent />
         </div>
       </div>
diff --git a/frontend/app/dashboard/todo/page.jsx b/frontend/app/dashboard/todo/page.jsx
index be0a8b8..c484b5a 100644
--- a/frontend/app/dashboard/todo/page.jsx
+++ b/frontend/app/dashboard/todo/page.jsx
@@ -11,6 +11,7 @@ const Todo = () => {
   const [todos, setTodos] = useState([]);
   const [todoText, setTodoText] = useState('');
   const [tagText, setTagText] = useState('');
+  const [view, setView] = useState('all');
   const router = useRouter(); // For navigation
 
   useEffect(() => {
@@ -35,6 +36,7 @@ const Todo = () => {
       text: todoText,
       done: false,
       tags: tagText.trim() !== '' ? tagText.trim().split(',') : [],
+      important: false,
     };
 
     setTodos([...todos, newTodo]);
@@ -58,10 +60,24 @@ const Todo = () => {
     toast.error('Todo deleted!', { position: "top-right" });
   };
 
+  const handleToggleImportant = (id) => {
+    const updatedTodos = todos.map(todo =>
+      todo.id === id ? { ...todo, important: !todo.important } : todo
+    );
+    setTodos(updatedTodos);
+  };
+
+  const filteredTodos = todos.filter(todo => {
+    if (view === 'all') return true;
+    if (view === 'starred') return todo.important;
+    if (view === 'completed') return todo.done;
+    return true;
+  });
+
   return (
     <>
       <Navbar />
-      <div className="min-h-screen bg-gray-900 flex flex-col items-center justify-center py-2">
+      <div className="min-h-screen bg-gray-900 flex">
         <ToastContainer />
         <h1 className="text-3xl font-bold text-white mb-6">Todo List</h1>
         <div className="bg-white shadow-md rounded-lg p-8 w-full max-w-md">
@@ -88,7 +104,7 @@ const Todo = () => {
           <div className="mb-6">
             <button
               onClick={handleAddTodo}
-              className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              className="w-full py-2 text-sm font-medium rounded-md shadow-sm text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
             >
               Add Todo
             </button>
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index cd3b927..55819c6 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -21,3 +21,4 @@
     text-wrap: balance;
   }
 }
+
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index eda1a3b..5ea80e2 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -52,7 +52,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
       "integrity": "sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==",
-      "peer": true,
       "dependencies": {
         "@babel/highlight": "^7.24.7",
         "picocolors": "^1.0.0"
@@ -104,7 +103,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.7.tgz",
       "integrity": "sha512-oipXieGC3i45Y1A41t4tAqpnEZWgB/lC6Ehh6+rOviR5XWpTtMmLN+fGjz9vOiNRt0p6RtO6DtD0pdU3vpqdSA==",
-      "peer": true,
       "dependencies": {
         "@babel/types": "^7.24.7",
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -225,7 +223,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.24.7.tgz",
       "integrity": "sha512-DoiN84+4Gnd0ncbBOM9AZENV4a5ZiL39HYMyZJGZ/AZEykHYdJw0wW3kdcsh9/Kn+BRXHLkkklZ51ecPKmI1CQ==",
-      "peer": true,
       "dependencies": {
         "@babel/types": "^7.24.7"
       },
@@ -237,7 +234,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.24.7.tgz",
       "integrity": "sha512-FyoJTsj/PEUWu1/TYRiXTIHc8lbw+TDYkZuoE43opPS5TrI7MyONBE1oNvfguEXAD9yhQRrVBnXdXzSLQl9XnA==",
-      "peer": true,
       "dependencies": {
         "@babel/template": "^7.24.7",
         "@babel/types": "^7.24.7"
@@ -250,7 +246,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.24.7.tgz",
       "integrity": "sha512-MJJwhkoGy5c4ehfoRyrJ/owKeMl19U54h27YYftT0o2teQ3FJ3nQUf/I3LlJsX4l3qlw7WRXUmiyajvHXoTubQ==",
-      "peer": true,
       "dependencies": {
         "@babel/types": "^7.24.7"
       },
@@ -275,7 +270,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz",
       "integrity": "sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==",
-      "peer": true,
       "dependencies": {
         "@babel/traverse": "^7.24.7",
         "@babel/types": "^7.24.7"
@@ -388,7 +382,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.7.tgz",
       "integrity": "sha512-oy5V7pD+UvfkEATUKvIjvIAH/xCzfsFVw7ygW2SI6NClZzquT+mwdTfgfdbUiceh6iQO0CHtCPsyze/MZ2YbAA==",
-      "peer": true,
       "dependencies": {
         "@babel/types": "^7.24.7"
       },
@@ -400,7 +393,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.7.tgz",
       "integrity": "sha512-7MbVt6xrwFQbunH2DNQsAP5sTGxfqQtErvBIvIMi6EQnbgUOuVYanvREcmFrOPhoXBrTtjhhP+lW+o5UfK+tDg==",
-      "peer": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -409,7 +401,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
       "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
-      "peer": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -455,7 +446,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz",
       "integrity": "sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==",
-      "peer": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.24.7",
         "chalk": "^2.4.2",
@@ -470,7 +460,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "peer": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -482,7 +471,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "peer": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -496,7 +484,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "peer": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -504,14 +491,12 @@
     "node_modules/@babel/highlight/node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "peer": true
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
     "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "peer": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -520,7 +505,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "peer": true,
       "engines": {
         "node": ">=4"
       }
@@ -529,7 +513,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "peer": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -541,7 +524,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.7.tgz",
       "integrity": "sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==",
-      "peer": true,
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -2152,7 +2134,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.7.tgz",
       "integrity": "sha512-jYqfPrU9JTF0PmPy1tLYHW4Mp4KlgxJD9l2nP9fD6yT/ICi554DmrWBAEYpIelzjHf1msDP3PxJIRt/nFNfBig==",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.24.7",
         "@babel/parser": "^7.24.7",
@@ -2166,7 +2147,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.7.tgz",
       "integrity": "sha512-yb65Ed5S/QAcewNPh0nZczy9JdYXkkAbIsEo+P7BE7yO3txAY30Y/oPa3QkQ5It3xVG2kpKMg9MsdxZaO31uKA==",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.24.7",
         "@babel/generator": "^7.24.7",
@@ -2187,7 +2167,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.7.tgz",
       "integrity": "sha512-XEFXSlxiG5td2EJRe8vOmRbaXVgfcBlszKujvVmWIK/UpywWljQCfzAv3RQCGujWQ1RD4YYWEAqDXfuJiy8f5Q==",
-      "peer": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.24.7",
         "@babel/helper-validator-identifier": "^7.24.7",
@@ -4061,6 +4040,14 @@
         "@types/react": "*"
       }
     },
+<<<<<<< HEAD
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.10",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
+      "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
+      "dependencies": {
+        "@types/react": "*"
+=======
     "node_modules/@types/react-redux": {
       "version": "7.1.33",
       "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.33.tgz",
@@ -4070,6 +4057,17 @@
         "@types/react": "*",
         "hoist-non-react-statics": "^3.3.0",
         "redux": "^4.0.0"
+>>>>>>> f1c4ba0b55c10e5cfcca1f4679be89451a0fdc49
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.10",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
+      "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/react": "*"
       }
     },
     "node_modules/@types/stack-utils": {
@@ -5047,7 +5045,6 @@
       "version": "4.3.5",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
       "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
-      "peer": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -5176,7 +5173,6 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "peer": true,
       "dependencies": {
         "is-arrayish": "^0.2.1"
       }
@@ -5221,7 +5217,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -5672,7 +5667,6 @@
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "peer": true,
       "engines": {
         "node": ">=4"
       }
@@ -5872,8 +5866,7 @@
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "peer": true
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
     },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
@@ -6350,7 +6343,6 @@
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "peer": true,
       "bin": {
         "jsesc": "bin/jsesc"
       },
@@ -6469,8 +6461,7 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/locate-path": {
       "version": "5.0.0",
@@ -7249,8 +7240,7 @@
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "peer": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/mz": {
       "version": "2.7.0",
@@ -8243,7 +8233,6 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
       "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
-      "license": "MIT",
       "peerDependencies": {
         "react": "*"
       }
@@ -9658,7 +9647,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "peer": true,
       "engines": {
         "node": ">=4"
       }
diff --git a/frontend/public/to do list.jpg b/frontend/public/to do list.jpg
new file mode 100644
index 0000000..07e42ce
Binary files /dev/null and b/frontend/public/to do list.jpg differ