diff --git a/widget/ui/widget-popup.slint b/widget/ui/widget-popup.slint
index 6da190f..8e2851b 100644
--- a/widget/ui/widget-popup.slint
+++ b/widget/ui/widget-popup.slint
@@ -1,41 +1,118 @@
 export component MainWindow inherits Window {
     always-on-top: true;
-    height: 100px;
-    width: 300px;
     no-frame: true;
+    width: 320px;
+    height: 110px;
+    background: transparent;
 
     weather_popup := Rectangle {
-        height: 100%;
         width: 100%;
-        border-radius: 10px;
-        border-color: #ffffff00;
-        background: #7e7e7e36;
+        height: 100%;
+        padding: 10px;                  // keep content inset from edges
+        border-radius: 14px;
+        border-color: #ffffff22;
+        border-width: 1px;
+        background: @linear-gradient(135deg, #ffffff18, #7e7e7e24);
+        drop-shadow-blur: 10px;
+        drop-shadow-color: #00000066;
 
-        main_temp := Text {text: "24.4" + "°C";
-            vertical-alignment: TextVerticalAlignment.center;
-            x: 10px;
-            y: 10px;
-            color: #ffffff;
-            font-family: "IosevkaTermSlab Nerd Font Mono";
-            font-size: 40px;
-        }
-        
-        weather_summary := Text {
-            text: "Clear";
-            x: 10px;
-            y: 55px;
-            font-size: 30px;
-            font-family: "IosevkaTermSlab Nerd Font Mono";
-            color: #fff;
-        }
-        
-        city_name := Text {
-            text: "England";
-            x: 150px;
-            y: 55px;
-            font-size: 25px;
-            font-family: "IosevkaTermSlab Nerd Font Mono";
-            color: #fff;
+        VerticalLayout {
+            spacing: 6px;
+            horizontal-stretch: 1.0;
+            padding: 10px;
+
+            /* Top: City */
+            Text {
+                text: "Los Angeles";
+                font-size: 14px;
+                color: #fff;
+                font-family: "IosevkaTermSlab Nerd Font Mono";
+                horizontal-alignment: TextHorizontalAlignment.left;
+            }
+
+            /* Middle: icon on left, temp on right */
+            HorizontalLayout {
+                spacing: 8px;
+                horizontal-stretch: 1.0;
+
+                /* Icon (fixed size) */
+                Text {
+                    text: "";
+                    font-family: "IosevkaTermSlab Nerd Font Mono";
+                    font-size: 40px;
+                    color: #fff;
+                    vertical-alignment: TextVerticalAlignment.center;
+                }
+
+                /* flexible spacer pushes the temperature group to the right */
+                Rectangle {
+                    horizontal-stretch: 1.0;
+                    background: transparent;
+                }
+
+                /* Temperature group (numeric + degree/unit) */
+                HorizontalLayout {
+                    spacing: 6px;
+                    //vertical-alignment: TextVerticalAlignment.center;
+
+                    Text {
+                        text: "124.4";
+                        font-family: "IosevkaTermSlab Nerd Font Mono";
+                        font-size: 40px;
+                        color: #fff;
+                        vertical-alignment: TextVerticalAlignment.center;
+                    }
+
+                    VerticalLayout {
+                        spacing: -6px; // bring degree and unit closer to the number
+                        // keep the combined height near the numeric height
+                        Text {
+                            text: "°";
+                            font-size: 20px;
+                            color: #fff;
+                            horizontal-alignment: TextHorizontalAlignment.center;
+                            vertical-alignment: TextVerticalAlignment.bottom;
+                        }
+                        Text {
+                            text: "F";
+                            font-size: 18px;
+                            color: #fff;
+                            horizontal-alignment: TextHorizontalAlignment.center;
+                            vertical-alignment: TextVerticalAlignment.top;
+                        }
+                    }
+                }
+            }
+
+            // Bottom: summary (left) + description (right).
+            HorizontalLayout {
+                spacing: 10px;
+                horizontal-stretch: 1.0;
+                height: 28px;                 
+
+                // Summary (left) — single prominent line, vertically centered
+                Text {
+                    text: "Thunderstorm";
+                    font-size: 22px;
+                    color: #fff;
+                    font-family: "IosevkaTermSlab Nerd Font Mono";
+                    vertical-alignment: TextVerticalAlignment.center;
+                    horizontal-alignment: TextHorizontalAlignment.left;
+                    // width can be fixed or let text size itself
+                }
+
+                // Description (right) — can take remaining width and occupy same height
+                Text {
+                    text: "Thunderstorm with heavy drizzle";
+                    font-size: 13px;
+                    color: #ffffffcc;
+                    font-family: "IosevkaTermSlab Nerd Font Mono";
+                    horizontal-alignment: TextHorizontalAlignment.left;
+                    vertical-alignment: TextVerticalAlignment.center;
+                    horizontal-stretch: 1.0;
+                    wrap: word-wrap;               
+                }
+            }
         }
     }
-}
\ No newline at end of file
+}