diff --git a/build.rs b/build.rs
new file mode 100644
index 0000000..ddf114d
--- /dev/null
+++ b/build.rs
@@ -0,0 +1,3 @@
+fn main() {
+    slint_build::compile("ui/osd-popup.slint").unwrap();
+}
\ No newline at end of file
diff --git a/ui/osd-popup.slint b/ui/osd-popup.slint
new file mode 100644
index 0000000..b4e527d
--- /dev/null
+++ b/ui/osd-popup.slint
@@ -0,0 +1,87 @@
+export component OSDpopup inherits Window {
+    in property <int> popup_width: 200;
+    in property <int> popup_height: 50;
+    in property <int> popup_border_radius: 5;
+    in property <int> popup_padding: 7;
+
+    in property <color> osd_bg_color: #5f5f5f67;
+    in property <color> fill_color: #127a9bff;
+
+    in property <int> value_font_size: 35;
+    in property <color> value_font_color: #ffffffff;
+    in property <string> value_font: "Iosevka Extrabold";
+    in property <int> percent_value: 0;
+
+    in property <int> icon_size: self.value_font_size;
+    in property <color> icon_font_color: self.value_font_color;
+    in property <string> icon_font: "IosevkaTermSlab Nerd Font Mono";
+    in property <string> icon_glyph: "";
+
+    no-frame: true;
+    always-on-top: true;
+    background: transparent;
+    width: popup_width *1px;
+    height: popup_height *1px;
+
+    // Background
+    osd_bg:= Rectangle {
+        height: 100%;
+        width: 100%;
+        y: 0;
+        border-width: 0px;
+        border-radius: popup_border_radius *1px;
+        background: osd_bg_color;
+    }
+    
+    // 
+    osd_fill:= Rectangle {
+        height: 100%;
+        width: (popup_width/100) * percent_value *1px;
+        y: 0;
+        x: 0;
+        border-width: 0px;
+        border-top-left-radius: popup_border_radius *1px;
+        border-bottom-left-radius: self.border-top-left-radius;
+        border-top-right-radius:
+            self.width > osd_bg.width - popup_border_radius * 1px
+                ? popup_border_radius *1px
+                : 0px;
+        border-bottom-right-radius: self.border-top-right-radius;
+        background: fill_color;
+    }
+    
+    HorizontalLayout {
+        padding-left: popup_padding *1px;
+        padding-right: popup_padding *1px;
+        
+        // Icon: Volume, Brightness, Battery, etc.
+        icon_symbol:= Rectangle {
+            //background: #a0c932;  // For testing
+            Text {
+                width: 100%;
+                height: 100%;
+                text: icon_glyph;
+                vertical-alignment: center;
+                horizontal-alignment: left;
+                font-family: icon_font;
+                color: icon_font_color;
+                font-size: icon_size *1px;
+            }
+        }
+
+        // Percentage value
+        value_text:= Rectangle {
+            //background: #309968;  // For testing
+            Text {
+                width: 100%;
+                height: 100%;
+                text: percent_value + "%";
+                vertical-alignment: center;
+                horizontal-alignment: right;
+                font-family: value_font;
+                color: value_font_color;
+                font-size: value_font_size *1px;
+            }
+        }
+    }
+}
\ No newline at end of file