diff --git a/src/constants.py b/src/constants.py
index 20d67e8..88a8d9c 100644
--- a/src/constants.py
+++ b/src/constants.py
@@ -1,4 +1,3 @@
-
 icon_loc = "@icon_location@/share/icons/hicolor/scalable/mousam_icons/"
 
 icons = {
@@ -59,7 +58,6 @@
     "95n": icon_loc + "thunderstorms-rain.svg",
     "96n": icon_loc + "thunderstorms-night-overcast-snow.svg",
     "99n": icon_loc + "snowflake.svg",
-
     "arrow": icon_loc + "arrow.svg",
     "raindrop": icon_loc + "raindrop.svg",
     "raindrops": icon_loc + "raindrops.svg",
@@ -67,24 +65,63 @@
 }
 
 bg_css = {
-    "01d": "clear_sky",
-    "02d": "few_clouds",
-    "03d": "overcast",
-    "04d": "overcast",
-    "09d": "showers_scattered",
-    "10d": "showers_large",
-    "11d": "storm",
-    "13d": "snow",
-    "50d": "fog",
-    "01n": "clear_sky_night",
-    "02n": "few_clouds_night",
-    "03n": "overcast_night",
-    "04n": "showers_scattered_night",
-    "09n": "showers_large_night",
-    "10n": "showers_large_night",
-    "11n": "storm_night",
-    "13n": "snow_night",
-    "50n": "fog_night",
+    "0": "clear_sky",
+    "1": "clear_sky",
+    "2": "overcast",
+    "3": "few_clouds",
+    "51": "few_clouds",
+    "53": "showers_scattered",
+    "55": "showers_scattered",
+    "56": "snow",
+    "57": "snow",
+    "61": "showers_scattered",
+    "63": "showers_large",
+    "65": "showers_large",
+    "66": "snow",
+    "67": "showers_large",
+    "45": "fog",
+    "48": "fog",
+    "71": "snow",
+    "73": "snow",
+    "75": "snow",
+    "77": "snow",
+    "80": "showers_large",
+    "81": "rain.svg",
+    "82": "showers_large",
+    "85": "snow",
+    "86": "snow",
+    "95": "storm",
+    "96": "storm",
+    "99": "snow",
+    
+    "0n": "clear_sky_night",
+    "1n": "clear_sky_night",
+    "2n": "overcast_night",
+    "3n": "few_clouds_night",
+    "51n": "few_clouds_night",
+    "53n": "showers_scattered_night",
+    "55n": "showers_scattered",
+    "56n": "snow_night",
+    "57n": "snow_night",
+    "61n": "showers_scattered_night",
+    "63n": "showers_large_night",
+    "65n": "showers_large",
+    "66n": "snow_night",
+    "67n": "showers_large",
+    "45n": "fog_night",
+    "48n": "fog_night",
+    "71n": "snow_night",
+    "73n": "snow_night",
+    "75n": "snow_night",
+    "77n": "snow_night",
+    "80n": "showers_large_night",
+    "81n": "rain.svg_night",
+    "82n": "showers_large",
+    "85n": "snow_night",
+    "86n": "snow_night",
+    "95n": "storm_night",
+    "96n": "storm_night",
+    "99n": "snow_night",
 }
 # 1 ->   indicates day
 # 1n ->  indicates night
@@ -98,7 +135,7 @@
     "48": "Mist",
     "51": "Light Drizzle",
     "53": "Moderate Drizzle",
-    "55": "Heavy Intensity Drizzle ",
+    "55": "Heavy Intensity Drizzle",
     "56": "Light Freezing Drizzle",
     "57": "Heavy Freezing Drizzle",
     "61": "Light Rain",
diff --git a/src/css/style.css b/src/css/style.css
index dbc1d22..810a0b9 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -131,6 +131,28 @@
     background:linear-gradient(0deg, rgba(237,237,237,1) 0%, rgb(203, 221, 225) 100%);
 }
 
+.hide{
+    opacity: .2;
+}
+
+.transparent_0{
+    background:rgba(0, 0, 0, 0);
+    color:white;
+}
+
+.transparent_glass{
+    background:rgba(150, 150, 150, .2);
+}
+
+.border_col{
+    border: 1px solid rgba(200, 200, 200, .1);
+}
+
+.transparent_5{
+    background:rgba(0, 0, 0, .35);
+    color:white;
+}
+
 .bg-white{
     background-color: rgb(240, 240, 240);
 }
@@ -154,17 +176,16 @@
     border-radius: .5rem;
     padding: .7rem .7rem;
     margin-top: .3rem;
-    background-color: rgba(100, 100, 100, .06);
 }
 
 .custom_card_hourly_now{
     padding: .7rem 1.2rem;
     margin-top: 0rem;
-    background-color: rgba(100, 100, 100, .15);
+    background-color: rgba(196, 196, 196, 0.15);
 
 }
 .bg_light_grey{
-    background-color: #9a9a9a13;
+    background-color: rgba(224, 224, 224, 0.06);
 }
 
 
diff --git a/src/frontendCardAirPollution.py b/src/frontendCardAirPollution.py
index f67ac39..8ae9bc4 100644
--- a/src/frontendCardAirPollution.py
+++ b/src/frontendCardAirPollution.py
@@ -6,7 +6,7 @@
 from gi.repository import Gtk
 
 from .frontendUiDrawPollutionBar import PollutionBar
-
+from .utils import is_dynamic_bg_enabled
 
 class CardAirPollution:
     def __init__(self):
@@ -36,6 +36,8 @@ def create_card(self):
         card.halign = Gtk.Align.FILL
         card.set_row_spacing(5)
         card.set_css_classes(["view", "card", "custom_card"])
+        if is_dynamic_bg_enabled():
+            card.add_css_class("transparent_5")
 
         # Main title of the card
         title = Gtk.Label(label="Air Pollution")
diff --git a/src/frontendCardDayNight.py b/src/frontendCardDayNight.py
index de61051..0cc1b95 100644
--- a/src/frontendCardDayNight.py
+++ b/src/frontendCardDayNight.py
@@ -3,7 +3,7 @@
 import gi
 from gi.repository import Gtk
 from .frontendUiDrawDayNight import *
-from .utils import get_tz_offset_by_cord, get_cords, get_my_tz_offset_from_utc
+from .utils import get_tz_offset_by_cord, get_cords, get_my_tz_offset_from_utc, is_dynamic_bg_enabled
 
 gi.require_version("Gtk", "4.0")
 gi.require_version("Adw", "1")
@@ -65,6 +65,9 @@ def create_card(self):
         card.halign = Gtk.Align.FILL
         card.set_row_spacing(5)
         card.set_css_classes(["view", "card", "custom_card"])
+        
+        if is_dynamic_bg_enabled():
+            card.add_css_class("transparent_5")
 
         # Main title of the card
         title = Gtk.Label(label="Sunrise & Sunset")
@@ -104,6 +107,7 @@ def create_card(self):
 
         card_icon = Gtk.Grid()
         card_icon.set_css_classes(["view", "card_infao"])
+        card_icon.add_css_class("transparent_0")
         card.attach(card_icon, 1, 2, 2, 1)
 
         obj = DrawDayNight(self.degree, 200, 100)
diff --git a/src/frontendCardSquare.py b/src/frontendCardSquare.py
index b501d17..89dc672 100644
--- a/src/frontendCardSquare.py
+++ b/src/frontendCardSquare.py
@@ -1,6 +1,7 @@
 from gi.repository import Gtk
 import gi
 from .constants import icons
+from .utils import is_dynamic_bg_enabled
 from .frontendUiDrawBar import *
 from .frontendUiDrawImageIcon import *
 
@@ -51,6 +52,9 @@ def create_card(self):
         card.halign = Gtk.Align.FILL
         card.set_size_request(200, 150)
         card.set_css_classes(["view", "card", "custom_card"])
+        
+        if is_dynamic_bg_enabled():
+            card.add_css_class("transparent_5")
         self.card = card
 
         # Main title of the card
@@ -62,8 +66,6 @@ def create_card(self):
 
         # Info Grid: It contains - Main value,units, short description, sub description
         card_info = Gtk.Grid(margin_top=5, row_spacing=0, column_spacing=0)
-
-        card_info.set_css_classes(["view"])
         card.attach(card_info, 0, 2, 1, 2)
 
         # Main value (like windspeed = 32km/h)
@@ -105,7 +107,6 @@ def create_card(self):
 
         card_icon = Gtk.Grid(halign=Gtk.Align.END)
         card_icon.set_margin_top(5)
-        card_icon.set_css_classes(["view", "card_infao"])
         card.attach(card_icon, 1, 2, 2, 1)
 
         icon_upper_text = Gtk.Label(label=self.text_up)
diff --git a/src/frontendForecast.py b/src/frontendForecast.py
index f83bf98..e4e004d 100644
--- a/src/frontendForecast.py
+++ b/src/frontendForecast.py
@@ -3,6 +3,7 @@
 from gi.repository import Gtk
 from gettext import gettext as _
 from .constants import icons
+from .utils import is_dynamic_bg_enabled
 
 gi.require_version('Gtk', '4.0')
 gi.require_version('Adw', '1')
@@ -16,6 +17,8 @@ def __init__(self, *args, **kwargs):
         self.set_margin_start(10)
         self.set_margin_end(5)
         self.set_css_classes(['view', 'card', 'custom_card'])
+        if is_dynamic_bg_enabled():
+            self.add_css_class("transparent_5")
         self.paint_ui()
 
     def paint_ui(self):
diff --git a/src/frontendHourlyDetails.py b/src/frontendHourlyDetails.py
index 1540a0b..01615a6 100644
--- a/src/frontendHourlyDetails.py
+++ b/src/frontendHourlyDetails.py
@@ -11,6 +11,7 @@
 from .constants import icons, icon_loc
 from .frontendUiDrawImageIcon import DrawImage
 from .frontendUiDrawbarLine import DrawBar
+from .utils import is_dynamic_bg_enabled
 
 icon_loc += "arrow.svg"
 
@@ -20,6 +21,8 @@ def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
         self.set_hexpand(True)
         self.set_css_classes(["view", "card", "custom_card"])
+        if is_dynamic_bg_enabled():
+            self.add_css_class("transparent_5")
         self.set_margin_top(20)
         self.set_margin_start(5)
         self.paint_ui()
@@ -181,7 +184,7 @@ def create_stack_page(self, page_name):
             graphic_box = Gtk.Box(
                 orientation=Gtk.Orientation.VERTICAL, margin_start=4, margin_end=4
             )
-            graphic_box.set_css_classes(["custom_card_hourly"])
+            graphic_box.set_css_classes(["custom_card_hourly", "bg_light_grey"])
 
             graphic_container.append(graphic_box)
 
diff --git a/src/mousam.py b/src/mousam.py
index 21d05b3..63b54c6 100644
--- a/src/mousam.py
+++ b/src/mousam.py
@@ -8,6 +8,7 @@
 
 # module import
 from .utils import create_toast,check_internet_connection
+from .constants import bg_css
 from .windowAbout import AboutWindow
 from .windowPreferences import WeatherPreferences
 from .windowLocations import WeatherLocations
@@ -38,6 +39,7 @@ def __init__(self, *args, **kwargs):
         #  Adding a button into header
         self.header = Adw.HeaderBar()
         self.header.add_css_class(css_class="flat")
+
         self.set_titlebar(self.header)
 
         # Add refresh button to header
@@ -199,6 +201,16 @@ def _load_weather_data(self):
     # ===========  Load weather data and create UI ============
     def get_weather(self,reload_type=None,title = ""):
         from .weatherData import current_weather_data as cw_data
+        
+        if self.settings.get_boolean('use-gradient-bg'):
+            dont_delete_classes = ['backgrounds','csd']
+            for cl in self.get_css_classes():
+                if cl not in dont_delete_classes:
+                    self.remove_css_class(cl)
+            weather_code = str(cw_data.weathercode.get("data"))
+            if cw_data.is_day.get("data") == 0:
+                weather_code += 'n'                
+            self.add_css_class(css_class = bg_css[weather_code])
         # Check if no city is added
         added_cities = self.settings.get_strv('added-cities')
 
@@ -211,6 +223,7 @@ def get_weather(self,reload_type=None,title = ""):
             self.main_stack.remove(child)
 
         # ------- Main grid ---------
+        
         self.main_grid = Gtk.Grid()
         self.main_grid.set_hexpand(True)
         self.main_grid.set_vexpand(True)
diff --git a/src/utils.py b/src/utils.py
index b0ec0a6..cbd38ca 100644
--- a/src/utils.py
+++ b/src/utils.py
@@ -9,7 +9,7 @@
 air_pollution_data = None
 forecast_weather_data = None
 epoch_offset = None
-
+global_settings = Gio.Settings.new("io.github.amit9838.mousam")
 
 TIMEOUT = 5
 domains = {
@@ -58,6 +58,10 @@ def get_selected_city_coords():
     city_loc = added_cities[selected_city].split(",")
     return city_loc[-2], city_loc[-1]  # latitude,longitude
 
+def is_dynamic_bg_enabled():
+    global global_settings
+    return global_settings.get_boolean('use-gradient-bg')
+
 
 def create_toast(text, priority=0):
     toast = Adw.Toast.new(text)
diff --git a/src/windowPreferences.py b/src/windowPreferences.py
index 2b58060..511b255 100644
--- a/src/windowPreferences.py
+++ b/src/windowPreferences.py
@@ -40,18 +40,18 @@ def __init__(self, application,  **kwargs):
         appearance_page.add(self.appearance_grp)
 
         # Dynamic Background 
-        # gradient_row =  Adw.ActionRow.new()
-        # gradient_row.set_activatable(True)
-        # gradient_row.set_title(_("Dynamic Background"))
-        # gradient_row.set_subtitle(_("Background changes based on current weather condition (Restart required)"))
-
-        # self.g_switch_box = Gtk.Box(orientation=Gtk.Orientation.HORIZONTAL,valign=Gtk.Align.CENTER)
-        # self.gradient_switch = Gtk.Switch()
-        # self.gradient_switch.set_active(True)
-        # self.gradient_switch.connect("state-set",self._use_gradient_bg)
-        # self.g_switch_box.append(self.gradient_switch)
-        # gradient_row.add_suffix(self.g_switch_box)
-        # self.appearance_grp.add(gradient_row)
+        gradient_row =  Adw.ActionRow.new()
+        gradient_row.set_activatable(True)
+        gradient_row.set_title(_("Dynamic Background"))
+        gradient_row.set_subtitle(_("Background changes based on current weather condition (Restart required)"))
+
+        self.g_switch_box = Gtk.Box(orientation=Gtk.Orientation.HORIZONTAL,valign=Gtk.Align.CENTER)
+        self.gradient_switch = Gtk.Switch()
+        self.gradient_switch.set_active(self.settings.get_boolean('use-gradient-bg'))
+        self.gradient_switch.connect("state-set",self._use_gradient_bg)
+        self.g_switch_box.append(self.gradient_switch)
+        gradient_row.add_suffix(self.g_switch_box)
+        self.appearance_grp.add(gradient_row)
 
         #  Launch the app in maximize mode
         launch_maximized =  Adw.ActionRow.new()