diff --git a/Frontend/components/Utilities/Background.tsx b/Frontend/components/Utilities/Background.tsx
index e61a11d..6bd8acb 100644
--- a/Frontend/components/Utilities/Background.tsx
+++ b/Frontend/components/Utilities/Background.tsx
@@ -1,5 +1,7 @@
+"use client";
 
-import React, { ReactNode, useEffect, useState } from "react";
+import { useTheme } from "next-themes";
+import React, { ReactNode } from "react";
 import Image from "next/image";
 
 const Background = ({
@@ -9,14 +11,14 @@ const Background = ({
   children: ReactNode;
   className?: string;
 }) => {
-  // const { theme } = useTheme();
+  const { theme } = useTheme();
 
   return (
     <div
       className={"h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed  flex flex-col " + className}
     >
       <Image
-        src={"/images/gradient.webp"}
+        src={theme == "dark" ? "/images/gradient.webp": "/images/gradient.webp"}
         alt="background"
         layout="fill"
         objectFit="cover"