diff --git a/frontend/src/App.js b/frontend/src/App.js
index a53a80f8..3f0a5bb6 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -4,10 +4,9 @@ import "./App.css";
 import About from "./Component/About";
 import Footer from "./Component/Footer";
 import Rateus from "./Component/Rateus";
+import ChatAssistant from "./ChatAssistant/ChatAssistant";
 import Home from "./Component/Home";
 import Navbar from "./Component/Navbar/Navbar";
-import BookMark from "./Component/BookMark";
-import ChatAssistant from "./ChatAssistant/ChatAssistant";
 import NotFound from "./Component/NotFound";
 import BackToTopButton from "./Component/BackToTopButton";
 import OpenSource from "./Component/OpenSource";
@@ -15,24 +14,27 @@ import Review from "./Component/Review";
 import AOS from "aos";
 import "aos/dist/aos.css";
 import { Toaster } from "react-hot-toast";
+import BookMark from "./Component/BookMark";
 import ScrollToTop from "./Component/ScrollToTop";
 //cards
 import RemoteJobs from "./pages/RemoteJobs";
 import AI from "./pages/AI";
+import UI from "./pages/UI";
 import Movie from "./pages/Movie";
 import Extension from "./pages/Extension";
-import UI from "./pages/UI";
-import FrontendTools from "./pages/FrontendTools";
 import EthicalHacking from "./pages/EthicalHacking";
-import Faq from "./Component/Faq";
-import CodingPlatform from "./pages/CodingPlatform"; // Corrected import
+import CodingPlatform from "./pages/CodingPlateform";
 import CoursesPlatform from "./pages/CoursesPlatform";
+import FrontendTools from "./pages/FrontendTools";
+import Faq from "./Component/Faq";
 
 function App() {
   const [searchQuery, setSearchQuery] = useState("");
+
   useEffect(() => {
     AOS.init();
   }, []);
+
   return (
     <>
       <ScrollToTop />
@@ -53,10 +55,8 @@ function App() {
         <Route path="/front-end-tools" element={<FrontendTools />} />
         <Route path="/ethical-hacking" element={<EthicalHacking />} />
         <Route path="/coding-platform" element={<CodingPlatform />} />
-
-        <Route path="/courses-platform" element={<CoursesPlatform />}/>
-        {/* Define other routes as needed */}
-<Route path="*" element={<NotFound />} /> {/* 404 route */}
+        <Route path="/courses-platform" element={<CoursesPlatform />} />
+        <Route path="*" element={<NotFound />} /> {/* 404 route */}
       </Routes>
       <BackToTopButton />
       <Footer />
diff --git a/frontend/src/Component/Rateus.js b/frontend/src/Component/Rateus.js
index 1e1c861d..2bb97ae9 100644
--- a/frontend/src/Component/Rateus.js
+++ b/frontend/src/Component/Rateus.js
@@ -1,14 +1,12 @@
 import React, { useState } from "react";
-import { ToastContainer, toast } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
 import "./../style/Rateus.css";
 
 function RateUsComponent({ previousContent }) {
   const [rating, setRating] = useState(0);
   const [feedback, setFeedback] = useState("");
 
-  const handleStarClick = (star) => {
-    setRating(star);
+  const handleIconClick = (iconIndex) => {
+    setRating(iconIndex + 1);
   };
 
   const handleFeedbackChange = (e) => {
@@ -21,14 +19,8 @@ function RateUsComponent({ previousContent }) {
       // Reset the state after submitting
       setRating(0);
       setFeedback("");
-      // Show toast message
-      toast.success("Thanks For Your Feedback :)", {
-        position: "top-center"
-      });
+      // Provide feedback here (you can replace this with your custom feedback mechanism)
     } else {
-      toast.error("Please Enter All Details :(", {
-        position: "top-center"
-      });
     }
   };
 
@@ -37,14 +29,18 @@ function RateUsComponent({ previousContent }) {
       <div className="rate-us-page">
         <div className="rate-us-container">
           <h2 className="rate-us-heading">Rate Our Website</h2>
-          <div className="star-rating">
-            {[1, 2, 3, 4, 5].map((star) => (
+          <div className="icon-rating">
+            {[0, 1, 2, 3, 4].map((index) => (
               <span
-                key={star}
-                className={star <= rating ? "star filled" : "star"}
-                onClick={() => handleStarClick(star)}
+                key={index}
+                className={`icon ${index === rating - 1 ? "selected" : ""}`}
+                onClick={() => handleIconClick(index)}
               >
-                ★
+                {index === 0 && "😞"}
+                {index === 1 && "😐"}
+                {index === 2 && "😊"}
+                {index === 3 && "😃"}
+                {index === 4 && "😍"}
               </span>
             ))}
           </div>
@@ -59,7 +55,6 @@ function RateUsComponent({ previousContent }) {
           </button>
         </div>
       </div>
-      <ToastContainer />
     </>
   );
 }
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 34b77a3b..2ee224f2 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,38 +1,37 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import "./index.css";
-import { Provider } from "react-redux";
-import store from "./Store/store";
-import Darkmode from "darkmode-js";
-import { ToastContainer } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
-import App from "./App";
-import { BrowserRouter } from "react-router-dom";
-
-const root = ReactDOM.createRoot(document.getElementById("root"));
-
-const options = {
-  bottom: "unset",
-  left: "15px",
-  time: "0.5s",
-  mixColor: "#fff",
-  backgroundColor: "#051626",
-  buttonColorDark: "#8758f6",
-  buttonColorLight: "#FFFBF5",
-  saveInCookies: true,
-  label: "🌓",
-  autoMatchOsTheme: true,
-};
-
-const darkmode = new Darkmode(options);
-darkmode.showWidget();
-
-root.render(
-  <Provider store={store}>
-    <BrowserRouter>
-      <App />
-      {/* <Preloader /> */}
-      <ToastContainer />
-    </BrowserRouter>
-  </Provider>
-);
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import { Provider } from "react-redux";
+import store from "./Store/store";
+import "react-toastify/dist/ReactToastify.css";
+import App from "./App";
+import { ToastContainer } from "react-toastify";
+import Darkmode from "darkmode-js";
+import { BrowserRouter } from "react-router-dom";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+
+const options = {
+  bottom: "unset",
+  left: "15px",
+  time: "0.5s",
+  mixColor: "#fff",
+  backgroundColor: "#fff",
+  buttonColorDark: "#f0f0f0",
+  buttonColorLight: "#100f2c",
+  saveInCookies: true,
+  label: "🌓",
+  autoMatchOsTheme: true,
+};
+
+const darkmode = new Darkmode(options);
+darkmode.showWidget();
+
+root.render(
+  <Provider store={store}>
+    <BrowserRouter>
+      <App />
+      <ToastContainer />
+    </BrowserRouter>
+  </Provider>
+);
diff --git a/frontend/src/style/Home.css b/frontend/src/style/Home.css
index 7e1373c0..0439c13e 100644
--- a/frontend/src/style/Home.css
+++ b/frontend/src/style/Home.css
@@ -17,8 +17,12 @@
 }
 
 /* Custom scrollbar for webkit browsers (Chrome, Safari, Edge) */
-::-webkit-scrollbar {
-  width: 6px; /* Width of the scrollbar */
+
+::-webkit-scrollbar-track {
+  background-color: var(
+    --scrollbar-bg
+  ); /* Background color of the scrollbar track */
+  border-radius: 15px;
 }
 
 /* Custom scrollbar for Firefox */
@@ -26,13 +30,7 @@
   scrollbar-width: thin; /* Makes the scrollbar thin */
   scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg); /* Custom colors */
   border-radius: 15px;
-}
-
-::-webkit-scrollbar-track {
-  background-color: var(
-    --scrollbar-bg
-  ); /* Background color of the scrollbar track */
-  border-radius: 15px;
+  width: 6px; /* Width of the scrollbar */
 }
 /* contributor style */
 .contributors-section {
diff --git a/frontend/src/style/Navbar.css b/frontend/src/style/Navbar.css
index c57e90c3..4f442058 100644
--- a/frontend/src/style/Navbar.css
+++ b/frontend/src/style/Navbar.css
@@ -1,13 +1,11 @@
 .navbar {
-  display: flex;
   background-color: #8b5cf6;
-  padding: 5px 10px;
-  /* Decreased padding to reduce height */
+  padding: 5px 10px; /* Decreased padding to reduce height */
   position: fixed;
   width: 100%;
   top: 0px;
   left: 0px;
-  min-height: 100px;
+  height: 80px;
   align-items: center;
   justify-content: space-between;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -18,38 +16,47 @@
   padding-left: 30px;
 }
 
+.search-bar {
+  display: flex;
+  align-items: center;
+  position: relative;
+  top: -10px; /* Adjust the value as needed */
+}
+
 .navbar-content {
   display: flex;
+  text-decoration: none; /* Ensures no underline */
   list-style: none;
   padding: 0;
   margin: 0;
-  justify-content: space-between;
-  /* Add space between items */
-  width: 100%;
-  /* Make the navbar items stretch along the width */
+  justify-content: space-between; /* Add space between items */
+  width: 109%; /* Make the navbar items stretch along the width */
+}
+.navbar-content li {
+  flex-grow: 1; /* Make the navbar items stretch to fill the width */
+  margin: 0 15px; /* Add margin to create space between nav items */
+  font-size: 1.3rem;
+  text-decoration: none; /* Ensures no underline */
 }
 
 .navbar-content .nav-item {
-  flex-grow: 1;
-  /* Allow items to stretch */
+  flex-grow: 1; /* Allow items to stretch */
   text-align: center;
-  margin: 0 15px;
-  /* Add space between items */
+  text-decoration: none; /* Ensures no underline */
+  margin: 0 15px; /* Add space between items */
 }
 
-.navbar-content li {
-  flex-grow: 1;
-  /* Make the navbar items stretch to fill the width */
-  margin: 0 15px;
-  /* Add margin to create space between nav items */
-  font-size: 1.3rem;
-  animation: slideTop 1s ease forwards;
-}
 
 .logo-img {
   width: 150px;
-  margin-right: auto;
-  /* Move the logo to the left */
+  margin-right: auto; /* Move the logo to the left */
+}
+.navbar-content li {
+  list-style: none;
+  margin: 0 10px;
+  font-size: 1.3rem;
+  text-decoration: none; /* Ensures no underline */
+  animation: slideTop 1s ease forwards;
 }
 
 .card-body img {
@@ -60,77 +67,26 @@
   background: transparent;
 }
 
-.navbar-content li {
-  list-style: none;
-  margin: 0 10px;
-  font-size: 1.3rem;
-  animation: slideTop 1s ease forwards;
-}
-
 .navbar-content {
   display: flex;
   align-items: center;
 }
-
-@keyframes slideRight {
-  0% {
-    transform: translateX(100px);
-    opacity: 0;
-  }
-
-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes slideLeft {
-  0% {
-    transform: translateX(-100px);
-    opacity: 0;
-  }
-
-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes slideTop {
-  0% {
-    transform: translateY(-100px);
-    opacity: 0;
-  }
-
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
+/* Define hover effect for nav-items */
+/* Define hover effect for nav-items */
+.nav-item {
+  position: relative;
+  color: #fff;
+  transition: transform 0.3s, filter 0.3s, box-shadow 0.3s; /* Add box-shadow to transition */
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0); /* Initially no shadow */
 }
 
-@keyframes slideBottom {
-  0% {
-    transform: translateY(100px);
-    opacity: 0;
-  }
-
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
+.nav-item:hover {
+  transform: scale(1.05); /* Scale up slightly on hover */
+  filter: brightness(1.2); /* Brighten on hover for shine effect */
+  box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); /* Add glowing effect */
 }
 
-@keyframes zoomIn {
-  0% {
-    transform: scale(0);
-    opacity: 0;
-  }
 
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
 
 .navbar-left {
   display: flex;
@@ -138,14 +94,6 @@
   align-items: center;
   gap: 5px;
   animation: slideLeft 1s ease forwards;
-  height: 100%;
-}
-
-.navbar-left #logo {
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }
 
 .navbar-left #nav-icon1 {
@@ -161,7 +109,6 @@
   -o-transition: 0.5s ease-in-out;
   transition: 0.5s ease-in-out;
   cursor: pointer;
-  margin-top: -10px;
 }
 
 .navbar-left #nav-icon1 span {
@@ -216,15 +163,22 @@
   transform: rotate(-135deg);
 }
 
-.navbar-brand .open {
-  animation: unset;
+.navbar-right {
+  display: flex;
+  align-items: center;
+  animation: slideRight 1s ease forwards;
+  /* margin-right: 115px; */
+}
+
+.logo-img {
+  width: 150px;
+  margin-right: 140px; /* Move the logo to the right */
 }
 
 .nav-item a {
   color: #0e0303;
   text-decoration: none;
-  font-size: 1.2rem;
-  /* Adjust font size as needed */
+  font-size: 1.2rem; /* Adjust font size as needed */
   transition: color 0.3s;
 }
 
@@ -238,18 +192,6 @@
   color: #fff;
 }
 
-.nav-item::before {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 0;
-  height: 2px;
-  background-color: black;
-  transition: width 0.2s ease-in-out;
-}
-
 .nav-item:hover::before {
   width: 100%;
 }
@@ -269,8 +211,19 @@
   z-index: 4;
 }
 
+.nav-item::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 2px;
+  background-color: black;
+  transition: width 0.2s ease-in-out;
+}
+
 .sidebar.active {
-  top: 6.2rem;
   width: 20rem;
 }
 
@@ -290,6 +243,7 @@
 
 .sdbar-logo {
   font-size: 3rem;
+  margin-top: -15px;
 }
 
 .sidebar {
@@ -330,7 +284,7 @@
   color: rgba(0, 0, 0, 0.84);
 }
 
-@media (max-width: 1200px) {
+@media (max-width: 880px) {
   .navbar-center {
     display: none;
   }
@@ -364,6 +318,25 @@
   font-weight: 500;
 }
 
+.input {
+  border: none !important;
+  border-radius: 20px !important;
+  display: block;
+  height: calc(2.25rem + 2px);
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: #495057;
+  background-color: #fff;
+  background-clip: padding-box;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  position: relative;
+  padding-right: 40px; /* Adjust as needed */
+  flex: 1 1 auto;
+  width: 1%;
+  margin-bottom: 0;
+}
+
 .sidebar-btns {
   display: flex;
   justify-content: space-evenly;
@@ -396,7 +369,14 @@
   transition: font-size 0.3s ease, text-decoration 0.3s ease;
 }
 
+.search {
+   margin-top: 0px; 
+  position: relative;
+}
+
 .box {
+  margin-top: 15px;
+  margin-left: 65px; 
   outline: none !important;
   border-radius: 20px;
   width: 80% !important;
@@ -411,26 +391,6 @@
   border: 2.5px solid black;
 }
 
-.input {
-  border: none !important;
-  border-radius: 20px !important;
-  display: block;
-  height: calc(2.25rem + 2px);
-  padding: 0.375rem 0.75rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  color: #495057;
-  background-color: #fff;
-  background-clip: padding-box;
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  position: relative;
-  padding-right: 40px;
-  /* Adjust as needed */
-  flex: 1 1 auto;
-  width: 1%;
-  margin-bottom: 0;
-}
-
 .input:focus {
   outline: none;
   border: none !important;
@@ -490,10 +450,13 @@
 }
 
 .navbar-right {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  flex-grow: 1;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.search {
+  position: relative;
 }
 
 .box {
@@ -502,4 +465,9 @@
 
 .invisible {
   display: none;
-}
\ No newline at end of file
+}
+
+/* Ensure no underline under nav items */
+.nav-item a, .navbar-content ul li a {
+  text-decoration: none !important;
+}
diff --git a/frontend/src/style/Rateus.css b/frontend/src/style/Rateus.css
index 431fac52..7a0c2565 100644
--- a/frontend/src/style/Rateus.css
+++ b/frontend/src/style/Rateus.css
@@ -2,85 +2,69 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  height: 100vh; /* Ensure the component is centered vertically */
 }
 
 .rate-us-container {
   width: 70%;
   max-width: 600px;
   padding: 20px;
+  border: 1px solid #210202;
   border-radius: 5px;
-  background-color: #8B5CF6;
+  background-color: black;
   transition: box-shadow 0.3s, transform 0.3s;
 }
 
 .rate-us-container:hover {
-  box-shadow: 0 0 20px #8B5CF6;
+  box-shadow: 0 0 20px #7c1de2;
   transform: scale(1.05);
 }
 
 .rate-us-heading {
   text-align: center;
   margin-bottom: 20px;
-  color: #000;
+  color: #7c1de2;
 }
 
-.star-rating {
+.icon-rating {
   margin-bottom: 20px;
   display: flex;
   justify-content: center;
 }
 
-.star {
-  font-size: 24px;
-  color: #f0fafd;
+.icon {
+  font-size: 2rem; /* Increase emoji size */
   cursor: pointer;
-  transition: color 0.3s;
-  position: relative;
+  transition: transform 0.3s, filter 0.3s;
 }
 
-.star:before {
-  content: '★';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  color: transparent;
-  transition: text-shadow 0.3s, transform 0.3s;
-}
-
-.star:hover:before,
-.star.filled:before {
-  color: #184ce9;
-  text-shadow: 0 0 20px #f7b731;
-  transform: scale(1.2);
+.icon.selected {
+  transform: scale(1.0); /* Make selected emoji bigger */
+  filter: brightness(1.5); /* Shine effect */
 }
 
 .feedback-textarea {
   width: 100%;
   height: 180px;
   padding: 10px;
-  background-color: #101623;
+  border: 1px solid #060404;
   border-radius: 5px;
   resize: none;
   margin-bottom: 20px;
-  color: white;
+  font-size: 1rem; /* Adjust textarea font size */
 }
 
 .submit-button {
   width: 30%;
   padding: 10px;
-  background-color:#101623 ;
+  background-color: #7c1de2;
   color: white;
-  font-weight: 600;
   border: none;
-  border-radius: 25px;
+  border-radius: 5px;
   cursor: pointer;
   transition: background-color 0.3s;
 }
 
 .submit-button:hover {
-  background: #101623;
-  border: 2px solid #fff;
-  color: white;
+  background-color: #5f129f;
 }