diff --git a/src/layouts/TheTop.vue b/src/layouts/TheTop.vue
index e64e21e..42ebb3f 100644
--- a/src/layouts/TheTop.vue
+++ b/src/layouts/TheTop.vue
@@ -360,7 +360,7 @@
 
     const customIconClass = computed(() => {
     if (weather.value.icon === "01d" || weather.value.icon === "01n") {
-        return "weather-icon custom-sunny-icon";
+        return "custom-sunny-icon";
     }
         return "weather-icon";
     });
@@ -440,7 +440,17 @@
     overflow: hidden;
 }
 .custom-sunny-icon {
-    width: 5% !important;
-    height: 5% !important;
+    width: 5%;
+    height: auto;
+}
+@media (max-width: 1200px) {
+    .custom-sunny-icon {
+        width: 6%;
+    }
+}
+@media (max-width: 1100px) {
+    .custom-sunny-icon {
+        width: 14%;
+    }
 }
 </style>