diff --git a/.gitignore b/.gitignore
index 53674795..44966ed9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,3 @@
 /venv
-.env
-.env.bak
\ No newline at end of file
+node_modules
+
diff --git a/frontend/src/assets/icon.jsx b/frontend/src/assets/icon.jsx
index a123f254..a2a497cb 100644
--- a/frontend/src/assets/icon.jsx
+++ b/frontend/src/assets/icon.jsx
@@ -78,7 +78,7 @@ export const StarIcon = (
 /* ---------- deep accent (#8B5E34) --------------------------------------- */
 
 export const HomeIcon = (
-  <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke={DEEP}>
+  <svg className="w-5 h-5 text-[#E9967A]" viewBox="0 0 24 24" fill="none" stroke={PRIMARY}>
     <path
       strokeLinecap="round"
       strokeLinejoin="round"
@@ -133,7 +133,7 @@ export const ExamIcon = (
 );
 
 export const EditIcon = (
-  <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke={PRIMARY}>
+  <svg className="w-6 h-6 text-[#E9967A]" viewBox="0 0 24 24" fill="none" stroke={PRIMARY}>
     {strokeIcon(
       "M10.779 17.779 4.36 19.918 6.5 13.5m4.279 4.279 8.364-8.643a3.027 3.027 0 0 0-2.14-5.165 3.03 3.03 0 0 0-2.14.886L6.5 13.5m4.279 4.279L6.499 13.5m2.14 2.14 6.213-6.504M12.75 7.04 17 11.28"
     )}
@@ -141,7 +141,7 @@ export const EditIcon = (
 );
 
 export const SmallEditIcon = (
-  <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke={PRIMARY}>
+  <svg className="w-4 h-4 text-[#E9967A]" viewBox="0 0 24 24" fill="none" stroke={PRIMARY}>
     {strokeIcon(
       "M10.779 17.779 4.36 19.918 6.5 13.5m4.279 4.279 8.364-8.643a3.027 3.027 0 0 0-2.14-5.165 3.03 3.03 0 0 0-2.14.886L6.5 13.5m4.279 4.279L6.499 13.5m2.14 2.14 6.213-6.504M12.75 7.04 17 11.28"
     )}
@@ -175,7 +175,7 @@ export const LightIcon = (
 /* Calendar and navigation icons ------------------------------------------- */
 export const CalendarIcon = (
   <svg
-    className="w-4 h-4 text-yellow-600 dark:text-white"
+    className="w-6 h-6 text-yellow-600 dark:text-white"
     aria-hidden="true"
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
@@ -476,4 +476,11 @@ export const pfpIcon = (
   <svg className="w-5 h-5 text-orange-300 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
     <path fillRule="evenodd" d="M12 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm-2 9a4 4 0 0 0-4 4v1a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-1a4 4 0 0 0-4-4h-4Z" clipRule="evenodd"/>
   </svg>
-);
\ No newline at end of file
+);
+
+export const MessageIcon = (<svg className="w-7 h-7 text-yellow-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 10.5h.01m-4.01 0h.01M8 10.5h.01M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-6.6a1 1 0 0 0-.69.275l-2.866 2.723A.5.5 0 0 1 8 18.635V17a1 1 0 0 0-1-1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z"/>
+</svg>
+
+
+)
\ No newline at end of file
diff --git a/frontend/src/components/landing/Header.jsx b/frontend/src/components/landing/Header.jsx
index e1e30adb..dec6a426 100644
--- a/frontend/src/components/landing/Header.jsx
+++ b/frontend/src/components/landing/Header.jsx
@@ -2,7 +2,7 @@ import { useEffect } from "react";
 import logo from "../../assets/logo.png";
 import { useNavigate } from "react-router-dom";
 import { logout } from "../../services/authService";
-
+import { MessageIcon } from "../../assets/icon";
 const Header = (props) => {
   const navigate = useNavigate();
   const { setIsLoggedIn } = props; // Destructure the specific prop
@@ -29,16 +29,16 @@ const Header = (props) => {
       </div>
 
       {/* Center - Navigation */}
-      <div className="flex justify-center w-1/3 gap-6 font-semibold">
+      <div className="flex justify-center w-1/3 gap-8 font-semibold">
         <button
-          className="py-2 w-20 rounded-full bg-transparent hover:bg-gray-400/20 transition-all duration-200"
+          className="py-2 px-4 w-20 rounded-full bg-transparent hover:bg-gray-400/20 transition-all duration-200"
           onClick={() => navigate("/")}
         >
           Home
         </button>
         {props.isLoggedIn && (
           <button
-            className="py-2 w-20 rounded-full bg-transparent hover:bg-gray-400/20 transition-all duration-200"
+            className="py-2 px-4 w-20 rounded-full bg-transparent hover:bg-gray-400/20 transition-all duration-200"
             onClick={() =>
               navigate(`/tutor/profile/${localStorage.getItem("userId")}`)
             }
@@ -47,36 +47,37 @@ const Header = (props) => {
           </button>
         )}
         <button
-          className="py-2 w-20 rounded-full bg-transparent hover:bg-gray-400/20 transition-all duration-200"
+          className="py-2 px-4 w-24 rounded-full bg-transparent hover:bg-gray-400/20 transition-all duration-200"
           onClick={() => navigate("/meetings/create")}
-        >
-          Schedule
-        </button>
-        <button
-          className="py-2 w-20 rounded-full bg-transparent hover:bg-gray-400/20 transition-all duration-200"
-          onClick={() => navigate("/meetings")}
         >
           Calendar
         </button>
-        <button className="py-2 w-20 rounded-full bg-transparent hover:bg-gray-400/20 transition-all duration-200"
+        <button className="py-2 px-4 w-20 rounded-full bg-transparent hover:bg-gray-400/20 transition-all duration-200"
           onClick={() =>
             navigate('/listing')
           }>
           Tutors
         </button>
-        <button className="py-2 w-20 rounded-full bg-transparent hover:bg-gray-400/20 transition-all duration-200"
-        onClick={() =>
-          navigate(`/dashboard/${localStorage.getItem("userId")}`)
-        }>
+        <button className="py-2 px-4 w-24 rounded-full bg-transparent hover:bg-gray-400/20 transition-all duration-200"
+          onClick={() =>
+            navigate(`/dashboard/${localStorage.getItem("userId")}`)
+          }>
           Meetings
         </button>
-        <button className="py-2 w-20 rounded-full bg-transparent hover:bg-gray-400/20 transition-all duration-200">
+        {/* <button className="py-2 w-20 rounded-full bg-transparent hover:bg-gray-400/20 transition-all duration-200">
           Contact
-        </button>
+        </button> */}
       </div>
 
       {/* Right - Log In/Log Out */}
-      <div className="flex justify-end w-1/3">
+      <div className="flex justify-end w-1/3 gap-4">
+        <button
+          // onClick={() => setIsModalOpen(true)}
+          className="py-1 px-4 rounded-full bg-gray-300/30 hover:bg-gray-400/40 transition-all duration-200"
+          aria-label="Messenger"
+        >
+          {MessageIcon}
+        </button>
         {props.isLoggedIn ? (
           <button
             className="py-1 px-4 text-sm font-semibold rounded-full bg-yellow-800 text-white hover:bg-yellow-900 transition-color duration-200"
diff --git a/frontend/src/components/tutor_profile/edit/BasicInforEdit.jsx b/frontend/src/components/tutor_profile/edit/BasicInforEdit.jsx
index 3b4ce2f4..8fd5c382 100644
--- a/frontend/src/components/tutor_profile/edit/BasicInforEdit.jsx
+++ b/frontend/src/components/tutor_profile/edit/BasicInforEdit.jsx
@@ -2,7 +2,6 @@ import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
   EmailIcon,
-  StarIcon,
   EditIcon,
   CameraIcon,
   CalendarIcon,
@@ -77,7 +76,7 @@ const BasicInforEdit = ({ data, showToast }) => {
           <button
             type="button"
             onClick={() => navigate(`/meetings/tutor/${id}`)}
-            className="p-2 rounded-full bg-transparent hover:bg-yellow-100 focus:outline-none focus:ring-1 focus:ring-yellow-600"
+            className="p-2 rounded-full bg-transparent hover:bg-gray-400/20 transition-all duration-200"
             aria-label="Open tutor calendar"
           >
             {CalendarIcon}
@@ -117,25 +116,22 @@ const BasicInforEdit = ({ data, showToast }) => {
               {EmailIcon}
               <div>{tutorEmail}</div>
             </div>
-            <div className="flex gap-1">
+            {/* <div className="flex gap-1">
               Rated {5}
               {StarIcon}by 5 students
-            </div>
+            </div> */}
           </div>
         </div>
-        <div className="flex justify-between">
-          <div className="flex flex-wrap w-3/5 gap-3 mt-3">
+        <div className='flex justify-between items-end mt-5'>
+          <div className='flex flex-wrap gap-3 max-w-4xl'>
             {tutorTeachingStyle?.map((style, index) => (
-              <div
-                key={index}
-                className="px-4 py-1 bg-gray-200 rounded-xl text-center hover:bg-gray-300"
-              >
+              <div key={index} className='px-4 py-2 bg-gray-100 rounded-full text-sm font-medium text-gray-700 hover:bg-gray-200 transition-colors'>
                 {style}
               </div>
             ))}
           </div>
-          <div className="text-3xl font-bold pb-2 text-yellow-800">
-            {tutorHourlyRate}$/h
+          <div className='text-4xl font-bold text-yellow-800 whitespace-nowrap ml-6'>
+            ${tutorHourlyRate}/h
           </div>
         </div>
       </div>
diff --git a/frontend/src/components/tutor_profile/watch/BasicInfor.jsx b/frontend/src/components/tutor_profile/watch/BasicInfor.jsx
index 1cf817a9..7174b883 100644
--- a/frontend/src/components/tutor_profile/watch/BasicInfor.jsx
+++ b/frontend/src/components/tutor_profile/watch/BasicInfor.jsx
@@ -1,72 +1,101 @@
-import { EmailIcon, StarIcon } from '../../../assets/icon'
-import avatars from '../AvatarList'
-import covers from '../CoverList'
+import { EmailIcon, CalendarIcon } from "../../../assets/icon";
+import { useNavigate, useParams } from "react-router-dom";
+import avatars from "../AvatarList";
+import covers from "../CoverList";
 
 const BasicInfor = ({ data }) => {
-    const { username, email, bio, teaching_style, hourly_rate, avatar, cover } = data
+    const { id } = useParams();
+    const navigate = useNavigate(); // Make sure this is useNavigate, NOT useNavigation
+    const { username, email, bio, teaching_style, hourly_rate, avatar, cover } =
+        data;
 
     const parseTeachingStyle = (styleData) => {
         if (Array.isArray(styleData)) {
             return styleData;
         }
-        if (typeof styleData === 'string') {
+        if (typeof styleData === "string") {
             try {
                 return JSON.parse(styleData);
             } catch (error) {
-                console.warn('Failed to parse teaching_style:', error);
+                console.warn("Failed to parse teaching_style:", error);
                 return [];
             }
         }
         return [];
     };
 
-    const teachingStyle = parseTeachingStyle(teaching_style)
-    // const teachingStyle = teaching_style
-    const fetchAvatar = avatars.find((ava) => ava.id === avatar)
-    const fetchCover = covers.find((cov) => cov.id === cover)
+    const teachingStyle = parseTeachingStyle(teaching_style);
+    const fetchAvatar = avatars.find((ava) => ava.id === avatar);
+    const fetchCover = covers.find((cov) => cov.id === cover);
 
     return (
         <div>
-            <div className="h-52 bg-gray-200 rounded-tl-xl rounded-tr-xl relative"
-                style={{ backgroundImage: `url(${fetchCover.src})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
+            <div
+                className="h-52 bg-gray-200 rounded-tl-xl rounded-tr-xl relative"
+                style={{
+                    backgroundImage: `url(${fetchCover?.src})`,
+                    backgroundSize: "cover",
+                    backgroundPosition: "center",
+                }}
+            >
+                {/* Calendar Button - positioned exactly like in BasicInforEdit */}
+                <div className="absolute top-56 right-8">
+                    <button
+                        type="button"
+                        onClick={() => navigate(`/meetings/tutor/${id}`)}
+                        className="p-2 rounded-full bg-transparent hover:bg-yellow-100 focus:outline-none focus:ring-1 focus:ring-yellow-600"
+                        aria-label="Open tutor calendar"
+                    >
+                        {CalendarIcon}
+                    </button>
+                </div>
+
                 {/* Profile Section */}
                 <div className="relative">
                     {/* Avatar */}
                     <div className="absolute top-24 left-12 z-10">
                         <div className="w-40 h-40 bg-gray-300 rounded-full border-4 border-white relative">
-                            <img src={fetchAvatar.src} alt="Avatar" className="w-full h-full object-cover rounded-full" />
+                            <img
+                                src={fetchAvatar?.src}
+                                alt="Avatar"
+                                className="w-full h-full object-cover rounded-full"
+                            />
                         </div>
                     </div>
                 </div>
             </div>
-            <div className='flex flex-col px-10 py-10 mt-4 gap-1'>
-                <div className='flex justify-between'>
-                    <div className='flex flex-col gap-4'>
-                        <div className='text-4xl text-yellow-800 font-bold'>{username}</div>
-                        <div className='ml-1'>{bio}</div>
+            <div className="flex flex-col px-10 py-10 mt-4 gap-1">
+                <div className="flex justify-between">
+                    <div className="flex flex-col gap-4">
+                        <div className="text-4xl text-yellow-800 font-bold">{username}</div>
+                        <div className="ml-1">{bio}</div>
                     </div>
-                    <div className='flex flex-col gap-4 items-end mt-3'>
-                        <div className='flex gap-3'>
+                    <div className="flex flex-col gap-4 items-end mt-3">
+                        <div className="flex gap-3">
                             {EmailIcon}
                             <div>{email}</div>
                         </div>
-                        <div className='flex gap-1'>Rated {5}{StarIcon}by 5 students</div>
+                        {/* <div className="flex gap-1">
+                            Rated {5}
+                            {StarIcon}by 5 students
+                        </div> */}
                     </div>
                 </div>
-                <div className='flex justify-between'>
-                    <div className='flex gap-3 mt-3'>
+                <div className='flex justify-between items-end mt-5'>
+                    <div className='flex flex-wrap gap-3 max-w-4xl'>
                         {teachingStyle?.map((style, index) => (
-                            <div key={index} className='px-4 py-1 bg-gray-200 rounded-xl text-center hover:bg-gray-300'>
+                            <div key={index} className='px-4 py-2 bg-gray-100 rounded-full text-sm font-medium text-gray-700 hover:bg-gray-200 transition-colors'>
                                 {style}
                             </div>
                         ))}
                     </div>
-                    <div className='text-3xl font-bold pb-2 text-yellow-800'>{hourly_rate}$/h</div>
+                    <div className='text-4xl font-bold text-yellow-800 whitespace-nowrap ml-6'>
+                        ${hourly_rate}/h
+                    </div>
                 </div>
             </div>
         </div>
+    );
+};
 
-    )
-}
-
-export default BasicInfor 
\ No newline at end of file
+export default BasicInfor;
\ No newline at end of file
diff --git a/frontend/src/pages/auth/LogIn.jsx b/frontend/src/pages/auth/LogIn.jsx
index 895d1055..5b32a3f6 100644
--- a/frontend/src/pages/auth/LogIn.jsx
+++ b/frontend/src/pages/auth/LogIn.jsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { login } from "../../services/authService";
 import toastpic from "../../assets/landingpic.jpg";
 import { useNavigate } from "react-router-dom";
-import { toast, Toaster } from "react-hot-toast";
+import { toast } from "react-hot-toast";
 import { EyeCloseIcon, EyeOpenIcon } from "../../assets/icon";
 
 const LogIn = (props) => {
@@ -44,7 +44,7 @@ const LogIn = (props) => {
 
   return (
     <div className="flex items-center justify-center h-screen bg-yellow-50 -mt-6">
-      <Toaster position="top-center" reverseOrder={false} />
+      {/* <Toaster position="top-center" reverseOrder={false} /> */}
       <div className="relative w-full max-w-md">
         {/* Image Block */}
         <div
diff --git a/frontend/src/pages/auth/SignUp.jsx b/frontend/src/pages/auth/SignUp.jsx
index 937694a9..6f7cf5bb 100644
--- a/frontend/src/pages/auth/SignUp.jsx
+++ b/frontend/src/pages/auth/SignUp.jsx
@@ -1,7 +1,7 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { register } from "../../services/authService";
 import { useNavigate } from "react-router-dom";
-import { toast } from "react-hot-toast";
+import toast from "react-hot-toast";
 import { EyeCloseIcon, EyeOpenIcon } from "../../assets/icon";
 
 const SignUp = () => {
@@ -10,9 +10,6 @@ const SignUp = () => {
   const [confirmPassword, setConfirmPassword] = useState("");
 
   const [showPassword, setShowPassword] = useState(false);
-  const renderEyeIcon = (isOpen) => {
-    return React.cloneElement(isOpen ? EyeOpenIcon : EyeCloseIcon);
-  };
 
   const [formData, setFormData] = useState({
     username: "",
@@ -185,7 +182,7 @@ const SignUp = () => {
                   onClick={() => setShowPassword(!showPassword)}
                   className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700 focus:outline-none"
                 >
-                  {renderEyeIcon(showPassword)}
+                  {showPassword ? EyeOpenIcon : EyeCloseIcon}
                 </button>
               </div>
             </div>
diff --git a/package-lock.json b/package-lock.json
index d5b44b22..958abb8e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,15 +6,85 @@
     "": {
       "dependencies": {
         "axios": "^1.7.9",
+        "flowbite": "^3.1.2",
+        "react-hot-toast": "^2.5.2",
         "react-router-dom": "^7.1.1"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@rollup/plugin-node-resolve": {
+      "version": "15.3.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.3.1.tgz",
+      "integrity": "sha512-tgg6b91pAybXHJQMAAwW9VuWBO6Thi+q7BCNARLwSqlmsHz0XYURtGvh/AuwSADXSI4h/2uHbs7s4FzlZDGSGA==",
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.1",
+        "@types/resolve": "1.20.2",
+        "deepmerge": "^4.2.2",
+        "is-module": "^1.0.0",
+        "resolve": "^1.22.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.78.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.4.tgz",
+      "integrity": "sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@types/cookie": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
       "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
       "license": "MIT"
     },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "license": "MIT"
+    },
+    "node_modules/@types/resolve": {
+      "version": "1.20.2",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
+      "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
+      "license": "MIT"
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -53,6 +123,21 @@
         "node": ">=18"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
+    },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -62,6 +147,45 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
+    "node_modules/flowbite": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-3.1.2.tgz",
+      "integrity": "sha512-MkwSgbbybCYgMC+go6Da5idEKUFfMqc/AmSjm/2ZbdmvoKf5frLPq/eIhXc9P+rC8t9boZtUXzHDgt5whZ6A/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@popperjs/core": "^2.9.3",
+        "flowbite-datepicker": "^1.3.1",
+        "mini-svg-data-uri": "^1.4.3",
+        "postcss": "^8.5.1"
+      }
+    },
+    "node_modules/flowbite-datepicker": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/flowbite-datepicker/-/flowbite-datepicker-1.3.2.tgz",
+      "integrity": "sha512-6Nfm0MCVX3mpaR7YSCjmEO2GO8CDt6CX8ZpQnGdeu03WUCWtEPQ/uy0PUiNtIJjJZWnX0Cm3H55MOhbD1g+E/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/plugin-node-resolve": "^15.2.3",
+        "flowbite": "^2.0.0"
+      }
+    },
+    "node_modules/flowbite-datepicker/node_modules/flowbite": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-2.5.2.tgz",
+      "integrity": "sha512-kwFD3n8/YW4EG8GlY3Od9IoKND97kitO+/ejISHSqpn3vw2i5K/+ZI8Jm2V+KC4fGdnfi0XZ+TzYqQb4Q1LshA==",
+      "license": "MIT",
+      "dependencies": {
+        "@popperjs/core": "^2.9.3",
+        "flowbite-datepicker": "^1.3.0",
+        "mini-svg-data-uri": "^1.4.3"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
@@ -96,6 +220,57 @@
         "node": ">= 6"
       }
     },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/goober": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.16.tgz",
+      "integrity": "sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
+      "license": "MIT"
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -117,6 +292,85 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "license": "MIT",
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -146,6 +400,23 @@
         "react": "^19.0.0"
       }
     },
+    "node_modules/react-hot-toast": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.5.2.tgz",
+      "integrity": "sha512-Tun3BbCxzmXXM7C+NI4qiv6lT0uwGh4oAfeJyNOjYUejTsm35mK9iCaYLGv8cBz9L5YxZLx/2ii7zsIwPtPUdw==",
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.1.3",
+        "goober": "^2.1.16"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-router": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.1.tgz",
@@ -186,6 +457,26 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.25.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
@@ -199,6 +490,27 @@
       "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
       "license": "MIT"
     },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/turbo-stream": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
diff --git a/package.json b/package.json
index 9a8a2652..92a44025 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,8 @@
 {
   "dependencies": {
     "axios": "^1.7.9",
+    "flowbite": "^3.1.2",
+    "react-hot-toast": "^2.5.2",
     "react-router-dom": "^7.1.1"
   }
 }