diff --git a/src/App.js b/src/App.js
index 37b768b0..50c68182 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,19 +5,22 @@ import Doc from "./Componet/Documetation/Doc";
 import Error from "./Componet/Error";
 import InternPage from "./Componet/Documetation/Internship/InternPage";
 import Footer from "./Componet/Footer";
-
+import { store } from "./Redux/Store/Store";
+import { Provider } from "react-redux";
 
 function App() {
-  return(
- <div>
-      <Navbar/>
-      <Routes>
-        <Route path="/" element={<Home/>}/>
-        <Route path="/docs" element={<Doc/>}/>
-        <Route path="/intern" element={<InternPage/>}/>
-        <Route path="*" element={<Error/>}/>
-      </Routes>
-      <Footer/> 
+  return (
+    <div>
+      <Provider store={store}>
+        <Navbar />
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/docs" element={<Doc />} />
+          <Route path="/intern" element={<InternPage />} />
+          <Route path="*" element={<Error />} />
+        </Routes>
+        <Footer />
+      </Provider>
     </div>
   );
 }
diff --git a/src/Componet/Documetation/Detail.jsx b/src/Componet/Documetation/Detail.jsx
index a5eea80e..a865d694 100644
--- a/src/Componet/Documetation/Detail.jsx
+++ b/src/Componet/Documetation/Detail.jsx
@@ -1,59 +1,87 @@
-import React, { useEffect, useState } from 'react'
-import Founder_img from'../../image/cz/h.png'
-import Maintainer_img from'../../image/cz/c.jpeg'
-import './Detail.css'
-import {
-    FaGithub,
-    FaLinkedin,
-  } from 'react-icons/fa6';
-import Slider from './Slider';
+import React, { useEffect, useState } from "react";
+import Founder_img from "../../image/cz/h.png";
+import Maintainer_img from "../../image/cz/c.jpeg";
+import "./Detail.css";
+import { FaGithub, FaLinkedin } from "react-icons/fa6";
+import Slider from "./Slider";
+import { useSelector } from "react-redux";
 
 function Detail() {
-    const [width, setWidth] = useState(window.innerWidth);
-    const breakpoint = 550;
+  const [width, setWidth] = useState(window.innerWidth);
+  const breakpoint = 550;
+  const theme = useSelector((state) => state.theme.theme);
+
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
 
-    useEffect(() => {
-        const handleResize = () => {
-          setWidth(window.innerWidth);
-        };
-    
-        window.addEventListener('resize', handleResize);
-        return () => {
-          window.removeEventListener('resize', handleResize);
-        };
-      }, []);
-    
   return (
-    <div style={{marginTop:"150px"}}>
-        <h1 style={{color:"rgba(128, 128, 128, 0.44)",textAlign:'center'}}> Founder And Maintainers of CareerZunction</h1>
-          <div className='ProjectD'>
-              
-              {width >= breakpoint ?
-                  (<div className='inner-container' style={{width: "100%", display: "flex", justifyContent: "space-evenly", padding:"6vh 0"}}>
-                  
-                      <div className="section_founder">
-                          <img className="fimg" src={Founder_img} alt="img" />
-                          <p>Founder : Himanshu Narware</p>
-                          <span>
-                              <a className="github" href='https://github.com/HimanshuNarware' target='_blank'><FaGithub /></a>
-                              <a className="linkedin" href='https://linkedin.com/himanshunarware ' target='_blank'><FaLinkedin /></a>
-                          </span>
+    <div style={{ marginTop: "150px" }}>
+      <h1 style={{ color: theme==="light"? "rgba(0, 0, 0, 0.616)":"rgba(128, 128, 128, 0.44)"
+      ,
+       textAlign: "center" }}>
+        {" "}
+        Founder And Maintainers of CareerZunction
+      </h1>
+      <div className="ProjectD">
+        {width >= breakpoint ? (
+          <div
+            className="inner-container"
+            style={{
+              width: "100%",
+              display: "flex",
+              justifyContent: "space-evenly",
+              padding: "6vh 0",
+            }}
+          >
+            <div className="section_founder">
+              <img className="fimg" src={Founder_img} alt="img" />
+              <p>Founder : Himanshu Narware</p>
+              <span>
+                <a
+                  className="github"
+                  href="https://github.com/HimanshuNarware"
+                  target="_blank"
+                >
+                  <FaGithub />
+                </a>
+                <a
+                  className="linkedin"
+                  href="https://linkedin.com/himanshunarware "
+                  target="_blank"
+                >
+                  <FaLinkedin />
+                </a>
+              </span>
+            </div>
 
-                      </div>
-              
-                      <div className="section_maintainer">
-                          <img className='fimg' src={Maintainer_img} alt="img" />
-                          <p>Maintainer : Chaitali Sonare</p>
-                          <span>
-                              <a className="github" href='#' target='_blank'>{<FaGithub />}</a>
-                              <a className="linkedin" href='# ' target='_blank'><FaLinkedin /></a>
-                          </span>
-                      </div>
-                  </div>) :
-                  <Slider />}
-        </div>
+            <div className="section_maintainer">
+              <img className="fimg" src={Maintainer_img} alt="img" />
+              <p>Maintainer : Chaitali Sonare</p>
+              <span>
+                <a className="github" href="#" target="_blank">
+                  {<FaGithub />}
+                </a>
+                <a className="linkedin" href="# " target="_blank">
+                  <FaLinkedin />
+                </a>
+              </span>
+            </div>
+          </div>
+        ) : (
+          <Slider />
+        )}
+      </div>
     </div>
-  )
+  );
 }
 
-export default Detail
\ No newline at end of file
+export default Detail;
diff --git a/src/Componet/Documetation/Doc.css b/src/Componet/Documetation/Doc.css
index f3bd8dce..580b4e29 100644
--- a/src/Componet/Documetation/Doc.css
+++ b/src/Componet/Documetation/Doc.css
@@ -1,66 +1,66 @@
-*{
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
-    .page_0{
-       overflow: hidden;
-    }
-    .docImg{
-border-radius: 0;
-width: 100vw;
-height: 250vh;
-z-index: 10;
-margin-top: -50px;
-    }
-    .contribution{
-        position: relative;
-        top: -80vh;
-        z-index: 10;
-    }
-    .headLine{
-        font-size: 5em;
-        margin-inline: auto;
-        text-align: center;
-        font-weight: 800;
-        color: transparent;
-        /* border: 2px solid black; */
-       text-shadow: 0px 0px 0px rgba(168, 162, 162, 0.516);
-    }
-    .TitleDoc{
-width: 100vw;
-overflow: hidden;
-background-color: rgb(0, 0, 0);
-/* margin-top: -15%; */
-top: -3em;
-z-index:9;
-position: relative;
-height: 50vh;
-color: white;
-text-align: center;
-font-weight: 700;
-/* border: 2px solid white; */
-font-size: 5em;
+.page_0 {
+  overflow: hidden;
+}
+.docImg {
+  border-radius: 0;
+  width: 100vw;
+  height: 250vh;
+  z-index: 10;
+  margin-top: -50px;
+}
+.contribution {
+  position: relative;
+  top: -80vh;
+  z-index: 10;
+}
+.headLine {
+  font-size: 5em;
+  margin-inline: auto;
+  text-align: center;
+  font-weight: 800;
+  color: transparent;
+  /* border: 2px solid black; */
+  /* text-shadow: 0px 0px 0px rgba(168, 162, 162, 0.516); */
+  /* // for light theme */
+  /* text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.616); */
+}
+.TitleDoc {
+  width: 100vw;
+  overflow: hidden;
+  /* background-color: rgb(0, 0, 0); */
+  /* margin-top: -15%; */
+  top: -3em;
+  z-index: 9;
+  position: relative;
+  height: 50vh;
+  color: white;
+  text-align: center;
+  font-weight: 700;
+  /* border: 2px solid white; */
+  font-size: 5em;
 
-padding-top: 10%;
-    }
-   
-   .ContributionImg{
-    background-color: black;
-    margin: 12px 20px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 5em;
-    align-items: center;
-    margin-bottom: 50px;
-    
-   }
-   .conImg{
-    width: 70vw;
-border-radius: 0;
+  padding-top: 10%;
+}
 
-   }
+.ContributionImg {
+  background-color: black;
+  margin: 12px 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5em;
+  align-items: center;
+  margin-bottom: 50px;
+}
+.conImg {
+  width: 70vw;
+  border-radius: 0;
+}
 
    /* mediaQwery */
    @media screen and (max-width:683px) {
@@ -92,4 +92,4 @@ margin-top: -120px;
     .contribution .headLine {
         font-size: 2em;
       }
-  }
\ No newline at end of file
+  }
diff --git a/src/Componet/Documetation/Doc.jsx b/src/Componet/Documetation/Doc.jsx
index 6891018d..a7759755 100644
--- a/src/Componet/Documetation/Doc.jsx
+++ b/src/Componet/Documetation/Doc.jsx
@@ -1,38 +1,65 @@
 /** @format */
 
+import React from "react";
+import "./Doc.css";
+import img1 from "../../image/Contribution/1.png";
+import img2 from "../../image/Contribution/2.png";
+import img3 from "../../image/Contribution/3.png";
+import img4 from "../../image/Contribution/45.png";
+import img5 from "../../image/Contribution/5.png";
+import img6 from "../../image/Contribution/6.png";
+import img7 from "../../image/Contribution/7.png";
+import img8 from "../../image/Contribution/8.png";
+import Detail from "./Detail";
 
-import React from 'react';
-import './Doc.css';
-import img1 from '../../image/Contribution/1.png';
-import img2 from '../../image/Contribution/2.png';
-import img3 from '../../image/Contribution/3.png';
-import img4 from '../../image/Contribution/45.png';
-import img5 from '../../image/Contribution/5.png';
-import img6 from '../../image/Contribution/6.png';
-import img7 from '../../image/Contribution/7.png';
-import img8 from '../../image/Contribution/8.png';
-import Detail from './Detail';
+import { useSelector } from "react-redux";
 
 function Doc() {
+  const theme = useSelector((state) => state.theme.theme);
+
   return (
     <div
       className="document"
-      style={{ backgroundColor: "black", overflow: "hidden" }}
+      style={{
+        backgroundColor: theme === "light" ? "white" : "black",
+        color: theme === "light" ? "black" : "white",
+
+        overflow: "hidden",
+      }}
     >
       <div class="page_0">
         {/* <img src={background} alt="" className="docImg" /> */}
       </div>
       <div className="contribution">
-        <h1 className="headLine">
+        <h1
+          className="headLine"
+          style={{
+            textShadow:
+              theme === "light"
+                ? "0px 0px 0px rgba(0, 0, 0, 0.616)"
+                : "0px 0px 0px rgba(168, 162, 162, 0.516)",
+          }}
+        >
           GitHub. || Git. || Open-Source. || Contribution.{" "}
         </h1>
       </div>
-      <div className="TitleDoc">Make Your First Contribution !</div>
-      <div className="ContributionImg">
+      <div
+        className="TitleDoc"
+        style={{ color: theme === "light" ? "black" : "white" }}
+      >
+        Make Your First Contribution !
+      </div>
+      <div
+        className="ContributionImg"
+        style={{
+          backgroundColor: theme === "light" ? "white" : "black",
+          // color: theme === "light" ? "black" : "white",
+        }}
+      >
         <div className="bx-1 conImg">
           <p
             style={{
-              color: "white",
+              // color: "white",
               fontSize: "1.2em",
               lineHeight: "-2px",
               margin: "10px",
@@ -48,7 +75,7 @@ function Doc() {
         <div className="bx-1 conImg">
           <p
             style={{
-              color: "white",
+              // color: "white",
               fontSize: "1.2em",
               lineHeight: "-2px",
               margin: "10px",
@@ -65,7 +92,7 @@ function Doc() {
         <div className="bx-1 conImg">
           <p
             style={{
-              color: "white",
+              // color: "white",
               fontSize: "1.2em",
               lineHeight: "-2px",
               margin: "10px",
@@ -78,7 +105,7 @@ function Doc() {
           </p>
           <p
             style={{
-              color: "white",
+              // color: "white",
               fontSize: "1.2em",
               lineHeight: "-2px",
               margin: "10px",
@@ -95,7 +122,7 @@ function Doc() {
         <div className="bx-1 conImg">
           <p
             style={{
-              color: "white",
+              // color: "white",
               fontSize: "1.2em",
               lineHeight: "-2px",
               margin: "10px",
@@ -112,7 +139,7 @@ function Doc() {
         <div className="bx-1 conImg">
           <p
             style={{
-              color: "white",
+              // color: "white",
               fontSize: "1.2em",
               lineHeight: "-2px",
               margin: "10px",
@@ -129,7 +156,7 @@ function Doc() {
         <div className="bx-1 conImg">
           <p
             style={{
-              color: "white",
+              // color: "white",
               fontSize: "1.2em",
               lineHeight: "-2px",
               margin: "10px",
@@ -146,7 +173,7 @@ function Doc() {
         <div className="bx-1 conImg">
           <p
             style={{
-              color: "white",
+              // color: "white",
               fontSize: "1.2em",
               lineHeight: "-2px",
               margin: "10px",
@@ -163,7 +190,7 @@ function Doc() {
         <div className="bx-1 conImg">
           <p
             style={{
-              color: "white",
+              // color: "white",
               fontSize: "1.2em",
               lineHeight: "-2px",
               margin: "10px",
diff --git a/src/Componet/Documetation/Internship/InternPage.jsx b/src/Componet/Documetation/Internship/InternPage.jsx
index 05c11336..396faa3b 100644
--- a/src/Componet/Documetation/Internship/InternPage.jsx
+++ b/src/Componet/Documetation/Internship/InternPage.jsx
@@ -1,22 +1,55 @@
 /** @format */
 
 import './internpage.css';
-import { useRef, useState } from 'react';
+import { useRef, useState,useEffect } from 'react';
 import PaginatedItems from '../../pagination';
+import { useSelector } from "react-redux";
 
 
 let InternPage = () => {
   // Dispatch and Subscribe
-  const button = document.querySelectorAll('viewMore');
+  const button = document.querySelectorAll("viewMore");
   const ref = useRef(null);
-
+  const theme = useSelector((state) => state.theme.theme);
   const [currentData, setCurrentData] = useState([])
   const [pageSummary, setPageSummary] = useState("")
-  // console.log(currentData)
+  
+
+  useEffect(() => {
+    let body=document.querySelector('body');
+    let box=document.querySelectorAll('.BoxContent');
+    body.classList.toggle('alternate');
+    box.forEach((element)=>{
+      element.classList.toggle('alternate');
+    });
+    
+
+    //eslint-disable-next-line
+  }, [theme==='dark']); 
+
+  //
+  // function handleClick(){
+
+  //   // console.log(ref.current.className + ' ' +"MoreDetails");
+  //   // console.log(ref.current)
+  //   let see=ref.current.parentElement.classList.toggle('MoreDetails');
+  //   // console.log(see)
+  //   // btn.parentElement.classList.toggle
+  //   // see.classList.toggle('MoreDetails');
+
+  // }
+  // for(let btn in button){
+  // btn.parentElement.classList.toggle('MoreDetails');
+  // }
 
   return (
 
-    <div style={{ background: 'black' }}>
+    <div 
+    style={{
+      backgroundColor: theme === "light" ? "white" : "black",
+      color: theme === "light" ? "black" : "white",
+     }}
+    >
 
       <p className='page-summary'>{pageSummary}</p>
 
@@ -41,19 +74,27 @@ let InternPage = () => {
               <button className='ApplyButton'>Apply Now ✅</button>
             </div> */}
 
-              <button className='viewMore' id='btn' style={{ cursor: 'pointer' }} ref={ref} onClick={() => { window.open(item.link) }} >Apply Now</button>
-
+              <button
+                className="viewMore"
+                id="btn"
+                style={{ cursor: "pointer" }}
+                ref={ref}
+                onClick={() => {
+                  window.open(item.link);
+                }}
+              >
+                Apply Now
+              </button>
             </div>
-
-          )
+          );
         })}
 
       </div>
-
+        
       <PaginatedItems setCurrentData={setCurrentData} setPageSummary={setPageSummary}/>
 
     </div>
   );
 };
 
-export default InternPage;
\ No newline at end of file
+export default InternPage;
diff --git a/src/Componet/Documetation/Internship/internpage.css b/src/Componet/Documetation/Internship/internpage.css
index ad7f24c4..8e3888cf 100644
--- a/src/Componet/Documetation/Internship/internpage.css
+++ b/src/Componet/Documetation/Internship/internpage.css
@@ -1,143 +1,176 @@
-@import url('https://fonts.googleapis.com/css2?family=Protest+Riot&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Protest+Riot&display=swap");
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 body {
-    background-color: black;
+  background-color: white;
 }
 
-.internBox{
-    /* margin-top: 150px; */
-    display: grid;
-      grid-template-columns: repeat(3,1fr);
-    color: white;
-    column-gap: 10%;
-    row-gap: 20px;
-    /* justify-content:space-around; */
-    margin-inline: 10%;
-    justify-content: space-evenly;
+body.alternate {
+  background-color: black;
+}
+
+.internBox {
+  /* margin-top: 150px; */
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  color: white;
+  column-gap: 10%;
+  row-gap: 20px;
+  /* justify-content:space-around; */
+  margin-inline: 10%;
+  justify-content: space-evenly;
+  margin-bottom: 20px;
 
-    /* background-color: black; */
-    
+  /* background-color: black; */
 }
-.BoxContent{  
-    
-    color: rgba(255, 255, 255, 0.795);
-    text-align: center;
-    width: 330px;
-    height: 400px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    overflow-y: hidden;
-    margin-block: 10px;
-    background:linear-gradient(to bottom,black,rgba(153, 0, 255, 0.279));
-    border-radius: 13px;
-    /* border: 1px dotted gray; */
-    /* box-shadow:  2px 2px 28px rgba(219, 205, 205, 0.196),-2px -2px 60px rgb(15, 15, 15); */
-    box-shadow:  -1px 3px 8px rgba(216, 211, 211, 0.082);
+
+.BoxContent {
+  
+  background:linear-gradient(to bottom,black,rgba(153, 0, 255, 0.279));
+  border-radius: 10px;
+  padding: 10px;
+  margin: 10px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+  transition: 0.5s;
+  cursor: pointer;
+  backdrop-filter: blur(10px);
+  width: 330px;
+  height: 400px;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  text-align: center;
+  overflow-y: hidden;
+  gap: 10px;
 }
 
+.BoxContent.alternate {
+  background:linear-gradient(to bottom,black,rgba(153, 0, 255, 0.279));
+
+  border-radius: 10px;
+  padding: 10px;
+  margin: 10px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+  transition: 0.5s;
+  cursor: pointer;
+  backdrop-filter: blur(10px);
+  width: 330px;
+  height: 400px;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  text-align: center;
+  overflow-y: hidden;
+  gap: 10px;
+  border: 1px solid gray;
+  /* color: black; Add this if you want the text color to be black in light theme */
+}
 
 .BoxContent:hover{
+
     box-shadow: 0.7px 0.7px 6px rgb(255, 255, 255),-0.7px -0.7px 6px rgb(255, 255, 255);
     transition: 0.5s;
     transform: scale(1.03);
 
 
-}
-
 
-.ApiImg{
-    border-radius: 5px;
-    margin-block: 10px;
-width: 250px;
-height: 120px;
-/* background-image: url(../../../image/ErrorImg/not-found-image.webp); */
-background-size:100%;
-background-position:10%;
-background-repeat: no-repeat;
-/* backdrop-filter: blue; */
-object-fit:contain;
+}
+.BoxContent.alternate:hover {
+  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1), -2px -2px 10px rgba(255, 255, 255, 0.7);
+  transition: 0.5s;
+  border: 2px solid gray;
+}
 
+.ApiImg {
+  border-radius: 5px;
+  margin-block: 10px;
+  width: 250px;
+  height: 120px;
+  /* background-image: url(../../../image/ErrorImg/not-found-image.webp); */
+  background-size: 100%;
+  background-position: 10%;
+  background-repeat: no-repeat;
+  /* backdrop-filter: blue; */
+  object-fit: contain;
 }
-.time{
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    border: 1px solid black;
-    padding-inline: 10px;
-    text-transform: capitalize;
-    gap: 10%;
+.time {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border: 1px solid black;
+  padding-inline: 10px;
+  text-transform: capitalize;
+  gap: 10%;
 }
-.viewMore{
-    color:rgb(32, 225, 32);
-    border: 2px solid rgb(32, 225, 32);
-    padding:  7px 10px ;
-    font-weight: bold;
-    border-radius: 7px;
-    background-color: transparent;
-    transition: color 0.3s, background-color 0.3s, border 0.3s;
+.viewMore {
+  color: rgb(32, 225, 32);
+  border: 2px solid rgb(32, 225, 32);
+  padding: 7px 10px;
+  font-weight: bold;
+  border-radius: 7px;
+  background-color: transparent;
+  transition: color 0.3s, background-color 0.3s, border 0.3s;
 }
 
-.viewMore:hover{
-    color: white;
-    border: 2px solid white;
-    background-color: rgba(32, 225, 32, 0.596);
+.viewMore:hover {
+  color: white;
+  border: 2px solid white;
+  background-color: rgba(32, 225, 32, 0.596);
 }
 
-.viewMore:hover{
-    background-color: rgb(32, 225, 32);
-    color: black;
-    transition: 0.5s;
+.viewMore:hover {
+  background-color: rgb(32, 225, 32);
+  color: black;
+  transition: 0.5s;
 }
 
-.BoxContent{
-    /* position: relative; */
+.BoxContent {
+  /* position: relative; */
 }
-.MoreDetails{
- position: absolute;
-    border: 1px solid white;
-    width: 89vw;
-    height: 551px;
-    left: 5%;
-    top: 0.5%;
-    backdrop-filter: blur(20px);
-    background: linear-gradient(45deg, black, transparent);
-    justify-content: space-evenly;
-    padding: 12px 18px;
-  
-.ApiImg{
-     width:550px; 
-    height: 450px; 
-    opacity:60%;
+.MoreDetails {
+  position: absolute;
+  border: 1px solid white;
+  width: 89vw;
+  height: 551px;
+  left: 5%;
+  top: 0.5%;
+  backdrop-filter: blur(20px);
+  background: linear-gradient(45deg, black, transparent);
+  justify-content: space-evenly;
+  padding: 12px 18px;
+
+  .ApiImg {
+    width: 550px;
+    height: 450px;
+    opacity: 60%;
     position: relative;
     left: -29%;
     top: 25%;
     border-radius: 10px;
-}
-.InternTitle{
-   position: relative;
-   top: -4em;
-   left: 14%;
+  }
+  .InternTitle {
+    position: relative;
+    top: -4em;
+    left: 14%;
     font-weight: bold;
-    font-size:  3em;
-    color: #C6BDD2;
-}
-.company_name{
+    font-size: 3em;
+    color: #c6bdd2;
+  }
+  .company_name {
     position: relative;
     top: -9.6em;
     left: -11.7em;
     font-size: 3em;
     font-weight: bold;
     color: #403544;
-}
-.desc{
+  }
+  .desc {
     position: relative;
     width: 35%;
     /* letter-spacing: .9px; */
@@ -145,64 +178,60 @@ object-fit:contain;
     left: 19.2%;
     text-align: start;
     font-size: 1.3em;
-    color: #8C8888;
+    color: #8c8888;
     /* text-transform:; */
-    
-}
-.internship_type{
-font-size: 1em;
-color: #817F7F;
-position: relative;
-top: -7em;
-left: -34em;
-font-weight:500;
-}
-.Stipend{
+  }
+  .internship_type {
     font-size: 1em;
-    color: #817F7F;
+    color: #817f7f;
     position: relative;
-left: -11em;
-top: -6em;
-font-weight:500;
-
-}
-    .time{
-        display: block;
-        border: none;
-    }
-    .duration{
-        font-size: 1em;
-color: #817F7F;
-position: relative;
-top: 2.5em;
-left: -12em;
-font-weight:500;
-
-    }
-    .mode{
-position: relative;
-position: relative;
-color: #817F7F;
-top: 4em;
-left: -34.7em;
-font-weight:500;
-
-    }
-    .ApplyButton{
-        position: absolute;
-        top: 30em;
-        left: 53%;
-        font-weight: bold;
-        border-radius: 8px;
-        background-color: transparent;
-        padding: 16px 32px;
-        color: #18B715;
-        border: 2px solid #18B715;
-    }
-    .viewMore{
-        position: relative;
-        top: -10em;
-    }
+    top: -7em;
+    left: -34em;
+    font-weight: 500;
+  }
+  .Stipend {
+    font-size: 1em;
+    color: #817f7f;
+    position: relative;
+    left: -11em;
+    top: -6em;
+    font-weight: 500;
+  }
+  .time {
+    display: block;
+    border: none;
+  }
+  .duration {
+    font-size: 1em;
+    color: #817f7f;
+    position: relative;
+    top: 2.5em;
+    left: -12em;
+    font-weight: 500;
+  }
+  .mode {
+    position: relative;
+    position: relative;
+    color: #817f7f;
+    top: 4em;
+    left: -34.7em;
+    font-weight: 500;
+  }
+  .ApplyButton {
+    position: absolute;
+    top: 30em;
+    left: 53%;
+    font-weight: bold;
+    border-radius: 8px;
+    background-color: transparent;
+    padding: 16px 32px;
+    color: #18b715;
+    border: 2px solid #18b715;
+  }
+  .viewMore {
+    position: relative;
+    top: -10em;
+  }
 }
 
 .page-summary {
@@ -212,50 +241,51 @@ font-weight:500;
 
 /* @mediaQwery */
 
-
-@media screen and (max-width:410px) {
-    .internBox{
-        margin-inline:10% !important;
-        /* margin-left: -50px; */
-    }
-    .BoxContent{
-        width: 80vw;
-    }
+@media screen and (max-width: 410px) {
+  .internBox {
+    margin-inline: 10% !important;
+    /* margin-left: -50px; */
+  }
+  .BoxContent {
+    width: 80vw;
+  }
 }
 
-@media screen and (max-width:420px) {
-    .internBox{
-        margin-inline:10% !important;
-        /* margin-left: -50px; */
-    }
+@media screen and (max-width: 420px) {
+  .internBox {
+    margin-inline: 10% !important;
+    /* margin-left: -50px; */
+  }
 }
-@media screen and (max-width:479px) {
-    .internBox{
-        margin-inline:12% !important;
-        /* margin-left: -50px; */
-    }
+@media screen and (max-width: 479px) {
+  .internBox {
+    margin-inline: 12% !important;
+    /* margin-left: -50px; */
+  }
 }
 
-@media screen and (max-width:683px){
-    .internBox{
-        margin-top: -120px;
-        padding-top: 50px;
+@media screen and (max-width: 683px) {
+  .internBox {
+    margin-top: -120px;
+    padding-top: 50px;
 
-        display: flex;
-        flex-direction: column;
-        /* justify-content:center !important; */
-        margin-inline:20%;
-    }
+    display: flex;
+    flex-direction: column;
+    /* justify-content:center !important; */
+    margin-inline: 20%;
+  }
+}
+@media screen and (min-width: 684px) {
+  .internBox {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
-@media screen and (min-width:684px){
-    .internBox{
-        display:grid;
-        grid-template-columns: repeat(2,1fr);
-    }
+@media screen and (min-width: 1225px) {
+  .internBox {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
 }
-@media screen and (min-width:1225px){
-    .internBox{
-        display:grid;
-        grid-template-columns: repeat(3,1fr);
-    }
-}
\ No newline at end of file
+
+
diff --git a/src/Componet/Footer.css b/src/Componet/Footer.css
index d6532ce0..85a3a936 100644
--- a/src/Componet/Footer.css
+++ b/src/Componet/Footer.css
@@ -10,30 +10,32 @@
 }
 
 .footer {
+
 	background-color: black;
 	color: white;
 
-	.footer-title {
-		font-size: 1.6em;
-		text-align: start;
-		margin: 2px;
-		padding: 3px 30px;
-		color: blueviolet;
-	}
-
-	.links {
-		display: flex;
-		margin: 0px 0px;
-		padding: 5px 0px;
-		color: blueviolet;
-	}
-	.footer-pera {
-		margin-inline: 22px;
-		padding: 6px 10px;
-		font-size: 1.2em;
-		font-weight: 400;
-		color: white;
-	}
+    .footer-title {
+        font-size: 1.6em;
+        text-align: start;
+        margin: 2px;
+        padding: 3px 30px;
+        color: blueviolet;
+    }
+    
+    .links{
+        display:flex;
+        margin:0px 0px;
+    padding: 5px 0px;
+    color:blueviolet;
+    }
+    .footer-pera {
+        margin-inline: 22px;
+        padding: 6px 10px;
+        font-size: 1.2em;
+        font-weight: 600;
+        /* color: white; */
+
+    }
 
 	.doc {
 		font-size: 1.4em;
@@ -44,21 +46,22 @@
 		color: blueviolet;
 	}
 
-	.doc-pera {
-		margin-block: 2px;
-		margin-left: 14%;
-		margin-top: 5px;
-		/* padding-top: 10px; */
-		/* // font-size: 1.2em; */
-		font-weight: 400;
-		color: rgba(128, 128, 128, 0.489);
-	}
+    .doc-pera {
+        margin-block: 2px;
+        margin-left: 14%;
+        margin-top: 5px;
+        /* padding-top: 10px; */
+        /* // font-size: 1.2em; */
+        font-weight:600;
+        /* color: rgba(128, 128, 128, 0.489); */
+
+
+    }
 
 	.doc-perag {
 		&:hover {
 			text-decoration: underline;
 		}
-		color: white;
 	}
 
 	.button-star {
diff --git a/src/Componet/Footer.jsx b/src/Componet/Footer.jsx
index 5c297f36..7037ea13 100644
--- a/src/Componet/Footer.jsx
+++ b/src/Componet/Footer.jsx
@@ -3,64 +3,108 @@
 import React from 'react';
 import { FaGithub, FaLinkedin, FaStar, FaTwitter } from 'react-icons/fa6';
 import { Link } from 'react-router-dom';
+
 import favicon from "../image/footer/favicon.png";
 import img from "../image/footer/footer-qr.jpg";
 import './Footer.css';
+import { useSelector } from "react-redux";
+
 function Footer() {
+  const theme = useSelector((state) => state.theme.theme);
+
   return (
     <div>
-      {' '}
-      <div className="page_2 footer">
-        <div className="footer-wrapper">
+      {" "}
+      <div
+        className="page_2 footer"
+        style={{
+          backgroundColor: theme === "light" ? "white" : "black",
+          color: theme === "light" ? "black" : "white",
+        }}
+      >
+        <div className="footer-wrapper"
+        
+        >
           <div className="flex">
             <h3 className="footer-title"><img src={favicon} alt="logo" className='footer-favicon'/>CareerZunction</h3>
             <p className="footer-pera">
               CareerZunction is a dynamic platform connecting eager students
               with valuable internship opportunities.
             </p>
-            
           </div>
           <div className="flex docGroup">
             <h4 className="doc">Documentation</h4>
             <div className="doc-pera">
-              <p className="doc-pera doc-perag" onClick={() => { window.open('https://opensource.com/resources/what-open-source') }}>What is Open-Source.</p>
-              <p className="doc-pera doc-perag" onClick={() => { window.open('https://opensource.guide/how-to-contribute/') }}>What is Git and GitHub.</p>
-              <p className="doc-pera doc-perag" onClick={() => { window.open('https://docs.github.com/en/get-started/using-git/about-git') }}>
+              <p
+                className="doc-pera doc-perag"
+                onClick={() => {
+                  window.open(
+                    "https://opensource.com/resources/what-open-source"
+                  );
+                }}
+              >
+                What is Open-Source.
+              </p>
+              <p
+                className="doc-pera doc-perag"
+                onClick={() => {
+                  window.open("https://opensource.guide/how-to-contribute/");
+                }}
+              >
+                What is Git and GitHub.
+              </p>
+              <p
+                className="doc-pera doc-perag"
+                onClick={() => {
+                  window.open(
+                    "https://docs.github.com/en/get-started/using-git/about-git"
+                  );
+                }}
+              >
                 How to start contributing to Open-Source.
               </p>
             </div>
           </div>
           <div className="flex licenseGroup">
             <h3 className="lice ">License </h3>
-            <h5 className="license underline" style={{ cursor: 'pointer' }}>MIT License</h5>
-            <h5 className="coc underline" style={{ cursor: 'pointer' }}>Code of Conduct</h5>
-            <h3 className='links'>Get in touch</h3>
+            <h5 className="license underline" style={{ cursor: "pointer",fontWeight:600 }}>
+              MIT License
+            </h5>
+            <h5 className="coc underline" style={{ cursor: "pointer",fontWeight:600 }}>
+              Code of Conduct
+            </h5>
+            <h3 className="links">Get in touch</h3>
             <div className="footer-socail-icon">
               <a href="https://github.com/HimanshuNarware" target="_blank">
-              <FaGithub className="github" />
+                <FaGithub className="github" />
               </a>
-              <a href="https://www.linkedin.com/in/HimanshuNarware/" target="_blank">
-              <FaLinkedin className="linkedin" />
+              <a
+                href="https://www.linkedin.com/in/HimanshuNarware/"
+                target="_blank"
+              >
+                <FaLinkedin className="linkedin" />
               </a>
               <a href="https://twitter.com/N_Himanshu_" target="_blank">
-              <FaTwitter className="twittor" />
+                <FaTwitter className="twittor" />
               </a>
             </div>
           </div>
-       <div className='flex qrsec'>
-         <img src={img} id='qr'/>
-          <button size="size" type="defautl" className="button-star">
-            <Link
-              to="https://github.com/HimanshuNarware/CareerZunction_Intern"
-              target='_blank' className='star-us'>
-              {' '}
-              <FaStar
-                style={{ margin: '-2px 2px', lineHeight: '2px' }}
-                className="star"
-              />
-              Star us
-            </Link>
-          </button>
+          <div className="flex qrsec">
+            <img src={img} id="qr" />
+            <button size="size" type="defautl" className="button-star">
+              <Link
+                to="https://github.com/HimanshuNarware/CareerZunction_Intern"
+                target="_blank"
+                className="star-us"
+              >
+                {" "}
+                <FaStar
+                  style={{ margin: "-2px 2px", lineHeight: "2px" }}
+                  className="star"
+                />
+                Star us
+              </Link>
+            </button>
           </div>
         </div>
       </div>
diff --git a/src/Componet/Home.jsx b/src/Componet/Home.jsx
index 5be984a6..a803fbe1 100644
--- a/src/Componet/Home.jsx
+++ b/src/Componet/Home.jsx
@@ -1,52 +1,62 @@
 /** @format */
 
-import React, { useState } from 'react';
-import '../Style/Home.css';
-import '../Style/util.css';
-import code from '../image/code.jpg';
-import code1 from '../image/code1.jpg';
-import code2 from '../image/code2.jpg';
-import code4 from '../image/code4.jpg';
-import code5 from '../image/code5.jpg';
-import code6 from '../image/code6.jpg';
-import code7 from '../image/code7.jpg';
-import code8 from '../image/code8.jpg';
-import img1 from '../image/desktopImg/code.jpg'
-import img6 from '../image/desktopImg/img 3.jpg'
-import img5 from '../image/desktopImg/img 4.jpg'
-import img4 from '../image/desktopImg/img 5.jpg'
-import img3 from '../image/desktopImg/img 6.jpg'
-import img2 from '../image/desktopImg/img 7.jpg'
-import img7 from '../image/desktopImg/img2.jpg'
-import img8 from '../image/desktopImg/img 9.jpg'
-import img9 from '../image/desktopImg/img 8.jpg'
-import { Button } from 'antd';
-import { GiGlobe, GiWorld } from 'react-icons/gi';
-import { FcGlobe } from 'react-icons/fc';
-import {
-  FaIndianRupeeSign,
-  FaPeopleGroup,
-} from 'react-icons/fa6';
-import { Link } from 'react-router-dom';
-
+import React, { useState } from "react";
+import "../Style/Home.css";
+import "../Style/util.css";
+import code from "../image/code.jpg";
+import code1 from "../image/code1.jpg";
+import code2 from "../image/code2.jpg";
+import code4 from "../image/code4.jpg";
+import code5 from "../image/code5.jpg";
+import code6 from "../image/code6.jpg";
+import code7 from "../image/code7.jpg";
+import code8 from "../image/code8.jpg";
+import img1 from "../image/desktopImg/code.jpg";
+import img6 from "../image/desktopImg/img 3.jpg";
+import img5 from "../image/desktopImg/img 4.jpg";
+import img4 from "../image/desktopImg/img 5.jpg";
+import img3 from "../image/desktopImg/img 6.jpg";
+import img2 from "../image/desktopImg/img 7.jpg";
+import img7 from "../image/desktopImg/img2.jpg";
+import img8 from "../image/desktopImg/img 9.jpg";
+import img9 from "../image/desktopImg/img 8.jpg";
+import { Button } from "antd";
+import { GiGlobe,GiWorld } from "react-icons/gi";
+import { FcGlobe } from "react-icons/fc";
+import { FaIndianRupeeSign, FaPeopleGroup } from "react-icons/fa6";
+import { Link } from "react-router-dom";
+import { useSelector } from "react-redux";
 
 
 function Home() {
-
-
+  const theme = useSelector((state) => state.theme.theme);
+  // console.log(theme);
   return (
     <div>
-      <div className="page_0">
+      <div className="page_0"
+      style={{
+        backgroundColor: theme === "light" ? "white" : "black",
+        color: theme === "light" ? "black" : "white",
+      
+      }}
+      >
         <div className="bx-1">
-          <h2>Elevate
+          
+          <h2>Elevate 
             <br /> Your
             <br />
             Future</h2>
           <h4>
             <i>Land your dream career.....</i> </h4>
-          <Button className='check-now'>
-            <Link to="/intern" className='link1'>
+          
+          <Button className="check-now" 
+          style={{
+        color: theme === "light" ? "black" : "white",
+
 
+          }}
+          >
+            <Link to="/intern" className="link1">
               Check Now
             </Link>
           </Button>
@@ -62,11 +72,19 @@ function Home() {
           <img className="home-img img-8" src={code8} alt="img" />
         </div>
       </div>
-      <div className="page_1">
+      <div className="page_1"
+      style={{
+        backgroundColor: theme === "light" ? "white !important" : "black !important",
+        color: theme === "light" ? "black !important" : "white !important",
+      
+      }}
+      >
         <div className="wrapper_p1">
           <div className="wrapper-bx-1 ">
             <div className="sub_title">About us</div>
-            <p className="peragraph" style={{ textAlign: 'center' }}>Find your first internship</p>
+            <p className="peragraph" style={{ textAlign: "center" }}>
+              Find your first internship
+            </p>
           </div>
           <div className="wrapper-bx-2">
             <div className="wrapper-bx-2-0 wrapper-bx-2-1 outline">
@@ -78,7 +96,7 @@ function Home() {
                 <p>The World's biggest collection of internships.</p>
               </div>
             </div>
-            {/* </div> */}
+      {/* </div> */}
             <div className="wrapper-bx-2-0 wrapper-bx-2-2 outline">
               <i className='icon' style={{ color: 'blueviolet' }}>
                 <GiGlobe />
diff --git a/src/Componet/Navbar.jsx b/src/Componet/Navbar.jsx
index a20a1397..e9156769 100644
--- a/src/Componet/Navbar.jsx
+++ b/src/Componet/Navbar.jsx
@@ -5,25 +5,33 @@ import './style.css';
 import { GiCrossMark } from 'react-icons/gi';
 import { FaGithub, FaLaptop, FaHome, FaRegSun } from 'react-icons/fa';
 import { BsFiletypeDoc } from 'react-icons/bs';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link,useNavigate } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { setTheme } from '../Redux/Slice/ThemeSlice';
 
 function Navbar() {
+  let [slidebarClick, setSlidebarClick] = useState(false);
+  const dispatch = useDispatch();
   const navigate=useNavigate();
   function handleRedirect(){
     navigate("/");
   }
-  let [slidebarClick, setSlidebarClick] = useState(false);
 
-  // function slidebarClicked(e){
-  // // slidebarClick=slidebarClick?false:true;
-  // // slidebarClick=slidebarClick?false:true;
-  // // if(slidebarClick==false).?
 
-  // console.log(slidebarClick)
+  const toggleDarkMode = () =>{
+    setSlidebarClick(!slidebarClick);
+    dispatch(setTheme(
+      slidebarClick ? 'light' : 'dark'
+    ));
+    let navbar = document.querySelector(".Navbar");
+    let link=document.querySelectorAll('.link');
+    navbar.classList.toggle("alternate");
+    link.forEach((element)=>{
+      element.classList.toggle('alternate');
+    });
 
-  // }
-
-  const toggleDarkMode = () => setSlidebarClick(!slidebarClick);
+  
+  };
 
   // </div>
   return (
diff --git a/src/Componet/style.css b/src/Componet/style.css
index 6cae9aea..861089fa 100644
--- a/src/Componet/style.css
+++ b/src/Componet/style.css
@@ -1,21 +1,36 @@
-
-
-
-.Navbar {
-    display: flex;
-    background-color: black;
-    position: sticky;
-    top: 0px;
-    background-color: #020c0c;
-    color: rgb(148, 22, 233);
-    /* font-size: 2em; */
-    font-weight: 500;
-    justify-content: space-between;
+.Navbar.alternate {
+  display: flex;
+  position: sticky;
+  top: 0px;
+  color: rgb(148, 22, 233);
+  /* font-size: 2em; */
+  font-weight: 500;
+  background-color: white;
+  justify-content: space-between;
+  z-index: 999;
+  
+    width:50;
     padding: 2em 0.93em;
-    z-index: 999;
+}
+
+.Navbar{
+  background-color: #020c0c;
+  display: flex;
+  position: sticky;
+  top: 0px;
+  color: rgb(148, 22, 233);
+  /* font-size: 2em; */
+  font-weight: 500;
+  justify-content: space-between;
+  z-index: 999;
     width:50;
+    padding: 2em 0.93em;
+  
+  
 }
- /* ::-moz-selection{
+
+/* ::-moz-selection{
+
     ::-webkit-user-select:none;
    -ms-user-select: none;
    user-select: none;
@@ -23,75 +38,71 @@
    color:black;
    
  } */
-::selection{
-::-khtml-user-select:none;
-::-moz-user-select:none;
-::-ms-user-select:none;
-::-o-user-select:none;
-user-select:none;
- }
+::selection {
+  ::-khtml-user-select: none;
+  ::-moz-user-select: none;
+  ::-ms-user-select: none;
+  ::-o-user-select: none;
+  user-select: none;
+}
 
 .nav-icons {
-    line-height: 1.6;
-    /* margin-inline: 2%; */
-    position: absolute;
-    /* top: 5px; */
-    max-width:100%;
-
+  line-height: 1.6;
+  /* margin-inline: 2%; */
+  position: absolute;
+  /* top: 5px; */
+   max-width:100%;
+  
 }
 
 .left-sight {
-    margin-left: 4%;
-
+  margin-left: 4%;
 }
 
 .right-sight {
+  display: flex;
+  gap: 1.25em;
 
-    display: flex;
-    gap: 1.25em; /*20px*/
 }
 
 /* Product file styling */
 .container {
-    display: grid;
-    gap: 10px;
-    grid-template-columns: repeat(4, 1fr);
-    margin: 20px;
-
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(4, 1fr);
+  margin: 20px;
 }
 
 .wrapper img {
-    width: 224px;
-    height: 300px;
-    border: .2px solid gray;
-    margin: 20px;
-
+  width: 224px;
+  height: 300px;
+  border: 0.2px solid gray;
+  margin: 20px;
 }
 
 .wrapper {
-    border: 2px solid rgba(0, 0, 0, 0.427);
+  border: 2px solid rgba(0, 0, 0, 0.427);
 }
 
 .button-box {
-    display: flex;
-    justify-content: space-around;
-    gap: 50px;
-    margin: 10px;
-
+  display: flex;
+  justify-content: space-around;
+  gap: 50px;
+  margin: 10px;
 }
 
 .btn {
-    font-size: large;
-    font-weight: 800;
-
-    padding: 5px 12px;
+  font-size: large;
+  font-weight: 800;
 
+  padding: 5px 12px;
 }
+
 .cart-item{
     /* text-decoration:; */
     
 }
-.link{
+.link.alternate{
     text-decoration: none;
     font-size: 1.2em;
     line-height: 2.6;
@@ -100,11 +111,31 @@ user-select:none;
     transition: all 0.4s;
 
 }
+
+.link{
+  
+  text-decoration: none;
+  font-size: 1.2em;
+  line-height: 2.6;
+  color: rgb(148, 22, 233) ;
+  position: relative;
+  transition: all 0.4s;
+
+}
+
 .link:hover{
+    color:white;
+    
+}
+
+.link.alternate:hover{
     /* text-decoration: underline; */
-    color:  rgb(255, 255, 255);
+    color:  #5f009b;
     
 }
+
+
+
 .link::after{
     content:'';
     height:2px;
@@ -120,6 +151,7 @@ user-select:none;
 .link:hover::after,
 .link:focus::after{
     opacity: 1;
+
 }
 
 
@@ -139,93 +171,88 @@ user-select:none;
 } */
 
 .sidebar {
-    display: flex;
-    gap: 10%;
-    font-size: 2em;
-    position: sticky;
-    top: 80vh;
-    background-color: #020c0c10;
-    color: rgb(148, 22, 233);
-    font-size: 2em;
-    font-weight: 500;
-    justify-content: space-between;
-    padding: 32px 15px;
-    &:hover{
-        color:rgb(67, 3, 110) ;
-    }
-    /* position:sticky;
+  display: flex;
+  gap: 10%;
+  font-size: 2em;
+  position: sticky;
+  top: 80vh;
+  background-color: #020c0c10;
+  color: rgb(148, 22, 233);
+  font-size: 2em;
+  font-weight: 500;
+  justify-content: space-between;
+  padding: 32px 15px;
+  &:hover {
+    color: rgb(67, 3, 110);
+  }
+  /* position:sticky;
     font-size: 2em;
     justify-content: space-between;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-weight: 500;
     color: rgba(206, 0, 165, 0.9);
      */
-
 }
 
 .sidebar-options {
-    /* filter: blur(1px); */
-    /* position: fixed !important; */
-    backdrop-filter: blur(100px);
-    border: .5px solid gainsboro;
-    border-radius: 12px;
-    padding: 5px 10px;
-    outline: thick double blueviolet;
-    &:hover{
-        outline-color: rgb(68, 0, 132);
-    }
-}`
+  /* filter: blur(1px); */
+  /* position: fixed !important; */
+  backdrop-filter: blur(100px);
+  border: 0.5px solid gainsboro;
+  border-radius: 12px;
+  padding: 5px 10px;
+  outline: thick double blueviolet;
+  &:hover {
+    outline-color: rgb(68, 0, 132);
+  }
+}
 
-.link{
-    text-decoration: none;
+.link {
+  text-decoration: none;
 }
 /* @mediaQwery */
-@media screen and (max-width:230px) {
-    .left-sight{
-font-size:1.4em !important ;
-margin-left: 1%;
-/* text-align: start; */
-    }     
-    .nav-icons{
-        display: none;
-    } 
-    
+@media screen and (max-width: 230px) {
+  .left-sight {
+    font-size: 1.4em !important ;
+    margin-left: 1%;
+    /* text-align: start; */
+  }
+  .nav-icons {
+    display: none;
+  }
 }
-@media screen and (max-width:320px) {
-    .left-sight{
-font-size:80% ;
-margin-left: 1% !important;
-/* text-align: start; */
-    }     
-    .nav-icons{
-        display: none;
-    } 
-    .sidebar{
-        gap: 0%;
+@media screen and (max-width: 320px) {
+  .left-sight {
+    font-size: 80%;
+    margin-left: 1% !important;
+    /* text-align: start; */
+  }
+  .nav-icons {
+    display: none;
+  }
+  .sidebar {
+    gap: 0%;
     font-size: 1em;
-    } 
+  }
 }
-@media screen and (max-width:682px) {
-    .cart-item {
-        display: none;
-    }
-/*zz remove this */
-     .left-sight {
-        margin-left: 25%;
-    }
-
+@media screen and (max-width: 682px) {
+  .cart-item {
+    display: none;
+  }
+  /*zz remove this */
+  .left-sight {
+    margin-left: 25%;
+  }
 }
 
-@media screen and (min-width:682px) {
-    .sidebar {
-        display: none;
-    }
-
+@media screen and (min-width: 682px) {
+  .sidebar {
+    display: none;
+  }
 }
-@media screen and (max-width:760px) {
-    .desktopImg{
-        display: none;
-
-    }
+@media screen and (max-width: 760px) {
+  .desktopImg {
+    display: none;
+  }
 }
 
diff --git a/src/Redux/Slice/ThemeSlice.jsx b/src/Redux/Slice/ThemeSlice.jsx
new file mode 100644
index 00000000..99fe1d59
--- /dev/null
+++ b/src/Redux/Slice/ThemeSlice.jsx
@@ -0,0 +1,17 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+
+const ThemeSlice = createSlice({
+    name: "theme",
+    initialState: {
+        theme: "dark",
+    },
+    reducers: {
+        setTheme: (state) => {
+            state.theme = state.theme === "light" ? "dark" : "light";
+        },
+    },
+});
+
+export const { setTheme } = ThemeSlice.actions;
+export default ThemeSlice.reducer;
\ No newline at end of file
diff --git a/src/Redux/Store/Store.jsx b/src/Redux/Store/Store.jsx
index e69de29b..1d685557 100644
--- a/src/Redux/Store/Store.jsx
+++ b/src/Redux/Store/Store.jsx
@@ -0,0 +1,13 @@
+import { configureStore } from "@reduxjs/toolkit";
+
+import ThemeSlice from "../Slice/ThemeSlice";
+
+export const store = configureStore({
+  reducer: {
+    theme: ThemeSlice,
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: false,
+    }),
+});
diff --git a/src/Style/Home.css b/src/Style/Home.css
index c4da3c21..bf1cd5fc 100644
--- a/src/Style/Home.css
+++ b/src/Style/Home.css
@@ -8,11 +8,11 @@
   width: 100%;
   height: 100vh !important;
   padding-top: 40px;
-  background-color: rgb(0, 3, 14);
+  /* background-color: rgb(0, 3, 14); */
   display: flex;
   flex-direction: column;
   gap: 10px;
-  color: white;
+  /* color: white; */
   margin-top: -120px;
 }
 .page_0 .bx-2,
diff --git a/src/Style/util.css b/src/Style/util.css
index 9811cb5f..465e87ef 100644
--- a/src/Style/util.css
+++ b/src/Style/util.css
@@ -136,7 +136,7 @@
         }
         .page_0{
             /* background-image: url(../image/background/Picsart_24-01-02_17-26-03-618.jpg); */
-            background-color: black;
+            /* background-color: black; */
             /* background-size: 100%;
             background-repeat: no-repeat;
             background-position: 100%;
@@ -148,7 +148,7 @@
     
     @media screen and (min-width:951px) {
         .page_0{
-            background-color: black;
+            /* background-color: black; */
             /* background-image: url(../image/background/WhatsApp\ Image\ 2023-12-24\ at\ 22.54.50.jpeg);
             background-size: 1024px;
             background-repeat: no-repeat; */