diff --git a/ui/battery-widget.slint b/ui/battery-widget.slint
index 6772d4d..8337888 100644
--- a/ui/battery-widget.slint
+++ b/ui/battery-widget.slint
@@ -1,35 +1,10 @@
-export component BatteryWidget {
-    in property <int> bar_height;
-    in property <string> battery_status;         // charging / discharging / notcharging / unknown
-    in property <int> battery_capacity;          // numeric percentage
-    in property <string> battery_capacity_level; // critical / low / normal / high / full
-    in property <string> battery_icon;
+import { SquareIconWidget } from "square-icon-widget.slint";
 
-    callback show_battery();
+export component BatteryWidget inherits SquareIconWidget {
+    in property <string> battery_status;
+    in property <int> battery_capacity;
+    in property <string> battery_capacity_level;
 
-    height: bar_height * 1px;
-    width: bar_height * 1px;
-
-    Rectangle {
-        background: touch_area.pressed ? #4a5f70
-                  : touch_area.has-hover ? #6d8a4d
-                  : #8e9162;
-        border-radius: 3px;
-
-        HorizontalLayout {
-            padding-left: 3px;
-            padding-right: 3px;
-
-            Text {
-                text: battery_icon;
-                color: white;
-                vertical-alignment: center;
-                horizontal-alignment: center;
-            }
-        }
-
-        touch_area := TouchArea {
-            clicked => { show_battery(); }
-        }
-    }
+    // Compose tooltip here
+    tooltip_text: "Battery: " + battery_capacity + "% (" + battery_status + ")";
 }
diff --git a/ui/square-icon-widget.slint b/ui/square-icon-widget.slint
new file mode 100644
index 0000000..1809f43
--- /dev/null
+++ b/ui/square-icon-widget.slint
@@ -0,0 +1,38 @@
+export component SquareIconWidget {
+    // Skeleton of suqre-shaped icon widgets
+    // with similar basic functions and appearance
+    in property <int> bar_height;
+    in property <string> icon_text;
+    in property <string> tooltip_text;
+
+    callback square_btn_callback();
+
+    height: bar_height * 1px;   // Same height as the bar
+    width: bar_height * 1px;    // Square shape
+
+    Rectangle {
+        background: touch_area.pressed ? #4a5f70
+                  : touch_area.has-hover ? #6d8a4d
+                  : #8e9162;
+        border-radius: 3px;
+
+        HorizontalLayout {
+            padding-left: 3px;
+            padding-right: 3px;
+
+            Text {
+                text: icon_text;    // Every `SquareIconWidget` has an icon
+                color: white;
+                vertical-alignment: center;
+                horizontal-alignment: center;
+            }
+        }
+
+        touch_area := TouchArea {
+            // Action when the icon is clicked  
+            clicked => { square_btn_callback(); }
+        }
+    }
+
+    // Tooltip will be added later — Slint’s ToolTip element is window-global
+}
diff --git a/ui/topbar.slint b/ui/topbar.slint
index 8525647..1e302e2 100644
--- a/ui/topbar.slint
+++ b/ui/topbar.slint
@@ -72,11 +72,11 @@ export component TopBar inherits Window {
 
                     BatteryWidget {
                         bar_height: root.bar_height;
+                        icon_text: root.battery_icon;
+                        square_btn_callback => root.show_battery();
                         battery_status: root.battery_status;
                         battery_capacity: root.battery_capacity;
                         battery_capacity_level: root.battery_capacity_level;
-                        battery_icon: root.battery_icon;
-                        show_battery => root.show_battery();     
                     }
 
                     DateWidget {