diff --git a/frontend/src/assets/styles/index.css b/frontend/src/assets/styles/index.css
index d276cc6..202e6f3 100644
--- a/frontend/src/assets/styles/index.css
+++ b/frontend/src/assets/styles/index.css
@@ -71,6 +71,12 @@ body[data-theme="light"] {
   --screenshot-bg-hover: rgb(65, 34, 93);
   --screenshot-text: rgb(255, 255, 255);
   --screenshot-text-hover: rgb(255, 255, 255);
+
+  /* Brightness */
+  --slider-header: rgb(183, 149, 214);
+  --slider-text: rgb(183, 149, 214);
+  --slider-bg: #ffffff;
+
 }
 
 body[data-theme="dark"] {
@@ -119,6 +125,11 @@ body[data-theme="dark"] {
   --screenshot-bg-hover: rgb(231, 231, 231);
   --screenshot-text: rgb(255, 255, 255);
   --screenshot-text-hover: rgb(78, 78, 78);
+
+  /* Brightness */
+  --slider-header: rgb(255, 255, 255);
+  --slider-text: rgb(255, 255, 255);
+  --slider-bg: #000000;
 }
 
 body[data-theme="blue"] {
@@ -166,6 +177,11 @@ body[data-theme="blue"] {
   --screenshot-bg-hover: rgb(18, 137, 255);
   --screenshot-text: rgb(255, 255, 255);
   --screenshot-text-hover: rgb(255, 255, 255);
+
+  /* Brightness */
+  --slider-header: rgb(15, 103, 192);
+  --slider-text: rgb(15, 103, 192);
+  --slider-bg: #eefaff98;
 }
 
 body[data-theme="green"] {
@@ -213,6 +229,12 @@ body[data-theme="green"] {
   --screenshot-bg-hover: rgb(0, 151, 73);
   --screenshot-text: rgb(1, 61, 30);
   --screenshot-text-hover: rgb(255, 255, 0);
+
+
+  /* Brightness */
+  --slider-header: rgb(15, 192, 44);
+  --slider-text: rgb(15, 192, 15);
+  --slider-bg: #e8f5e9;
 }
 
 body[data-theme="orange"] {
@@ -260,6 +282,11 @@ body[data-theme="orange"] {
   --screenshot-bg-hover: rgb(255, 128, 0);
   --screenshot-text: rgb(255, 255, 255);
   --screenshot-text-hover: rgb(255, 255, 5);
+
+  /* Brightness */
+  --slider-header: rgb(255, 0, 0);
+  --slider-text: rgb(255, 0, 0);
+  --slider-bg: #fff3dc;
 }
 
 body {
@@ -272,8 +299,6 @@ body {
 }
 
 
-
-
 /* 
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
diff --git a/frontend/src/components/Functionality/BrightnessControl.tsx b/frontend/src/components/Functionality/BrightnessControl.tsx
index 52d9db2..e06f07a 100644
--- a/frontend/src/components/Functionality/BrightnessControl.tsx
+++ b/frontend/src/components/Functionality/BrightnessControl.tsx
@@ -14,8 +14,9 @@ const BrightnessControl: React.FC = () => {
   };
 
   return (
-    <div className="flex flex-col items-center p-4">
-      <h2 className="text-lg font-semibold mb-2">Brightness Control</h2>
+    
+    <div id="slider" className="flex flex-col items-center p-4 mt-7 bg-[var(--slider-bg)] rounded-xl">
+      <h2 className="text-lg font-semibold mb-2 text-[var(--slider-header)]">Brightness Control</h2>
       {/* Changes based on the range of input */}
       <input
         type="range"
@@ -26,7 +27,7 @@ const BrightnessControl: React.FC = () => {
         className="w-60 cursor-pointer"
       />
 
-      <p className="mt-2 text-sm">Brightness: {brightness}%</p>
+      <p className="mt-2 text-sm text-[var(--slider-text)]">Brightness: {brightness}%</p>
     </div>
   );
 };