diff --git a/src/App.js b/src/App.js
index f0724d7..e26ad5b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,6 +6,8 @@ import Footer from "./pages/footer";
 import Home from "./components/page1/Home";
 import Notice from "./components/page2/notice";
 import LoginSignup from './components/login/LoginSignup';
+import ScrollToTopButton from './components/ScrollToTopButton';
+
 
 // import { ThemeProvider } from './components/ThemeContext';
 // const ThemeContext = createContext();
@@ -30,7 +32,7 @@ function App() {
          {/* <Timetable /> */}
          <Home />
         <Footer/>
-        
+        <ScrollToTopButton />
     {/* </div> */}
     {/* </ThemeContext.Provider> */}
 
diff --git a/src/components/ScrollToTopButton.css b/src/components/ScrollToTopButton.css
new file mode 100644
index 0000000..5b17ad3
--- /dev/null
+++ b/src/components/ScrollToTopButton.css
@@ -0,0 +1,29 @@
+/* src/components/ScrollToTopButton.css */
+.scroll-to-top {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+}
+
+.scroll-to-top-button {
+    /* background-color: #007bff; */
+    /* color: rgb(0, 0, 0); */
+    border: none;
+    border-radius: 10%;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+    font-size: larger;
+    /* font-weight: bolder; */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
+    transition: background-color 0.5s ease-in-out, transform 0.3s ease-in-out;
+}
+
+.scroll-to-top-button:hover {
+    transform: scale(1.1);
+}
+
diff --git a/src/components/ScrollToTopButton.js b/src/components/ScrollToTopButton.js
new file mode 100644
index 0000000..ebc7f2d
--- /dev/null
+++ b/src/components/ScrollToTopButton.js
@@ -0,0 +1,43 @@
+// src/components/ScrollToTopButton.js
+import React, { useState, useEffect } from 'react';
+import './ScrollToTopButton.css'; // Create a CSS file for styling
+import { FaArrowCircleUp } from 'react-icons/fa';
+
+const ScrollToTopButton = () => {
+    const [isVisible, setIsVisible] = useState(false);
+
+    // Show button when page is scrolled down
+    const toggleVisibility = () => {
+        if (window.scrollY > 0) {
+            setIsVisible(true);
+        } else {
+            setIsVisible(false);
+        }
+    };
+
+    const scrollToTop = () => {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth',
+        });
+    };
+
+    useEffect(() => {
+        window.addEventListener('scroll', toggleVisibility);
+        return () => window.removeEventListener('scroll', toggleVisibility);
+    }, []);
+
+    return (
+        <div className="scroll-to-top">
+            {isVisible && (
+
+                < FaArrowCircleUp onClick={scrollToTop} className="scroll-to-top-button" />
+                // <button onClick={scrollToTop} className="scroll-to-top-button">
+
+                // </button>
+            )}
+        </div>
+    );
+};
+
+export default ScrollToTopButton;
diff --git a/src/components/page1/Home.js b/src/components/page1/Home.js
index 77ab249..8f3e0e0 100644
--- a/src/components/page1/Home.js
+++ b/src/components/page1/Home.js
@@ -1,6 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react'
 import '../page1/Home.css';
 import {Link} from 'react-router-dom';
+import ScrollToTopButton from '../ScrollToTopButton';
 import { ThemeContext } from '../../Content/context';
 
 function Home() {
@@ -68,6 +69,7 @@ function Home() {
 
 
      </div>
+     <ScrollToTopButton />
     </div>
   )
 }
diff --git a/src/components/page2/notice.js b/src/components/page2/notice.js
index 232a9f2..b952dfc 100644
--- a/src/components/page2/notice.js
+++ b/src/components/page2/notice.js
@@ -1,9 +1,11 @@
 import React from 'react'
 import '../page2/notice.css';
+import ScrollToTopButton from '../ScrollToTopButton';
 function notice() {
   return (
     <div className='notices'>
       <span>Get you syllabus notes timetable quantum and many more</span>
+      <ScrollToTopButton />
     </div>
   )
 }
diff --git a/src/components/page3/1Year.js b/src/components/page3/1Year.js
index 92e1822..21245ff 100644
--- a/src/components/page3/1Year.js
+++ b/src/components/page3/1Year.js
@@ -8,6 +8,7 @@ import syllabus from '../../assets/icons8-syllabus-80 (1).png';
 import pyq from "../../assets/icons8-minus-1-year-80.png"
 import Notes from "../../assets/icons8-notes-80.png"
 import youtube from "../../assets/icons8-youtube-64.png";
+import ScrollToTopButton from '../ScrollToTopButton';
 function fstYear() {
   return (
 <div>
@@ -68,6 +69,7 @@ function fstYear() {
 </div>
 
 </div>
+<ScrollToTopButton />
 </div>
   )
 }
diff --git a/src/components/page3/2Year.js b/src/components/page3/2Year.js
index 575218a..3ffcff1 100644
--- a/src/components/page3/2Year.js
+++ b/src/components/page3/2Year.js
@@ -8,6 +8,7 @@ import syllabus from '../../assets/icons8-syllabus-80 (1).png';
 import pyq from "../../assets/icons8-minus-1-year-80.png"
 import Notes from "../../assets/icons8-notes-80.png"
 import youtube from "../../assets/icons8-youtube-64.png";
+import ScrollToTopButton from '../ScrollToTopButton';
 function sndYear() {
   return (
     <div>
@@ -67,6 +68,7 @@ function sndYear() {
 </div>
 </div>
 </div>
+<ScrollToTopButton />
 {/* <Footer /> */}
   </div>
   )
diff --git a/src/components/page3/3Year.js b/src/components/page3/3Year.js
index 27322ad..e1f833a 100644
--- a/src/components/page3/3Year.js
+++ b/src/components/page3/3Year.js
@@ -8,6 +8,7 @@ import syllabus from '../../assets/icons8-syllabus-80 (1).png';
 import pyq from "../../assets/icons8-minus-1-year-80.png"
 import Notes from "../../assets/icons8-notes-80.png"
 import youtube from "../../assets/icons8-youtube-64.png";
+import ScrollToTopButton from '../ScrollToTopButton';
 
 
 function TrdYear() {
@@ -69,6 +70,7 @@ function TrdYear() {
 </div>
 </div>
 </div>
+<ScrollToTopButton />
 {/* <Footer /> */}
     </div>
   )
diff --git a/src/components/page3/4Year.js b/src/components/page3/4Year.js
index b0bffe3..7abc9e1 100644
--- a/src/components/page3/4Year.js
+++ b/src/components/page3/4Year.js
@@ -10,6 +10,7 @@ import timetable from '../../assets/sec-3A.jpg';
 import syllabus from '../../assets/syllabuswt.jpg';
 
 import ComingSoon from '../../pages/cs.js'
+import ScrollToTopButton from '../ScrollToTopButton.js';
 
 
 function fothYear() {
@@ -44,7 +45,7 @@ function fothYear() {
 
   </div>
   </div>
-
+<ScrollToTopButton />
   </div>
 
     )
diff --git a/src/components/page4/lecture.js b/src/components/page4/lecture.js
index 146f8a1..9163eae 100644
--- a/src/components/page4/lecture.js
+++ b/src/components/page4/lecture.js
@@ -5,12 +5,13 @@ import cn from '../../assets/computerNetwork.jpg';
 import da from '../../assets/dataAnalytics.jpg';
 import dbms from '../../assets/dbms.jpg';
 import daa from '../../assets/daa.jpg';
-import mlt from '../../assets/mlt.jpg'
+import mlt from '../../assets/mlt.jpg';
 import cd from '../../assets/compilerdesign.jpg';
 import oops from '../../assets/oops.jpg';
 import wt from '../../assets/wt.jpg';
 import se from '../../assets/se.jpg';
 import bd from '../../assets/bd.jpg';
+import ScrollToTopButton from '../ScrollToTopButton';
 import {FaMagnifyingGlass } from 'react-icons/fa6'
 import NoResultsFound from '../noResultsFound/index.js'
 
@@ -21,10 +22,10 @@ function Lecture() {
   // Array of lecture items
   const lectureItems = [
     { title: 'Compiler Design', image: cd, link: 'https://www.youtube.com/watch?v=zaZU4zSdQ1U&list=PL_obO5Qb5QTEZrWlX_B19OV5nJViKGnnC' },
-    { title: 'Data analytics', image: da, link: 'https://www.youtube.com/watch?v=FyxA8JsKn90&list=PL1uhi2_UdvkDp2KlegPmEjmF70O3WUODA' },
+    { title: 'Data Analytics', image: da, link: 'https://www.youtube.com/watch?v=FyxA8JsKn90&list=PL1uhi2_UdvkDp2KlegPmEjmF70O3WUODA' },
     { title: 'Design Analysis and Algorithm', image: daa, link: 'https://www.youtube.com/watch?v=twE1eiO7gEE&list=PL-JvKqQx2Atd--1Gs3WB8nmWOWRbEM7WW' },
     { title: 'Machine Learning', image: mlt, link: 'https://www.youtube.com/watch?v=OZkYkWYNTRo&list=PL5vhyNmOQ5ORE-wzDcfhQZiRM7jESvzhD' },
-    { title: 'DataBase Management system', image: dbms, link: 'https://www.youtube.com/watch?v=Agz0dyRu2uI&list=PL_obO5Qb5QTGDsMsl16VLKAxtaTqJRjER' },
+    { title: 'DataBase Management System', image: dbms, link: 'https://www.youtube.com/watch?v=Agz0dyRu2uI&list=PL_obO5Qb5QTGDsMsl16VLKAxtaTqJRjER' },
     { title: 'Computer Network', image: cn, link: 'https://www.youtube.com/watch?v=04A4PRikkCY&list=PL-JvKqQx2AteLNR8UO4UQiDmQF-Wotu5G' },
     { title: 'OOPs', image: oops, link: 'https://www.youtube.com/watch?v=82ba_at_TkM&list=PLDt-fuLi9lO9cej3TpU6_umkt_KSM8H7b' },
     { title: 'Web Technology', image: wt, link: 'https://www.youtube.com/watch?v=M8i-1oeHaDw&list=PL-JvKqQx2Atf5w_httliQrmqPpL7oLc-W' },
@@ -45,13 +46,12 @@ function Lecture() {
         <h1>Lecture</h1>
       </div>
       {/* Input field for search */}
-      <div class='inputDiv'>
-      <FaMagnifyingGlass className='left'/>
-
+      <div className="inputDiv">
+        <FaMagnifyingGlass className="left" />
         <input
-          type='text'
-          className='inputField'
-          placeholder='Search For Lectures ...'
+          type="text"
+          className="inputField"
+          placeholder="Search For Lectures ..."
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
         />
@@ -70,6 +70,7 @@ function Lecture() {
         ))}
       </div>
       : <NoResultsFound />}
+       <ScrollToTopButton />
     </div>
   );
 }
diff --git a/src/components/page4/notes.js b/src/components/page4/notes.js
index 2d70378..72d3927 100644
--- a/src/components/page4/notes.js
+++ b/src/components/page4/notes.js
@@ -4,6 +4,7 @@ import Header from '../../pages/header';
 import ComingSoon from '../../pages/cs.js';
 
 import '../page4/notes.css';
+import ScrollToTopButton from '../ScrollToTopButton.js';
 function notes() {
   return (
     <div >
@@ -16,6 +17,7 @@ function notes() {
  </div> */}
 
   <ComingSoon/>
+  <ScrollToTopButton />
     </div>
   )
 }
diff --git a/src/components/page4/pyq.js b/src/components/page4/pyq.js
index 25481fe..b7f0ab4 100644
--- a/src/components/page4/pyq.js
+++ b/src/components/page4/pyq.js
@@ -2,7 +2,8 @@ import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import Header from "../../pages/header";
 import Footer from "../../pages/footer";
-import './Pyq.css'; 
+import './Pyq.css';
+import ScrollToTopButton from '../ScrollToTopButton.js';
 
 function Pyq() {
   const yearFiles = [
@@ -78,64 +79,68 @@ function Pyq() {
     downloadFile(filePath);
   };
 
-  const { id } = useParams(); 
+  const { id } = useParams();
   const yearItem = yearFiles.find((item) => item.year === id);
   const [selectedSemester, setSelectedSemester] = useState(null);
 
   return (
-    <div className="page-container">
-      <Header />
-      <div className="container-pyq">
-        <h2 className='head'>Download Previous Year Questions</h2>
-        {yearItem && <h3 className='year-heading'>{yearItem.year} Year</h3>}
-        <div className="content-container">
-          <div className="pyq-box">
-            {!selectedSemester ? (
-              <div className="semester-selection">
-                <button className="semester-button" onClick={() => setSelectedSemester('odd')}>Odd Semester</button>
-                <button className="semester-button" onClick={() => setSelectedSemester('even')}>Even Semester</button>
-              </div>
-            ) : (
-              yearItem ? (
-                <div className="semester-container">
-                  <div className="subjects-container">
-                    {selectedSemester === 'odd' ? yearItem.oddSemesters.subjects.map((subject, subjIndex) => (
-                      <div key={subjIndex} className="subject-box">
-                        <h4 className="subject-title">{subject.name}</h4>
-                        <ul>
-                          {subject.files.map((file, fileIndex) => (
-                            <li key={fileIndex} className="file-item">
-                              <span>{file}</span>
-                              <button className="download-button" onClick={() => handleDownload(`pyqs/${yearItem.year}Year/${file}`)}>Download</button>
-                            </li>
-                          ))}
-                        </ul>
-                      </div>
-                    )) : yearItem.evenSemesters.subjects.map((subject, subjIndex) => (
-                      <div key={subjIndex} className="subject-box">
-                        <h4 className="subject-title">{subject.name}</h4>
-                        <ul>
-                          {subject.files.map((file, fileIndex) => (
-                            <li key={fileIndex} className="file-item">
-                              <span>{file}</span>
-                              <button className="download-button" onClick={() => handleDownload(`pyqs/${yearItem.year}Year/${file}`)}>Download</button>
-                            </li>
-                          ))}
-                        </ul>
-                      </div>
-                    ))}
-                  </div>
-                 
-                  <button className="back-button" onClick={() => setSelectedSemester(null)}>Back to Semester Selection</button>
+    <div>
+      <div className="page-container">
+        <Header />
+        <div className="container-pyq">
+          <h2 className='head'>Download Previous Year Questions</h2>
+          {yearItem && <h3 className='year-heading'>{yearItem.year} Year</h3>}
+          <div className="content-container">
+            <div className="pyq-box">
+              {!selectedSemester ? (
+                <div className="semester-selection">
+                  <button className="semester-button" onClick={() => setSelectedSemester('odd')}>Odd Semester</button>
+                  <button className="semester-button" onClick={() => setSelectedSemester('even')}>Even Semester</button>
                 </div>
               ) : (
-                <p>Year data not found.</p>
-              )
-            )}
+                yearItem ? (
+                  <div className="semester-container">
+                    <div className="subjects-container">
+                      {selectedSemester === 'odd' ? yearItem.oddSemesters.subjects.map((subject, subjIndex) => (
+                        <div key={subjIndex} className="subject-box">
+                          <h4 className="subject-title">{subject.name}</h4>
+                          <ul>
+                            {subject.files.map((file, fileIndex) => (
+                              <li key={fileIndex} className="file-item">
+                                <span>{file}</span>
+                                <button className="download-button" onClick={() => handleDownload(`pyqs/${yearItem.year}Year/${file}`)}>Download</button>
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      )) : yearItem.evenSemesters.subjects.map((subject, subjIndex) => (
+                        <div key={subjIndex} className="subject-box">
+                          <h4 className="subject-title">{subject.name}</h4>
+                          <ul>
+                            {subject.files.map((file, fileIndex) => (
+                              <li key={fileIndex} className="file-item">
+                                <span>{file}</span>
+                                <button className="download-button" onClick={() => handleDownload(`pyqs/${yearItem.year}Year/${file}`)}>Download</button>
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      ))}
+                    </div>
+
+                    <button className="back-button" onClick={() => setSelectedSemester(null)}>Back to Semester Selection</button>
+                  </div>
+                ) : (
+                  <p>Year data not found.</p>
+                )
+              )}
+            </div>
           </div>
         </div>
+        <ScrollToTopButton />
+        <Footer />
+
       </div>
-      <Footer />
     </div>
   );
 }
diff --git a/src/components/page4/quantum.css b/src/components/page4/quantum.css
index 21dac4b..1367269 100644
--- a/src/components/page4/quantum.css
+++ b/src/components/page4/quantum.css
@@ -1,10 +1,11 @@
-.title h1{
+.title h1 {
   display: flex;
-    justify-content: center;
-    align-items: center;
-    
+  justify-content: center;
+  align-items: center;
+
 }
-.inputField{
+
+.inputField {
   outline: none;
   border-radius: 15px;
   height: 31px;
@@ -14,14 +15,16 @@
   justify-content: center;
   align-items: center;
   padding-left: 40px;
-position: relative;
-right: 25px;
+  position: relative;
+  right: 25px;
 }
-.left{
-  position: relative ;
+
+.left {
+  position: relative;
   z-index: 99;
   color: gray;
 }
+
 .inputDiv {
   position: relative;
   display: flex;
@@ -30,6 +33,7 @@ right: 25px;
   justify-content: center;
   margin-bottom: 40px;
 }
+
 .inputDiv1 {
   position: relative;
   display: flex;
@@ -39,8 +43,10 @@ right: 25px;
   margin-bottom: 5px;
   margin-top: 40px;
 }
+
 .inputField {
-  padding-right: 20px; /* Adjust as needed */
+  padding-right: 20px;
+  /* Adjust as needed */
 }
 
 .searchIcon {
@@ -48,41 +54,48 @@ right: 25px;
   top: 50%;
   right: 10px;
   transform: translateY(-50%);
-  color: #555; /* Adjust the color as needed */
-  pointer-events: none; /* So it doesn't interfere with input */
+  color: #555;
+  /* Adjust the color as needed */
+  pointer-events: none;
+  /* So it doesn't interfere with input */
 }
 
 /* Responsive Styles */
 
-input::placeholder{
+input::placeholder {
   font-size: medium;
 }
-.inputDiv{
+
+.inputDiv {
   width: 100%;
   margin-top: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.link1{
-  
-    text-decoration: none;
-    color: black;
+
+.link1 {
+
+  text-decoration: none;
+  color: black;
 
 }
-@media only screen and (max-width:400px){
-  .inputDiv{
+
+@media only screen and (max-width:400px) {
+  .inputDiv {
     padding-left: 15px;
   }
 }
-.quantum-head{
- 
+
+.quantum-head {
+
   border-bottom: 2px solid #9a5959;
   justify-content: center;
   text-align: center;
   padding: 10px 0px;
 }
-.content{
+
+.content {
   padding: 50px;
   display: flex;
   justify-content: center;
@@ -92,139 +105,139 @@ input::placeholder{
   height: 50vh;
   margin-bottom: 100px;
 }
+
 .book {
-   flex: nowrap;
-   flex-direction: column;
-    position: relative;
-    border-radius: 10px;
-    width: 220px;
-    height: 300px;
-    background-color: #f5f5f5;
-    -webkit-box-shadow: 1px 1px 12px #000;
-    box-shadow: 1px 1px 12px #cecece;
-    -webkit-transform: preserve-3d;
-    -ms-transform: preserve-3d;
-    transform: preserve-3d;
-    -webkit-perspective: 2000px;
-    perspective: 2000px;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    color: #050303;
-  
-  }
-  
-  .cover {
-    top: 0;
-    position: absolute;
-    background-color: #ff0000;
-    width: 100%;
-    height: 100%;
-    border-radius: 10px;
-    cursor: pointer;
-    -webkit-transition: all 0.5s;
-    transition: all 0.5s;
-    -webkit-transform-origin: 0;
-    -ms-transform-origin: 0;
-    transform-origin: 0;
-    -webkit-box-shadow: 1px 1px 12px #000;
-    box-shadow: 1px 1px 12px #000;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-  }
-  
-  .book:hover .cover {
-    -webkit-transition: all 0.5s;
-    transition: all 0.5s;
-    -webkit-transform: rotatey(-80deg);
-    -ms-transform: rotatey(-80deg);
-    transform: rotatey(-80deg);
-  }
-  
-  p {
-    font-size: 20px;
-    font-weight: bolder;
-    
-  }
+  flex: nowrap;
+  flex-direction: column;
+  position: relative;
+  border-radius: 10px;
+  width: 220px;
+  height: 300px;
+  background-color: #f5f5f5;
+  -webkit-box-shadow: 1px 1px 12px #000;
+  box-shadow: 1px 1px 12px #cecece;
+  -webkit-transform: preserve-3d;
+  -ms-transform: preserve-3d;
+  transform: preserve-3d;
+  -webkit-perspective: 2000px;
+  perspective: 2000px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  color: #050303;
 
-  .book button{
-    display: inline-block;
-    transition: all 0.2s ease-in;
-    position: relative;
-    overflow: hidden;
-    z-index: 1;
-    color: #090909;
-    padding: 0.4em 1.6em;
-    cursor: pointer;
-    font-size: 18px;
-    border-radius: 0.5em;
-    background: #69340296;
-    border: 1px solid #e8e8e8;
- 
-  }
-  
-  .book button:active {
-    color: #666;
-    box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
-  }
-  
-  .book button:before {
-    content: "";
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%) scaleY(1) scaleX(1.25);
-    top: 100%;
-    width: 140%;
-    height: 180%;
-    background-color: rgba(0, 0, 0, 0.05);
-    border-radius: 50%;
-    display: block;
-    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
-    z-index: -1;
-  }
-  
-  .book button:after {
-    content: "";
-    position: absolute;
-    left: 55%;
-    transform: translateX(-50%) scaleY(1) scaleX(1.45);
-    top: 180%;
-    width: 160%;
-    height: 190%;
-    background-color: #009087;
-    border-radius: 50%;
-    display: block;
-    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
-    z-index: -1;
-  }
-  
-  .book button:hover {
-    color: #ffffff;
-    border: 1px solid #009087;
-  }
-  
-  .book button:hover:before {
-    top: -35%;
-    background-color: #009087;
-    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
-  }
-  
-  .book button:hover:after {
-    top: -45%;
-    background-color: #009087;
-    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
-  }
-  
\ No newline at end of file
+}
+
+.cover {
+  top: 0;
+  position: absolute;
+  background-color: #ff0000;
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  cursor: pointer;
+  -webkit-transition: all 0.5s;
+  transition: all 0.5s;
+  -webkit-transform-origin: 0;
+  -ms-transform-origin: 0;
+  transform-origin: 0;
+  -webkit-box-shadow: 1px 1px 12px #000;
+  box-shadow: 1px 1px 12px #000;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.book:hover .cover {
+  -webkit-transition: all 0.5s;
+  transition: all 0.5s;
+  -webkit-transform: rotatey(-80deg);
+  -ms-transform: rotatey(-80deg);
+  transform: rotatey(-80deg);
+}
+
+p {
+  font-size: 20px;
+  font-weight: bolder;
+
+}
+
+.book button {
+  display: inline-block;
+  transition: all 0.2s ease-in;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  color: #090909;
+  padding: 0.4em 1.6em;
+  cursor: pointer;
+  font-size: 18px;
+  border-radius: 0.5em;
+  background: #69340296;
+  border: 1px solid #e8e8e8;
+
+}
+
+.book button:active {
+  color: #666;
+  box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
+}
+
+.book button:before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%) scaleY(1) scaleX(1.25);
+  top: 100%;
+  width: 140%;
+  height: 180%;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 50%;
+  display: block;
+  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
+  z-index: -1;
+}
+
+.book button:after {
+  content: "";
+  position: absolute;
+  left: 55%;
+  transform: translateX(-50%) scaleY(1) scaleX(1.45);
+  top: 180%;
+  width: 160%;
+  height: 190%;
+  background-color: #009087;
+  border-radius: 50%;
+  display: block;
+  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
+  z-index: -1;
+}
+
+.book button:hover {
+  color: #ffffff;
+  border: 1px solid #009087;
+}
+
+.book button:hover:before {
+  top: -35%;
+  background-color: #009087;
+  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
+}
+
+.book button:hover:after {
+  top: -45%;
+  background-color: #009087;
+  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
+}
\ No newline at end of file
diff --git a/src/components/page4/syllabus.js b/src/components/page4/syllabus.js
index 8cca112..338ba1d 100644
--- a/src/components/page4/syllabus.js
+++ b/src/components/page4/syllabus.js
@@ -2,6 +2,7 @@ import React  from 'react'
 import Header from "../../pages/header";
 import Footer from "../../pages/footer";
 import '../page4/syllabus.css';
+import ScrollToTopButton from '../ScrollToTopButton';
 
 
 const Syllabus =() => {
@@ -174,6 +175,7 @@ const Syllabus =() => {
 
   </div>
 </div>
+<ScrollToTopButton />
       <Footer/>
     </div>
   )
diff --git a/src/components/page4/timetable.js b/src/components/page4/timetable.js
index 84d1a16..6eec96e 100644
--- a/src/components/page4/timetable.js
+++ b/src/components/page4/timetable.js
@@ -2,6 +2,7 @@ import React, {useState} from 'react'
 import Imgdata from '../imgdata';
 import '../page4/timetable.css';
 import Header from "../../pages/header.js"
+import ScrollToTopButton from '../ScrollToTopButton.js';
 function Timetable() {
 
     const [selectedSection, setSelectedSection] = useState(null);
@@ -30,6 +31,8 @@ function Timetable() {
       {/* apering section of timetable */}
       {selectedSection && <Imgdata section={selectedSection}/>}
 
+      <ScrollToTopButton />
+
     </div>
   )
 
diff --git a/src/components/page4/trdquantum.js b/src/components/page4/trdquantum.js
index 6b811d4..7069418 100644
--- a/src/components/page4/trdquantum.js
+++ b/src/components/page4/trdquantum.js
@@ -1,6 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import './quantum.css';
 import Header from '../../pages/header.js';
+import ScrollToTopButton from '../ScrollToTopButton.js';
+import { FaMagnifyingGlass } from 'react-icons/fa6';
+
+// Import images
 import Aquantum from '../../assets/5th.png';
 import Imgcd from '../../assets/cd.jpg';
 import Imgda from '../../assets/da.png';
@@ -11,62 +15,62 @@ import Imgwt from '../../assets/wt.png';
 import Imgitcs from '../../assets/itcsimg.jpg';
 import {FaMagnifyingGlass } from 'react-icons/fa6'
 import NoResultsFound from '../noResultsFound/index.js'
+
 const quantumBooks = [
-  { img: Imgcd, title: "Compiler Design", file: "cd" },
-  { img: Imgda, title: "Data Analytics", file: "DataAnalytics" },
-  { img: Imgdbms, title: "DBMS", file: "DatabaseManagementSystem" },
-  { img: Imgdaa, title: "DAA", file: "Design&AnalysisOfAlgorithms" },
-  { img: Aquantum, title: "Machine Learning", file: "Machine learning techniques" },
-  { img: Imgcn, title: "Computer Network", file: "ComputerNetwork" },
-  { img: Aquantum, title: "OOPs", file: "oopsquantum" },
-  { img: Imgwt, title: "Web Technology", file: "WEB TECH QUANTUM" },
-  { img: Aquantum, title: "Big Data", file: "BigData" },
-  { img: Aquantum, title: "Software Engineering", file: "sequantum" },
-  { img: Imgitcs, title: "ITCS", file: "itcs" }
+   { img: Imgcd, title: "Compiler Design", file: "cd" },
+   { img: Imgda, title: "Data Analytics", file: "DataAnalytics" },
+   { img: Imgdbms, title: "DBMS", file: "DatabaseManagementSystem" },
+   { img: Imgdaa, title: "DAA", file: "Design&AnalysisOfAlgorithms" },
+   { img: Aquantum, title: "Machine Learning", file: "Machine learning techniques" },
+   { img: Imgcn, title: "Computer Network", file: "ComputerNetwork" },
+   { img: Aquantum, title: "OOPs", file: "oopsquantum" },
+   { img: Imgwt, title: "Web Technology", file: "WEB TECH QUANTUM" },
+   { img: Aquantum, title: "Big Data", file: "BigData" },
+   { img: Aquantum, title: "Software Engineering", file: "sequantum" },
+   { img: Imgitcs, title: "ITCS", file: "itcs" }
 ];
 
 function Quantum() {
-  const [searchQuery, setSearchQuery] = useState('');
-  const [filteredBooks, setFilteredBooks] = useState(quantumBooks);
-
-  useEffect(() => {
-    setFilteredBooks(
-      quantumBooks.filter(book =>
-        book.title.toLowerCase().includes(searchQuery.toLowerCase())
-      )
-    );
-  }, [searchQuery]);
+   const [searchQuery, setSearchQuery] = useState('');
+   const [filteredBooks, setFilteredBooks] = useState(quantumBooks);
 
-  const handleDownload = (quantum) => {
-    const syllabusFilePath = process.env.PUBLIC_URL + `/quantum/${quantum}.pdf`;
+   useEffect(() => {
+      setFilteredBooks(
+         quantumBooks.filter(book =>
+            book.title.toLowerCase().includes(searchQuery.toLowerCase())
+         )
+      );
+   }, [searchQuery]);
 
-    const link = document.createElement('a');
-    link.href = syllabusFilePath;
-    link.download = `${quantum}.pdf`;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  }
+   const handleDownload = (quantum) => {
+      const syllabusFilePath = process.env.PUBLIC_URL + `/quantum/${quantum}.pdf`;
 
-  return (
-    <div>
-      <Header />
-      <div style={{ overflow: "auto" }}>
-        <div className="quantum-head">
-          <h2>Download Quantum</h2>
-        </div>
-        <div class='inputDiv1'>
-          <FaMagnifyingGlass className='left'/>
-    <input
-      type='text'
-      class='inputField'
-      placeholder='Search For Quantum...'
-      value={searchQuery}
-      onChange={(e) => setSearchQuery(e.target.value)}
-    />
-   
-</div>
+      const link = document.createElement('a');
+      link.href = syllabusFilePath;
+      link.download = `${quantum}.pdf`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+   }
 
+   return (
+      <div>
+         <Header />
+         <div style={{ overflow: "auto" }}>
+            <div className="quantum-head">
+               <h2>Download Quantum</h2>
+            </div>
+            <div className='inputDiv1'>
+               <FaMagnifyingGlass className='left' />
+               <input
+                  type='text'
+                  className='inputField'
+                  placeholder='Search For Quantum...'
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+               />
+            </div>
+            <div className="content" style={{ height: "auto", overflow: "auto" }}>
         { filteredBooks.length !== 0 ? <div className="content" style={{ height: "auto", overflow: "auto" }}>
           {filteredBooks.map(book => (
             <div className="book" key={book.title}>
@@ -78,9 +82,9 @@ function Quantum() {
             </div>
           ))}
         </div> : <NoResultsFound />}
+<ScrollToTopButton />
       </div>
-    </div>
-  )
+   )
 }
 
 export default Quantum;
diff --git a/src/components/page5(1st)/fstlecture.js b/src/components/page5(1st)/fstlecture.js
index 7e4d623..0c5ce87 100644
--- a/src/components/page5(1st)/fstlecture.js
+++ b/src/components/page5(1st)/fstlecture.js
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import Header from '../../pages/header';
 import './fstlecture.css';
+import ScrollToTopButton from '../ScrollToTopButton';
+import { FaMagnifyingGlass } from 'react-icons/fa6';
 import NoResultsFound from '../noResultsFound/index.js'
 
 // Import images
@@ -16,7 +18,6 @@ import pps from '../../assets/pps.jpg';
 import ai from '../../assets/ai.jpg';
 import ssi from '../../assets/ssi.jpg';
 import ssii from '../../assets/ssii.jpg';
-import {FaMagnifyingGlass } from 'react-icons/fa6'
 
 function Lecture() {
   // State for search query
@@ -51,13 +52,12 @@ function Lecture() {
         <h1>1st year lecture</h1>
       </div>
       {/* Input field for search */}
-      <div class='inputDiv'>
-      <FaMagnifyingGlass className='left'/>
-
+      <div className="inputDiv">
+        <FaMagnifyingGlass className="left" />
         <input
-          type='text'
-          className='inputField'
-          placeholder='Search For Lecture ...'
+          type="text"
+          className="inputField"
+          placeholder="Search For Lecture ..."
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
         />
@@ -73,7 +73,11 @@ function Lecture() {
             <a href={item.link}>View Content</a>
           </div>
         ))}
+
+      </div>
+      
       </div> : <NoResultsFound /> }
+<ScrollToTopButton />
     </div>
   );
 }
diff --git a/src/components/page5(1st)/fstpyq.js b/src/components/page5(1st)/fstpyq.js
index f4ad9c4..07dabd0 100644
--- a/src/components/page5(1st)/fstpyq.js
+++ b/src/components/page5(1st)/fstpyq.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import ComingSoon from '../../pages/cs.js';
 import Header from '../../pages/header.js';
+import ScrollToTopButton from '../ScrollToTopButton.js';
 
 
 function fstpyq() {
@@ -8,6 +9,7 @@ function fstpyq() {
     <div>
        <Header />
        <ComingSoon/>
+       <ScrollToTopButton />
     </div>
   )
 }
diff --git a/src/components/page5(1st)/fstquantum.js b/src/components/page5(1st)/fstquantum.js
index 21429d4..2dd20c1 100644
--- a/src/components/page5(1st)/fstquantum.js
+++ b/src/components/page5(1st)/fstquantum.js
@@ -11,45 +11,46 @@ import Imgchem from '../../assets/chemistry.webp';
 import Imgmath2 from '../../assets/math2.jpg';
 import Imgelectronics from '../../assets/electronics.png';
 import Imgmech from '../../assets/mechanical.jpg';
-import {FaMagnifyingGlass } from 'react-icons/fa6'
+import ScrollToTopButton from '../ScrollToTopButton.js';
+import { FaMagnifyingGlass } from 'react-icons/fa6';
 
 const books = [
-  { img: Imgphy, title: "Engineering Physics", file: "physics" },
-  { img: Imgmath1, title: "Engineering Mathematics-I", file: "Mathematics1" },
-  { img: Imgelectrical, title: "Electrical Engineering", file: "BasicElectricalEngineering" },
-  { img: Imgpps, title: "PPS", file: "ProgrammingforProblemSolving" },
-  { img: Aquantum, title: "Artificial Intelligence", file: "DatabaseManagementSystem" },
-  { img: Imgss, title: "Soft Skill-I", file: "SoftSkills1" },
-  { img: Imgchem, title: "Engineering Chemistry", file: "Chemistry" },
-  { img: Imgmath2, title: "Engineering Mathematics-II", file: "Mathematics2" },
-  { img: Imgelectronics, title: "Electronics Engineering", file: "electronics" },
-  { img: Imgmech, title: "Mechanical Engineering and Mechatronics", file: "FundamentalsofMechanicalEnggMechatronics" },
-  { img: Imgmech, title: "Emerging Technology", file: "DatabaseManagementSystem" },
-  { img: Imgmech, title: "Soft Skill-II", file: "DatabaseManagementSystem" },
+       { img: Imgphy, title: "Engineering Physics", file: "physics" },
+       { img: Imgmath1, title: "Engineering Mathematics-I", file: "Mathematics1" },
+       { img: Imgelectrical, title: "Electrical Engineering", file: "BasicElectricalEngineering" },
+       { img: Imgpps, title: "PPS", file: "ProgrammingforProblemSolving" },
+       { img: Aquantum, title: "Artificial Intelligence", file: "DatabaseManagementSystem" },
+       { img: Imgss, title: "Soft Skill-I", file: "SoftSkills1" },
+       { img: Imgchem, title: "Engineering Chemistry", file: "Chemistry" },
+       { img: Imgmath2, title: "Engineering Mathematics-II", file: "Mathematics2" },
+       { img: Imgelectronics, title: "Electronics Engineering", file: "electronics" },
+       { img: Imgmech, title: "Mechanical Engineering and Mechatronics", file: "FundamentalsofMechanicalEnggMechatronics" },
+       { img: Imgmech, title: "Emerging Technology", file: "DatabaseManagementSystem" },
+       { img: Imgmech, title: "Soft Skill-II", file: "DatabaseManagementSystem" },
 ];
 
 function Quantum() {
-  const [searchQuery, setSearchQuery] = useState('');
-  const [filteredBooks, setFilteredBooks] = useState(books);
+       const [searchQuery, setSearchQuery] = useState('');
+       const [filteredBooks, setFilteredBooks] = useState(books);
 
-  useEffect(() => {
-    setFilteredBooks(
-      books.filter(book =>
-        book.title.toLowerCase().includes(searchQuery.toLowerCase())
-      )
-    );
-  }, [searchQuery]);
+       useEffect(() => {
+              setFilteredBooks(
+                     books.filter(book =>
+                            book.title.toLowerCase().includes(searchQuery.toLowerCase())
+                     )
+              );
+       }, [searchQuery]);
 
-  const handleDownload = (quantum) => {
-    const syllabusFilePath = process.env.PUBLIC_URL + `/quantum/${quantum}.pdf`;
+       const handleDownload = (quantum) => {
+              const syllabusFilePath = process.env.PUBLIC_URL + `/quantum/${quantum}.pdf`;
 
-    const link = document.createElement('a');
-    link.href = syllabusFilePath;
-    link.download = `${quantum}.pdf`;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  }
+              const link = document.createElement('a');
+              link.href = syllabusFilePath;
+              link.download = `${quantum}.pdf`;
+              document.body.appendChild(link);
+              link.click();
+              document.body.removeChild(link);
+       };
 
   return (
     <div>
@@ -79,6 +80,7 @@ function Quantum() {
           ))}
         </div> : <NoResultsFound />}
       </div>
+ <ScrollToTopButton />
     </div>
   );
 }
diff --git a/src/components/page5(1st)/fstsyllabus.js b/src/components/page5(1st)/fstsyllabus.js
index 69f63bc..5278ad6 100644
--- a/src/components/page5(1st)/fstsyllabus.js
+++ b/src/components/page5(1st)/fstsyllabus.js
@@ -2,6 +2,7 @@ import React  from 'react'
 import Header from "../../pages/header";
 import Footer from "../../pages/footer";
 import '../page4/syllabus.css';
+import ScrollToTopButton from '../ScrollToTopButton';
 
 
 const fstsyllabus =() => {
@@ -61,6 +62,7 @@ const fstsyllabus =() => {
     </div>
   </div>
 </div>
+<ScrollToTopButton />
       <Footer/>
     </div>
   )
diff --git a/src/components/page5(1st)/fsttimetable.js b/src/components/page5(1st)/fsttimetable.js
index ebc1477..7c604c6 100644
--- a/src/components/page5(1st)/fsttimetable.js
+++ b/src/components/page5(1st)/fsttimetable.js
@@ -3,6 +3,7 @@ import Imgdata from '../imgdata';
 import '../page4/timetable.css';
 import Header from "../../pages/header.js"
 import ComingSoon from '../../pages/cs.js';
+import ScrollToTopButton from '../ScrollToTopButton.js';
 
 function  Fsttimetable() {
 
@@ -37,7 +38,7 @@ function  Fsttimetable() {
     
       {/* apering section of timetable */}
       {/* {selectedSection && <Imgdata section={selectedSection}/>} */} 
-
+      <ScrollToTopButton />
     </div>
   )
 
diff --git a/src/components/page6(2nd)/sndlecture.js b/src/components/page6(2nd)/sndlecture.js
index 61285a3..0d6930e 100644
--- a/src/components/page6(2nd)/sndlecture.js
+++ b/src/components/page6(2nd)/sndlecture.js
@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import Header from '../../pages/header';
+import ScrollToTopButton from '../ScrollToTopButton';
+import { FaMagnifyingGlass } from 'react-icons/fa6';
 import NoResultsFound from '../noResultsFound/index.js'
 import Imgmath4 from '../../assets/lmath4.jpg';
 import Imgdsa from '../../assets/ldsa.jpg';
@@ -13,7 +15,6 @@ import Imguhv from '../../assets/luhv.jpg';
 import Imgos from '../../assets/los.jpg';
 import Imgtafl from '../../assets/ltafl.jpg';
 import ssii from '../../assets/ssii.jpg';
-import {FaMagnifyingGlass } from 'react-icons/fa6'
 
 const lectures = [
   { img: Imgmath4, title: "Engineering Mathematics-4", link: "https://www.youtube.com/watch?v=14bNduEh9ag&list=PL5Dqs90qDljXYjZ8kDHtpMqPGKNGb2dxu" },
@@ -48,32 +49,33 @@ function SndLecture() {
       <div className="lecturetrd">
         <h1>2nd year lecture</h1>
       </div>
-      <div class='inputDiv'>
-      <FaMagnifyingGlass className='left'/>
-
-<input
-  type='text'
-  className='inputField'
-  placeholder='Search For Lectures ...'
-  value={searchQuery}
-  onChange={(e) => setSearchQuery(e.target.value)}
-/>
-</div>
-      <div style={{ margin: '20px' }}>
+      <div className="inputDiv">
+        <FaMagnifyingGlass className="left" />
+        <input
+          type="text"
+          className="inputField"
+          placeholder="Search For Lectures ..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+        />
       </div>
+      <div style={{ margin: '20px' }}></div>
+      <div className="container">
       { filteredLectures.length !== 0 ? <div className="container">
         {filteredLectures.map((lecture) => (
           <div className="box" key={lecture.title}>
             <div className="upper">
               <img src={lecture.img} alt={lecture.title} />
             </div>
-            <span className='text-box-in'>{lecture.title}</span>
+            <span className="text-box-in">{lecture.title}</span>
             <a href={lecture.link} target="_blank" rel="noopener noreferrer">
               View Content
             </a>
           </div>
         ))}
+      </div>
       </div> : <NoResultsFound />}
+<ScrollToTopButton />
     </div>
   );
 }
diff --git a/src/components/page6(2nd)/sndquantum.js b/src/components/page6(2nd)/sndquantum.js
index edc614e..3771053 100644
--- a/src/components/page6(2nd)/sndquantum.js
+++ b/src/components/page6(2nd)/sndquantum.js
@@ -14,7 +14,8 @@ import Imgcs from '../../assets/css.jpeg';
 import Imguhv from '../../assets/uhv.jpg';
 import Imgos from '../../assets/os.jpg';
 import Imgtafl from '../../assets/autometa.png';
-import {FaMagnifyingGlass } from 'react-icons/fa6'
+import { FaMagnifyingGlass } from 'react-icons/fa6';
+import ScrollToTopButton from '../ScrollToTopButton.js';
 import { FilterBAndW } from '@mui/icons-material';
 
 const books = [
@@ -60,6 +61,17 @@ function SndQuantum() {
       <Header />
       <div style={{ overflow: "auto" }}>
         <h2 className="quantum-head">2nd year quantum book</h2>
+        <div className='inputDiv1'>
+          <FaMagnifyingGlass className='left' />
+          <input
+            type='text'
+            className='inputField'
+            placeholder='Search For Quantum  ...'
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+        <div className="content" style={{ height: "auto" }}>
         <div class='inputDiv1'>
         <FaMagnifyingGlass className='left'/>
 
@@ -83,6 +95,7 @@ function SndQuantum() {
           ))}
         </div> : <NoResultsFound />}
       </div>
+      <ScrollToTopButton />
     </div>
   );
 }
diff --git a/src/components/page6(2nd)/sndsyllabus.js b/src/components/page6(2nd)/sndsyllabus.js
index 76893f3..7b25f7a 100644
--- a/src/components/page6(2nd)/sndsyllabus.js
+++ b/src/components/page6(2nd)/sndsyllabus.js
@@ -2,6 +2,7 @@ import React  from 'react'
 import Header from "../../pages/header";
 import Footer from "../../pages/footer";
 import '../page4/syllabus.css';
+import ScrollToTopButton from '../ScrollToTopButton';
 
 
 const Syllabus =() => {
@@ -70,6 +71,7 @@ const Syllabus =() => {
 
   </div>
 </div>
+<ScrollToTopButton />
       <Footer/>
     </div>
   )
diff --git a/src/components/page7(4yr)/frthquantum.js b/src/components/page7(4yr)/frthquantum.js
index 2647662..af3788f 100644
--- a/src/components/page7(4yr)/frthquantum.js
+++ b/src/components/page7(4yr)/frthquantum.js
@@ -1,9 +1,11 @@
 import React from 'react'
+import ScrollToTopButton from '../ScrollToTopButton'
 
 function frthquantum() {
   return (
     <div>
         
+        <ScrollToTopButton />
     </div>
   )
 }
diff --git a/src/components/page7(4yr)/frthsyllabus.js b/src/components/page7(4yr)/frthsyllabus.js
index 9c0caf3..a95a51d 100644
--- a/src/components/page7(4yr)/frthsyllabus.js
+++ b/src/components/page7(4yr)/frthsyllabus.js
@@ -2,6 +2,7 @@ import React  from 'react'
 import Header from "../../pages/header";
 import Footer from "../../pages/footer";
 import '../page4/syllabus.css';
+import ScrollToTopButton from '../ScrollToTopButton';
 
 
 const frthsyllabus =() => {
@@ -71,6 +72,7 @@ const frthsyllabus =() => {
 
   </div>
 </div>
+    <ScrollToTopButton />
       <Footer/>
     </div>
   )
diff --git a/src/components/page8(3yr)/trdsyllabus.js b/src/components/page8(3yr)/trdsyllabus.js
index 2e4ebb3..f5e4fa1 100644
--- a/src/components/page8(3yr)/trdsyllabus.js
+++ b/src/components/page8(3yr)/trdsyllabus.js
@@ -2,6 +2,7 @@ import React  from 'react'
 import Header from "../../pages/header";
 import Footer from "../../pages/footer";
 import '../page4/syllabus.css';
+import ScrollToTopButton from '../ScrollToTopButton';
 
 
 const trdsyllabus =() => {
@@ -71,6 +72,7 @@ const trdsyllabus =() => {
     </div>
   </div>
 </div>
+    <ScrollToTopButton />
       <Footer/>
     </div>
   )
diff --git a/src/components/review/review.jsx b/src/components/review/review.jsx
index 1a30e8f..d3b1581 100644
--- a/src/components/review/review.jsx
+++ b/src/components/review/review.jsx
@@ -4,6 +4,7 @@ import { Link } from "react-router-dom"; // Import Link
 import { FaStar } from "react-icons/fa";
 import 'react-toastify/dist/ReactToastify.css';
 import './review.css';
+import ScrollToTopButton from "../ScrollToTopButton";
 import { ThemeContext } from "../../Content/context";
 
 const ReviewPage = () => {
@@ -141,6 +142,7 @@ const ReviewPage = () => {
           </form>
         </div>
       </div>
+      <ScrollToTopButton />
       <ToastContainer />
     </section>
   );
diff --git a/src/index.css b/src/index.css
index fb83b1a..d603830 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,6 +10,14 @@ body {
   
 }
 
+/* Dark theme styles */
+body.dark-theme {
+  background-color: darkblue;
+  /* Dark theme background color */
+  color: white;
+  /* Dark theme text color */
+}
+
 #light{
   background-color: #fff;
 }
diff --git a/src/pages/header.css b/src/pages/header.css
index d8fb7dc..778f91e 100644
--- a/src/pages/header.css
+++ b/src/pages/header.css
@@ -233,3 +233,34 @@
     align-items: center;
   }
 
+
+/* Css for Dark / Deafult Toggler */
+
+.theme-toggler {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+  font-size: 16px;
+  font-weight: bold;
+  transition: color 0.3s ease, transform 0.3s ease;
+  svg{
+    font-size: 1.8rem;
+  }
+}
+
+.theme-toggler:hover {
+  color: #007bff;
+  /* Change color on hover */
+  transform: scale(1.1);
+  /* Add scale animation on hover */
+}
+
+.toggle-text {
+  margin-left: 8px;
+}
+
diff --git a/src/pages/header.js b/src/pages/header.js
index 622c80a..4fc6606 100644
--- a/src/pages/header.js
+++ b/src/pages/header.js
@@ -1,9 +1,38 @@
+import React, { useEffect, useState } from 'react'
 import React, { useContext } from 'react'
 import './header.css';
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
 import { colors } from '@mui/material';
 import { ThemeContext } from '../Content/context';
 // import { useTheme } from '../index';
+import { FiSun, FiMoon } from 'react-icons/fi'; // Import icons from react-icons
+
+
+function Header() {
+  const themeKey = 'theme';
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  // Function to toggle between dark and default themes
+  const toggleTheme = () => {
+    const body = document.body;
+    body.classList.toggle('dark-theme');
+    const isDarkMode = body.classList.contains('dark-theme');
+    setIsDarkMode(isDarkMode);
+    localStorage.setItem(themeKey, isDarkMode ? 'dark' : 'default');
+  };
+
+  // Check and set the theme from local storage on component mount
+  useEffect(() => {
+    const savedTheme = localStorage.getItem(themeKey);
+    if (savedTheme === 'dark') {
+      const body = document.body;
+      body.classList.add('dark-theme');
+      setIsDarkMode(true);
+    }
+  }, []);
+
+
+  //  const {isDarkMode, togglerDarkMode} =useTheme();
 
 import {HiSun,HiMoon} from 'react-icons/hi2'
 
@@ -17,7 +46,6 @@ function Header() {
             }
     }
     //  const {isDarkMode, togglerDarkMode} =useTheme();
-
   return (      
     <div className="frame">
     <div className="header">
@@ -41,6 +69,11 @@ function Header() {
          theme=='dark'? <HiSun size={"3rem"} onClick={handleClick}/>:<HiMoon size={"3rem"} onClick={handleClick}/>
          }  
         </div>
+        {/* Theme Toggler Button */}
+        <button className="theme-toggler" onClick={toggleTheme}>
+          {isDarkMode ? <FiSun /> : <FiMoon />} {/* Use icons based on theme */}
+          <span className="toggle-text">{isDarkMode ? '' : ''}</span> {/* Text based on theme */}
+        </button>
     </div>
 </div>