diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx
index 678ed54..ad2eec6 100644
--- a/src/components/Footer/index.jsx
+++ b/src/components/Footer/index.jsx
@@ -22,15 +22,9 @@ const Footer = () => {
   let centerColor = "#B9D9EB";
   return (
     <footer
-      className={classNames({
-        "bg-[#E2E8F0] dark:bg-[#E7E5E4]": true,
-        "w-screen min-h-[50vh] py-14": true,
-        "flex flex-col items-center justify-center gap-6": true,
-      })}
-      style={{
-        background: `linear-gradient(90deg, ${borderColor} 0%, ${centerColor} 20%, ${centerColor} 80%, ${borderColor} 100%)`
-      }}
-    >
+
+        className={`w-screen min-h-[50vh] py-14 flex flex-col items-center justify-center gap-6 dark:bg-[#44403C] dark:text-white bg-[#B9D9EB]`}
+      >
 
       <div className="relative h-fit w-screen flex flex-col items-center justify-center">
 
@@ -44,9 +38,12 @@ const Footer = () => {
           <Link to='/'>UniShare</Link>
         </div>
 
-        <div className="w-[95vw] sm:w-[35rem] mt-4">
 
-          <p className="comfort text-center text-gray-800 font-bold mobile:text-sm">
+        <div className="w-[95vw] sm:w-[35rem] mt-4 dark:bg-[#44403C] dark:text-white">
+
+          <p className="comfort text-center text-gray-800 font-bold mobile:text-sm dark:bg-[#44403C] dark:text-white">
+
+        
             Unishare is a college resource sharing website designed to serve as a dynamic platform for students to collaborate and share resources. Unishare aims to foster an environment where students can easily access and exchange a wide range of educational materials, such as lecture notes, study guides, past exam papers, and more.
           </p>
 
diff --git a/src/components/HeroSection/index.jsx b/src/components/HeroSection/index.jsx
index 4fecaaf..f818b78 100644
--- a/src/components/HeroSection/index.jsx
+++ b/src/components/HeroSection/index.jsx
@@ -12,7 +12,7 @@ const HeroSection = () => {
       })}>
 
         <img src={"https://images.pexels.com/photos/6077089/pexels-photo-6077089.jpeg"} alt={"Book Heaven"} className="mobile-sm:!scale-[1.5] hero-section-sm:block hidden absolute mobile:scale-[1.25] w-full rotate-[0deg] left-[0rem] z-0" />
-        <img src={"/blueBlob-cropped.webp"} alt={"blueBlob"} className="mobile-sm:!scale-[1.5] hero-section-sm:block hidden absolute mobile:scale-[1.25] w-full rotate-[90deg] left-[1.25rem] z-0" />
+        {/* <img src={"/blueBlob-cropped.webp"} alt={"blueBlob"} className="mobile-sm:!scale-[1.5] hero-section-sm:block hidden absolute mobile:scale-[1.25] w-full rotate-[90deg] left-[1.25rem] z-0" /> */}
         {/* Text ... */}
         <section className={classNames({
           'w-1/2 h-full': true,
diff --git a/src/pages/login/content.jsx b/src/pages/login/content.jsx
index 7693fe2..e6824bb 100644
--- a/src/pages/login/content.jsx
+++ b/src/pages/login/content.jsx
@@ -4,54 +4,42 @@ import { useAuthState, useSignInWithEmailAndPassword } from 'react-firebase-hook
 import { auth } from '../../../Firebase/ClientApp.mjs';
 import { browserLocalPersistence, browserSessionPersistence, setPersistence } from 'firebase/auth';
 
-
 function LoginForm() {
   const [signInWithEmailAndPassword, user, loading, error] = useSignInWithEmailAndPassword(auth);
   const [emailid, setEmailid] = useState('');
   const [password, setPassword] = useState('');
-  const [rememberme, setRememberMe]=useState(false);
+  const [rememberme, setRememberMe] = useState(false);
   const [userr, loadingg, erorr] = useAuthState(auth);
   const [errorcause, setErrorcause] = useState('');
+
   useEffect(() => {
-    if (rememberme)
-    {
+    if (rememberme) {
       setPersistence(auth, browserLocalPersistence);
     }
-    else
-    {
+    else {
       setPersistence(auth, browserSessionPersistence);
     }
   }, [rememberme]);
-  useEffect(()=>{
-    if (error)
-    {
-      if (error.message.toLowerCase().includes('password'))
-      {
+  useEffect(() => {
+    if (error) {
+      if (error.message.toLowerCase().includes('password')) {
         setErrorcause('password');
       }
-      else if (error.message.toLowerCase().includes('email'))
-      {
+      else if (error.message.toLowerCase().includes('email')) {
         setErrorcause('email');
       }
     }
   }, [error])
-  if (user || userr)
-  {
+  if (user || userr) {
     return <Navigate replace to="/" />;
   }
   return (
-    <div className=" h-screen flex items-center justify-center border-black pt-[10vh]" style={{
-      backgroundImage: 'url("/loginpage-background-image.webp")',
-      backgroundSize: 'cover',
-      backgroundRepeat: 'no-repeat',
-      backgroundPosition: 'center',
-      filter: 'blur(0px)'
-    }}>
-      <div className="bg-white rounded-lg shadow-lg w-96 border-double border-4 border-sky-500" >
+    <div className=" h-screen flex items-center justify-center border-black pt-[10vh] bg-[url('/loginpage-background-image.webp')] dark:bg-[url('https://www.vectornator.io/blog/content/images/2022/03/610963083219da6a0a00ccb6_Cover-Dark-2.png')] bg-no-repeat bg-cover" >
+      <div className="bg-white rounded-lg shadow-lg w-96 border-double border-4 border-sky-500 dark:bg-[#44403C] dark:text-white" >
         <div className="flex justify-between items-center text-center w-full pl-10 pr-10 pt-5 pb-1">
-          <h1 className="text-2xl font-bold dark:text-[#1A1A1C]" style={{ fontFamily: 'monospace' }}>Login</h1>
+          <h1 className="text-2xl font-bold" style={{ fontFamily: 'monospace' }}>Login</h1>
 
-          <h2 className="flex items-center justify-end dark:text-[#1A1A1C]">
+          <h2 className="flex items-center justify-end dark:bg-[#44403C] dark:text-white">
             <img src="/iiitdmj-logo.webp" alt="pr-0 w-6 h-6" className="pr-0 w-8 h-8 iiitdmj-logo mx-1" />
             IIITDMJ
           </h2>
@@ -59,34 +47,34 @@ function LoginForm() {
         </div>
         <hr className=' ' />
         <form className="px-6 py-4">
-        <div className={`my-3 text-center text-base bg-red-500 text-white rounded-lg p-1 capitalize ${(error)? 'visible' : 'hidden'}`}>
-              {(error) ? error.message.replaceAll('Firebase: Error (auth/', '').replaceAll(').', '').replaceAll('-', ' ') : null}
-            </div>
+          <div className={`my-3 text-center text-base bg-red-500 text-white rounded-lg p-1 capitalize ${(error) ? 'visible' : 'hidden'}`}>
+            {(error) ? error.message.replaceAll('Firebase: Error (auth/', '').replaceAll(').', '').replaceAll('-', ' ') : null}
+          </div>
           <div className="mb-6">
-            <label className="text-gray-500">Email id</label>
-            <input type="text" className={`w-full border-b-2 border-gray-300 focus:border-blue-500 outline-none dark:text-[#1A1A1C] ${(errorcause=='email') ? 'border-red-500' : null}`} required onChange={(e) => setEmailid(e.target.value)}/>
+            <label className="text-gray-500 dark:bg-[#44403C] dark:text-white">Email id</label>
+            <input type="text" className={`w-full border-b-2 border-gray-300 focus:border-blue-500 outline-none dark:bg-[#44403C] dark:text-white dark:text-[#1A1A1C] ${(errorcause == 'email') ? 'border-red-500' : null}`} required onChange={(e) => setEmailid(e.target.value)} />
           </div>
           <div className="mb-6">
-            <label className="text-gray-500">Password</label>
-            <input type="password" className={`w-full border-b-2 border-gray-300 focus:border-blue-500 outline-none dark:text-[#1A1A1C] ${(errorcause=='password') ? 'border-red-500' : null}`} required onChange={(e) => setPassword(e.target.value)}/>
+            <label className="text-gray-500 dark:bg-[#44403C] dark:text-white">Password</label>
+            <input type="password" className={`w-full border-b-2 border-gray-300 focus:border-blue-500 outline-none dark:text-[#1A1A1C] dark:bg-[#44403C] dark:text-white ${(errorcause == 'password') ? 'border-red-500' : null}`} required onChange={(e) => setPassword(e.target.value)} />
           </div>
           <div className="flex items-center mb-6">
             <div className="flex-1 text-sm text-gray-600">
-              <Link to='/resetpassword' className="text-blue-500 hover:underline">Forgot Password?</Link>
+              <Link to='/resetpassword' className="text-blue-500 hover:underline dark:bg-[#44403C] dark:text-white">Forgot Password?</Link>
             </div>
             <div className="checkb1">
-              <input type="checkbox" id="remember" className="form-checkbox" onChange={(e) => {setRememberMe(e.target.checked);}}/>
-              <label htmlhtmlFor="remember" className="ml-2 text-sm text-gray-600">Remember Me</label>
+              <input type="checkbox" id="remember" className="form-checkbox" onChange={(e) => { setRememberMe(e.target.checked); }} />
+              <label htmlhtmlFor="remember" className="ml-2 text-sm text-gray-600 dark:bg-[#44403C] dark:text-white">Remember Me</label>
             </div>
           </div>
-          {loading ? 
+          {loading ?
             <div className={`flex items-center justify-center h-10`}>
               <img src="/loader.gif" alt="" className='bg-white h-full' />
-            </div> : 
-            <input 
-              type="submit" 
-              value="Login" 
-              className="w-full bg-blue-500 text-white font-bold py-2 rounded-lg cursor-pointer hover:bg-blue-600" 
+            </div> :
+            <input
+              type="submit"
+              value="Login"
+              className="w-full bg-blue-500 text-white font-bold py-2 rounded-lg cursor-pointer hover:bg-blue-600"
               onClick={(e) => {
                 e.preventDefault();
                 setErrorcause('');
@@ -94,8 +82,8 @@ function LoginForm() {
               }}
             />
           }
-          <div className="mt-6 text-center text-base text-gray-600">
-            Not a member? <a href="#" className="text-blue-500 hover:underline"><Link to="/signup">Signup</Link></a>
+          <div className="mt-6 text-center text-base text-gray-600 dark:bg-[#44403C] dark:text-white">
+            Not a member? <a href="#" className="text-blue-500 hover:underline dark:bg-[#44403C] dark:text-white"><Link to="/signup">Signup</Link></a>
           </div>
         </form>
       </div>