diff --git a/frontend/src/App.css b/frontend/src/App.css
index 63692368..0eb65894 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,5 +1,10 @@
 .sidebar-content {
   padding: 10px;
+  cursor: pointer;
+  
+  transition: background-color 0.2s;
+} 
+ 
   cursor: pointer; 
   transition: background-color 0.2s;
 } 
diff --git a/frontend/src/App.js b/frontend/src/App.js
index f09f3a27..9e7d99b2 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,5 +1,9 @@
 import React, { useState, useEffect, Suspense, lazy } from "react";
 import { Route, Routes } from "react-router-dom"; // Correct import
+import "./App.css";  
+import About from "./Component/About"; 
+import Footer from "./Component/Footer"; 
+import Rateus from "./Component/Rateus"; 
  
 import "./App.css"; 
 import About from "./Component/About";
@@ -14,6 +18,7 @@ import BackToTopButton from "./Component/BackToTopButton";
 import OpenSource from "./Component/OpenSource";
 import Review from "./Component/Review";
 import "./App.css";
+ 
 import AOS from "aos";
 import "aos/dist/aos.css";
 import { Toaster } from "react-hot-toast";
diff --git a/frontend/src/style/Home.css b/frontend/src/style/Home.css
index 2a735026..9976cabd 100644
--- a/frontend/src/style/Home.css
+++ b/frontend/src/style/Home.css
@@ -19,13 +19,6 @@
 
 /* Custom scrollbar for webkit browsers (Chrome, Safari, Edge) */
 
-::-webkit-scrollbar-track {
-  background-color: var(
-    --scrollbar-bg
-  ); /* Background color of the scrollbar track */
-  border-radius: 15px;
-}
-
 /* Custom scrollbar for Firefox */
 ::-webkit-scrollbar {
   scrollbar-width: thin; /* Makes the scrollbar thin */
@@ -33,6 +26,12 @@
   border-radius: 15px;
   width: 6px; /* Width of the scrollbar */
 }
+::-webkit-scrollbar-track {
+  background-color: var(
+    --scrollbar-bg
+  ); /* Background color of the scrollbar track */
+  border-radius: 15px;
+}
 /* contributor style */
 .contributors-section {
   text-align: center;