fix:Chagned the navbar to default

Frontend/src/components/Navbar.jsx

@@ -26,19 +26,19 @@ const Navbar = () => {
   };
   return (
     <>
-      <nav className="bg-[#3D8D7A] border-gray-200 dark:bg-gray-900 ">
+      <nav className="bg-white border-gray-200 dark:bg-gray-900">
-        <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4 gap-x-12">
+        <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
           <a
             href="/"
             className="flex items-center space-x-3 rtl:space-x-reverse"
           >
             <img
-              src="/images/logo.png"
+              src="/images/logo.jpg"
               className="h-9 rounded-full"
               alt="Flowbite Logo"
             />
             <span className="self-center text-xl font-bold whitespace-nowrap dark:text-white">
-              Crop Compass
+              MentorFlux
             </span>
           </a>
           <div className="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
@@ -73,7 +73,7 @@ const Navbar = () => {
                 </div>
               )}
 
-              <ul className="py-2" aria-labelledby="user-menu-button ">
+              <ul className="py-2" aria-labelledby="user-menu-button">
                 {user?.name !== "Unloggedin User" && (
                   <>
                     <li>
@@ -153,7 +153,7 @@ const Navbar = () => {
             className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
             id="navbar-user"
           >
-            <ul className="flex flex-col font-medium p-4 md:p-0 mt-4 border rounded-lg bg-[#3D8D7A] md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 dark:bg-[#3D8D7A] md:dark:bg-[#3D8D7A] dark:border-gray-700">
+            <ul className="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
               <li>
                 <Link
                   to={"/"}

Frontend/src/components/Piechart.jsx

@@ -35,7 +35,7 @@ const Piechart = () => {
 
   return (
     <div className="bg-white md:p-6 block max-w-sm p-6 bg-no-repeat bg-center bg-cover border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
-      <h5 className="text-xl font-bold text-gray-900 dark:text-white mb-4 font-bold">
+      <h5 className="text-xl font-bold text-gray-900 dark:text-white mb-4 ">
         Cost Analysis
       </h5>
       <Chart options={chartOptions} series={series} type="donut" height={320} />

Frontend/src/main.jsx

@@ -22,6 +22,7 @@ import Settings from "./pages/UserPanel/Settings.jsx";
 import ScheduleMeeting from "./pages/UserPanel/ScheduleMeeting.jsx";
 import Support from "./pages/UserPanel/Support.jsx";
 import FeedBackAndRatings from "./pages/UserPanel/FeedBackAndRatings.jsx";
+import Monitoring from "./pages/UserPanel/Monitoring.jsx";
 
 createRoot(document.getElementById("root")).render(
   <StrictMode>
@@ -53,6 +54,7 @@ createRoot(document.getElementById("root")).render(
                 <Route path="scheduledmeetings" element={<ScheduleMeeting />} />
                 <Route path="support" element={<Support />} />
                 <Route path="feedback" element={<FeedBackAndRatings />} />
+                <Route path="monitoring" element={<Monitoring />} />
               </Route>
             </Route>
           </Routes>

Frontend/src/pages/UserPanel/Monitoring.jsx

@@ -0,0 +1,7 @@
+const Monitoring = () => {
+  return (
+  
+  );
+};
+
+export default Monitoring;